January 2017 Summaries

To get started with Netlify, it is recommended to name your site something meaningful immediately. You should also get your site built and tested before configuring other settings. This includes linking a repository if needed, debugging builds, checking the Deploys tab for build logs, deploy previews, and revert or download options, applying a custom domain name, configuring SSL, and optionally setting up notifications/integrations and inviting collaborators. These steps can help ensure a smooth onboarding process and make the most of Netlify's features.

The author is considering the use of Preact as a smaller alternative to React for their applications, particularly to improve bundle sizes and performance. They have started by setting up Preact in their existing create-react-app project using npm and webpack, and have found that it significantly reduces the bundle size compared to React alone or with additional libraries like Netlify UI. The author has also experimented with different metrics, including the Perceptual Speed Index (PSI), which showed a significant improvement in performance when switching to Preact. However, they acknowledge some trade-offs, such as missing features and potential inconsistencies due to being an offshoot of the main React project. Overall, the author recommends considering Preact for building small, fast web applications.

I presented a new user with an onboarding modal after their first login to Netlify, but I wanted to exclude existing users from seeing it. I initially considered adding a check for users with only one site deployed, but this didn't account for users who signed up via our Sign Up flow and went through the deployment process. Instead, I used cookies to solve my problem by setting a cookie named "onboarded" on the user's first login. The react-cookie library made it easy to access and manage cookies in my React application. To further refine the solution, I created an additional check that limits the onboarding modal for users who have been with Netlify long enough to know its features, by checking if their login date is the same as their account creation date. If this condition isn't met, I use moment's diff function to identify if the user signed up less than a day ago and compare it to the onboarded cookie. The result was a quick solution that required some discovery, but ultimately allowed me to focus on more elegant solutions for common problems on the web.

There are some common tasks in JavaScript that seem tedious to write, such as shuffling an array. Lodash is a popular library that provides functions for solved problems like shuffling, making it easier to insert into projects with ES6 imports. It has over 2 billion downloads and accounts for 4% of npm's weekly download traffic, being directly depended upon by more than 27,000 packages and indirectly depended upon by 100,000 packages. Lodash offers functions such as `shuffle`, `range`, and `sampleSize` that can be used to simplify common tasks like shuffling an array, creating a range of numbers, and picking a random sample set. These functions can improve performance compared to implementing them manually. The author recommends checking out Lodash's documentation for other useful functions, which is hosted on Netlify with the Open Source Plan available for free.

Locked Deploys have been launched by Netlify, allowing developers to maintain stable versions of their sites in production while still benefiting from continuous deploys. This feature is particularly useful when a pause on publishing to production is needed, such as during merge conflicts or testing phases. With Locked Deploys, teams can pin specific sites to their current deploy and build new ones without affecting production, ensuring a safe and smooth development workflow. The feature utilizes Netlify's atomic and immutable deployment features, providing additional security and reliability for developers.

Webpack is a static build tool that creates a graph of all application dependencies, starting from an entry point. The entry point tells Webpack where to start and follows the graph of dependencies to bundle assets. Loaders transform files into modules as they are added to the dependency graph, while plugins perform actions and custom functionality on bundled modules. Plugins can be customized via options and require instances to access their features. Webpack's configuration object defines these key concepts, including entry points, output properties, loaders, and plugins.