How to fix common issues when adding Storybook to a Snowpack app.

Configuration for our beloved frontend tools is hot lava. Today CLI tools as create-react-app or Vue cli abstract away most of the configuration, other than providing sane defaults.

Even then, understanding how things work under the hood is beneficial because sooner or later you'll need to make some adjustment to the defaults.

In this post we're going to see how babel preset-env, core-js, and browserslistrc work nicely together to enable newer JavaScript features for older browsers.

A gentle introduction to why Webpack exists, what problems it solves, and how to use it.

Unifying the frontend development toolchain

Snowpack is a modern, lightweight toolchain for faster web development. Traditional JavaScript build tools like webpack and Parcel need to rebuild & rebundle entire chunks of your application every time you save a single file. This rebundling step introduces lag between hitting save on your changes and seeing them reflected in the browser.

A gulp plugin to use inline SVG as background-images

Parcel is a very powerful compiling/process/whatever JavaScript tool that can automate your entire workflow and very easily. It’s based on a zero-config ideology. It’s not entirely zero-config but it has “sane” configs for 90% of use-cases.

Following this pole on Twitter I thought I’d take a look at spinning up a project using Parceljs.

I’ve used Gulp for years and Grunt before that. Parcel seemed like a logical progression. That, plus, I still don’t have the stomach to try and get Webpack working!

Parcel is touted as ‘zero configuration’ and although that is largely true, if you are moving from Gulp there are definitely some things you need to keep in mind.

Chisel is a WordPress development framework for creating easy to maintain and fast websites

Install npm dependencies that run directly in the browser. No Browserify, Webpack or import maps required.

Sass variable loader for webpack

Прямо сейчас я начинаю верстать новый проект. Я решила, что это хороший повод познакомиться с новой для себя технологией, поэтому выбрала в качестве препроцессора PostCSS. Меня привлекает в нем скорость работы и модульность, однако до сих пор не было случая попробовать его на реальном проекте. Сейчас в основном я использую Sass, и невозможность (хоть и временная) использовать node-sass с шестой версией Node.js, и то, как из-за этого у меня поломались стили в проекте, тоже послужило причиной поиска альтернатив.

certainlyakey starred ZeeCoder/container-query

Brunch lets you focus on what matters most — solving real problems instead of messing around with the glue.

PostCSS plugin that updates the standard object-fit tag to work with the object-fit-images polyfill for browsers that do not natively support object-fit.

Article here — https://medium.com/@nocreativity/manage-your-critical-css-with-this-postcss-plugin-6be1ca226c06

certainlyakey starred cloud-walker/gulp-gettext

Front-end development has shifted to a modular approach, improving the encapsulation and structure of codebases. Tooling became a critical part of any project, and right now there are a lot of possible choices. via Pocket

A page to display compatible browsers from a browserslist string.

In some projects, your gulpfile will get big enough that it's worth splitting it into multiple files, with one task per file. There are a couple approaches you can take to achieve this; both are pretty simple.