Best of Web Development — December 2020
- 1
- 2
Addy Osmani·5y
React Server Components
React Server Components aim to enable modern UX with a server-driven mental model. This is quite different to Server-side Rendering (SSR) of components and could result in significantly smaller client-side JavaScript bundles. I'm quite excited about the direction of this work, and while it isn't yet production ready, is worth keeping on your radar.
- 3
Hashnode·5y
4 Front-End Trends and 1 Loser - 2021 Edition
Svelte has been around for a few years, with the latest version (3) shipping in 2019. It has over 39K stars on GitHub, but it’s not widely used in bigger projects. Remix is a React- and Node-based full-stack framework that brings you state-of-the-art web development.
- 4
- 5
- 6
LogRocket·5y
HTML tags every frontend developer should know
semantic HTML adds the right context to your site’s content, which improves the user experience significantly. With the increasing focus on JavaScript frameworks and libraries, many developers have placed less priority on HTML. We’ll show you what each tag does and how you can use HTML to streamline the development process.
- 7
- 8
DevDojo·5y
12 Must Have Browser Extensions for Developers
Google Chrome extensions are programs created by different developers that change your browser's functionality. Whether you are a Web Developer or not, thousands of different extensions can help you. In this post, we are gonna take at you some of the most useful extensions. Some of these extensions are going to be of help to you even if you are not a Web developer.
- 9
CSS-Tricks·5y
How to Use the Locomotive Scroll for all Kinds of Scrolling Effects
Locomotive Scroll lets you perform a variety of scrolling effects, like parallax and triggering/controlling animations at scroll points. It works primarily through specific attributes in the HTML. Elements with these attributes trigger event listeners in JavaScript when they are in the viewport, then apply CSS transform values as inline styles. It’s pretty plug-and-play like that.
- 10
Smashing Magazine·5y
A Practical Introduction To Dependency Injection
Dependency Injection is a technique whereby an object receives other objects it depends on, called dependencies, rather than creating them itself. This article is the first part of an upcoming series that provides a practical introduction to Dependency Injected in a manner that immediately permits you to realize its many benefits without being hampered down by theory.
- 11
How to Create a Favicon That Changes Automatically
I found this Free Favicon Maker the other day. It’s a nice tool to make a favicon (true to its name), but unlike other favicon generators, this one lets you create one from scratch starting with a character or an emoji. Naturally, I was curious to look at the code to see how it works and, while I did, it got me thinking in different directions. I was reminded of something I read that says it is possible to dynamically change the favicon of a website. We’re going to do exactly that in this article and it will work with plain JavaScript.
- 12
Hacker Noon·5y
I Got a Job as a Developer at 16, and You Can Too
Vlad Pasca started coding at 15 in Python and then switched to web development. He learned HTML and CSS from Freecodecamp and built a few front-end projects. He was able to build responsive websites using media query in CSS and this helped him get the job. He told a start-up developer on Reddit that he was looking to work on some projects during the summer.
- 13
Continuous Performance Analysis with Lighthouse CI and GitHub Actions
Lighthouse is a free and open-source tool for assessing your website’s performance, accessibility, SEO, and more. The easiest way to use it is through the Chrome DevTools panel. In this article, we’ll go over how to set up Lighthouse CI and run it locally.
- 14
Converting and Optimizing Images From the Command Line
Images take up to 50% of the total size of an average web page. If images are not optimized, users end up downloading extra bytes. The idea is to optimize images before we serve them so that users get the most visually awesome experience without all the byte bloat. In this tutorial, we will write bash scripts that create and optimize images in different image formats.
- 15
Creating Browser Mockups in TailwindCSS
Learn how to create multiple browser mockups in this quick tutorial in TailwindCSS. We'll create the header by adding a rectangle with rounded top corners. We can then create a dark mockup using the same color techniques as the light mockup. Of course, we can create different variations of browser mockup by changing the colors.
- 16
- 17
ITNEXT·5y
Build An App That Books Vacations To The Moon with GraphQL, Lambda, DynamoDB, Serverless Framework…
Learn how to make a bleeding edge fullstack application with the following toys: AWS Lambda, DynamoDB, Serverless Framework, Vue, React and Tailwind CSS. This project was hugely inspired by the folks over at Anomaly Innovations who created the Serverless Stack. The wait is over! Get it for Free!
- 18
DZone·5y
Building Charts Using C3.js
C3.js is D3 based JavaScript based chart library. It can be used to create visualizations using SVG, HTML, and CSS. C3 provides a variety of callbacks to access the state of the chart. By using these APIs and callbacks, you can update the chart, even after it is rendered.
- 19
DEV·5y
Micro Frontends Patterns: JAMstack
JAMstack is an architecture that combines JavaScript, APIs, and Markup. It eliminates the need to make a round trip to the server side for each screen transition. SSG provides flexible markup generation at build time. SPA can be said to be an indispensable part of JAMstack. Next.js has a feature called Incremental Static Regeneration.
- 20
Netlify & Next.js
Next.js is a React-based framework that runs on Netlify. It lets you do static-file rendering by default, and server-side rendering if you need it. The most compelling thing about Next.js, to me, is how easily it supports the entire rendering spectrum. It’s a darn nice framework to do it with.
- 21
gitconnected·5y
Testing PWAs on mobile devices during development
Progressive Web Applications (PWAs) are web applications that use emerging web APIs and modern technologies. They can be installed on your phone or PC, and even be distributed through App Stores. PWAs can only be served over Secure Contexts (HTTPS) The HTTPS restriction isn’t a problem but makes testing the PWA difficult. In this blog post, I will explain two methods which will help you test your PWAs on your mobile device.
- 22
My Web Development Study Plan For 2021
As 2020 is coming to an end, I have been reflecting on how much I have learned this year. The things I want to learn generally fall into the following categories:Fundamentals and getting better at things I already know and use. Getting more familiar with backend tools like Docker and Docker Compose.
- 23
JavaScript in Plain English·5y
Getting Started With Next.js + Storybook
Next.js (v10) works with Storybook. Here's how to get started with Next.js + Storybook in your project. The tutorial assumes that you already have an existing next.js project up and running. The storybook service offers a ton of cool features including something called UI Review.
- 24
Deploying a Serverless Jamstack Site with RedwoodJS, Fauna, and Vercel
Redwood is a framework for serverless applications that pulls together React (for front-end component), GraphQL (for data) and Prisma (for database queries) By the end, you’ll get to dive into Jamstack and serverless concepts, but also hands-on experience with a really neat combination of tech.
