Latest Resources For Web Developers And Designers

Posted by : Magnus Friday, 22 June 2012

javascript, jQuery, php and css are very important resources nowadays for designers as clients want everything to be dynamic and modern. They are important also for their versatility and the possibility to create incredible new features with them.

I like to bookmark for myself all the new things that are launched in this particular industry so I can keep up with the advancements and I’m happy to share these bookmarks with you in an attempt to help you with your projects.

Laravel

Laravel is a PHP framework developed by Taylor Otwell, it’s designed to make PHP programming something that doesn’t need to be a painful experience. With that in mind all programmers from beginners to experienced ones can have in Laravel a fantastic tool to improve their PHP programming and without paying a fee, because it’s an open source software licensed under MIT License. But at this time you should be asking yourself why I should choose Laravel? what makes it really different? Laravel works with a modular packaging system, these packages add new features to the application improving programming experience. Laravel also has other interesting options like reverse routing, class auto loading. Reverse routing allows you to create links to named routes. When creating links you just use the route’s name and the application will automatically insert the correct URI, allowing you to change your routes at a later time and Laravel will update all of the relevant links. Class auto loading avoids the problem to keep an autoloader configuration and thereby avoids charging unnecessary components that remains unused. These are just a few ways in which Laravel differentiates from other PHP frameworks. If you are interested enough to give it a try here is the link to the page where you can download it.

For more information here is the Laravel’s documentation page.

NVD3

NVD3 is a project that attempts to build re-usable charts for d3.js. At the moment it has a small collection of components that are very customizable, the goal is to keep it that way. D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS.

NVD3 is still a young project so there are some things that need to be improved, implemented or changed so we’ll keep an eye on the development of this project.

Here is the project’s homepage

Make a stopwatch using CSS3

Have you ever think, how powerful CSS is?, if that’s your case or even if you are just interested into make something different with CSS, here is a good starting point. At this point maybe you’re thinking that you need to use big parts of JavaScript code, but that’s not the case here, all the logics are implemented in CSS.

If you don’t believe it, here’s the page where you can see how to do this stopwatch.

ddSlick a plugin for creating drop down with images

A free jQuery plugin that allows us to create a custom drop down with images and description, avoid that boring old fashioned and simple drop downs by adding images and descriptions.

Want to see it in action? see it here.

Tablecloth

If you’re redesigning a site or working on a completely new one, styling tables is typically tedious and time-consuming. If you’d better spend your valuable time making the other elements of your site pretty and let tablecloth do the hard work. Download it and give it a try. Need a hand on the basics of tablecloth, better take a look at its homepage.

Responsive Grid System

The Responsive Grid System is not a framework, it’s an easy way to create a responsive web site and there are some reasons that makes it an easy way, first you’re not stucked with a predefined number of columns, with Responsive Grid System you can have as many as you need, it scales to any size you want, because it works with percentages, you don’t need to worry for making your content fit your grid instead it’s the grid who fits your content. So better see it yourself. Need more info here’s the homepage.

CSS3 Negation (:NOT) Selector

CSS has some selectors that allow us to choose elements in certain ways such as :focus, :active, etc. However what we will discuss aren’t those selectors but we’re going to look the :not selector also known as negation selector. Basically what the :not selector does is to select the opposite element of the given condition nothing more. We better see an applied example of what the :not selector can do for us.

CSS generated content on replaced elements

By using pseudo-elements like :before and :after we can specify which content will be inserted before or after the content of an element. Replaced elements like input or img have no content, so you shouldn’t be able to use generated content for them.

But we know in most cases there’s an exception and some replaced elements aren’t the exception, thereby we can use generated content in a variety of replaced elements, this varies from browser to browser. To keep in mind, a replaced element is an element that’s out of the scope of CSS, such as an image. But to understand this a bit more let’s take a look to this page.

Different Sidebar

If you have used wordpress for awhile, you maybe have notice that wordpress always uses the same side bar for all themes unless a designer creates a custom homepage, so the side bar will show in all pages but the homepage. Taking that in mind we have found a tutorial that will avoid this annoying situation, so here it is. We almost forgot to tell that you must have a basic knowledge of HTML and CSS to create all the things needed to make it work.

Displaying Custom Fields Outside the Loop

There’re times when we need to display post-specific content. Normally post specific contents are added via a custom field which can only be displayed inside a post loop, however we have found that there is the possibility to put a custom field outside the post loop, are you asking how?, here is the answer.

Drop Down

Have you ever wanted to create a drop down menu?, we founded a simple way to achieve that using HTML, Jquery and CSS minimizing the use of menu lists, nothing fancy, but pretty useful. Do you want to know how?, please take a look at this page where you can find how to make it.

Smartphone-Optimized Websites

Today web developers are asked to remodel old sites to fit in small device screens, this shift represents a bigger change from the common web design, because the design actually is oriented to large personal computers and laptops. An effective way to change from large screens to small device screen is by using CSS, but to properly tell the smartphone browser how to display web content, users should be directed to a mobile CSS stylesheet with the inclusion of specific codification, also the size needs to be modified to fit the new screen. There are many things that must be changed in order to obtain the desired results, if you want to know which things needs to be changed, please go here.

Removing Comments Completely from WordPress

The comment feature in WordPress is an essential component of blogs – but not in all cases it’s needed, especially if you use it as a traditional CMS (content management system).

we can just leave out the comment form while we’re creating a theme and disable the comment options in your backend. But this is not exactly the best way. what this plugin does is turning the comments off completely, that way we are sure that the posts can not have that option and also remove the fields to comment in the backend, so the user gets exactly what he really needs. But better take a look at the things that are gone by using this plugin.

Base64

Base64 is an encoding for images, it represents binary data. So basically the screen shots are converted to a string to reduce load time, if you can’t believe it, here is a video to dissolve all your doubts, also there’s a way to make it with PHP.

PHP Image Resizer

TimThumb is a simple PHP script that let us resize images to the size we want. More about this script.

WordPress Plugin: Floating Comments Form Fixed Scroll

Today’s plugin is (the first of tons of upcoming plugins) called ‘Floating Comments Form Fixed Scroll Position’ that is a chromy form that lets users post comments from it, and follows you as you scroll down through the page, the form is also Ajax-Powered so that there is no need to refresh the page in order for comments to be submitted.

GUI Retro Vintage

Are you tired of the extremely modern GUI elements, that sci-fi elements, what if you could have a bunch of Retro Vintage elements?, what if you could make your web look Retro but with the modern functionality?, if that’s your situation and you ever think how cool it will be if this elements exist, ok now they’re here!

Whiteboard Framework

Whiteboard framework for WordPress was developed to speed up the development of WordPress themes. Whiteboard does so by eliminating the time spent on code common to all WordPress themes and includes non-intrusive code that improves the overall WordPress theme in many ways – including SEO, speed, usability and mobile support. While other WordPress frameworks offers a mess of styles, functions and contents areas that has to be edited for almost every project, Whiteboard remains as a true WordPress framework. If you want more information please refer here.

Bootstrap Registration Form Tutorial

Bootstrap helps us to create clean and usable applications, it reduces larger engineering efforts and gives uniform application solutions. So if you ever wanted to make a form like a pro, with error and success messages and also with displaying popover information and last but not least an ending success message, Bootstrap and this tutorial are for you.

jQuery Mobile Framework Tutorial

jQuery Mobile Framework help us to create great web based mobile applications, download it here, but what can you do if this is your first time with it?, there’s no problem here is a tutorial onto the basics such as theme selection, library use and transition animations.

Manipulating HTML5 native audio

HTML5’s native audio is a great way to avoid using third party audio plugins such as QuickTime and Flash, Firefox and Chrome are embedded with some JavaScript libraries that let us manipulate the audio, so hereare some of the methods and properties included on those libraries.