Npm is a node package manager. Lets dissect these words first. Node.js is a javascript runtime for executing javascript code. Package manager is a resource that helps to distribute packages of code as easily as possible. NPM is the industry leader in package managing for javascript.

Lets set the scene. You are starting on your new path called web developer and you know HTML and CSS. You have heard of this thing called React that every developer and their mother is using. But what is it and how do you start using it today?

Are you tired of blurring images and the large file sizes that come with assets delivered in JPEG and PNG. Well if your asset is a vector asset you should use the latest and greatest of what the web has to offer, SVG!

Jekyll provides you with the tools to create a full fledged blog thats static. Its a more simple retro way of making a blog but its great because it really strips out the unnecessary code and the reliance on a database is dissolved.

When a page initially loads, many requests are made to the browser. Content, Images, and JavaScript Files are just some of the types of requests made to the browser. For websites that require lots of content and images, it is best to delay the requests for these assets until they need to be displayed. Ajax gives developers the tools to do just that.

Creating a modular code base is key to the extensibility of any web app. Using the BEM inspired methodology it is a breeze to create modularized components. Today I will show you how to create a modular HTML and CSS component that is seen throughout the web.

SVG is an incredibly useful web element that can take many forms and sizes. Whether you want to create a complex chart or a simple shape. SVG can also be animated! Today I will show you how to do exactly that by drawing a circle using a little CSS and some JavaScript to help us out.

CSS files are getting larger and for good reason. Our web projects are larger and more robust than ever but but do we need an entire CSS file to create the user interface. Critical is a npm package that scans a page of your website and returns an output of the necessary CSS for the page.

Caching is the process of storing data for future use in the cache's memory. The stored data is used to serve the same data even faster for future requests. On the web we can store our websites CSS, JavaScript, Images, fonts and many more file types to the browsers cache.

Speed kills on the web and it is our duty to provide the fastest experience possible. Gzip enables HTTP compression by compressing most file types. Compressing these files has proven to reduce files sizes up to 70%!

Depending on how large the file size of your web font, you will find that your website will take a performance hit. Web fonts are a great asset for designers and developers alike that come with their own quirks and caveats. Our goal as developers is to minimize these quirks and we can do just that with Web Font Loader.

I have been working at a small digital agency for a little over three years now. To say that I have learned a lot since starting here is a gross understatement. The funny thing is that I feel like I learned in an unconventional way. A way were you I was required to want to learn rather than forced to learn.

Responsive images on web apps is a complicated subject that if done right can positively effect your sites aesthetics and performance. srcset, sizes, and picture element gets us one step closer to a solution for responsive images.

CSS can be pretty frustrating when your codebase starts to increase. Without the proper structure and naming conventions, your CSS can be downright unmanageable. Lets delve into the steps we can take to control our CSS codebase.

As Front-End Developers, we are sometimes overcome with the amount of work that goes into building a simple website. How can we automate time-consuming tasks in our development workflow.Gulp provides developers the toolbox to automate the tasks in their workflow.

CSS is an easy way to style websites but it lacks features that developers need. Sass is a scripting language that is interpreted into CSS. Sass provides features that CSS doesn't like Variables, Mixins, Operators and other functionality that is available in other object-orientated languages.

Flexbox is a innovative way to create simple and complex layouts in a fast and flexible manner. When you set an element to display as a flex container, the child elements within that container become flex items. The browser then stretches and shrinks each flex item to fill all the available space.