background preloader

A Baseline for Front-End Developers

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. 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. Something has changed in the last couple of years. Whatever it is, I think we're seeing the emphasis shift from valuing trivia to valuing tools. JavaScript Testing The End Related:  Front-end Development

CSS3 Responsive Slider / Carousel Using Radio Buttons Select catcher Created by Ian Hansson (@teapoted) Art from Brendan Zabarauskas (@bjzaba_). 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. How Does It Work? The actual slider is much like any JavaScript slider. To save our input we are using radio buttons. We put the radio buttons at the top so when they are :checked we can use a general sibling selectors (~) to change our slider. That is all the essential CSS, the other gaff is just styling and animation. Created by Ian Hansson (@teapoted), Feb 2012.

JavaScript, JavaScript... | by Angus Croll Retina.js | Retina graphics for your website How it works When your users load a page, retina.js checks each image on the page to see if there is a high-resolution version of that image on your server. If a high-resolution variant exists, the script will swap in that image in-place. The script assumes you use Apple's prescribed high-resolution modifier (@2x) to denote high-resolution image variants on your server. For example, if you have an image on your page that looks like this: <img src="/images/my_image.png" /> The script will check your server to see if an alternative image exists at this path: "/images/my_image@2x.png" How to use JavaScript The JavaScript helper script automatically replaces images on your page with high-resolution variants (if they exist). Place the retina.js file on your server Include the script on your page <script type="text/javascript" src="/scripts/retina.js"></script> (put it at the bottom of your template, before your closing </body> tag) That's it! Steps: Download Download zip Download source Contribute

Adventures in JavaScript Development Web Design 2014: What to Watch Out For This year has been a brilliant year in web design. 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. 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. Significantly Fewer Graphic PNGs But seriously, SVG With beautiful examples popping up everywhere, SVG is hitting its prime.

Perfection Kills Improve the payment experience with animations Animations add context This transition shows how an animation can be useful for the user. 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. Sleight of hand Animations can be a good tool for making users perceive things as faster than they really are. Button transitions Subtle animations are my favorite. When the user clicks “Pay”, a spinner briefly appears before we show the success state. Bonus round This animation is a bit superfluous, in that it could be removed without breaking the flow — which contradicts the general premise of this article. I tend, like most others, to not trust websites that feel like they were made 10 years ago.

rmurphey/js-assessment Adaptive Placeholders | The Circle Blog Adaptive Placeholders A while ago I designed an interactive placeholder thing for our forms and wrote it entirely in CSS. I made it assuming no one would ever notice, so you can imagine my surprise when I saw that it got featured on LittleBigDetails, one of my favorite blogs! To show my gratitude I thought I would share how I designed that placeholder and how it manages to adapt to user input. Live Demo I’m throwing the demo at you first so 1) you have something to reference, and 2) if you’re lazy you can get right to the good stuff. Forms Follow Function Before I came up with the interactive placeholder, I was just using a normal one. Entire teams use Circle — the person who enters a value first isn’t always the same person who sees it later. This worked well and made handling pre-filled data that much easier. Fun With Pseudo-Selectors The first big problem I ran into was figuring out how to select the normal placeholder I was using. input::-webkit-input-placeholder { ... } Markup Setup

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. 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?) Anyway, I thought I would share it just in case others may find such a resource beneficial as well. If you would prefer to have this guy as a PDF you can grab that here.