Tagged “web”

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.

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

Bookmark

Bustle

Here’s a beautiful, magazine style website design for digital publication Bustle. The typography, use of whitespace, responsive layout, menu pattern, colour palette and imagery are all on point!

Read my notes / Visit original

Bookmark

Accessibility (on adactio.com)

Here’s Jeremy Keith, making the moral case for accessible websites and why we shouldn’t use “you can make more money by not turning people away” as an argument:

I understand how it’s useful to have the stats and numbers to hand should you need to convince a sociopath in your organisation, but when numbers are used as the justification, you’re playing the numbers game from then on. You’ll probably have to field questions like ”Well, how many screen reader users are visiting our site anyway?” (To which the correct answer is “I don’t know and I don’t care” – even if the number is 1, the website should still be accessible because it’s the right thing to do.)

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

Cassie Evans’s Blog

I love Cassie Evans’s new website design! It’s so full of personality while loaded with technical goodies too. Amazing work!

(via @stugoo)

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”.

Bookmark

Intrinsically Responsive CSS Grid with minmax and min

Evan Minto notes that flexible grids created with CSS Grid’s repeat, auto-fill, and minmax are only intrinsically responsive (responsive to their container rather than the viewport) up to a point, because when the container width is narrower than the minimum width specified in minmax the grid children overflow.

Read my notes / Visit original

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 »

Bookmark

Image Color

A handy tool for identifying colours – provided in numerous different CSS-ready formats – and creating a complimentary colour palette from an image you upload or provide as a URL.

Read my notes / Visit original

Bookmark

Namecheap

I’ve heard a couple of people mention that when they buy domain names, they use Namecheap because they are cheap and trustworthy.

Read my notes / Visit original

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