This week we recommend you to start with a question: "Tiny Components: What Can Go Wrong?" and seek for an answer with Scott Domes. Discover how using the Single Responsibility Principle can help you to build better apps.
Next story will mostly be interesting for React developers, but others may learn a lot from it as well. Explore "How to Build a React Progressive Web Application (PWA)" by Chidume Nnamdi.
We can recommend another interesting article for React developers that would like to experiment with TypeScript, "Why and How to use TypeScript in your React App?" by Mahesh Haldar.
Using the Single Responsibility Principle to build better apps The advantage of the component system in React (and view libraries like it) is that your UI gets split into small, digestible, reusable chunks. Each component is usually compact (100-200 lines), a size which is easy for other developers to understand and modify.
Authored by: Scott Domes
A deep, comprehensive guide with live code examples If you aren't talking about PWAs you are seriously missing out. PWAs in recent years has grown to be the most adopted optimization trick in the software industry. Not only optimization benefits but a plethora lot of goodies: Progressive enhancement: It works for every user no matter the browser choice of the user.
Authored by: Chidume Nnamdi
Originally published at coreycleary.me. This is a cross-post from my content bl...
Authored by: Corey Cleary
If you're into web development I'm betting that you've heard or read something like "React vs Vue vs Angular" comparison. It's just so common that you can't get around it. These MVC frameworks and UI libraries have become so popular that you can compare them to the jQuery level of popularity from a couple of years ago.
Authored by: areknawo
Note: This article was originally written for my personal blog. I am republishing it here for the DEV community. Server side rendering, abbreviated to SSR, is a commonly misunderstood concept. What is it, and why should you bother learning it? I hope to answer those questions with a story on the origins of server side rendering.
Authored by: Sunny Singh ⚡️
Authored by: Rajat S ⌨️
Authored by: Mahesh Haldar
How to write end-to-end tests in Cypress.io is a question that comes up again and again. Here is what you need to do step by step if you are using WebPack already. If you don't want to follow step
Authored by: Gleb Bahmutov
Ben Nadel explores the creation of a simple component-based SVG icon system in Angular 7.2.0. This approach uses the Webpack loader, "svg-sprite-loader", to automatically extract and embed an SVG Sprite which is then referenced by his AppIconComponent to create dynamic SVG icons.
Authored by: Ben Nadel
Starting with iOS 10, Safari on mobile (iPhone and iPad) started allowing developers to autoplay videos inline provided the video you are trying to play meets certain conditions. Before that, your video would not auto play inline, and when it would play, it would play full screen only.
Authored by: Abou Kone
In order to be deemed as a capable developer, you need to be able to manipulate the data of any app that you are building. This means that you need to know how to write some data into your app...
Authored by: Rajat S ⌨️
Collect an email to confirm, send the user a link and then update the database to confirm when the user clicks the link. To be able to pull it off we are going to need to wire up a full stack MERN...
Authored by: Bit
A direct API to methods we access on Component class instances. This means we don't need classes to create stateful components 🎉 A big sell for hooks is how we can extract, share and test that stateful logic. You may be familiar with Higher Order Components and props.
Authored by: codeburst.io
You're probably getting tired of reinventing the wheel like me whose always coding a validation check in each field whether it follows the correct format like emails, or whether first and last names have values in it. What's worse when you're using React and you're just a first-timer in the ecosystem, you have the tendency to think of form validations the React way.
Authored by: Sonny R. Recio
Let's talk about user interactions with the UI, specifically about mobile ones: Dragging, swapping, pinching gestures are natural in mobile apps nowadays. It's not trivial to handle them well, but they really make UIs outstand when done right. With react-native we gained an abstraction layer that allows us to tackle the problem with the same code for iOS and Android.
Authored by: Bit
I was intrigued after watching Peter Tichy's video tutorial in which he recreates the interactive animation of this website. I decided to build the same but with the hot new tech like React Hooks, CSS custom properties, clip-path and CSS Modules.
Authored by: Aditya Agarwal
Authored by: Dwayne Charrington
Authored by: Nic Raboy
Ben Nadel considers the topics of Dependency-Injection (DI) and Inversion of Control (IoC) in a Vue.js application. And, explores the use of a "service barrel" to create a de facto Dependency-Injection container that allows for more flexible services with much lower coupling.
Authored by: Ben Nadel
Logging is an important part of supporting the complete application life cycle. From creation to debugging to planning new features, logs support us all the way. By analyzing the data in the logs, we can glean insights, resolve bugs much quicker, and detect problems early as they happen.
Authored by: Stackify
Authored by: Alberto Gimeno🍺
This article was originally published on the Okta developer blog. Thank you for supporting the partners who make SitePoint possible. If you've done any web development with Node in the last few years, you've probably used Express. Even if you haven't used it directly, many frameworks meant to make web development even simpler are still built on Express.
Authored by: SitePoint
Libraries and Tools
When dealing with a lot of records it is essential to create a way in which clients can specify how many they wish to obtain exactly. Returning records in chunks as opposed to dumping it all at once saves a lot of bandwidth and processing power.
Authored by: Maciej Cieślar
As one advances through a Software Development career, concerns beyond simply writing code that works arise. In the world of web development, it becomes pertinent to not only build functional software but to also make them highly performant such that they are able to seamlessly deliver the desired experience while utilizing minimal resources.
Authored by: Scotch Development
In this article, I want to show off the flexibility and real power of amCharts 4. We're going to learn how to combine multiple charts that run together with animations that form a movie experience.
Authored by: Antanas Marcelionis
Authored by: Sarah Elson
A tutorial on how to draw a large number of particles with Three.js and make them interactive. This tutorial is going to demonstrate how to draw a large number of particles with Three.js and an efficient way to make them react to mouse and touch input using shaders and an off-screen texture.
Authored by: bruno imbrizi
azu Jan 19 ・2 min readJest is useful tool for snapshot testing. Snapshot testing is used in many library. For example, prettier use snapshot testings. I want to write snapshots testing without Jest. In such a case, I often use following template code. For example, following code work on Mocha.
Authored by: The Practical Dev
This article was originally published on the Okta developer blog. Thank you for supporting the partners who make SitePoint possible. During the past 10 years or so, the concept of REST APIs for web services has become the bread and butter for most web developers. Recently a new concept has emerged, GraphQL.
Authored by: SitePoint
A React with Firebase tutorial on how to work with Firebase's realtime database in React. Learn about the get, create, update and remove operations, how to enable pagination and how to order your list of data, and how fo associate items with each other ...
Authored by: Robin Wieruch
Authored by: Craig Buckler
Recently I was reviewing a sample project at work for a potential engineering candidate and was completely blown away by the prompt I was presented with from the command-line script. I was given a list of items to pick from and was able to arrow through them (as well as use j and k) and it was just magnificent.
Authored by: Alligator
Today we continue using Postgres with Express and Typescript. Since Postgres is a relational database, relationships are an essential part of working with it, and we cover it today. To handle it we use TypeORM. The code for the tutorial is in the express-typescript repository in the postgres branch.
Authored by: Marcin Wanago