はてなブックマーク

Is this the beginning of the next revolution for JavaScript Framework? Apparently, YES! Photo by JC Gellidon on UnsplashThe paradox in web development is that more JavaScript is required to implement the features that your customers desire. However, less JavaScript is required to make your site load fast. As a developer, you will always be crushed in the middle trying to strike a balance between t

So it all started when I came up with the idea for an app that helps parents get their kids ready for school. I’m a dad with 3 kids and I was annoyed by the fact that at work I have dozens of powerful tools to organise and manage my team. But at home to get the kids ready for school, I have nothing. It was chaos. So I thought… why not build a todo list for kids? I could make the UX look like a gam

Learning React and being able to develop enterprise-class applications with React are two different things. There are two main reasons for that. First, there is a huge ecosystem of different modules you need to master. Second, this ecosystem changes every year. The last time I presented the enterprise React tech stack was two years ago. As you will see, there are not many modules from that tech st

React is a powerful tool for building your frontend applications, but at scale navigating the hierarchy of your components may be painful. Sapling aims to change that. Photo by Jan Huber on UnsplashModern React applications are huge. Facebook is built with more than 50,000 components. Even the parent-child relationships and the passed-down props of fairly simple apps can become unintuitive to mana

JavaScript is one of the most loved and hated language in the world. It is loved because it is potent. You can make a full-stack application by just learning JavaScript and nothing else. It is also hated because it behaves in unexpected and upsetting ways, which, if you’re not invested in understanding the language, might make you hate it 💔. This blog will explain how JavaScript executes code in

Raw Text Extraction alone isn’t enough For automating financial insights. You need to preserve tabular data.

In the JavaScript world, the term tree-shaking refers to the removal of dead code. But this terminology is not limited to JavaScript, the word “tree-shaking” comes from Lisp Community in the 1990s. Thanks to Axel Rauschmayer, who turns himself into Indiana jones and find the exact origin of this word on Twitter. When I first heard about this topic, I was so excited to learn about tree-shaking. So

An overview of 5 modern advanced React patterns, including integration codes, pros and cons, and concrete usage within public libraries. Like every React developer, you’ve probably already asked yourself one of the following questions : How do I build a reusable component to fit with different use cases?How do I build a component with a simple API, making it easy to use?How do I build an extensibl

A month ago, I published Your PWA is going to break in August 2021 to help developers deal with the then-upcoming changes in Chrome 93 that popped up in everyone’s browser console “Page does not work offline. Starting in Chrome 93, the installability criteria is changing, and this site will not be installable.” Google is backing offGreat news! A few days ago, Google decided to pause their plans. A

Photo by Campaign Creators on UnsplashI’ve been developing websites for years, and I don't believe that keeping the tools that I use to myself will give me a strong advantage in the job market competition. I know how web development can be really frustrating, but we can make our jobs a little faster and quicker with the help of online tools. So I’m happy to share the tools that I use that make my

⚠️ Important: Read the comments I left on the code. They might be useful to understand why I did some things. Also in the comments I leave the path of where the files will reside.This is just a way to structure your project folder and files. You can even use something simpler than this.⚠️ Note: I’m going to divide this article into two parts: The Hexagonal Architecture and the Atom Design Methodol

Photo by Danny Howe on UnsplashI hope this article shares some light on how to build better React components leveraging TypeScript. This post is an outcome of the efforts of building taggr, the privacy-focused AI gallery. While building taggr, I got deeper into TypeScript, and so far I am loving the added capabilities for annotating types and catching errors at compile time, instead off at runtime

JavaScript SEO is part of technical SEO (Search Engine Optimisation) that seeks to make JavaScript-heavy websites easy to crawl and index, as well as search-friendly. If you’re building a website or web app using JavaScript, you should take a few basic steps to make sure your content is discoverable by search engines. Let’s look at a few SEO techniques to help users find your content. 1) Describe

GraphQL is an alternative to REST. It’s new and obviously. have some benefits over traditional REST API. Today we will see how we can build a simple full-stack GraphQL application. Pre-requisitesTo follow along you have to have a basic understanding of how a normal HTTP server works and some knowledge about ReactJS. You don’t have to be an expert in either of these. Building the BackendFirst, we c

Photo by Vishal Jadhav on UnsplashHooks are a pattern, not something usable with React library only, and this post would like to explain, and walk through, some interesting possibility. What are hooks?Hooks are nothing more, and nothing less, than a wrap around a generic callback. The callback itself is not a hook, unless it’s being handled by a hook-helper, in this case provided by µhooks library

Credit: gfycat.comProgrammers code all day, debug all night and go through thousands of code lines. But it doesn’t mean programming is what they all know and good at. They all have a sense of humor that can make us all laugh even if we’re not a programmer. 1. When programmers work round the clock

useEffect is a powerful tool, but you need to use it with a clear understanding of how it works. Otherwise, you could end up in a disappointing situation where some unexpected bugs appear that are really hard to debug. Returning a Promise instead of a function in useEffectThe first mistake I would like to talk about is that useEffect expect you to return undefined or a cleanup function. But if you

A better UX without too much heavy liftingWhen dealing with long forms (think medical forms, profiles, etc), it’s a huge UX improvement to allow fields to auto save as a user fills them out. Auto saving fields on blur sounds like a lot of extra work over a single submit button, eh? Not to worry, we are going to build one in 10minutes using Semantic UI React component library. If you want to skip t

Photo by Steve Johnson on UnsplashAn abstract class in TypeScript is defined by the abstract keyword. It’s meant to be derived by other classes and not to be instantiated directly. The example below has the BaseLogger, which is an abstract class that enforces derived classes to implement its abstract methods. abstract class BaseLogger { abstract log(msg: string): void }// Error! Non-abstract class

Photo by Morning Brew on UnsplashOkay, now for some reason, you’ve finally chosen Chrome as the browser you’re developing for. Then you open Developer Tools and start debugging your code. You sometimes open the Console panel to examine the output of your program, or the Elements panel to check the CSS code for DOM Elements. But do you really understand Chrome DevTools? In fact, it provides many po

Image of two monitors with code in their screensIn this article, we’re going to review some of the latest features coming with ES2020. Some of them are: Private Class VariablesPromise.allSettledString.prototype.matchAllOptional Chaining OperatorDynamic ImportBigIntNote: All examples have been tested in Chrome version 79 Private Class VariablesBy adding a simple hash symbol in front of our variable

JavaScript is a single-threaded language, to perform large computation & operations, the preference will be multi-threading. We can achieve multi-threading in JavaScript with the help of HTML Web Workers API. A web worker is a JavaScript that runs in the background, independently of other scripts. To know more about web workers please read here How did it start?Back in 2015, I was working on a pro

Is Deno the new Node.js? Or is it just a nice alternative? In this article we will go into some important differences and features — have fun! The main differences between Node.js & Deno:Deno uses Rust under the hood, but also the V8 engine, just like Node.js.Deno supports TypeScript out of the box. It can also deal with JavaScript, without any problem, out of the box.Deno does not support NPM pac