Front-end Development

We’ve written 46 blog posts about Front-end Development. View all topics »

1. 

   7 Alternatives to Popular Web Typefaces for Better Performance

   

   9/4/14

   by Katie Kovalcin

   It’s no secret designers love typefaces. Web design is 95% typography, and it’s hailed as the most important aspect of a design. So, it’s imperative to find typefaces that accurately convey the voice of our words. Designers may not be always thinking about it, but how a site performs can be as important as choosing the right typeface. The weight of a font kit is arguably more important to a site’s performance versus other heavy hitters (like images), because fonts are loaded on every single page. And, after all, if a site loads too slowly, users won’t view the typography as you’ve intended!

2. 

   Grunt Plugins Reviewed

   

   7/17/14

   by Cat Farman

   The movement towards designing with performance budgets in mind has inspired more fist pumps and vuvuzela bleating in this developer than the recent World Cup. Thinking through the ramifications of design choices for site performance makes it easier for me to build a fast website when development begins.

   But when it comes to testing against budgets, we’ve been measuring page weight and rendering times manually, using tools like WebPageTest.org and Yahoo’s YSlow. Relying on humans to run tests has meant we don’t always measure our performance consistently, therefore missing page weight hogs like the occasional stray Blingee. There has to be a better way, right? A curious client got us wondering how we could automate our performance testing.

3. 

   Why Developers Need to Learn Design

   

   5/1/14

   by Stephen Caver

   A couple of years ago at Happy Cog, I transitioned from my position as a designer to a developer full-time. Up to that point, I had been a hybrid designer and developer, splitting my time between the two responsibilities. The truth is that it was a long-overdue transition. My passion lies in the development side of the spectrum, so I am glad to be in a role where I get to express that passion full-time.

   I no longer design all day every day, but my experience as a designer taught me that developers should learn and practice design. The trope is often that designers need to learn to write code, but in working as a developer on the web, I’ve learned that the value of a design education pays dividends beyond being able to mock up a page in Photoshop.

4. 

   The Scoop on Our Benjerry.com Style Guide

   

   3/5/14

   by Alison Harshbarger

   The web has been all about style guides lately. Everyone from the BBC to Code for America to Yelp released their guides to the public, and style-guide-automating tools like KSS and Hologram are becoming increasingly popular. At Happy Cog, we’ve been making our clients’ style guides more interactive. Our newer style guides go beyond documenting the design systems we’ve established; they take advantage of their living in the browser to dynamically show how a system’s pieces are built, how it responds at different viewport sizes, and how users can interact with those pieces.

   For the recently launched Ben & Jerry’s website redesign, we created one of these “interactive style guides.” It covers everything related to building out and maintaining the new website: design components, page layouts, and even content creation. I chatted with a few of the Cogs responsible for the Ben & Jerry’s style guide about how it came together.

5. 

   You Might Need jQuery

   

   2/27/14

   by Cat Farman

   jQuery: Maybe you’ve heard of it. If not, may I welcome you to the internet and introduce you to some cool websites? jQuery is a hugely popular JavaScript library that gives you an API to manipulate DOM elements easily, handle events, AJAX your content, and create all the other cool features that make the web go ‘round. The scale of jQuery’s popularity is incredible; it’s used on over 80% of the most trafficked websites, and its CDN serves up over 500 million files a day.

6. 

   A Simple Grid Mixin Explained

   

   11/7/13

   by Allison Wagner

   Successful design systems stand on the shoulders of sound grids. Grids form the groundwork for a uniform yet flexible suite of templates. Their layouts hold containers that fit together like pieces of a puzzle. Last week, Happy Cog, in partnership with Mijingo, released the 7th video in The Happy Cog Way series: “The Basics of Grids.” In it, MJ discusses using a nice little web app called Modular Grid Pattern, a grid generator that can export into a variety of design programs.

7. 

   Fall Back to the Cascade

   

   10/24/13

   by Cat Farman

   When we think of responsive design, we typically focus on newfangled mobile devices like smartphones and tablets. But, as front-end developers, we still need to account for older browsers that can’t handle the newest CSS3 techniques when rendering our sites. In the case of responsive design, that means our old friend Internet Explorer 8 (and below) needs some extra handholding when we build our sites with media queries. These browsers don’t support media queries, and since they are still in widespread enough use that we can’t ignore them (~10% of users are still using IE8), we have to come up with new techniques for gracefully degrading our sites.

8. 

   The Web on the Web’s Terms

   

   10/3/13

   by Brandon Rosage

   After finishing journalism school, I worked for a series of terrific newspaper and radio companies. Barely two years into it, after flirting with the web, I quit.

   Compared to the web, print and radio had limited reach and were clumsy to use. In print, we plugged content into a fixed canvas and delivered the same experience to every reader. The closest we got to flexibility was an evening edition or special insert. The web attracted me because it couldn’t have been more different. It challenged me to design and build something that can reach anyone on any web-browsing device—a cause worthy of committing my career to.

9. 

   Progressive Enhancement: It’s About the Content

   

   9/12/13

   by Stephen Caver

   In case you’ve missed it, there has recently been a lot of discussion in the web community around whether Progressive Enhancement, a cornerstone concept in web development, is still relevant. The discussion has been largely sparked by Sigh, JavaScript, a tumblr by Happy Cog alum (now of Super Friendly) Daniel Mall that showcases high-profile websites completely breaking when JavaScript is disabled. Screenshots of websites from brands like CNN, McDonalds, and Instagram are completely blank. Their content isn’t just unusable, it’s completely absent.

10. 

    Maps Should Be Crafted, Not “Plugged In”

    

    5/30/13

    by Brandon Rosage

    Web design would be dramatically different if HTML had been born with some foresight for storytelling devices like maps. We certainly can’t blame web pioneers for focusing on type and images instead of maps, video, or canvas. But, because maps found their place at the table through browser plugins and third-party APIs, I find that they’re too often dismissed in the design process as elements that are just “plugged in.”

• Previous Page
• 1
• 2
• 3
• 4
• 5
• Next Page