Connect With WRD
feed via e-mail
feed via e-mail

Markdown is a widely used HTML markup language which is easier to write for non-HTML users. And, it is mostly preferred in discussions-based UIs (comments, forums..).

Once a Markdown input is stored, it should be formatted to HTML for displaying it and Parsedown PHP does nicely.

Markdown PHP Parser

The parser divides texts into blocks, looks how they start + relate to each other and looks for special characters to identify inline elements.

It is fast, stable and very easy to implement.

We used to see lots of CSS frameworks for website layouts but it is hard to find one for e-mails.

Ink, by Zurb, fills that gap by simplifying the creation of HTML e-mails that look the same on all major e-mail clients.

The framework includes the styles for a table-based grid, buttons, panels, retina images and more.

E-mail CSS Framework

Once the e-mail is ready, you can use the web-based Inliner tool to get all styles inline.

And, to get started quickly, take a look at the ready-to-use e-mail templates of Ink.

Let’s call this again as “Pinterest-like layouts” which probably tells itself better than “dynamic grid layouts“.

Such layouts are really functional to display elements with different dimensions nicely and don’t lose their popularity.

Freewall is an impressive jQuery plugin for creating these layouts with CSS3 animation effects.

jQuery Freewall

The plugin supports responsive layouts and has useful methods like “adding more items to the grid” or “filtering them”.

Various customization options exist like the animation, delay or the gutter sizes.

And, Freewall offers callbacks for events like complete, gap found or resize.

FileAPI is a huge set of JavaScript tools for almost anything related to working with files.

It provides the features for file uploading (single/multiple) with drag ‘n’ drop support, image cropping, resizing , applying filters, getting file info and much more.

FileAPI

The tools are standalone and comes with a PHP class that handles the actions on the server-side.

Also, there are Flash fallbacks for unsupported browsers (uploads and camera). And, it is documented in detail.

There are many jQuery slideshow plugins out there (make sure you check the Gallery section) and it is usually hard to decide which one is better.

Actually, sometimes, it is not about being better but being a good fit for the job as each gallery has various differences from another.

jQuery SlideMe! Plugin

SlideMe! is another solid option which is responsive and supports both limited or full screen views.

It can be used vertically or horizontally, makes use of CSS3 transitions and has support for pagination.

There are methods to control the slider (prev, next..), callbacks for each of them and much more.

Ember Charts is an open source and free charting library that is built with D3.js and Ember.js.

The library has support for time series, bar, pie and scatter charts where all of them can be extended with ease.

Ember Charts

It is possible to customize and add/remove legends, labels, tooltips or mouseover effects.

Also, for Ember.js fans, the same team also develops 2 other handy projects: Ember Widgets and Ember Table.

It is important to have a comfortable development environment to code better and faster.

And, there are numerous IDEs for that purpose, mostly paid and few free ones.

CodeLobster PHP Edition is a free IDE that has all the features we can expect. It is pretty powerful.

When starting, we can choose one of the many code-higlighting themes for the application (there are options which mimic the popular IDEs).

CodeLobster

As the name states, it is suitable for PHP (or client-side) developers. A built-in debugger exists and a source-comment filter simplifies locating the right lines of any file so easily.

The UI has support for multiple tabs, code is highlighted successfully even if multiple languages are used on the same file and there is autocompletion for HTML, PHP, CSS and Javascript, including HTML5 and CSS3.

CodeLobster has FTP integration and uploading files to any remote address is simple.

The application has some handy and hidden features like “pressing F1 on any function or element gets you to a related documentation page about it” or “an index can help you locate them quickly”.

CodeLbster WordPress Plugin

Besides the free edition, there are 2 more versions: Lite and Pro where

  • Lite version:
    • is integrated to all the popular version control systems (Git, SVN, Mercurial, TortoiseSVN)
    • has an SQL manager that can produce all necessary actions on a database
    • supports LESS and SASS
    • has code validator, formatter and snippets
  • Pro version:
    • has all the features of Lite
    • has plugins for WordPress, Joomla, Drupal
    • has plugins for CakePHP, CodeIgniter, Symfony, Yii and Smarty
    • has plugin for jQuery
Coding with these plugins is very fast and easy as they have auto-complete and you don’t need to go back-and-forth to make sure you are using the right syntax.

The giveaway

CodeLobster is giving away 3 Pro licenses to WRD readers. You can join it by simply commenting to this post and winners will be selected randomly with the query below 1 week later (12 Nov 2013):

SELECT * FROM wp_comments WHERE comment_post_id=4771 AND comment_approved=1 AND comment_type='' GROUP BY comment_author_email ORDER BY RAND() LIMIT 3

Good luck to all.

We usually use Google Maps with its default styles which is the most familiar one to all.

However, starting with v3 of the Google Maps API, it can be customized with ease so that the look and feel can match the website’s design.

Snazzy Maps

Snazzy Maps is a website which shares many Google Maps styles freely.

There are already 20+ styles and, once clicked, the JavaScript array for the style is displayed and can be downloaded.

Websites make use of and present lots of 3rd party data like tweets, maps, currency conversion… where all tied to APIs.

And, we usually use the most-popular, known APIs  in our sites. However, there are some hidden treasures as well that can feed any site/app with valuable data.

Check these 15 APIs and I’m pretty sure you’ll find a use for at least few of them:

Random User Generator

Random User Generator

A very useful API that allows us to create realistic-yet-fake users automatically.

This is very handy for filling web app databases for testing purposes or having realistic mockups.

We can mention a specific genre and Random User Generator returns name, address, e-mail, pass, avatar and more.

REST Countries

REST Countries

The API has methods for getting the list of all countries, the country code, capital, calling code, currency and more.
Read the rest of this entry »

There are impressive frontend frameworks around like Bootstrap, Foundation or Maxmertkit.

Pattern Lab, although having similar features, is not one of them.

It is more a framework for front-end frameworks, a PHP-powered static site generator or your project’s pattern library and frontend style guide.

Pattern Lab

The tool comes with all the base styles for common scenarios like forms, lists, tables, responsive grid and more. But it doesn’t interfere the design at all and leaves it all to you.

Mustache is used as the template language for patterns and new patterns can be created with ease.

Uptime Robot
feed-holder
FeedBurner
PSD2HTML.com