![]() ![]() ![]() This can create notable delays in running your JavaScript. If you have ES modules nested a few times, the browser has to download the file, compile it, parse it and download the nested import again before it can run. While modern web development is awesome, there are some limitations that affect performance and user experience. It’s possible to build in a modern way and never touch a build tool, but you still may want to. GZipping is done on the server and has a much bigger impact on JavaScript performance than minification does.Īnd I’m going to drop a link to an article on kind of GZipping versus minification and how they both work down in the notes as well. You used to want to do that for performance reasons and now it’s arguably better to split a file into a bunch of smaller pieces. Removing some of the benefits of concatenating everything into one big file. With HTTP2, you can now download a bunch of smaller CSS and JavaScript files at the same time. CSS nesting is something that’s in the works and when it’s implemented, it’s going to provide native support for something that you also used to need SAS for. And again, I will link to the MDN reference for CSS variables or custom properties as they’re now called down in the show notes. And I’ll link an article on kind of getting started with those down in the show notes.ĬSS variables let you define properties once and reuse them throughout your CSS, something that you used to need SAS for. You can create modular JavaScript files and import just the parts you need using ES modules. So today, the native web can do a lot of things that we used to have to hack around and use build tools for. So are build tools still useful? That’s kind of what I wanna talk about today and I wanna really unpack. A lot has changed on the web in two years. So in response to those last few episodes, I actually got a note from a listener that said, what would be nice to see is alternatives to JavaScript build tools, for example, JavaScript modules and import maps.Īnd a few years back, I actually wrote an article for my newsletter over at about how build tools aren’t required to be a good developer, but how they can be nice to have. Today, I’m talking about alternatives to build tools. Last week, we talked about how to choose which JavaScript framework to use and how teams choose the tools they use. Hello, hello, hello, this is the vanilla JavaScript podcast. WTF is gzipping (and how is it different from minification).Build tools aren’t required to be a good developer (but they can be useful).Podcast Episode: How teams choose the tools they use.Podcast Episode: How to choose which JavaScript framework to use.In today’s episode, I talk about whether or not build tools are still useful. Basic version is completely free and available for Mac and Windows.Download this episode’s audio file (MP3). Prepros - a popular software (GUI) for compiling Sass and Pug. It's avalable on Mac OS, Windows and Linux.Ģ. Visual Studio Code is a free software developed by Microsoft. Live Sass Compiler for VS Code - We personally recommend Visual Studio Code editor with Live Sass Compiler plugin installed. So you have to update all inside your sass files to poit to the right directory assets/vendor.ġ. In that case you can find Bootstrap files inside assets/vendor folder. But if you don't use Npm / Gulp setup and don't run npm install you will not have the node_modules folder. By default they are imported from node_modules folder. But if you decide to go with any option described below you have to update the paths to Bootstrap files. If you are not using Node.js and Gulp setup, don't like command line interface there are another ways to work with preprocessors. Check Dev environment setup article for the instructions. The fastet way is up and going with Sass (Scss) and Pug is to use Gulp setup that comes with Around. Just like SASS, Pug is a prepocessor and, as such it helps you accomplishing tasks like wrapping away repetitive work by providing features not available in plain HTML like variables, includes, mixins, functions, etc. Pug (former Jade) Pug is a high performance Node.js Templating Engine. ![]() Sass gives you the power of variables, mixins, functions, etc. It is the most mature, stable, and powerful professional grade CSS extension language in the world. Using Pug & Sass Sass (Syntactically Awesome Style Sheets) Sass is a scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |