Pull requests: love them or hate them, they’re an essential part of collaborative development. Yet for many developers, they can be a frequent source of frustration. If you’ve worked on a project long enough, you’ve likely seen code review complaints crop up in sprint retrospectives, often revolving around the same recurring issues: Waiting too long for someone to review your PR. The time…
Use npm outdate and npm update to check for and update to newer versions of your installed node modules using npm's built-in commands. npm outdated Current is what you have installed Wanted is the latest version that satisfies the semver range in package.json Latest is, you guessed it, the latest. Red items mean the wanted version is also the latest. npm update This will update all packages to the…
I recently found out about Elasticlunr , a lightweight, full-text search engine built in JavaScript. It got me thinking how this could be integrated into an eleventy site for client-side search. It's pretty easy as it happens. Demo GitHub repo Demo site Search this site I have a collection of 100 markdown documents, each about a different movie. Their frontmatter data has a title, excerpt, and a…
Sitemaps are an underrated tool for helping search engines crawl into every corner of your website. Fortunately building an XML sitemap in Eleventy (11ty) like this one is super quick and easy. Demo on GitHub Start by creating sitemap.njk in your source directory. --- permalink: /sitemap.xml eleventyExcludeFromCollections: true --- <?xml version="1.0" encoding="utf-8"?> < urlset xmlns = "…
This week's train project has been to convert this site from Gatsby to Eleventy (11ty) . Gatsby still has a place in my toolkit but for this site I've found 11ty has the flexibility to quickly and simply shape pages in unique ways. Eleventy doesn't have out-of-the-box SCSS/SASS pre-processing so it's up to you to bring in your own process. Taking inspiration from the excellent Hylia starter kit…
The prefers-reduced-motion media feature is used to detect if the user has requested that the system minimizes the amount of animation or motion on the page. Value: no-preference | reduce @media ( prefers-reduced-motion : reduce ) { /* disable off your motion */ } @media ( prefers-reduced-motion : no-preference ) { /* Or enable animations */ } Changing your device settings You should find a…
The #1 question in the world right now. What podcasts are you listening to? 🕸 Syntax.fm A twice weekly "Tasty Treats Podcast for Web Developers." Top Episode: What's new in web development 🕸 Shop Talk Show Development, design, performance, accessibility, tooling, a little bit of everything! Top Episode: Greenfield ⚽ That Peter Crouch Podcast Hilarious guide to being a professional footballer by…
Probably the quickest, leanest way to get to work on a fresh Umbraco site is with VSCode and IIS Express. Install IIS Express In VSCode, install the IIS Express extension by Warren Buckley. Download Umbraco and unzip. Open your new Umbraco folder in VSCode Start the website with Ctrl+F5 or selecting IIS Express: Start Website from command pallete Once you've ran through in the install wizard…
The following is a my work setup as of August 2024. 🖋️ Editor Visual Studio Code with a giant pile of extensions . Theme: One Dark Pro Vivid . Font: Jetbrains Mono . Ligatures all the way. ⌨ Terminal Warp . Great auto-completion, workspaces, and a bunch of AI I don't use. Oh-my-posh adds some nice theming. NPM packages I install globally . For Node, I use NVM autoloading. When I navigate into…
I installed the new Windows Terminal (Preview) from the Microsoft Store over the weekend. It allows you to create tabs for all variety of shells. By default the list of options are Windows Powershell, cmd and Azure Cloud Shell. Git-Bash is installed as part of Git for Windows so I'd like to add this to the list and set is as the default shell. Open settings with Ctrl+, or via the little down…
React Suspense allows you to easily add code-splitting into your application by lazy loading certain components, replacing them with something else until they've download. Before code-splitting, your webpack build might generate a single file for all of your application code. Imagine a React application with multiple pages and components. One of these pages is MyPage. import React from "react" ;…
prefers-color-scheme is a new-ish CSS media query that lets developers define styles tailored to a visitor's color scheme system setting. @media (prefers-color-scheme: light|dark|no-preference) { ... } Picture a webpage with a white background with mostly black text. If a visitor has their operating system's colour scheme set to Dark, a few line of CSS is all that's needed to make the website fall…
Now that the decade is coming to a close and "top x of the decade" lists are popping up everywhere, I thought I'd add to the pile with my favourite movies of the last 10 years. Film Year Baby Driver 2017 7.6 Coherence 2013 7.2 Deadpool 2016 8.0 Dunkirk 2017 7.9 Edge of Tomorrow 2014 7.9 Ex Machina 2014 7.7 Get Out 2017 7.7 Gone Girl 2014 8.1 Inception 2010 8.8 Moonrise Kingdom 2012 7.8 Scott…
When it's a package that I'll use infrequently, such as create-react-app, I'll use npx . However, there are some utility packages I use again and again. To install globally either npm i -g <package-name> or even better, add them to ~/.nvm/default_packages . rimraf npm i -g rimraf rimraf [path] It's rm -rf but works whereever you have node - macOS, Windows, WSL, node. http-server npm i -g…
One feature of dotLESS I find incredibly useful but appears to be a hidden feature is debug=”true”. I say hidden feature because it’s not a default configuration attribute on install or easy to discover in the docs so I’m sure there’s plenty of devs unaware of this handy addition. If you’re nice and organised you’ll no doubt be splitting your CSS across multiple .less files, compiling to a single…
Opening up Google Analytics you are presented with a bunch of stats about your site’s traffic. What shouldn't be underestimated is the amount of influence website speed has on these values. Pages/Visit When visiting a snappy site like Amazon, you don't grudge clicking to view a related item. You know you won't be waiting long for content to appear. In a set time period, the less time spent…
I recently had an issue with one of my Umbraco sites where I just couldn't log in to the dashboard on my development machine. Firing up Fiddler I found Umbraco was logging me in but instantly logging me back out again by redirecting me to /umbraco/logout.aspx. The culprit < httpCookies requireSSL = " true " /> A quick web.config transform so this is set to false on localhost saved the day. Huzzah!
I was recently tasked with finding a lightbox plugin for high traffic e-commerce site I was building from scratch. Given the impact page weight can have on conversion, bounce rates and a bunch of other delicate analytic metrics, it was essential every piece of JavaScript selected for the site was as lightweight as possible, along with being responsive. Most lightbox plugins that met the responsive…
When building an iPhone app using PhoneGap by default when you pull down the view on the device or simulator you can for some reason pull down the entire app before it bounces back into position. In Cordova 1.7 this is really simple to turn off. I don’t know why it isn’t in the first place, but screw it, on to the instructions. To turn this effect off open Cordova.plist which can be found in the…
The following code works in web browsers but returns "Invalid Date" on iOS 5. I noticed while building a PhoneGap based app. // This returns invalid date in iOS. var yearMonth = "2012-08" ; var date = new Date ( yearMonth ) ; document . write ( date ) ; Solution Split the string into parts and pass in the first two items of the array. Since January is 0 and December is 11, remember to take 1 from…
Here’s a spot of code for mapping two classes in Fluent NHibernate with a many-to-many relation. Say you have Employee and Department classes like so. public class Actor { public virtual int Id { get ; set ; } public virtual string Name { get ; set ; } public virtual IList Movies { get ; set ; } } public class Movie { public virtual int Id { get ; set ; } public virtual string Name { get ; set ; }…
If you’ve used tools like YSlow or WebPageTest you may have noticed that one of the suggestions is to turn off ETags. What are they you ask. An ETag, or entity tag, is an ID assigned to a version of a file by the webserver. This is used to determine whether the version stored in the browser cache is the same as the one on the server. The Etag is sent with initial download of the file…
In my last post I referenced Sean Power's findings that as much as 37-49% of visitors who experience performance issues will either abandon the site or switch to a competitor. As much as 77% will go on to share their experiences with others (slide 15) . I wanted to illustrate this point of sharing bad experiences due to slow websites. Have a go at searching Twitter for 'slow website' and you will…
Update: Deferred downloading of print stylesheets is coming to a future release of WebKit . Browsers can only download a limited number of files at a time from the same host when loading a web page. This is as low as 2 files on IE 6 & 7. To allow the page to appear faster a best practise is to prioritise important files like the main CSS, template images and the main content. Since the print…