Detect if a PWA is Visible with the Page Visibility API Nov 7, 2020 Need to figure out when your PWA comes to the foreground? The modern web has you covered with the Page Visibility API. document.addEventListener("visibilitychange", () => { const state = document.visibilityState; if (state === "hidden") { // your PWA is now in the background } if (state === "visible") { // your PWA is now in the foreground refreshData(); } }); Most documentation talks about how this event fires when switching tabs, but this also fires when a PWA is foregrounded/backgrounded.
Type Guards in Javascript Using JSDoc Comments Oct 10, 2020 In Typescript you can write type guards to filter down a union type to a single type. For example: // user-defined type guard function isFish(pet: Fish | Bird): pet is Fish { return "swim" in pet; } const pet: Fish | Bird = getPet(); // at this point you either have a Fish or Bird if(isFish(pet)) { // at this point you (and tsc and intellisense) know you have a Fish pet.
iOS 14 PWA Improvements Jul 12, 2020 I recently installed the iOS 14 Beta 2 looking to see what improvements are in store for PWAs. Unfortunately, there aren’t really any PWA-specific improvements (ie: features related to service workers or the experience of standalone web apps pinned to the home screen). The good news is there are some important standards/features being implemented in Safari that a PWA (or any website/webapp) can use. Improvements Face ID and Touch ID for the Web Safari’s implementation of the webauthn API will support Face ID and Touch ID, so now a PWA can have that same seemless authentication experience that native apps have.
Four Reasons For Having a Blog Jul 5, 2020 Why should you, a busy developer, put time and energy into having your own blog? Writing enforces understanding. There’s satisfaction in “shipping” each post. You can reference your own posts when you need to remember how to do something later on. Writing well is like a developer superpower, your blog is where you practice and get the reps in. 💪 Not every post needs to be long.
A Simple Guide to Setting Up zsh Jan 4, 2020 Recently I decided to switch my default shell to zsh. I’ve been using bash for years because… it’s been the default. But macOS Catalina changes the default shell from bash to zsh and I got tired of the warning message popping up every time I opened Terminal. So, time to switch to zsh and ditch that warning message 😄. Now, I’m not looking for an overly-complex setup here. I’m aiming for a quick and simple setup that results in a fast shell that supports auto-complete and the aliases I’m used to.
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 Read about iOS 14 PWA Improvements here. 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.
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 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 .