Notes

A collection of thoughts, ideas and everything else that doesn't need a lot of words.

Post type: share Redacted

Published on

A helpful tool I came across in the latest Dense Discovery newsletter:

This handy web app allows you to easily redact parts of an image. Just drag the image into the browser and start redacting. Double-click to cycle through different styles.

Example of three different styles to redact with Redacted

Example image showing three of the different styles to redact with Redacted

Have a look and try it out: Redacted

Post type: share Conference Talks for The Rainy Days

Published on

This week is yet another rainy and wet one in HK. There‘s been way too much of that this year. And it‘s always good to have something to do when going out is not really the amazing thing to do. Unless you love the rain. So here are some conference talk videos to get you through those rainy days.

Over the last two days, Jointfuturesconf in Helsinki has been streaming all of their talks live, for everyone to access and watch. This is an amazing effort and the video stream has worked very well. They‘ve had a great lineup and fantastic talks. If you have missed the livestream—which depending on your timezone, can easily happen—the talk videos will still be available after the conference. I‘m not going to recommend certain talks, but I definitely recommend to have a look and check it out yourself ;)

And while I‘m at it and you are into learning by watching, there are many more fantastic talks available from Beyond Tellerrand, which is my favourite one. Have a look at the past talks and save some for the rainy days!

Recently Front Conference also released all their latest videos and there‘s some interesting ones in there as well.

And if that is not enough, you can find much more conference coverage including videos, tweets and photos on Colloq. Have fun and enjoy your rainy days!

Post type: share Resizing on Click - Without JavaScript

Published on

I came across this on Twitter:

This codepen is a pretty interesting technique. Not sure if this is something suitable to use in production, but a cool thought experiment and result for sure. I like it 👍🏼

I’m thinking it could be quite a nice way to create a CSS light box or something similar without the need for JS. It might not be the best technique for light boxes, since it’s probably impossible to manage focus state on the page and to make it properly accessible. Still, I think it’s a neat idea and I want to have a closer look at it. It might be good for some use case.

Post type: share Optimised Kirby Content Images

Published on

For some time it has been bugging me that I couldn’t add optimised images to Kirby’s textarea markdown. There’s been many times I wished that I could optimise those images to my liking.

At some point I added image resizing and optimisation to the file.create:before hook, but that only allowed to have one size and one setting for image compression. Because of the strict limitations, I didn’t like it much and removed it again.

I wanted some more flexibility and created a little KirbyTag plugin that extends the default image KirbyTag by a few options so it does what I want. It’s been a rather quick and dirty job, but does its job. I also added support for the new loading attribute that allows for native lazy-loading of images.

The plugin supports resizing by either width, height or both, an image compression and lazy-loading. Now I can simply add images with additional preferred options directly in the markdown field: 

optimage: biarritz.jpg width: 1200 quality: 65 loading: lazy

Will output something like:

<img src=“source-img-1200x-q65.jpg” width="1200" loading=“lazy”>

The code can be found in this Gist on Github. If you like it or find it useful, feel free to use it and let me know what you think.

Also, if you are looking for a solution to add lazy-loading to your WordPress site, have a look at Tom Arnold’s approach, based on the initial snippet from CSS-Tricks.

Post type: share State-Controlled Social Media

Published on

One of the huge topics today is that Twitter has taken down a ”significant state-backed information operation“. Over the last few days I have seen a lot of comments on how the Pro-CCP trolls have been infiltrating in masses in my feed, so this is a good move from Twitter and I think they deserve credit for doing so with transparency.

One interesting bit from Twitter’s post is this:

As Twitter is blocked in PRC, many of these accounts accessed Twitter using VPNs. However, some accounts accessed Twitter from specific unblocked IP addresses originating in mainland China.

Here’s the link to the full blog post from Twitter Safety.

Furthermore, Twitter has also updated their policies on advertising by state-media, since the PRC has been running a lot of disinformation campaings on the network, too.

Shortly after Twitter’s move, Facebook followed suit by closing a few accounts and groups. By far not as many, but again, it's a good start they are reacting.

Post type: share Modern Web Development on the JAMstack

Published on

A few weeks ago I started looking into Vue.js and static site generators to get a better idea what all the latest hype is about. So far it's been quite fun and I enjoyed learning something new. I haven't gotten around to try static site generators yet, since I currently don't have a real need for it, but am planning to do so when I find some extra time.

This free ebook from Netlify is a great resource to get a better understanding on building and hosting for JAMstack and covers many topics, from explaining the JAMstack concept, planning and setting up your project to deploying at scale, with a nice case study with SmashingMagazine.

Post type: share Dropbox Alternatives

Published on

After seeing a question about alternatives to Dropbox, I thought it might be a good idea to share the few options that came up, plus an additional one that I do use myself.

One suggested option was Seafile, “an open source file sync&share solution designed for high reliability, performance and productivity.” It looks great and the community edition can be installed on your own server for free. The Pro version is free for up to 3 users and above that offers a variety of pricing options.

Nextcloud, “The self-hosted productivity platform that keeps you in control” is completely free and can be hosted on your own server. There are a few voices in this thread who recommend Nextcloud. It's the most comprehensive solution of these three.

I currently use Syncthing as a sharing tool with the Colloq team. This option is a little bit different, since it only does peer to peer sharing with dedicated machines that you allow. With this process there is no server in between and this option is great for sharing and exchanging files, but not really suited for the heavy-weight job of storing stuff on a server. It also only synchs when machines are actually online, so it does have its limitations, but to share files between a team it does a good job.

I hope you’ll find the best solution that works best for you.

Post type: share Dato - A Better Menu Bar Clock

Published on

Via Twitter today I found Dato, a new macOS menu bar clock app by Sindre Sorhus. I like its simplicity, with the added bonus of displaying different cities with their respective timezones. Very handy and a little more convenient than the clock widget on the dashboard, which I usually use to look up the time in different places.

Dato is a replacement for the system menu bar clock. By default, it looks exactly the same, but when you click it, you get a small calendar, the current time in various time zones (even with custom names), week number, and more. You can customize what to show in the menu and the menu bar.

Screenshot of the Dato app as it appears when opened on the macOS menubar

For a limited time Dato is available for free on the App Store.

Post type: share Eco-Yeah

Published on

Bearface is now a senior, and with age comes a tendency to share indoor gifts of the odorous kind. We set up a couple of trays for him and started off with standard litter, but soon learned of a more economical and efficient product that’s also 100% natural.

While there is so much bad, sad and frustrating news in the world and on Twitter, Simon’s post made me smile and is very much on the positive side of things :) Also don’t expect anything technical here ;)

Go and check out Living ecologically, you’ll find an enjoyable read and good things to do.

Post type: share Faceless Paintings

Published on

Via the Dense Discovery newsletter I saw the art of Joseph Lee and I have to say that I really do love these faceless paintings. It’s an amazing style and even though there are no faces, these paintings have a lot of energy and emotion.

Have a look at joeyunlee on Instagram.

Post type: share CSS-in-HTML

Published on

Yesterday I came across this tweet and it made me smile. I’m not sure how many developers nowadays are aware of the fact of this having being the everyday reality a long time ago, but as with a lot of things we do, evolution continues to progress. We have come a long way from real <font> tags and I’m happy to have had the full experience of the web over time. Looking back it has been an enjoyable and interesting ride.

Currently my CSP doesn’t allow any external scripts, hence the Twitter embed doesn’t display as it would like to. I’m not sure if I want to change it in the future, hence I’m attaching a screenshot of the aforementioned tweet for your immediate perusal below ;)

Screenshot of tweet saying "Remember CSS-in-HTML" with a code example by @rauchg
Screenshot of tweet saying "Remember CSS-in-HTML" with a code example by @rauchg

Post type: share Resource: Stupid .htaccess Tricks

Published on

While I was trying to figure out how I can add different .htaccess directives for different environments, I came across Stupid .htaccess Tricks by Jeff Starr. It’s a pretty old post from 2006 (which these days is almost surprising it’s still there!), but it’s a great resource that contains and explains all kinds of things you can, and might want to do, with your .htaccess file. Definitely one for the bookmarks for that day you wonder how that one thing did work again ;)

Post type: share Undoing GIT

Published on

Every once in a while there’s something new to figure out in GIT, and most of the time it’s about fixing something that I screwed up… The other day I came across this handy guide which lists all the different possibilities of undoing what you’ve done in GIT. Definitely a good one to keep in the bookmarks.

Post type: share Testing Webmentions

Published on

I have finally added webmentions to my site, but it’s not yet working correctly all the way. Bear with me while I will send this (and possibly a few more) test that will show up in the feed… To make it a little more worthwhile, I’ll add something useful to each of the tests ;)

The webmentions on this site are, or will be powered by Sebastian’s Kirby 3 plugin sendmentions.

And here’s the test data from Webmention.rocks:

Test 1
Test 2
Test 3
Test 4
Test 5
Test 6
Test 7
Test 8
Test 9
Test 10
Test 11
Test 12
Test 13
Test 14
Test 15
Test 16
Test 17
Test 18
Test 19
Test 20
Test 21
Test 22
Test 23

Update Link added: https://webmention.rocks/update/1
https://webmention.rocks/update/1/part/2

https://webmention.rocks/update/2

Post type: share Oh The F’ing Rains

Published on

Today wasn’t my favorite of all the days in the office. I decided to leave a little early and go for a walk home. Great idea to clear your head sometimes. Well, turned out that HK decided that it really needed to pour down… For sure we haven’t had enough rain yet this and the last month.

Post type: share Image Optimisation Tools

Published on

In case you are looking for a complete guide on image optimisation, head on over and read this guide by Addy Osmani, because the following post is not this guide ;)

I really like ImageOptim. It’s useful, easy and fast to use, and most of the time yields very good results.

Screenshot of optimised images in ImageOptim
Screenshot of optimised images in the ImageOptim app

Another great option to get your images as small as possible is Squoosh. It's not as fast, mostly because I always forget its name ;) I'm kidding, it’s super fast.

Screenshot of the Squoosh website
The Squoosh homepage

The only point I’d have is that it’s a little less convenient if you need to optimise a lot of images. You’ll have to optimise and download all of the images seperately. Depenind on what you ‘re after, the results with Squoosh might be even better than ImageOptim. As always, mileage may vary and I recommend you try them both to see what works best for yourself.

Post type: share Running a Local Server

Published on

In this tweet Andy Bell mentions that you can run a local Python server with these easy commands:

  1. Open your Terminal
  2. cd to your project directory
  3. Run python -m SimpleHTTPServer
  4. Open your browser to localhost:8000
  5. Done

I didn’t know about the Python way, but another possibility is to run a PHP server, which is a similar process:

  1. Open your Terminal
  2. cd to your project directory
  3. Run php -S localhost:9090
  4. Open your browser to localhost:9090
  5. Done

As Zell points out, you can also run a server as a Node module.

  1. npm install -g http-server (do this once)
  2. Open terminal and type http-server
  3. Go to localhost://8080

As with many things, the best way depends on what you are planning to do. What I like about the first two options, is that you can just run them and do't need to install anything to get going. The last option requires you to download an install the module (globally, hence only once), but still I prefer to not having to do this. Either way, enjoy running your local sites!