Monday, January 27, 2014

Front-End Development: 5 Things You Should Definitely Learn in 2014

Front-End Development: 5 Things You Should Definitely Learn in 2014

A post by Joseph Howard@http://www.pencilscoop.com/2014/01/front-end-development-5-things-you-should-definitely-learn-in-2014/

We all know at what a rapid pace the world of web design and development moves. As designers and developers we are set with similar tasks of continually learning and improving to ensure we’re up to date with the latest trends, projects and practices in our continual attempt to stay relevant in such a fast-paced industry.
For front-end developers, improving on existing skills and taking on new best practices, new languages, implementation techniques and deployment are integral. However it’s very easy to fall behind, often through becoming complacent or overly protective of the workflow you’ve become so accustomed to using over the years. There’s nothing wrong with this kind of “If it aint broken, don’t fix it” attitude, however it comes at a risk – one of becoming obsolete, very quickly.
Today, the web is such a vibrant environment full of media, applications and interactivity. Sure, a simple HTML/CSS setup has worked for a long time, and will continue to do so– however we are now seeing a seemingly endless stream of innovative development and deployment projects released everyday.
Some of these are useful and develop a strong community and support network. However they almost always take a significant amount of time to become widely accepted as a recognised development practice.
One way of ensuring you’re at the forefront of the latest web development know-how is to make an active list of things you need to improve on or learn, and commit a structured time management road-map to improvement.
If you haven’t already – here are some useful things you should consider learning in 2014:

Learn and Start Using SASS

learn-SASS
You’ve almost definitely heard of SASS right? However (like a lot of people) you may be reluctant to give it a try. Let me put it this way, every developer who currently uses SASS has gone through the exact same notion you’re going through. After years of religiously following your own workflow and structuring CSS files just the way you like them – why should you change? Well, there’s heaps of reasons, all the buzz around SASS wouldn’t be for nothing right? If so many people are using it, there must be something good about it right? Exactly and there’s a lot of things – once you start using it, you’ll wonder why you didn’t earlier. Here’s a few useful links to get started:
Why SASS? – A List Apart.

Learn Grunt

learn-grunt
Maybe you’ve heard of Grunt. The name sounds kind of weird I know, but Grunt is a fantastic tool and workflow for designers and front-end developers. It runs on JavaScript and does a whole bunch of tasks for you like compiling and minifying CSS and JavaScript as well as compiling CSS from SASS. But that’s not even the start of it, Grunt can do all sorts of things  (too many to list here). It’s totally customisable and works how and when you want it to work. It says it’s a task runner – but really it’s more than that, it’s a project workflow. To get started with Grunt take a look at these two links below:
First Moments With Grunt (screen cast video) – CSS Tricks.

Learn SVG

learn-SVG-animation
You’ve probably heard all the buzz on SVG over the past few months. The truth is, SVG has been around for quite a while, but don’t ask me why it’s only taking off now. Anyway, when combined with CSS and JavaScript, SVG can produce some interesting effects and will no doubt evolve through increased interest throughout 2014. To get started, take a look at these articles:
Getting Started with SVG - Webdesign Tuts+.

Learn CSS Animation

learn-keyframing
Again, another feature that’s been around for a while. Traditionally most browser animation has been handled via jQuery, however CSS animations are becoming highly mediated lately. The debate continues as to which way of handling animations is the best, however ultimately the choice is up to you. Personally, I find CSS animations and keyframing pretty easy to use and relatively logical in general. Here are some useful links for getting started.
Intro to CSS Animations – CSS Tricks (Screen Cast)
Transitions & Animations - A Beginner’s Guide to HTML & CSS
CSS Keyframe Syntax - CSS Tricks.
Animate.CSS - A useful list of pre-made CSS animations and effects.

Learn Custom Parallax

learn-parallax
Some would say the parallax effect has already come and gone, which is probably partly true. However it’s starting to be used in some more subtle ways which can help put the finishing touches on any project. That being said, there are a lot of plugins available for parallax effects, however if you really want to master it, you should really learn create your own custom effect. Here’s some more info:

What front-end development stuff are you using at the moment? Is anything notable you would recommend? Let us know in the comments.

About The Author

Joseph Howard
Hi I'm Joseph Howard. I'm a web-designer and digital media professional and I'm the creator of PencilScoop. You can get in touch with me through your preferred social media account.

150+ Free Animated SVG Icons

150+ Free Animated SVG Icons

A post by Joseph Howard@http://www.pencilscoop.com/2013/12/150-free-animated-svg-icons/
SVG implementation is fast becoming one of the hottest topics sweeping design and development circles as of late. With all the start-ups and JavaScript libraries, I wanted to create a set of SVG icons that have zero third-party dependencies and that can be implemented easily.
I’ve already written a number of articles on SVG, including this tutorial on animating icons with simple CSS and a tiny bit of jQuery. If you’re mostly unfamiliar with SVG implementation, it’s a good place to start. For some additional reading, take a look at this article here, which looks at the comparisons between SVG and icon-fonts.
However, the idea with this article is to provide a set of icons that any web designer or developer can use. Let’s take a look at how everything’s setup.


Setup

As you can see in the demo, there are 6 different sets of icons with various differences in styling and animation. All the styling and animation is done exclusively in CSS, externally from the inline SVG mark-up. If you take a look at the source files, you’ll notice I’ve separated all the styling into individual styles-sheets for the corresponding icon style.
Let’s take a look at the general document setup:
  1. <!DOCTYPE>
  2. <head>
  3. <meta charset="utf-8">
  4. <title>150+ Animated SVG Icons Demo</title>
  5. <link rel="stylesheet" type="text/css" href="css/social_line_styles.css"><!--SVG Styles & Animation-->
  6. </head>
  7. <body>
  8. <span class="svg-icon flat-line" id="line-lightning"></span><!-- SVG icon is injected via JavaScript into span via the ID -->
  9. <script src="js/svg_inject_scoial_line.js"></script><!--SVG injection script - contains the inline SVG Data-->
  10. </body>
  11. </html>
As you can see, the setup is quite simple. The SVG mark-up is injected externally via JavaScript and styled in an external style-sheet.

SVG Injection

Let’s take a look at how the JavaScript injects the SVG into the page. The idea here is that you can use it more dynamically as you won’t need to worry about putting SVG inline SVG’s directly into the page. All you need to do is create an HTML element with the corresponding “id”, and the script will inject the SVG into that element. Additionally, I’ve included all the cleaned and optimised SVG files if you prefer to use other means of implementing.
  1. var SVGstring = "<!--SVG Mark-Up Goes Here-->";
  2. $(SVGstring).appendTo('#DIV-NAME');

The HTML

The HTML is pretty simple, the icons are injected into “<span>”s with a class for general styling and an ‘id” for specific styling and the injection.
  1. <span class="svg-icon ICON-CLASS-STYLE" id="INDIVIDUAL ID FOR INJECTION AND STYLING"></span>

The CSS

The SVG mark-up contains all the classes and path data. By default, it contains CSS styling mark-up as well. However I’ve placed this in the style-sheets and applied some basic styling and animations. If you want to get more advanced with the animations, feel free to do so.

Lastly, the flat design icons were designed by Studio4 | Creative and are free for any use, credit goes to them for the design. However I slightly modified the original designs as well as converted them to SVG (amongst other things). That’s it really. Feel free to use them to your liking.
free-animated-svg-icons
Please note, although I’ve designed this for easy implementation, you may need to make some minor adjustments in integrating it into your own set-up. Enjoy!

About The Author

Joseph Howard
Hi I'm Joseph Howard. I'm a web-designer and digital media professional and I'm the creator of PencilScoop. You can get in touch with me through your preferred social media account.

50+ Awesome Free Tools for Web Developers

50+ Awesome Free Tools for Web Developers

A post by Joseph Howard@http://www.pencilscoop.com/2013/12/50-awesome-free-tools-for-web-developers/
If you’re a front-end developer or web designer, chances are you spend a lot of time writing mark-up.  Luckily, there are some great tools and projects on the web for improving your next project easily and quickly.
Often you may need a little helping hand to get things done. Today we have tracked down over 50 brilliant free online tools for developers. We’ve included everything from mark-up organizers, grid systems, jQuery plugins, gradient generators and much more.
Enjoy.

Nettuts+ Prefixr

Ensuring cross-browser compatibility is a must for any project. However, writing all those browser prefixes can be a pain. Prefixr from Nettuts+ is great online tool, simply copy and paste your mark-up and it will output all the necessary prefixes for you!
free_code_tools_prefixr

CSSmatic Gradient Generator

Creating nice gradients in CSS can be tricky, particularly if you’re a visual thinker. However this free tool from CSSmatic can create any gradient, no matter how complex! A great tool for any developer.
free_code_tools_gradients

Headroom.js

Playing around with headers can be difficult and almost always requires JavaScript of some sort.Headroom is an awesome jQuery based plugin that allows you to show/hide your header until it’s needed by the user, reacting to page scrolling changes. A great plugin.
free_code_tools_headroom

Retinise.js

Retinise.js is a really simple jQuery plugin which ‘retinises’ your inline images, and because it uses ‘data-src’ instead of ‘src’ it means it only ever serves up the image you need, saving you and your users bandwidth.
free_code_tools_retinise

Pure

Pure is a set of small, responsive CSS modules that you can use in every web project, such as forms, grids, tables, buttons and much more.
free_code_tools_pure

Colourco

Colourco lets you create a number of different color themes based on a simple GUI set-up.
free_code_tools_colourco

CSS Modal

A plugin using only CSS for modals. The modals are designed using responsive web design methods. They work on all screen sizes from a small mobile phone up to high resolution screens.
free_code_tools_css_modal

Snap.SVG

Snap.SVG is a free library for SVG based web animations. It’s probably one of the better SVG-jQuery scripts available at the moment.
free_code_tools_snap-svg

ProCSSor

If you need to clean up your CSS, ProCSSor is hands-down the best free online CSS beautifier. It has host of awesome features so your mark-up gets formatted just the way you like it.
free_code_tools_css-procssor

W3C Markup Validation

Usually when you’re at the finishing stages of a project, you’ll want to ensure all your work is error free and W3C compliant. A pretty standard procedure for most, however nonetheless integral.
free_code_tools_w3c--HTML

Foundation

Foundation is probably the most widely used responsive front-end development framework for developers.
free_code_tools_foundation

Animate.CSS

Hands-down the best CSS animation presets. A really great tool.
animate.css


Responsive Web CSS

Build responsive CSS media queries and breakpoints for specific devices.
free_code_tools_resonsivecss

Grunt

Grunt is an awesome tool for developers. It’s a JavaScript task runner that minifies CSS and jQuery as well as converting SASS to CSS. And lot’s lot’s more. Take a look at these two articles to learn how to use it.
First Moments With Grunt (screen cast video) – CSS Tricks.
developer-tools-grunt

SASS

While it’s not so much of a tool as a markup language, SASS is a way of writing CSS that can save you lot’s of time and produce cleaner, less repetitive stylesheets. It’s also great for Grunt.
SASS-tools


Yeoman

A lot of these tools have funny names, Yeoman is one of them. But don’t be fooled, if you’ve decided to use Grunt you should definitely take a look at this.Yeoman is an open source project which defines an opinionated stack for web application development.
yeoman-tool


Dirty Markup

Clean up your HTML, CSS and JavaScript with the appropriately named Dirty Markup.
free_code_tools_dirty-markup

Free Formatter

If you need to convert HTML to JSON or convert something to escaped format, or pretty much any Web Dev related conversion, freeformatters.com has a whole bunch of tools ready for the job.
free_code_tools_free-formatters

Glyph Search

Glyph Search let’s you search a number of free online glyph icon libraries.
free_code_tools_glyphsearch

CodePen

Codepen is a really great site for sharing web code with the greater community. It can also serve as a great tool when you need to figure out how do something. Simply type what you’re looking for into search, and chances are someone has made it.
free_code_tools_codepen

CSS Animation Cheat Sheet

The CSS3 Animation Cheat Sheet is a set of preset, plug-and-play animations for your web projects. All you need to do is add the stylesheet to your website and apply the premade CSS classes to the elements you want animated.
free_code_tools_css_animation-sheet

Pre Composed Touch Gestures

A set of basic, precomposed touch-device gestures in a neatly organized zip file for you to use in product demos or presentations.
free_code_tools_touch-gesture

CSS Inliner

Sometimes you need to put your CSS styles inline. This free tool does just that. Simply paste your HTML and it puts all your styles inline.
free_code_tools_css-inline

Type Wonder

Type Wonder let’s you test webfonts on any live site.
free_code_tools_type-wonder

IcoMelon

IcoMelon is a free online library and generator for SVG based web icons.
free_code_tools_icomelon

CSS Comb

CSS Comb is a free online tool for sorting CSS properties in a number of specific orders. It also is a plugin for a number of popular text editors.
free_code_tools_css-comb

WP Test

WP Test is a set of data testing tools that check the integrity of your WordPress plugins and themes.
free_code_tools_wp-test

UI Cloud

UI Cloud is the largest online database of user interface designs, letting you search through almost 50,000 designs.
free_code_tools_ui-cloud

RAW

Raw let’s you easily and quickly turn spreadsheet data into SVG web visualizations.
free_code_tools_raw

Bento

Bento is an online resource for learning web development, all links are categorized into various mark-up languages.
free_code_tools_bento

FlatIcon

FlatIcon is a free online database of over 25, 000 vector icons.
free_code_tools_flat-icons

Bitters

Bitters is a free starter template for setting up projects based on bourbon and SASS.
free_code_tools_bitters

Subtle Patterns

Subtle Patterns is probably the best online collection of patterns for backgrounds and other uses. It’s based on user provided content but it’s curated carefully, which means no junk. There’s also a photoshop plugin available.
subtle-patterns-tool

Color Template

Color template is an online development and learning resource for creating color templates for web implementation.
free_code_tools_color-template

IcoMoon

IcoMoon is a free online library and generator for font icons.
free_code_tools_icomoon

Ink

Ink is an online tool for creating responsive HTML email templates that are cross-browser/device compatible.
free_code_tools_ink

CSS Colors

Did you know CSS has over 140 different colors like “Thistle”, “Darkorchid” and “Cornflowerblue” ? Probably not right? Well this page has a comprehensive list of all the pre-defined CSS colors available.

css-colors-tool

Script SRC.net

Script src is a simple website for all the most current and widely used script tags.
free_code_tools_script-src

Sprite Box

Sprite Box let’s you easily create image sprites for web implementation.
free_code_tools_sprite-box

Diff Checker

A simple tool for finding differences and comparing markup.
free_code_tools_dif-checker

Bootstrap

Bootstrap is a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.
free_code_tools_bootstrap

Browser Hacks

BrowserHacks is an extensive list of browser specific CSS and JavaScript hacks from all over the interwebs.
free_code_tools_browser-hacks

Prefix Free

Prefix Free is a JavaScript based plugin that automatically adds browser prefixes to your CSS.
free_code_tools_prefix-free

Brackets

Brackets is a free online text-editor for web designers and front-end developers.
free_code_tools_brackets

Zurb Grid Builder

A great grid builder based on Zurb’s Foundation framework.
free_code_tools_zurb-builder

DropZone.js

DropzoneJS is an open source library that provides drag’n'drop file uploads with image previews.
free_code_tools_dropzone

Hint.CSS

Hint.CSS is free css based library for tooltips based on SASS.
free_code_tools_hintcss

MUELLER

MUELLER is a modular grid system for responsive/adaptive and non–responsive layouts, based on Compass. You have full control over column width, gutter width, baseline grid and media–queries.
free_code_tools_mueller-modules

Top Drawer

Based on Modernizer, Top Drawer is plugin for smoother reveal menus in small contexts using CSS3 rather than animating with JavaScript.
free_code_tools_top-drawer

Toolbar.js

Toolbar.js allows you to quickly create tooltip style toolbars for use in web applications and websites. The toolbar is easily customisable using the twitter bootstrap icons and provides flexability around the toolbars display and number of icons.
free_code_tools_toolbar

Hooks.js

Hooks.js is a small plugin that allows app style ‘pull to refresh’ functionality on the web.
free_code_tools_pullrefresh

SVG.js

A lightweight library for manipulating web SVG.
free_code_tools_SVGjs

Profound Grid

A responsive grid system for fixed and fluid layouts. Built in SCSS, it gives you flexibility and full control.
free_code_tools_profound-grid

Responsive Text Sizes

Responsive design can be tricky, particularly text sizes. While this is not a tool as such, this blogpost can help you determine your text sizes across different screen sizes.
text-size-tool


Sublime Text

If you work on a mac, Sublime Text is the code-editor of choice for most professionals. While it’s not strictly free, the trial version still works.
sublime-text-tool

What tools are you currently using in your workflow? Are there any awesome ones you would suggest? Let us know in the comments.

About The Author

Joseph Howard
Hi I'm Joseph Howard. I'm a web-designer and digital media professional and I'm the creator of PencilScoop. You can get in touch with me through your preferred social media account.