Tagged “development”

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

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

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 still trips 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