How To Password Protect Your Staging Site on Netlify Nov 30, 2019 Disclaimer up front, the method described in this post only works with the paid Netlify plans Short Version You can password protect branch deploys on Netlify using a “branchdeploy” header file. Create a file named _branchdeploy_headers with the following content: /* Basic-Auth: username:password123 Obviously, uhh, you’d want to use a better username and password than that šŸ™ƒ Create/update your netlify.toml file to copy and rename the header file to _headers on branch-deploys only:
How To Set Windows Terminal Starting Directory for WSL Nov 17, 2019 Now that Windows 10 Slow Ring builds have WSL2 I’ve been doing more dev work on my Windows computer (VS Code Remote WSL is really good y’all). I wanted to give the new Windows Terminal a go and the first thing I noticed is that when I open WSL in windows terminal it defaults to my home folder on Windows /mnt/c/Users/wes. If you are like me you want it to start in your linux home directory /home/wes not your Windows home folder.
How to Build a PWA without a Build Step Nov 10, 2019 No bundler? No problem. Sometimes modern web development feels overly complex. When I build a static website I mostly write HTML and CSS, with a little bit of JavaScript. My project structure is straightforward and boring - just the way I like it. But when I move beyond “static website” into “web app” or Progressive Web App (PWA) territory then things are no longer simple… Babel config files, TypeScript config files, Webpack or Rollup config files.
How to Build a PWA Aug 31, 2019 What is a Progressive Web App (PWA)? I’m trying to keep this post simple so I’ll define what a PWA is in my own simple terms. A PWA is a web app that uses a set of browser/OS enhancements to make it feel more like a native app. If you want a more official definition see wikipedia or Google’s Web Developer site. PWA Basics How do you enhance a website/web app into a Progressive Web App?
iOS 13 PWA Improvments Aug 11, 2019 I just installed the iOS 13 public beta on my iPhone today and wanted to see what improvements are in store for Progressive Web Apps (PWAs) running on iOS. There’s still a lot to dig into, but I wanted to capture my initial findings here. I’ll try and keep this post up to date as I discover new improvements in subsequent beta releases. Improvements There are a few subtle, welcome improvements that make PWA’s feel more like native apps.
Glob Pattern Not Working? Don't Forget the 'Quotes' Mar 30, 2019 Our team uses prettier to keep the formatting of our javascript/typescript code consistent. Recently, I was adding a couple of NPM scripts for checking and fixing prettier formatting to one of our repos. { "scripts": { "pretty": "prettier -l **/*.{js,ts}", "pretty:fix": "prettier --write **/*.{js,ts}", } } That glob pattern says “in any directory, look for any file ending in .js or .ts”. So I fixed up all formatting by running npm run pretty:fix and then I committed that change.
Consuming a Web Component in React in Typescript Dec 1, 2018 After building my first web component I wanted to use it in my React app that was written in Typescript. I found some blog posts and tutorials about using web components in React apps, but none of those posts/tutorials were Typescript-based, so when I went to add my custom element I got the error [ts] Property 'wc-menu-button' does not exist on type 'JSX.IntrinsicElements'. [2339]. The problem is React only knows about standard HTML Elements, so when I go putting my custom element in there, it doesn’t know about it and shows me the error.
Fixing CSS Tap Effects on iOS Nov 18, 2018 While working on a simple menu icon I came across an issue that was bugging me on iOS. My component has a simple :hover effect where it changes colors, which is a great little UX indicator that the component is interactive when your mouse hovers over it. But when I’m on iOS there are a couple of problems when I tap my component: There is a subtle gray highlight effect when I tap on the component The component stays the :hover color after I tap on it until I tap somewhere else Both issues can be seen here:
Handling Keyboard Shortcuts in React Sep 8, 2018 This morning I was working on adding a settings page to Clean Calendar. Right now there aren’t many settings to toggle so I didn’t feel a full page navigation was warranted so I decided to use a quick, slide-up dialog. As a user, whenever I come across dialogs or modals or any other, uhh, “dismissable” UX patterns I instinctively hit the Escape key on my keyboard to try and dismiss them.
Fixing Node Library Not Loaded icu4c Error Sep 1, 2018 Recently I sat down at my mac to start working on one of my React apps and when I tried to run yarn start I got the following error: dyld: Library not loaded: /usr/local/opt/icu4c/lib/libicui18n.61.dylib Referenced from: /usr/local/opt/node@8/bin/node Reason: image not found Abort trap: 6 The error message mentioned node so I tried to run node -v and got the same error so I knew I’d narrowed the problem down to node and some dependency named icu4c.
Avoiding Git Problems When Installing a Theme to Hugo Aug 25, 2018 tl;dr If you didn’t install your hugo theme as a submodule then don’t forget to delete the .git folder from the theme’s folder. # assuming you start from repo root cd themes # install the "hyde" theme git clone https://github.com/spf13/hyde.git rm -rf hyde/.git # now go back to repo root and stage the new theme folder cd .. git add themes/hyde If you forget to delete the theme’s .