Writing about JavaScript runtimes, compilers, developer tooling, and engineering leadership.
Mikeal Rogers passed away yesterday. We hadn't kept in touch nearly enough, but he had a profound impact on my life and was always very kind to me. One of my favorite tweets of all time was from him, when I gave a talk as a young kid about how cool Chrome DevTools were and the Chrome DevTools team showed up unexpectedly to watch. Watching @paul_irish watch a talk at @wafflejs about Chrome Dev…
# Introduction I've been coding in JavaScript for years, but recently started working on a project that required C++. The biggest mental hurdle? Pointers. If you're like me, coming from JavaScript or TypeScript, the concept of pointers can feel alien at first. In JavaScript, we create objects and arrays without thinking about where they live in memory: // JavaScript - create and forget const user…
I just realized it's been over a year since Kelly and I moved to London! It's been such an incredible year I figured I should write it all down before I forget. # The move We were nervous about flying our 4-month-old puppy across the country, so we decided to fly to Michigan first to visit family and reduce the total flight time. We packed up our Florida house, put most of our things in storage…
Using JavaScript to format numbers is a very common task. The cool thing is, there are a lot of new built-in methods that make JavaScript format number a lot easier. Let's take a look at three common strategies. # Format numbers with Regular expressions The first thing we can try is using Regular Expressions . We can take any number, cast it to a string and then use the replace() method to add add…
I've been doing Developer Relations for about four months now. It's been a lot of fun! I can already tell I've been learning and growing my career in some new ways. I've also been able to see how DevRel can help a company. I had a lot of misunderstandings about DevRel, and its role at a company. I want to explore those and speculate on some growth areas I see coming to the field. # DevRel is all…
Today at work I noticed a file had been deleted in our repository. I wasn't sure who deleted it or why it was deleted. I really wanted to figure out which GitHub PR removed the file so I could get some context! # An example To test this out, without revealing any of my work code, I created a new file named foo in this repo . Then I made a PR deleting that file and merged it into main. # Step 1:…
I've been thinking about server-side analytics vs client-side. The other day I Tweeted: https://twitter.com/jkup/status/1465780792940978182 I got a lot of different responses. Some folks prefer server-side and some prefer client-side. Most are unhappy with both! Some folks are upset that ad-blockers make it difficult to get good data. Other folks are finding clever ways of getting around…
Humans fear being replaced by technology. Although it has happened with switchboard and elevator operators, bowling alley pin boys, and data entry people, it's more common that technology assists employees instead of replacing them. Let's look at some technology getting significant investments and how I see it helping workers instead of replacing them. We hear new technology will be the death of…
So you want to add Google Analytics to a website that has a Content Security Policy ? Well you are in for a treat! The problem is that having a good CSP locks your site down. That means scripts, CSS, fonts, etc cannot connect to outside sources unless they are specified as ok by your CSP. In short, you can grab the CSP below if you'd like to just move right along. It should allow everything you…
https://twitter.com/jkup/status/1453410224119898123 I'm obsessed with WebPageTest . It's such an amazing free resource and I use it to measure every project I build. When I first moved this website over to Cloudflare Pages (literally my first day at Cloudflare) I was sad to see it get a FAILING grade on WebPageTest. https://twitter.com/jkup/status/1424916560980979728 It was getting A's across the…
It's pretty hard to miss the news on NFTs these days. They are a polarizing trend. Every day, it seems like there is an article of someone spending 2 million dollars on a pixelated monkey with a crown. Knowing so little about them, I had a million questions. Are they a scam? Are people seriously paying that much money for some pixelated art? Can't you just right-click and Save As? What about the…
# Chrome DevTools Console Drawer Have you ever accidentally hit the escape key while using the Chrome DevTools? And that little bottom drawer pops up with another console. And you're like, what the heck is this thing? If so, then you've encountered the "Console Drawer." But, what exactly is it? And what secrets does it hold!? Here is a list of 6 things you can do with the Console Drawer. # 1. View…
I was trying to break Cloudflare Workers tonight and did a search for "CPU intensive JavaScript" because I'm really good at my job. This gist popped up with the following code: function mySlowFunction ( baseNumber ) { console . time ( "mySlowFunction" ) let result = 0 for ( var i = Math . pow ( baseNumber , 7 ) ; i >= 0 ; i -- ) { result += Math . atan ( i ) * Math . tan ( i ) } console . timeEnd…
Introduction to cryptocurrencies I recently went down a bit of a crypto rabbit hole. I've been aware of Bitcoin since 2014, but I didn't truly understand it, and I had no idea about all the newer things in the space. Some questions I had when starting: What are exchanges? What is a wallet? What is mining? Are all cryptocurrencies terrible for the environment? How do taxes on crypto work? What is a…
I saw a tweet from @nader about him creating Developer DAO yesterday. I don't know much about them, but it sounded interesting. Here's how I joined and what I learned so far! https://twitter.com/dabit3/status/1433879106119208966 # Joining Developer DAO In his tweet, he links to an etherscan URL which shows all of the tokens for this DAO. To "join" the DAO, you need to purchase a token. Sounds…
I'm finishing up my 4th week at Cloudflare and my 4th week as a Developer Advocate. Cloudflare has been amazing! I'm working with one of the friendliest and most excited groups of people ever. We have excellent products, an ambitious roadmap, a healthy culture, and I couldn't be more excited for the next year! Developer advocacy has also been amazing. It's quite a bit different than I expected it…
Ah, the dreaded coding interview. Hated by so many, and with good reason! I've been working in tech for 12 years, so I've been both the interviewer and interviewee many times. Honestly, I think the tech interview process has significantly improved in the past few years, but it still has a long way to go. I've also come to terms with the fact that interviewing is seriously difficult. At different…
Lately, there has been a trend of brand new startups in the developer tooling space, and I couldn't be more excited. # Funding open source is hard For years folks have been struggling to get funding for even the most foundational of projects. A few projects like webpack and vue.js have managed to get some recurring money, but most projects struggle. Recently a few projects have secured VC funding…
Design systems are great. Working at large companies like Adobe, it's easy to quickly build functional UIs using a robust design system and component library like React-Spectrum . # Terminology For this post, I'll be referring to the collection of icons, images, fonts, color schemes, and general guidelines as a design system and the actual collection of JavaScript, HTML, and CSS as a component…
It's been an exciting few months for the JavaScript tooling ecosystem. I've never been much good at guessing what's coming next, but there are a lot of projects that have me very excited. First, Snowpack launched. Now that JS has a proper module system , you can literally just export and import components with no need for a bundler in modern browsers. Snowpack takes advantage of this by skipping…
I've started a lot of blogs. Like, a lot. For myself, for friends and family, for companies. Most of the time, the analytics for these blogs look something like this: As you can see, the large majority of the traffic only ever visits your homepage. So why is it that we fill our homepage with generated content? Think about a generic WordPress theme. The main section of the homepage is populated…
A bit of personal news, today is my last day at Adobe. I've had such a fantastic run at Adobe. The people are just incredible. I got to work on so many cool products across the Creative Cloud. I worked on web apps, desktop apps, services, shared components, contributed to our design system and helped lead three amazing projects. So, why am I leaving? For the first time in my career, I'm struggling…
Online node js editors have come a long way in the last few years! A few years ago, I would have recommended against using an online editor. I would have said you should install Node js locally instead. But that's no longer true. Out of all the node js editors, there are two clear standouts. # Replit # Replit is: A free, collaborative, in-browser IDE to code in 50+ languages — without spending a…
JavaScript has a vast ecosystem. Someone asked me on Twitter yesterday, what is the difference between jquery vs. node.js? They are very different technologies! It helps to take a step back and look at the entire JS ecosystem to explain the difference. To make things even more complicated, JavaScript can run in the browser, on the server, or even on embedded devices! Running in so many different…
If you're looking to find stable node versions, head over to nodejs.org and look for the button on the left side. That will always point to the current LTS (Long Term Support) version which you can download. LTS versions of stable node mean they will get critical bug fixes for 30 months . You can read more on the node.js releases page which says: Major Node.js versions enter Current release status…
Looking to get react version from one of your apps? You have a few different options! # Get React Version in code If you're already in the JavaScript, you can print the current React version by doing: import React , { version } from "react" console . log ( version ) This also works with the require syntax: const React = require ( "react" ) const version = React . version console . log ( version )…
Want to learn how to update node js? It really depends on how you installed it in the first place! Let's look at your options: # Option 1 (recommended) - NVM The absolutely best way to install node js (and update node js later) is to use the Node Version Manager . This will work even if you already have Node js installed some other way. You can just open up a terminal and run: curl -o-…
If you're looking for the JavaScript if else or if, else, else-if syntax - look no further! if ( 1 + 1 === 2 ) { // This one will log console . log ( "Inside the if condition" ) } else { console . log ( "Inside the else condition" ) } If you want an if, else, else-if condition in JavaScript it looks like: if ( 2 + 1 === 2 ) { console . log ( "Inside the if condition" ) } else if ( 2 + 1 === 3 ) {…
I've been using webpack bundle analyzer a lot lately. Over the past few days, it started to feel a little sluggish when I would refresh. I remember when I first launched this version of the site on Gatsby and Netlify it felt lightning fast! # Measuring Gatsby Page Performance with Webpack bundle analyzer Before I started diving in, I just wanted to see if I was correct that it had slowed down. I…
I spent a lot of Sunday... ok pretty much all of Sunday setting up Webmentions on my Gatsby site so when people Tweet about my blog posts they show up like comments! https://twitter.com/jkup/status/1360786533280800775 There are already quite a few articles on how to do this but I still got pretty stuck along the way so I figured I'd write another one. # TL;DR Make an account at webmention.io .…
I added Webmentions to my site today! If you tweet about this page or reply to my tweet about it, you should show up in the comments section! Everything might be broken so bear with me 😅
I had an awesome meeting with my mentee today and we covered a lot of great stuff! My awesome mentee : Can we go over async await tomorrow? Me : Absolutely! My awesome mentee : Actually, maybe asynchronous code in general? Me : Let's do it! # A need for async A situation a lot of new devs find themselves in is something like this: I have two things. I want the second one to start only after the…
Before we get started, give this bad boy a hover. It all started 8 months ago... I was re-designing my website and found this page with a bunch of amazing CSS hover effects for links. # The Problem I started looking into them and they all have one thing in common. They all require multiple elements to animate. This is unfortunate because I use which renders documents. So I author my pages like: ##…
A few days before Christmas I found this amazing Twitter thread: https://twitter.com/polina_marinova/status/1342213858795118592 It's a list of 10 questions that did, in fact, spark interesting dinner conversation! We had a few family members over (our quarantine pod during COVID) and we went through the list together! One of the questions that stood out to me was:…
I've always been interested in political Twitter. At the time of this writing, the Twitter account with the most followers is President Barack Obama 's with a staggering 126.6 million followers. With the 2020 election being dramatic and so drawn out, I found myself wanting to Tweet a lot and I'm always terrified of losing followers so I decided to make a brand new account just to Tweet about…
This is mostly a list for myself, but I thought it might be fun to share. I want to learn a lot more about parsers and compilers. Here is my current "To Learn" list with courses, videos and books (in no particular order)! Compilers: Principles, Techniques, and Tools Language Implementation Patterns Writing An Interpreter in Go Writing A Compiler In Go Crafting Interpreters Game Programming…
As I was going through rebuilding my blog , I spent a lot of time looking at other people's sites trying to get inspiration. Below is a list of my absolute favorite blog designs and my favorite thing about them. # 1. joshwcomeau.com What's not to love about this website? It might be my favorite personal blog design of all time. # Things I love about joshwcomeau.com Light / Dark mode toggle Amazing…
I have a little bit of a problem. https://twitter.com/jkup/status/1252322493072920577 # My Problem There are really two parts to my problem. On the one hand, I love new technologies, blogging platforms are getting better at such an exciting pace and it's so much fun to explore them! On the other hand, I want to be blogging more and I love to procrastinate by redesigning my blog. # The Contenders…
Yesterday, Patreon announced that it was laying off 13% of its workforce. It's not particularly surprising news. With most cities sheltering in place and so many people out of work, the tech industry has not been immune. A quick glance at layoffs.fyi will show that many startups are falling on hard times. Most of the companies facing hard times are in industries most affected by Coronavirus…
I've been working on rebuilding my website. I found this awesome font called Wotfard while browsing Josh W Comeau 's site. # My first attempt I wanted to add it to my new site so I added this to the top of my global.css file. @font-face { font-family : "Wotfard" ; src : url ( "/fonts/wotfard-regular-webfont.eot" ) ; src : url ( "/fonts/wotfard-regular-webfont.eot?#iefix" ) format (…
When I was just starting in tech, every job was brimming with people smarter than me! I couldn’t imagine anything better. I was young, new to programming and so eager to learn. As the years went by, I did pretty well for myself. I was lucky enough to work at several great tech companies such as Twitter, Brave, and Adobe. Eventually, I was promoted to Senior Software Engineer and even put on a few…
Losing weight, running a marathon, learning to code, saving money. These are important goals many of us share. They are also goals that, for the most part, cannot be achieved in a short amount of time. So many of us crave instant gratification. Perhaps me more than most. As I get older, and more and more of my goals involve long term dedication, I struggle with working so hard for something and…
Today we’re going to learn how to manually suspend a React Component by using the React DevTools. Let’s start by using create-react-app to make a very basic Hello World. Open your terminal and type in the following: npx create-react-app suspense-demo cd suspense-demo npm start That should open a new tab in your browser and you should see the Create React App welcome page, which looks like this.…
I’m a pretty big UFC fan. I like to watch older fights and for that reason I have a subscription to UFC Fight Pass. A few months ago they did a website redesign and among other things changed their URL from UFC to UFC Fight Pass . When this redesign launched my password manager stop recognizing it and when I couldn’t log in I went through their “Forgot my password” flow. I entered my email address…
At the end of December I moved from San Francisco to Florida (of all places) and started working remotely for Adobe. It’s been quite a transition, moving across the country, buying a house and starting to work remote. I figured while it’s still fresh in my head I’d document some of the pros and cons I’ve found so far! # Pros # More focus time Working for a West Coast tech company from the East…
If you work with software, you experience bugs. If you work with cloud software, sometimes those bugs cause outages. Every job I've had has some approach to "dealing" with outages. There's usually some form of an on-call person. Maybe there is an Operations team to help organize (paging the on-call, getting other teams involved, deducing root cause, writing up a report). This is great because if…
There are a lot of great libraries for managing immutable state in your web apps. Redux and Immer are two great examples. When workings with libraries like these, you often need to create functions that take in the current state object and a piece of new data and return a new state object for which the only difference is the piece of new data. Let's look at a quick example: const state = { users :…
I've been reading this fantastic book called "Crafting Interpreters" lately by Bob Nystrom. It talks about the different types of programming languages. We can think about all compilers as falling into three categories. Compilers that output machine code. Compilers that output bytecode and need to be interpreted. Compilers that output an intermediary format and then hand it off to another…
Yesterday, I converted my site to 11ty. I decided to use their base blog starter and when I did, I noticed this cool UI they have for listing your posts. When I went to change the styling, I noticed that these numbers get added, entirely with CSS! Let's take a look at how they do this. This works by combining CSS counter increment with CSS counters . All you have to do is this: < ol class = "…
I've been using Gatsby on my site for ages. I enjoy using it. It's pretty easy to get up and running with, it loads quickly, and it comes with some great plugins like this one for optimizing images . It deploys easily and has all the benefits of a static site (you don't have to worry about maintaining your own databases or servers). The thing is, though, there's a lot to it. There's no way of…