Tagged “development”

Entry

Custom Properties

  • https://adactio.com/journal/17106 A bridge between JavaScript and CSS, JK did some work where he updated a class name from JavaScript (el.classList.add). He automatically thought of updating a class name because, frankly, that’s how I’ve always done it. I’d say about 90% of the DOM scripting I’ve ever done involves toggling the presence of class values: accordions, fly-out menus, tool-tips, and other progressive disclosure patterns. But really, I should try to avoid touching the DOM at all. It can have performance implications, possibly triggering unnecessary repaints and reflows. Now with custom properties, there’s a direct line of communication between JavaScript and CSS. No need to use the HTML as a courier. A lot of CP’s potential comes from the fact that they’re not just confined to CSS.
Bookmark

Comparing Browsers for Responsive Design (on CSS-Tricks)

Chris Coyier checks out Sizzy, Polypane et al and decides which suits him best.

There are a number of these desktop apps where the goal is showing your site at different dimensions all at the same time. So you can, for example, be writing CSS and making sure it’s working across all the viewports in a single glance.

Read my notes / Visit original

Entry

Progressively enhanced JavaScript In Real Life

Over the last couple of days I’ve witnessed a good example of progressive enhancement “In Real Life”. And I think it’s good to log and share these validations of web development best practices when they happen so that their benefits can be seen as real rather than theoretical.

Read entry »

Bookmark

A Utility Class for Covering Elements (on CSS { In Real Life })

Need to overlay one HTML element on top of and fully covering another, such as a heading with translucent background on top of an image? Michelle Barker has us covered with this blog post in which she creates an overlay utility to handle this. She firstly shows how it can be accomplished with positioning, then modernises her code using the inset CSS logical property, before finally demonstrating a neat CSS Grid based approach.

Read my notes / Visit original

Entry

My DevTools Cheatsheet

Here’s a (work in progress) list of useful (Mac) Browser DevTools tips, tricks and keyboard shortcuts for my reference and yours. This is a work in progress and I’ll update it as I go.

Read entry »

Entry

My Screen Reader Cheatsheet

Here’s a list of useful Screen Reader commands and tips for my reference and yours. This is a work in progress and I’ll update it as I go.

Read entry »

Bookmark

How-to: Create accessible forms - The A11Y Project

Here are five bite-sized and practical chunks of advice for creating accessible forms.

  1. Always label your inputs.
  2. Highlight input elements on focus.
  3. Break long forms into smaller sections/pages.
  4. Provide error messages (rather than just colour-based indicators)
  5. Avoid horizontal layout forms unless necessary.

Read my notes / Visit original

Entry

How to manage JavaScript Dependencies

It can pay to add tried-and-tested functionality to your application via third-party NPM packages. That way, you can concentrate on your application’s unique features rather than reinventing the wheel for lower-level requirements.

  • https://classic.yarnpkg.com/en/docs/yarn-workflow/
  • And here’s a good explanation of the purpose of lock files (it’s to lock down the exact version to be used (rather than a range like package.json) https://www.robertcooper.me/how-yarn-lock-files-work-and-upgrading-dependencies)
  • Getting started
    • If blank slate, yarn (or npm) init
    • If established project, “yarn” (or “npm i”)
  • Adding
    • yarn add <package…> (or …)
    • can add specific version or semver range, and it can be a good idea to do so, e.g. yarn add <package…>@^1.3.1
  • Removing
    • yarn remove <package…>
    • use this rather than manually deleting because this way it will update yarn.lock, too.
  • Updating
    • npm i (same command as to add/install)
    • yarn upgrade, or “yarn upgrade-interactive”
  • Maintaining
    • Security vulnerabilities

      • Note that this might be in:
        • a sub-dependency i.e. not one you explicitly installed.
        • a package which appears several times in your lock file / dependency tree
      • Often you need to upgrade to a patch version. (To minimise risk you usually want to update to update to the closest non-vulnerable version)
      • This may not require a change to package.json
      • Automated
        • Dependabot https://github.blog/2020-06-01-keep-all-your-packages-up-to-date-with-dependabot/
        • You can configure Github Dependabot to send automated security updates (NB this is not just for JS, i.e. in a Rails project it might suggest a bump to your Gemfile)
        • dependabot will often automatically open a PR in your repo, updating the relevant dependency (thus addressing the vulnerability) with PR title e.g. “Bump lodash from 4.17.11 to 4.17.19”
        • (note however that if you work on a (corporate) repo that is not set up to automatically open PRs, you can still often take advantage of this on each individual dependabot security alert, at the push of a button.
          • Hopefully you also get a round-up email for all affected repos “A new security advisory on lodash affects 8 of your repositories” with links to the alert for each repo
        • You generally just need to follow the link in the email then merge the PR and delete the branch from the PR page
      • Manual
        • Sometimes dependabot cannot automatically suggest a fix for you
          • Not sure why, but perhaps because:
            • your package A which depends on vulnerable package B hasn’t yet released an update which bumps its package B dependency to package’s B patch update
            • the required update requires moving to a version that is beyond that specified in your dependency settings
      • Case Study
        • dot-prop < 4.2.1 “Prototype pollution vulnerability in dot-prop npm package before versions 4.2.1 and 5.1.1 allows an attacker to add arbitrary properties to JavaScript language constructs such as objects.“
          • Affected repos including node-weather-app
            • dot-prop only appears in the package-lock.json; nowhere else.
            • It’s not a dependency that I explicitly installed so I’m guessing it’s a sub dependency of express, hbs, request or nodemon.
              • But checking in package-lock.json:
                • it‘s not under dependencies for any of those I listed above; it’s within the top level “dependencies” object.
                • interestingly it has “dev: true”
                • I think I’ve sussed it. The actual locked-down/installed version of each subdependency (no matter how deep) is listed in the top level “dependencies” section. It can also be found specified as a semver range by the higher-level dependency (say, nodemon) that requires it. But the top-level “dependencies” lists the actual installed version.
                  • So I was able to work backwards and find that dot-prop is required by configstore which is required by update-notifier which is required by nodemon.
                  • So nodemon would need updated. I then googled “nodemon dot-prop” and found https://github.com/remy/nodemon/issues/1682 and various argumentative PR threads!
                  • I looked at https://github.com/remy/nodemon/releases and ascertained that I need v2.0.3 (a new major version) but since the latest is just a patch version away (2.0.4) I’ll go for that.
                  • This is a major version update but it’s just a devDependency so I don’t really care.
                  • I checked package.json and changed devDependencies { "nodemon": "^1.19.4" } to "nodemon": "^2.0.4" then ran npm i nodemon to update. (Followed by npm audit fix)
                  • Then pushed, checked my Github repo security section and that alert (and a few others) disappeared! Job’s a goodun.
                  • PS in the real world I should have tested that nodemon and everything else still works.
              • So its difficult to know which of my top-level dependencies it is a sub-dependency of and therefore what to update.
              • I guess I could manually update the entry
    • Version updates (not just security vulnerabilities)

  • semver
  • Files
    • package.json; and yarn.lock or (package.lock or package-lock.json)
    • You don’t really want to be manually maintaining the lock files. And you don’t necessarily need to manually update package.json either, since you can use “yarn upgrade-interactive”
Bookmark

Cheating Entropy with Native Web Technologies (on Jim Nielsen’s Weblog)

This is why, over years of building for the web, I have learned that I can significantly cut down on the entropy my future self will have to face by authoring web projects in vanilla HTML, CSS, and JS. I like to ask myself questions like:

  • Could this be done with native ES modules instead of using a bundler?
  • Could I do this with DOM scripting instead of using a JS framework?
  • Could I author this in CSS instead of choosing a preprocessor?

Read my notes / Visit original

Entry

Winter 2020 website refresh, Part 1

Winter 2020 website refresh, Part #1 #

Started by branching off and cleaning out everything (except .git).

Added 11ty-base-blog. I started from this in the previous branch too, but wanted to get up to date with the latest version of 11ty, examples of the latest 11ty goodness e.g. changes to navigation etc.

Checked my lighthouse score manually in Chrome.

Netlify > Domain Management > Branch Subdomains > create ”v4” subdomain for branch v4 deploys (and blocked search engine robots) https://v4.fuzzylogic.me/

Deployed Zach’s speedlify to Netlify which also creates a new Github repo.

Created a "build hook" on that Netlify app (its an API URL that can be hit which triggers a build)

Set up a Github action on my speedlify Github repo, scheduling a run of the netlify build (by hitting the build hook) every morning. (refs https://github.com/Jinksi/netlify-build-github-actions, https://twitter.com/iign/status/1288933337478975504

Working custom speedlify on Netlify https://zen-hoover-34d28b.netlify.app/fuzzylogic.me/

Need to consider if I want the lighthouse scores in the footer (https://github.com/zachleat/speedlify-score/). If I do, I probably don’t want or need to do this by client-side javascript.

Added two Netlify plugins

Added Netlify CMS, with help from https://www.youtube.com/watch?v=WEApDhZMAL4 and https://www.netlifycms.org/docs/add-to-your-site/ and https://www.netlifycms.org/docs/backends-overview/.
Note that 1) I don’t really like having the CMS Admin javascript in my base layout. I could wrap a check for the page being the homepage and only loading the JS on there. Better still might be to separate the Admin from the main site. 2) When I accessed /admin at first it kept failing, 404ing the config.yml. The key is to make sure you have a trailing slash after admin/ and also ensure the URL is correct (your custom domain) and hasn’t flipped over to the Netlify URL.

Messed around with data in Eleventy. Started by pulling Rick and Morty characters per the Jason Lengsdorf video. Moved on to getting my latest record purchases from discogs. Started with raw node-fetch, then switched to eleventy-cache-assets. Locally using dotenv for sensitive API tokens, and at Netlify created environment variables.

Entry

Better Alt Text

I’ve just read The A11Y Project’s page on alt text.

As most of us know, the HTML alt attribute is for providing “alternate text” descriptions of images to help ensure people do not miss out on information conveyed by graphics. This can help people using assistive technology such as screen readers, and in situations where images are slow or fail to load.

The article made some interesting points and even though I’ve been using the alt attribute for years I found three common cases where I could improve how I do things.

Read entry »

Bookmark

itty.bitty

Here’s an interesting tool for creating and sharing small-ish web pages without having to build a website or organise hosting.

itty.bitty takes html (or other data), compresses it into a URL fragment, and provides a link that can be shared. When it is opened, it inflates that data on the receiver’s side.

Read my notes / Visit original

Note · 10:15 PM · Glasgow

Daniel Post shared a really cool performance-optimisation trick for Eleventy on Twitter the other day. When statically generating your site you can loop through your pages and, for each, use PurgeCSS to find the required CSS, then inline that into the <head>. This way, each page contains only the CSS it needs and no more!

Check out the code.

I’ve just installed this on my personal site. I was already inlining my CSS into the <head> but the promise of only including the minimum CSS that each specific page needs was too good to resist.

Turned out it was a breeze to get working, a nice introduction to Eleventy transforms, and so far it’s working great!

Bookmark

Three CSS Alternatives to JavaScript Navigation (on CSS-Tricks)

In general this is a decent article on non-JavaScript-based mobile navigation options, but what I found most interesting is the idea of having a separate page for your navigation menu (at the URL /menu, for example).

Who said navigation has to be in the header of every page? If your front end is extremely lightweight or if you have a long list of menu items to display in your navigation, the most practical method might be to create a separate page to list them all.

Read my notes / Visit original

Bookmark

Color Theme Switcher (on mxb.dev)

Max shows us how to build a colour theme switcher to let users customise your website. He uses a combination of Eleventy, JSON, Nunjucks with macros, a data attribute on the html element, CSS custom properties and a JavaScript based switcher.

Read my notes / Visit original

Bookmark

Font Match

A font pairing app that helps you match fonts – useful for pairing a webfont with a suitable fallback. You can place the fonts on top of each other, side by side, or in the same line. You can adjust your fallback font’s size and position to get a great match.

Bookmark

Font style matcher

If you’re using a web font, you're bound to see a flash of unstyled text (or FOUC), between the initial render of your websafe font and the webfont that you’ve chosen. This usually results in a jarring shift in layout, due to sizing discrepancies between the two fonts. To minimize this discrepancy, you can try to match the fallback font and the intended webfont’s x-heights and widths. This tool helps you do exactly that.

Read my notes / Visit original

Bookmark

Debouncing vs. throttling with vanilla JS (on Go Make Things)

Chris explains how debouncing and throttling are two related but different techniques for improving performance and user experience when working with frequently invoked JavaScript event handlers.

With throttling, you run a function immediately, then wait a specified amount of time before running it again. Any additional attempts to run it before that time period is over are ignored.

With debouncing, after the relevant event fires a specified time period must pass uninterrupted in order for your function to run. When the time period has passed uninterrupted, that last attempt to run the function is the one that runs, with any previous attempts ignored.

Read my notes / Visit original

Bookmark

CSS Section Separator Generator (on wweb.dev)

A handy tool that generates the required HTML and CSS for various section separator effects (including diagonal lines, spikes, and waves) by cleverly manipulating backgrounds and generated content.

Note · 10:10 AM · Glasgow

I have to reluctanctly agree on this one. I’ve interviewed quite a few candidates for “front-end developer” (or similarly named) positions over recent years and the recurring pattern is that they are strong on JavaScript (though not necessarily the right time to use it) and weak on HTML, CSS and the “bigger picture”.

Entry

Block Links: A tricky UI Problem

You have a “card” component which includes a heading, some text, an image, and a link to the full article, and it’s working great. Then along comes a UX requirement that the full card (not just the button or link) should be clickable. This is where things get complicated.

Read entry »

Entry

Fixing Github Command Line Authentication Issues

On at least two ocassions I’ve found myself scratching my head when an attempted push to a newly-created Github repo is met with authentication failures, despite me being sure I’m using the correct credentials.

Here’s the lowdown on the issue and how to resolve it.

Read entry »

Entry

My Codepen Cheatsheet

I’m finding Codepen to be more and more valuable not only for testing out new code and ideas, but also – when working on large applications – as a time-saving rapid prototyping environment which sidesteps the overhead of back-end set-up. Here are some tips which I’ve found useful, for future reference.

Read entry »

Bookmark

You Don't Need

A nice list of tips and tools on how to use simpler browser standards and APIs to avoid the added weight of unnecessary JavaScript and libraries.

Read my notes / Visit original

Bookmark

Modest JS Works

Pascal Laliberté has written a short, free, web-based book which advocates a modest and layered approach to using JavaScript.

I make the case for The JS Gradient, a principle whereby your app can have multiple coexisting modern JS approaches, starting from the global sprinkles to spot view-models to, yes, an SPA if that’s really necessary. At each point in the gradient, you’ll see when it’s a good idea to go a step further toward heavier JavaScript, or not.

Read my notes / Visit original

Entry

Fringe Making

Last Tuesday, 20/8/19 I made the train trip east for a day at the Edinburgh Festival Fringe.

Read entry »

Entry

Box Shadow around the full box

Sometimes when coding a UI element you want a shadow around the whole box. However, most CSS box-shadow examples/tutorials tend to show inset box-shadows or ones that otherwise sit off to the side.

Here’s how to apply box-shadow to the whole box for a simple but nice effect.

.box-with-shadow {
box-shadow: 0 0 4px #ccc;
}

And here’s how it looks:

Lorem ipsum
Entry

Certbot Troubleshooting

When taking the DIY approach to building a new server, Certbot is a great option for installing secure certificates. However, sometimes you can run into problems. Here, I review the main recurring issues I’ve encountered and how I fixed them.

Read entry »

Entry

My Git Cheatsheet

I’ve used Git for many years but it can still trip me up. At times I’ve worked primarily in a GUI (like Sourcetree or Fork), and other times directly on the command line. I’ve worked on projects where I’ve been the sole developer and others where I’m part of a large team. Regardless of the tools or context, I’ve learned there are certain need-to-knows. Here’s a list of useful Git concepts and commands for my reference and yours.

Read entry »

Entry

The best way to Install Node.js and NPM on a Mac

In modern front-end development, we tend to use a number of JavaScript-based build tools (such as task runners like Gulp) which have been created using Node.js and which we install using NPM. Here’s the best way I’ve found for installing and maintaining Node and NPM on a Mac.

Read entry »

See all tags.

External Link Bookmark Note Entry Search