October 2017 Summaries

Netlify has made significant improvements to its Deploy Previews feature, which allows users to deploy every pull request from their Git repository to a unique URL. The new update makes the deploy logs publicly visible by default when linking a public repository to Netlify, allowing contributors to see how their changes build without needing to be collaborators on Netlify. This change is aimed at making it easier for open source projects to collaborate and provides more visibility into the build process. Users can still choose to keep their deploy logs private if needed, and some of the most well-known open source projects on Netlify have already adopted this feature, showcasing its potential benefits.

Service workers are proxies between the web page and network that provide cached versions of a site when no network connectivity is available, enabling offline-first applications and improving performance during slow or intermittent connections. They run on a separate thread in the browser and have a predetermined lifecycle with events such as install, activate, and fetch, which manage caching and updates to end users. To get started, developers can register a service worker by adding a few lines to their JavaScript file and deploy it to a supported browser like Chrome, Firefox, or Opera. However, there are limitations and potential gotchas, including the requirement for HTTPS, risk of man-in-the-middle attacks, and the need for cache invalidation strategies.

Netlify Identity is a full suite of authentication functionality that allows users to manage and authenticate themselves on your site or app without requiring them to be users of Netlify or other services. To get started, you can enable it on your site's dashboard and add the Netlify Identity Widget, which can be built from scratch or used as a pre-built widget available through npm/yarn installation. Storing user state in the app is crucial for basic login and logout functionality, which can be achieved using local storage or global stores like Redux or MobX. The feature also allows users to log into your site using external service providers like Google, GitHub, Bitbucket, and GitLab. Additionally, you can customize the registration process by allowing users to sign up without verifying their email address or disabling new user registration altogether.

Netlify provides a built-in form handling feature, allowing developers to create forms without running or hosting a separate server. To use this feature, an HTML form must be added to a page, along with the `netlify` attribute and setting a name attribute for the form. The action attribute determines what visitors see after submitting a form, which can be set to display a success message with a link back to the form or create a custom thank-you page. Once configured, submissions are received in the Netlify site admin panel's Forms tab, where they can be managed and used as needed. This feature eliminates the need for a separate server and simplifies the process of collecting reservations for a website. By integrating this feature with GitHub and using Zapier to automate tasks, developers can create fully functional websites without touching a single server. Netlify also allows custom domains and enables developers to make their own template by updating the copy and design as desired.

Vue.js is a popular JavaScript framework that has gained significant attention in the JavaScript community due to its fast performance, approachability, and scalability. In an interview with Jacob Schatz and Ben Mischenko, Vue's strengths and limitations were discussed, including its ability to handle large projects and its ease of use. The conversation also touched on the challenges of evaluating a framework like Vue for a specific project, such as GitLab, which required careful consideration of performance, scalability, and maintainability. Overall, Vue.js appears to be a viable choice for developers seeking a robust and accessible JavaScript framework.

Netlify has introduced a new feature that allows users to download form submissions in a single click, making it easier to manage and analyze form data. The feature is available on the Netlify dashboard, where users can navigate to a particular form and click "Download as CSV" to export their data. Additionally, a summary card has been added to individual form pages, providing an overview of the number of submissions and the date and time of the last submission.

Netlify is introducing a more structured approach to declaring redirects and header rules, allowing users to add custom headers and signatures to their proxy redirects. The new format will be stored in the `netlify.toml` file within the repository, making it easier to extend files as these features continue to grow. Users can migrate to the new format using the Netlify playground, which allows them to convert their current redirect and header rules to the new format. This update aims to provide more flexibility and control over redirects and headers in Netlify projects.

The development planning session for Netlify CMS, an open source content management system for static site generators, was a bi-weekly public event where the project team discussed progress and upcoming plans. The latest sprint focused on releasing version 0.5.0, which included significant improvements to the markdown editor built using Slate and Unified, and upgraded slug handling based on URI/IRI spec research. Additionally, Git Gateway support was added to enable email/password login and user management for non-technical teams or those without GitHub accounts. For the next sprint, top priorities include completing Sprint 2 work, releasing version 0.6.0 with dependency upgrades and bugfixes, implementing global navigation and the Collections UI, and addressing several open issues on the project board. The team is seeking contributions from new contributors, particularly for Hacktoberfest projects.

The tutorial discusses implementing a content management system (CMS) on a Hugo site, specifically for managing restaurant menus. It covers adding the food menu, setting up a headless CMS with Netlify CMS, configuring authentication using Netlify Identity, and integrating an image gallery. The process involves creating a config.yml file to define collections, fields, and media folders, as well as adding routes to the config.toml file to expose the CMS to users. The tutorial also touches on adding a drink menu and setting up the necessary configuration for it. By following these steps, a restaurant can easily manage its menus using a headless CMS, making it easier for the head chef to focus on brewing flavors rather than upgrading the website.

Netlify has switched from its own custom search solution, lunr.js, to Algolia for faster search results. This decision was driven by the growth of the `PagesIndex.json` file and the benefits of using a hosted search-as-a-service like Algolia. The team replaced their existing indexing task with a new "send-index-to-algolia" task that sends the indexed data directly to Algolia, reducing build size and improving search speed. With Algolia, Netlify is now able to deliver faster search results, with an average response time of less than 10ms. Additionally, Algolia provides features like search analytics, which allows the team to identify areas for improvement in their content. The switch to Algolia was found to be trivial and has brought several benefits to the site's search functionality.

This tutorial will explore building a client-side application for a restaurant serving modern cuisine using HTML, CSS, and JavaScript. It assumes knowledge of web development basics and provides a live version to play with at `tasty.netlify.com`. The project requires cloning the repository, setting up a GitHub account, and installing Hugo, a static site generator. With Hugo, the power is in bundling your site into a version that can be easily hosted on a CDN, resulting in an average build time of under 1 ms per page. The tutorial will focus on adding features such as taking reservations, maintaining an image gallery, and making an editable menu accessible through a CMS. It uses Markdown as the basis for dynamic content and provides a simple yet powerful menu system. The site's organization is based on taxonomies, with separate sections for food, drinks, and pages.

Staticgen is a platform to monitor trends in static site generation, and Spike is one of its notable newcomers. Spike is built on top of Webpack and utilizes HTML, CSS, and JavaScript parsers with plugin capabilities for transformation. It's fast, actively developed, and data-friendly. The tool was designed to be flexible without requiring heavy configuration out of the box. Its creator, Brian Douglas, moved from Roots due to the complexity of the core codebase, which hindered plugin development.

This year Netlify is participating in Hacktoberfest, an event designed to encourage participation in open source projects. Hacktoberfest has seen contributors from over 100 countries submit over 90,000 pull requests last year, and this year's goal is to make it even bigger. The event is organized by Digital Ocean in partnership with GitHub and encourages developers to participate in open source projects by submitting four pull requests marked as "Hacktoberfest" between October 1-31, resulting in a commemorative t-shirt. Netlify CMS has added the Hacktoberfest label to several issues that need help, including adding support for JSON(other) formats, prompting users to save changes on browser close, and fixing entries with .markdown extension not working. The company invites anyone to contribute to these issues or join their public meetings to discuss progress and priorities.