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.
We're disclosing coordinated account activity focused on the ongoing protest movement in Hong Kong. Our investigations have found that these accounts are linked to state-backed information operations from mainland China.https://t.co/Pc9R90Dp85
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.
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.
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.
Published by O'Reilly and now available as a free download...
Since I will to share more content again, I wanted to improve the Open Graph tags on my site, so when shared, the page would present correct and well-formed information. After testing with LinkedIn's post inspector, I noticed mostly text I didn’t like so much anymore, but also that the author information was missing. I wasn’t sure I really wanted to add it, but after looking into it, I decided to give it a go. Why not?
The improved meta tags should be included with all article pages at /articles, /notes and /tilrs.
Before, the whole site set og:type=website, to which I have now added a conditional statement to set og:type=article for respective pages.
From now on these article pages also provide additional information about the author, as well as the date and time for published and last modified. The properties look like this:
article:author
article:published_time
article:modified_time
⚠️ At first I was unsure if article:author was supposed to be part of og: and hence be written like og:article:author, which would have somehow made sense. It’s not, so the syntax for article: does not include the og: prefix.
The complete (Kirby-specific) code block for the article page open graph implementation looks like the below.
The complete spec for Open Graph’s is available and besides article, there are a few more items that might be interesting, depending on the type of content that you share.
Now that Open Graph is fully integrated, go ahead and share all the things!
Thanks for reading and please reach out with any feedback or questions you might have.
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.
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.
For a limited time Dato is available for free on the App Store.
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.
Last week Matthias wrote about the importance of writing down ideas immediately. I have to agree, the best way to being able to remember something, is to write it down right away. I have had many thoughts and ideas floating around, but oftentimes when I don’t write them down, I can’t remember or recall them later.
In a follow-up post Matthias now writes about the “The Single Best Way to Take Notes”, why it is important to do so and what he uses himself to write things down. The article also contains a list of apps that came out of a Twitter survey, with responses on which apps other people use.
I personally use iAWriter for most of the things I want to write down. I like it, because I think the writing experience is very good, there’s an app for macOS and iOS available and both of them sync via iCloud. This way I can always have access to my most recent (or any other) files and I can continue writing, so then one day they will turn into something more complete or thought out. Or get deleted.
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.
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
Over the last few days I have remembered and thought about Jeffrey Zeldman’s article “You Got This” in which he wrote about learning new things and how it can be quite hard, how it’s different to 20 years ago, when we first learned all the things web. I’ve started to learn Vue.js to get a better understanding of what all the talk is about. It’s hard in some ways, especially because some of the concepts are quite different to how I learnt to build for the web. It’s “easy” in some other ways and I really enjoy the process.
I’ve had quite a few moments in which I was about to curse for the rest of the day, but eventually I figured things out and made it work. I do enjoy the process and since this is not the first time, I know how the process usually goes. It’s all about patience and putting time into it. What I’m trying to build is now slowly coming together and I keep thinking “You got this”.
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 ;)
It’s been a long time in the making—or rather thinking about the making—, but I have finally added Brid.gy to my site. Bridgy pulls in Likes and Mentions from Twitter and displays them below Articles and Notes. I’m not sure if it already works, but in theory it should ;) If you like, or mention a tweet with the article or notes URL in it, your Twitter avatar and type of action should be displayed below. I kinda like surprises, so let’s see what it does.
Last week I received an email that my submitted conference talk proposal has not been accepted. This is always a disappointing moment, since of course everyone would rather be selected than rejected.
Important reminder:There is nothing wrong with getting a rejection email for a conference talk and it should not be the reasons to give up submitting your talk again. And again.
I have received many of these emails over the last few years and at some point you will get used to them and be a little less disappointed ;) What I really liked about this last email was that stye included a list of possible reasons on why my talks hasn’t been selected.
it did not perfectly fit in We Love Speed’s orientation: feedback and Web Performance;
it was only technical, and the jury also had the opportunity to involve a speaker with a feedback to back-up their recommendations;
it was close to a topic already discussed last year or another proposal that the jury preferred;
the jury had to make financial choices (especially regarding people from outside Europe);
finally, it was also necessary to make timing arrangements in order to organise the interventions.
While this list isn’t personal feedback on a specific talk, it’s a good pointer to possible reasons. This way of providing feedback is manageable for organisers, since individual feedback can in some cases be impossible to provide and it is a much better read than receiving a rejection email without any further background.
It would be great to see more conferences do similar things. Yet, even providing feedback like this, still needs to be well thought through. Otherwise those reasons, might turn into the list of “default rejection reasons”. Simply copy and then paste. Unfortunately such a list wouldn’t be authentic, useful, honest and transparent after all.
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.
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.
Did you know that the good old <hr> element has changed to a semantic meaning? What we used to know as the “Horizontal Rule” element which was just a line, now is called the “The Thematic Break” element. So instead of a presentational element, <hr> is now a rather semantic element.
Well, I came across it more or less by accident and didn’t know. It must have changed some time ago already, I’m not sure when. It’s also not one of those that you would need or use a lot or look up in the spec…
The HTML <hr> element represents a thematic break between paragraph-level elements: for example, a change of scene in a story, or a shift of topic within a section.
Furthermore:
Historically, this has been presented as a horizontal rule or line. While it may still be displayed as a horizontal rule in visual browsers, this element is now defined in semantic terms, rather than presentational terms, so if you wish to draw a horizontal line, you should do so using appropriate CSS.
When in macOS Finder, press Cmd-Plus or Cmd-Minus and it’ll let you adjust the size of your Desktop icons. Easy, quick, and especially helpful when you are looking for something and can't see the forest for the trees.
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.
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 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.
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.
Today I had a short conversation about Apple Keynote on Twitter. One of the drawbacks with Keynote currently is that it's not possible to import SVG files. In some cases this can be quite cumbersome, but instead of converting all your files manually, it can be done by setting up a folder action (macOS only). The folder action then allows you to simply drop images into a folder and they will be automatically converted to PNG format.
The tool behind the Automator folder action wrapper is svgexport which can also be found on NPM. In case you prefer, you can also run svgexport from your command line without the need for folder actions.
Today I remembered that I set this up some time ago and it has saved me a lot of time in the past. I hope it's going to be helpful to you, too.
Update: As Frederic has pointed out, the upcoming macOS 10.15 release might exclude Automator‘s default installation or even remove it completely, the latter which I doubt. Let‘s see.
It turns out that this is called “Exponentional Notation” and actually does what you wanted it to do in the first place. ;) If I'm not mistaken, those files have been saved with Adobe Illustrator.
Here's how it works: The E tells you how many places to move the decimal point. A negative number after E says to move the decimal point to the left. A positive number tells you to move the decimal point to the right.
To sum things up: opacity: 3.500000e-02 is exactly the same as opacity: 0.035;. I have to say that I find the latter notation much easier to read, much easier to write and easier to understand. That's probably why we don't use this on a regular basis ;)
I'm not sure why it would appear like this in those files, maybe someone can shed a light on it someday.
A new, but incredibly helpful feature landed in Apple’s Keynote: Allowing layering with your master templates. This is a great new addition and there have been many cases, where in the past I would have wished this to be possible.
When in View -> Edit Master Slides the Format sidebar options display the new checkbox option:
When you are creating a new slide from your templates, check the new option to allow layering and your normal template will get a new super power.
Apple Keynote in "Edit Master Slides" mode
Adding a new object to your template would have meant that it is to stay on its own layer (z-index, or enter other preferred term), without any chance of changing its layer index with your master template objects. There have been many times where I did recreate parts of the master template to be able to move objects in my desired layer order.
Apple Keynote showing a slide based on the master template with a red circle object layered above the master objects
With the new option checked and being able to move objects underneath your master template objects, the hassles of recreating template parts are gone. You can move objects in front of and behind master template objects via the options under the Arrange menu item.
Apple Keynote showing a slide based on the master template with a red circle object halfly layered underneath the topmost master object
Yesterday I replied to a tweet about learning resources for JavaScript. In my reply I said “…depends on your learning style…”.
It reminded me of the different learning styles of people and their different preferences when it comes to consuming new information. I love to read books and can learn by reading very well.
I used to have a lot of discussions with my business partner Jane back in the days, where she would ask me how something works and I’d be replying with “we did have a book on this topic, if you wanna learn it”. Books have always been her worst enemy for learning and she always “hated” me for that ;)
In this tweet Andy Bell mentions that you can run a local Python server with these easy commands:
Open your Terminal
cd to your project directory
Run python -m SimpleHTTPServer
Open your browser to localhost:8000
Done
I didn’t know about the Python way, but another possibility is to run a PHP server, which is a similar process:
Open your Terminal
cd to your project directory
Run php -S localhost:9090
Open your browser to localhost:9090
Done
As Zell points out, you can also run a server as a Node module.
npm install -g http-server (do this once)
Open terminal and type http-server
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!
Well, the Kirby snippets in V3 do work a little differently now and do require a variable passed to them, otherwise they won't find the variable and hence not work. It took me a little time to actually think that this could have changed. I wish there was a better reference of changes between the versions though.
State-Controlled Social Media
