November 2017 Summaries

Webpack is a build tool for modern web applications, which bundles your application by recursively building a dependency graph and packaging all modules into one or more bundles. It has become the most popular build tool for bundling Single Page Apps into static assets due to its early adoption by the React community. Webpack has found its way into many boilerplates and CLI-generated templates, providing little to no configuration and learning needed. The tutorial will guide you through setting up Webpack from scratch using npm, adding a loader for Babel to transpile JavaScript, and utilizing plugins like UglifyJS for minification.

Smashing Magazine has migrated its site from WordPress to a new platform built using the JAMstack methodology, resulting in significant improvements to speed, scalability, and security for over 2.5 million monthly visitors. The new site is powered by Netlify's global CDN and microservices, eliminating server-side code and increasing performance by 10 times. Additionally, Smashing Magazine has introduced memberships with the goal of becoming ad-free, promoting a faster, safer, and healthier web.

Build tools simplify the process of creating modern web frameworks like React and Angular by bundling dynamic JavaScript code into statically-bundled content, making it more approachable for developers. They automate the process of building programs through Make-like automation, providing scriptable ways to enhance bundles into smaller modules for lazy loading and optimizations. Build tools have evolved from old concepts like scripting and build automation, and are now used to package websites with features like minification and module bundling, making it easier to maintain and deploy static assets. They abstract client databases or sensitive information, improving security and scalability. With the rise of JavaScript fatigue, new build tools are emerging, such as Gulp and webpack, which have strong communities and can manage large JavaScript applications into manageable static content.

Branch Deploys and Deploy Previews are two of Netlify’s most popular features, allowing developers to build and deploy their websites automatically whenever they push new code. However, deploying all branches can be cumbersome when only using Deploy Previews. To address this, Netlify has introduced a change to its build and deploy pipeline that allows developers to customize what they want to deploy. Now, users have the option to select which branches and pre-deployments to activate, giving them more control over their deployment process. Additionally, new sites will no longer be enabled for Branch Deploys by default, instead requiring manual configuration to enable this feature. This change aims to provide a more streamlined experience for developers while still maintaining the flexibility of Netlify's deployment features.

The rise of modern development practices has brought significant improvements to speed, security, and scalability, but also introduced complexity in building websites. Build tools aim to automate the process of optimizing website size, speed, and streamlining 3rd party dependencies, while being dense and challenging to learn. Scripting tools like Gulp provide a powerful way to chain multiple scripts together, leveraging community-created plugins to automate tasks such as converting CSS to SCSS or transpiling ESNext features. Automation tools like CircleCi, Travis, and Jenkins can run JavaScript tests using gulp test or npm test, while Netlify's automation feature allows for build scripts to be started on deployment to a CDN without the need for local builds. Build tools have solved common problems around optimizations, reducing JavaScript bloat through module bundling, tree shaking, minification, and de-duplication, making it easier for developers to focus on building rather than optimizing.

Netlify has upgraded its form handling feature, allowing users to delete form submissions programmatically using the Netlift API or through a button on the form detail page in the app. This update provides more control over client data storage and gives users like @crgeary and @_brettsmith more flexibility in their dashboard management. The deletions are permanent, so users should exercise caution when deleting submissions. Users can now export form submissions to CSV and delete them with a single click or programmatically using the API. Additionally, Netlify will continue working on improving its form handling feature to better serve its users.

Kyle Mathews, founder of Gatsby, discussed his project with me. Gatsby is a framework that lets you build entire websites using React.js, providing a modern JavaScript and CSS development environment. Kyle was motivated to build Gatsby after realizing the limitations of Jekyll, another popular framework at the time. The initial release had some limitations, but the new features in Gatsby 1.0, such as progressive web app enhancements and a plugin system, are exciting. Kyle plans to make Gatsby 2.0 more scalable by including Webpack 3 to support larger web projects, aiming to improve its capabilities. If interested in trying Gatsby, you can deploy a live version of the documentation template using the deploy to Netlify button.