Most examples that discuss Test-Driven Development don’t include information about how to test components that fetch data. With Jest, we get an environment in Node.js that mimics the browser because it provides jsdom. However, Jest does not describe a “batteries included” vision for server responses. Let’s discuss the best way to test front-end components that make API calls.

Across all of my professional software projects, I insist on Test-Driven Development (TDD). Not all developers share my enthusiasm and some see testing as onerous and costly. There’s so much to learn, you have to maintain a whole set of dependencies and libraries, you have to mock dependencies, it takes too long, and the list goes on. These concerns are cultural and have less to do with proficiency. TDD is another skill to learn and a powerful tool for the long term health of a software project. Test-Driven Development creates a safe environment for developers to take risks, builds trust between team members and management, and provides legibility for other developers to make changes.

npm scripts have never sparked joy for me. The package.json file is meant to be a configuration file and manifest of everything necessary to run a node module or application. Lately, my package file was feeling a little bloated, unsightly, and unruly. I also work in a lot of packages at my current job which means quickly parsing the scripts from other people’s work. When a project has a lot of dependencies, cating a file to read the scripts can feel frustrating and overwhelming. Luckily, we can leverage nps to put scripts in their place and make package scripting maintainable.

Learn how to setup Typescript, ESLint, and Prettier to free your team from standards, formatting, and type checking discussions. Each of these tools aren’t hard to configure independently, but getting them to work together is tricky. You’ve maybe used some version of ESLint, Prettier, Standard, XO, or TSLint but putting it all together again is a pain in the butt. Let’s go through each of the tools I personally use, how I set them up, and how they work. TLDR at the bottom if you just want to get rolling.

It’s been a long time since I last wrote a technical post and a long time since I’ve given an update. Now is a good time to discuss my thoughts after spending two years at a startup. I’ve learned so much not just as a front-end developer, but as an engineer with better habits and stronger opinions on the state of web development. I’ve got a long ways to go, but I’m hoping 2018 can be the year I take my skills to the next level.

As a front-end developer, my job is not only to create usable and beautiful websites, but also to design maintainable and reusable code. If you’ve ever worked with SASS or a team that uses a preprocessor, you’ve probably come across nesting in all of it’s beautiful, ugly glory. It’s a way to quickly scope for page specific styles or grab selectors that may not have classes assigned.

To help maintain nesting, the Inception Rule has been the de facto answer to the problem. In this post, we’ll look at how the rule is broken and how we can fix it.

Say you have an awesome website structure in place but it’s feeling a little bland. All of your assets, content, and design is looking great but it’s missing something… a little flare, pizazz, oomph. A great option is utilizing jQuery to add some custom animations to visually guide the user and smooth out the rough edges of your website.

In this tutorial, I’ll be using jQuery’s built in methods to create a sticky navigation bar that will catch the users eye and impress your grandma.

Intro CSS animations and loading screens are controversial among web developers and designers. I personally think transitions visually indicate to users that they have left the current page and are navigating to a new location. I also hate to see my website load some font, a pixelated header image, or clunky animations that look great on my local machine but terrible across the Internet.

In this tutorial, we’ll create a CSS loading animation using Spinkit, a CSS animation plugin that offers various animated icons, and Modernizr to create fallbacks for older web browsers.

Contact forms should be readable and easy to understand for users. Today we will create a responsive contact form using jQuery Validate for your static website that doesn’t refresh the page, animates a small “Thank You” note, and sends messages to your Simple Form inbox using AJAX.

Simple Form is great if you can’t use a server side language like PHP, for instance on Github pages. I’m hosting my website on Github Pages, so this kind of service makes sense for me. There’s a plethora of tutorials covering server side contact forms so feel free to read more elsewhere.

This is my first post on my new Jekyll blog. I’m excited that I can host my site on Github and simple start blogging. I look forward to writing tutorials, talking about the state of the web, and interesting new technologies.

Enjoy!