Skip to main content

Cognition

Front-end Development

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

  1. The Scoop on Our Benjerry.com Style Guide

    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.

  2. You Might Need jQuery

    2/27/14

    by Cat Farman

    0 Responses

    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.

  3. A Simple Grid Mixin Explained

    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.

  4. Fall Back to the Cascade

    10/24/13

    by Cat Farman

    0 Responses

    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.

  5. The Web on the Web’s Terms

    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.

  6. Progressive Enhancement: It’s About the Content

    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.

  7. Maps Should Be Crafted, Not “Plugged In”

    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.”

  8. Go Vertical

    Devices come in all shapes and sizes—from iPhones, to the massive Galaxy Note, to the tall-but-skinny Nexus 7, to 10-inch iPads, and massive, 30-inch displays.

  9. Making Front-end Development a Team Sport

    “All code in any code-base should look like a single person typed it, no matter how many people contributed,” is one of the many ideas behind documents such as Rick Waldon’s Idiomatic JS and Nicolas Gallagher’s Idiomatic CSS.

  10. Re-cognition

    As we near the end of December, it’s pretty natural to begin to reflect on the past year. Cognition is the place where we share new processes and create a dialogue around new ideas. In the spirit of reflection and end-of-year lists, here are the top five trafficked Cognition posts of 2012 and some parting thoughts from an alternate point of view.

  11. Beyond Binary Grids

    Grids are everywhere on the web, and there is no hiding from them. We need grid systems to help create grids that are usable and manageable, and with Responsive Web Design, this has been a tricky tightrope to walk. We need our layouts to react to different media query breakpoints, and the way we have built grids in the past needs to be extended to do that.

  12. Expanding The Box

    10/18/12

    by Mark Huot

    4 Responses

    I always hear stories of managers pushing employees to “think outside the box“—to go beyond their day-to-day and find that idea that is unlike anything else. This is a tall order and maybe even a bit unrealistic. If our comfort zone is A, B, and C, how can we expect to find X without first understanding D–W? Because of this, I like to think in terms of “expanding the box” instead of jumping entirely outside of it.

  13. If you could learn anything, what would it be?

    9/20/12

    by Jenn Lukas

    8 Responses

    This can be absolutely anything. Go ahead and think about it for a minute. I recently posed this question at my dConstruct talk (slides / audio) a couple of weeks ago and received a variety of answers. Learning a new language was a popular response. So was learning how to cook, garden, ski, and do “The Robot.”

  14. Preprocess THIS!

    A while ago I wrote a little post discussing my dive into CSS preprocessing, and, at the time, I wasn’t totally convinced that this hot newness was the best approach for my workflow. I shared my internal struggle with bloated output and questioned if this preprocessor business really did save me that much time. When I wrote the article, I had only worked with LESS, one of several popular CSS preprocessors, as it was a project requirement. Many of you fine folks suggested (both on Cognition and off) that I try Sass. Well, I did. Fast-forward 10 months and HOLY TOLEDO THIS FRONT-END DEV IS SERIOUSLY SASSY AND LOVING IT.

  15. The Importance of Conventions

    Flashback to the mid 90s. You are rocking your Prodigy dial-up, excited to play the six degrees of Kevin Bacon game. You click a link to the game, wait 5 minutes for the page to load, and are confused when you are staring at bright green fluorescent text telling you to “Invest $100k” instead of calculating Leondardo DiCaprio’s Bacon number.

  16. More or LESS?

    I love writing CSS. I really do. I love spinning straw into gold, rescuing HTML elements from browser default styles, curving corners, softening colors, and cushioning containers. I love abstracting complex design systems into powerful classes and efficient declarations while minding the cascade and the rules of inheritance and specificity. I see a site’s visual design as one giant puzzle, patiently waiting to be analyzed, broken down into component parts, and built back up again. I easily spend 70% of my time at Happy Cog developing the presentation layer, so I’ve had my eye on the hot newness that is the Sass / LESS / CSS preprocessor movement for a little while now.

  17. The Gift of Giving

    12/15/11

    by Jenn Lukas

    8 Responses

    One of the interesting things about being in front-end development and the open web is that once you publish your website, anyone can see your work. Whether you use Firebug or Web Inspector or good old View Source, you can view everything I do in a quick click. This has always been one part terrifying to me (I swear those extra spans were the CMS WYSIWYG’s idea) and three parts awesome. As someone who loves web standards and the idea of creating a better web for all, I think it’s radical to share what we do with each other. If you threw all of our code from the interwebs into one big room, it would be one heck of a learning party.

  18. I have a new crush and its name is figcaption

    When it comes to HTML5 elements, do you ever feel like you’re reaching for a carrot on a stick? The promise of those tasty elements, hanging right in front of you, taunting you, so close, yet just out of reach. What you wouldn’t give for just one bite of a section, one taste of a succulent aside, one thirst-quenching datalist. I bet no one told that donkey it was going to have to wait ’til 2022 to eat that carrot.

  19. Make Sweet Systems Sweeter

    At Happy Cog, process is not sacred. We respect process, but we are constantly looking to improve the way our projects run; especially with regard to transitioning between project phases. Last week, Yesenia Perez-Cruz described how she crafts sweet systems and digital cupcakes. This week, I’m going to show you how we turn those cupcakes into a well-built tower of yummy cupcakery.

  20. Are Doctypes the New Lunch Tables?

    Viewing source has gotten pretty rad these days! Looking around the web, a good command + u (yes, I use Firefox/Mac) can provide an afternoon of exciting show and tell. One thing I like to look into is at which DTD table everyone is sitting these days. When the HTML5 doctype was introduced, some folks grabbed it and never looked back to the land of system identifiers again; others were cool with rocking a doctype that has been working for them for the last decade or so. This has caused some separation between those who see the choice as the past versus those who see it as the future. The cool table versus the lame table.

  21. Accounting for Taste

    Perhaps you’ve stood in line at Ben & Jerry’s Homemade Ice Cream and said,

    “What flavor of ice cream do I want today?”

    You’ve probably all wished, as I have, that you could have a dozen flavors at once. Thankfully, someone, possibly Messrs. Ben & Jerry, invented that tiny ice cream spoon. Sample just a taste to see if that flavor suits your mood.

  22. Wish Upon a ★

    The year 2010 was a wild one for the web. It saw the release of the iPad and all of the subsequent great ideas and discussion about flexible design approaches. HTML was cool again (the cinco!). Twitter got a major overhaul and Facebook got between 35 and 268 small facelifts. It was as if millions of bookmarks cried out in terror and were suddenly silenced when rumor had it delicio.us was disappeari.ng. In fact, someone apparently took the web’s pulse and pronounced it DOA!

  23. Making Dirt

    Two years ago, my wife and I stopped throwing all of our organic food waste into the trash. Instead, we purchased a composter and started tossing our food scraps into it. The intent behind this change was mostly selfish: we wanted a way to create nutrient rich soil to mix into the planting areas in our backyard. However, a week or two into using it, while pushing our trash can out to the street curb, I noticed another positive side-effect: the trash can was lighter and emptier. We were sending less to the landfill!