サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Pixel 9
ui.dev
Have you ever thought about why a specific piece of technology gets popular? Usually there's never a single reason, but I do have a theory that I think is one of the primary drivers. I call it The 5 O'Clock Rule. With The 5 O'Clock Rule, the level of abstraction for solving a problem will bubble up until it allows the average developer to stop thinking about the problem. Unfortunately, it doesn't
The Interactive Guide to Rendering in ReactTyler McGinnisUpdated April 26, 202310 minute read React, in its purest form, is a library for building user interfaces. It's so simple that the entire mental model can be represented as a formula, v = f(s) – where your view is simply a function of your state. Though this equation gives us a simple mental model for how React works, there's one aspect of t
Code Splitting with React, React.lazy, and React Router Check your versionThis post assumes you're using React Router v6. If not, find your version below.React Router v4React Router v5 If there's one stereotype of JavaScript developers that holds true more often than it should, it's the lack of care for large bundle sizes. The problem is historically it's been too easy to bloat your JavaScript bun
If you want to read a similar article but about Higher-Order Components instead, check out React Higher-Order Components There's two important things to note before we get started. First, what we're going to talk about is just a pattern. It's not really even a React thing as much as it is a component architecture thing. Second, this isn't required knowledge to build a React app. You could skip thi
There are two important things to note before we get started. First, what we're going to talk about is just a pattern. It's not even a React thing as much as it is a component architecture thing. Second, this isn't required knowledge to build a React app. You could skip this post, never learn what we're about to talk about, and still build fine React applications. However, just like building anyth
A tool for visualizing Execution Context, Hoisting, Closures, and Scopes in JavaScript.
A Beginner's Guide to JavaScript's PrototypeTyler McGinnisUpdated October 4, 201812 minute read You can't get very far in JavaScript without dealing with objects. They're foundational to almost every aspect of the JavaScript programming language. In fact, learning how to create objects is probably one of the first things you studied when you were starting out. With that said, in order to most effe
Server Rendering with React and React RouterTyler McGinnisUpdated September 10, 202114 minute read Check your versionThis post assumes you're using React Router v6. If not, find your version below.React Router v4React Router v5 In the beginning of the web, there were just documents with links between them. When a browser made a request to a server for a particular page, the server would find the H
Unfortunately, if you're using React Router v6, there's not currently a great story for adding animated transitions to your app. They're aware and are "going to have an animation API in v6" – though not sure when that's planned to be released. Once it's released, we'll update this post. If you're using another version of React Router, check out one of the following posts. Animated Transitions with
“I was a scrub before I discovered ui.dev. I used their Advanced JavaScript course to prepare for interviews and landed a job at Netflix. All their courses are bangers.” “I was lost in the React ecosystem until I took this course. It really helped connect the pieces I already knew. The pacing with each topic is great. I actually feel like I’ve accomplished something. Highly recommend for anyone wh
Often times when writing a function, you need to assign default values for arguments that weren't passed to the function when it was invoked. For example, let's say we were creating a calculatePayment function. This function has three parameters, price, salesTax, and discount. The purpose of this function, as the name implies, is to calculate the final price of a bill taking into account the initi
You’ve come to the right place. We make learning the JavaScript ecosystem fun, approachable, and easy...
For the record, asking someone these questions probably isn't the best way to get a deep understanding of their experience with React. React Interview Questions just seemed like a better title than Things you may or may not need to know in React, but you may find helpful none the less. What happens when you call setState? The first thing React will do when setState is called is merge the object yo
You won't get very far into learning React until you hear it – "React is declarative". But, what does that even mean? If you try to dive deeper, you inevitably come across a definition that looks something like this, comparing it to imperative programming. Imperative vs Declarative ProgrammingImperative programming is how you do something, and declarative programming is more like what you do. That
One of my main goals, whenever I'm teaching or writing technical content, is to maximize "aha" moments. An "aha" moment is a moment of sudden insight or clarity; when the subject matter suddenly makes sense. We've all experienced them, and the best teachers I know can understand their audience and adapt the lesson to maximize these moments. Throughout the last few years, I've taught React in just
The @media query is 1/3 of the recipe for responsive design. It is the key ingredient that, in its simplest form, allows specified CSS to be applied depending on the device and whether it matches the media query criteria. Before you start copying and pasting below, read why you don't need device specific viewports. If you're looking for details on the iWatch we've got you covered with getting your
Classic ReactStill using Class based React components at work? This is the course for you.
This week our feature podcast guest is Mr Ethan Marcotte, Father of Responsive Design. While getting the podcast page sorted I needed to source an image of Ethan and chose this lovely picture from Flickr by Jeffrey Zeldman. The image weighs in at 1,005,480 bytes (1mb) and is 2048x1151px in size. Let's look at what we can do to improve the size. Reduce the image dimensions First thing I did was red
When you first get started with Angular, you’ll naturally find yourself flooding your controllers and scopes with unnecessary logic. It’s important to realizeearly on that your controller should be very thin; meaning, most of the businesslogic and persistent data in your application should be taken care of or storedin a service. I see a few questions a day on Stack Overflow regarding someonetrying
How it worksAdd your URL to the input fieldClick GO (reloads the preview) or press Enter (reloads the page)Admire your good work
このページを最初にブックマークしてみませんか?
『ui.dev | JavaScript, but fun.』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く