Web Development How-To for Humans
-
How to avoid or resolve conflicts between nodemon and browserSync reloads
When implementing node into my existing node app, I ran into an issue where jsx compilation reloads were hanging in the browser. This was specific to jsx only. I had a separate sass built that was reloading just fine. What I found was that there was a clash between my nodemon server reload and the…
-
Why adding react’s useState to a component was throwing an error and how I fixed it
I had the following code in my button.jsx file: Things were working fine, until I attempted to add useState to the mix: As it turned out, since I was loading my react library from CDN to the browser, I did not have a way to import the local react library as an ES module import.…
-
How to deploy to Digital Ocean App Platform
Digital Ocean offers a service called App Platform that allows for a managed environment to deploy and host a web app on. From the docs: App Platform is a Platform-as-a-Service (PaaS) offering that allows developers to publish code directly to DigitalOcean servers without worrying about the underlying infrastructure. The main objective here is to allow…
-
The Best Keyboard Shortcuts for Developers working with Sketch
next artboard fn + → previous artboard fn + ← previous page fn + ↑ next page fn + ↓ toggle sidebar option + cmd + 1 toggle inspector option + cmd + 2 toggle layout grid ctrl + L view layout settings ctrl + cmd + L
-
The best keyboard shortcuts for Outlook on Mac to increase productivity
Display previous message Ctrl+[ Display the next message Crtrl+] Open a message in new window Cmd+O Close a window Cmd+W Navigate to previous pane in the Mail view Shift+Ctrl+[ Navigate to next pane in the Mail view Shift+Ctrl+] Archive a selected message Ctrl+E Delete a selected message Delete Forward a message Cmd+J
-
Everything I learned about Content Security Policies while wrestling with CMS templates
Content Security Policies (CSPs) are meant to add security to websites and web apps from malicious scripting attacks. These type of attacks include Cross-Site Scripting (XSS) and data injection attacks. In my case, the project I was working on had been relying on the Resource Override Chrome extension to developer CSS and JS against a…
-
How to use the css box-sizing property
Understanding css box-sizing is critical to proper layout at the page and component level. In this post I’m going to document how box-sizing works and how it can solve alignment and layout issues. According to MDN docs: The box-sizing CSS property sets how the total width and height of an element is calculated. The TL;DR on this is…
-
How to set up a WordPress Website
Choosing and setup hosting Choose a hosting provider that fits your budget and needs. Hosts range from ultra-inexpensive shared options to higher dollar Virtual Private Server (VPS) offerings. Most hosting companies provide an array of offerings. Here are some hosting companies I have been happy with: Choose and purchase a domain name The domain name…
What Web Development topics would you like me to write about?