So you've come to a point where you want to build nice CLIs. There's a few different options for building CLI's. My two favorites are oclif and commander.js. I tend toward leaning to commander, unless I know I'm building a super big app. However, I've really enjoyed building smaller CLIs with commander recently.
Dynamically changing the site-theme meta tag
So, incase you are unfamiliar, there is a meta tag called <meta name="theme-color" content="...">
that is used to change the color of the navbar on desktop safari, mobile safari, and mobile chrome. If you don't set a value these browsers tend to find a color that match the site to the best of their ability. However, sometimes even setting the value can cause the site to look ugly.
How to host a javascript monorepo on Heroku
So I've been using monorepos for some time, and recently I've gotten a lot of questions about how to host them on Heroku. I figured I'd give you the simple guide. There are two basic scenarios. The root of your git repo has your yarn/npm workspace, or you have a folder inside of a gitrepo you wish to use.
Building a remote cache server for Turborepo
Turborepo is a tool that came across my virtual desk recently. Monorepo develoment has been around for a long time. This is a strategy where all of your code remains in one repository regardless of services. A lot of people use monorepo's even for microservices. The huge upside is to keep everything in one place, which allows for development efficiency, such as grepping an entire codebase for specific keywords. A quick example would be a top level directory which has child directories that each contain an npm package, unlike publishing these packages, you access them locally as though they were published.
Optimizing heroku's node_module cache for JS monorepos
For many of us a JS workspace is the simplest way to structure code for future growth while providing very quick iterations. Incase you are unfamiliar, several technologies exist such as yarn workspaces
, lerna
, npm workspaces
, etc. That can seamlessly stitch npm packages on disk as though they were published to a private NPM registry. This allows for fast iteration inside of a single git repo, while allowing a future where these dependencies could be abstracted.
5 web perf tips for 2019
As more and more of the world is getting online, a larger part of the internet community is using the internet on lower powered devices. Making websites fast is becoming paramount. Here are 5 tips to improving you web page's performance
Must have vscode plugins for front-end devs
I've had a lot of people ask me about my choice of editors, and plugins. A while back I switched to vscode for all my programming work, for both front and back end. In the past I've blogged about the best plugins for visual studio as a backend dev, but I thought I'd give you a more front-end angle
Compressing images with tinypng's CLI
Ok so I'm really lazy, and I honestly think that has helped me a lot in this industry. I always try to work smarter, not harder. I take many screen shots for this blog, and I need to optimize them. Incase you didn't know many images are often larger than they need to be slowing the download time. However, I don't ever want to load them into photoshop. Too much time and effort!
Rebuilding this blog for performance
So many people know me as a very performance focused engineer, and as someone that cares about perf I've always been a bit embarrassed about this blog. In actual fact this blog as it sits now is fast by most people's standards. I got a new job in July, and well I work with an absolute mad lad that is making me feel pretty embarrassed with his 900ms page load times. So I've decided to build my own blog engine, and compete against him.
Measuring, Visualizing and Debugging your React Redux Reselect performance bottlenecks
In the battle of performance one tool constantly rains supreme, the all powerful profiler! In javascript land chrome has a pretty awesome profiler, but every-time I looked into our react perf issues I was always hit by a slow function called anonymous function
Deploying a react app to azure blob storage websites with azure devops
Back in August of this year Microsoft announced static websites for azure blob storage. So this is the same feature AWS' S3 has had for years. Essentially make a blob storage folder public, and redirect /
paths to /index.html
internally. Also, register 404 pages. Before we had this we use to deploy our files to App Service
or do some weirdness with functions to rewrite urls. For static pages this can really bring costs down in the cloud
The battle of the bulge. Visualizing your javascript bundle
So incase you havn't been following me. I joined Cargurus in July. At cargurus we're currently working on our mobile web experience written in react, redux and reselect. As our implementation grew so did our time to first paint.
Writing an animated flyout hamburger menu
So I'm currently sitting on a plane at the moment. A recent project I started on was a travel guide where I live. Being on a plane without wifi for a long time is a quick wakeup to me how much I rely on the internet to code.
How the ASP.NET team made the web framework I have always wanted
So I know I do a lot of blogging about C#, or JavaScript, but I actually do a lot of nodejs apps as well as other languages. For a very long time I have not found the stack of my dreams. .NET has always been very close but there were multiple things about the app model that I was not a fan of. I think NancyFX has been the closest framework to my dreams in .NET land.
Navigating the JavaScript waters in 2015
In this last year I have done much more JavaScript development than I have before. The landscape, and tools have exploded over the last few years. Gone are the days of JQuery widgets, and come forth have advanced virtual dom libraries, JavaScript servers, and multiple package managers. Along with new language features.
Getting SquishIt to work with Nancyfx and Razor (...and other static content issues)
SquishIt is a content bundler and minification tool. The github documentation contains exaples how to install and use it, and a sample application is provided. However I had some issues getting it to work with razor so I figured I would share these pain points with you.
Capturing Client Side JavaScript Errors
Capturing client side errors in my opinion is really good. For starters you can troubleshoot your client side implementation, but you can also make sure a js change did not break certain pages.
Below is a really simple, yet effective way to capture errors. Eventually you may want to implement something more advanced, but this will get you out of the gate.
Installing NodeBB on CentOS 6.5
NodeBB is forum software written on Node.js
The official installation instructions are on github, but the documentation is for Ubuntu.
To install on CentOS follow these instructions.
Parsing, and Nesting Models in backbone.js
The Parse Function
The parse function allows you to do some pre-processing of the data sent from the server before the model is created. Parse should return an object containing the values that will make up this models attribues. This is called after the fetch command has recieved the data, but before the response is put into the model. The example below parses dates to local time before adding them to the model using moment.