background preloader

Web Development

Facebook Twitter

Sublime Text for Front End Developers. The following is a guest post by Wes Bos.

Sublime Text for Front End Developers

Wes has been writing about Sublime Text and all the great stuff it brings to code editing for a while now. He has a new book and video package out now: Sublime Text Power User. I met him at a conference recently and saw his talk on Sublime Text. The conference was buzzing about it. 7 habits of highly effective web developers. There are a few things that separate good from great, a fine line between just getting through, and being truly effective.

7 habits of highly effective web developers

This applies to almost anything, and especially web development. So what does being effective in web development mean? What are the habits that you need to develop to become great? Let’s take a look: 1) Effective developers use bug trackers Be it a software, mobile or web app, any development project needs to have bug and issue tracking services. Using bug trackers will not only improve your workflow. 2) An effective developer fixes and tests. Make the Most of Your Design with a Hero Header. One of the biggest trends in web design right now is the use of big images.

Make the Most of Your Design with a Hero Header

And not just large, but completely oversized images that seem to come to life on screen. The Anti-hero of CSS Layout - "display:table" Anti-hero - a central character in a story, movie, or drama who lacks conventional heroic attributes.

The Anti-hero of CSS Layout - "display:table"

The topic of table usage in layouts is a sensitive one. What Material Design Means For the Future of Android. Release Material Design Icons · google/material-design-icons. Axiomatic CSS and Lobotomized Owls. At CSS Day last June I introduced, with some trepidation, a peculiar three-character CSS selector.

Axiomatic CSS and Lobotomized Owls

Called the “lobotomized owl selector” for its resemblance to an owl’s vacant stare, it proved to be the most popular section of my talk. Article Continues Below I couldn’t tell you whether the attendees were applauding the thinking behind the invention or were, instead, nervously laughing at my audacity for including such an odd and seemingly useless construct.

Perhaps I was unwittingly speaking to a room full of paid-up owl sanctuary supporters. I don’t know. The lobotomized owl selector looks like this: Despite its irreverent name and precarious form, the lobotomized owl selector is no mere thought experiment for me. Styling by prescription#section1 Almost universally, professional web interface designers (engineers, whatever) have accustomed themselves to styling HTML elements prescriptively. .my-module { /* ... */ } < ! Bloat#section2 .module-new { /* So… what’s actually new here? Creating a type style guide. As the makers of Paper for iPad, FiftyThree does some great work that has always impressed me — so I was pretty excited to work with them when they asked for some help cleaning up the type styles on their marketing website.

Creating a type style guide

As is the case in many projects, as the FiftyThree site grew, the type styles grew along with it. As they added pages for new products, the styles weren’t as reusable as the team would have liked. Instead of using mixins or a modular set of styles, each page’s type styles were written directly to fit the design, causing a lot of property repetition as well as redundant styles that were only slightly different from one another. It was my goal to dig in and inventory the styles, then work with the design and development team to create styles that could be used across the site. Primer on Web-Based Grid Systems. What’s in a grid?

Primer on Web-Based Grid Systems

A grid-style framework is the backbone to almost any web design project, providing the structure for your site as well as a way to organize content, elements and images. There are a variety of grid systems out there that you can buy or download free. What’s new for designers, September 2014. The September edition of what’s new for web designers and developers includes new web apps, CSS tools, software, email templates, inspiration resources, productivity apps, jQuery resources, pattern tools, and some really great new fonts.

What’s new for designers, September 2014

Many of the resources below are free or very low cost, and are sure to be useful to a lot of designers and developers out there. As always, if we’ve missed something you think should have been included, please let us know in the comments. And if you have an app or other resource you’d like to see included next month, tweet it to @cameron_chapman for consideration. How to make your code easily maintainable with living style guides. Style guides of yesteryear are typically thought of as design-oriented documents focusing on branding and color usage.

How to make your code easily maintainable with living style guides

But with the advent of insanely large codebases for websites like Facebook or Google’s vast array of products, style guides have since evolved. These days, living style guides contain always up to date documentation of the current code base and its use cases. With these documents we can write much more maintainable and reusable code while seeing instantly how optimized our code base is. What’s in a living style guide? Living style guides are similar to the older counterparts; they contain logo and branding information, color usage, as well as a general outline of code usage.

Not only do these guides focus on HTML and CSS, but also other languages that can be modularized for performance like JavaScript and PHP. Starting your own living style guide Beginning your own living style guide documentation from scratch may seem daunting, especially for larger projects. Conclusion. Animating Without jQuery. Advertisement There’s a false belief in the web development community that CSS animation is the only performant way to animate on the web.

Animating Without jQuery

This myth has coerced many developers to abandon JavaScript-based animation altogether, thereby (1) forcing themselves to manage complex UI interaction within style sheets, (2) locking themselves out of supporting Internet Explorer 8 and 9, and (3) forgoing the beautiful motion design physics that are possible only with JavaScript. Reality check: JavaScript-based animation is often as fast as CSS-based animation — sometimes even faster. CSS animation only appears to have a leg up because it’s typically compared to jQuery’s $.animate(), which is, in fact, very slow.

However, JavaScript animation libraries that bypass jQuery deliver incredible performance by avoiding DOM manipulation as much as possible.