background preloader

Front-end Development

Facebook Twitter

The ultimate guide to SVG. Imagine you could embed an image in a web page, scale that page to any size, and never lose image quality.

The ultimate guide to SVG

Well, you can. It’s totally possible, we just haven’t been doing it as much as we should. Images with fixed sizes such as JPG files, GIFs, and PNGs have their place on the Web, but their inherently static nature conflicts with the way the Web is going. As we move to responsive, flowing designs, the more irritating it gets to have to deal with images that are fundamentally not responsive. Flexbox Cheatsheet Cheatsheet. While I am no stranger to the magic of Flexbox, I find that I am not using it very often just yet.

Flexbox Cheatsheet Cheatsheet

As a result I end up pausing and referring back to this post at CSS-Tricks whenever an opportunity to utilize its powers presents itself. I set out to create a quick visual to summarize Flexbox when I run into these moments of pause in the future. I like to think of it as a little diagram (flow chart? Decision tree-ish thing?) Adaptive Placeholders. Adaptive Placeholders A while ago I designed an interactive placeholder thing for our forms and wrote it entirely in CSS.

Adaptive Placeholders

Improve the payment experience with animations. Animations add context This transition shows how an animation can be useful for the user.

Improve the payment experience with animations

It becomes clear that we ask for their phone number as part of the Remember me step, that the phone input shows up because of the action you took (checking Remember me). Shake shake shake When building a form, it’s easy to overlook how errors are experienced by the user. Web Design 2014: What to Watch Out For. This year has been a brilliant year in web design.

Web Design 2014: What to Watch Out For

More than any other year perhaps, huge strides have been made towards the maturing of the field. Let's have a look at some of what we can expect for the future of web design as an industry. Solutions to the Slicing Problem Anyone who has been doing web design for longer than a few years has undoubtedly faced the problem of the gap between design and front-end development. Designers live in tools similar to Photoshop or Sketch, and developers live in their text editors.

This common workflow has seen many attempts at a solution, including things like SiteGrinder, Dreamweaver, and more recently Adobe Muse. These tools will greatly benefit from the fact that web design trends have adopted flat colors with very little texture and predictably repeated elements. What you won't see yet: automatic JavaScript You won't see a good "WYSIWYG"-ish JavaScript implementation for anything beyond basic configurable widgets.

Bring Your Website to Life With Animate.css. Retina graphics for your website. How it works There are now 4 ways to use retina.js: Automatically swapping out "src" paths on "img" tags.

Retina graphics for your website

Automatically swapping out background image URLs in inline styles. Manually specifying the location of a high-res image variant. Automatically creating media queries for CSS background images. In the most common case, you might have an image on your page that looks like this: <img src="/images/my_image.png" data-rjs="3" /> By using the "data-rjs" attribute, you're telling retina.js that this image would like to opt in. By giving the "data-rjs" attribute a value of "3", you're telling retina.js that you have created high-res image variants for all environments up through 3 times traditional pixel density (meaning both 2x images and 3x images). When a page loads, the script will check the user's environment to see what its display capabilities are.

CSS3 Responsive Slider / Carousel Using Radio Buttons. Select catcher Created by Ian Hansson (@teapoted) Art from Brendan Zabarauskas (@bjzaba_).

CSS3 Responsive Slider / Carousel Using Radio Buttons

Icons from the iconSweets set. Browser Support: Best In Test: Firefox (transition performance) Full Support: Chrome, Firefox, Opera, Safari (latest versions of all browsers) Partial Support: IE9 (Functional, but does not support transitions) *No JavaScript Functionality (1 compatability fix though) iOS devices don't handle labels properly. You can view this page without the js iOS fix here. A Baseline for Front-End Developers. 12 Apr 2012 edit I wrote a README the other day for a project that I'm hoping other developers will look at and learn from, and as I was writing it, I realized that it was the sort of thing that might have intimidated the hell out of me a couple of years ago, what with its casual mentions of Node, npm, Homebrew, git, tests, and development and production builds.

A Baseline for Front-End Developers

Once upon a time, editing files, testing them locally (as best as we could, anyway), and then FTPing them to the server was the essential workflow of a front-end dev. We measured our mettle based on our ability to wrangle IE6 into submission or achieve pixel perfection across browsers. Many members of the community -- myself included -- lacked traditional programming experience. HTML, CSS, and JavaScript -- usually in the form of jQuery -- were self-taught skills.