I’ve been learning TensorflowJS and Machine Learning, as an experiment, I thought I would implement a search across my current blog posts using sentence similarity on natural language, running in the browser.
In this post i’ll go into how you can get started using pre-trained Tensorflow models to do Machine learning in the browser, examine some of the potential gotchas, such as not blocking the main thread with custom logic and consider the impact of the size of models on UX.
The demo that I developed as part of this article is a “search engine” using my blog posts as a data set, which I converted into an API, the idea being: can I find blog posts based on a search query by a user, by comparing the similarity of the query…
Sometimes when you’re prototyping and learning a new library you want a quick way to get type-checking/intellisense/auto-complete to assist with your learning. Here is a quick way to enable type checking without fully opting into TypeScript.
I’ve been learning a little bit of artificial intelligence/machine learning in my spare time and I recently started learning a little TensorflowJS. The quickest and simplest way of getting TensorflowJS is a good old script tag. When you are experimenting and prototyping you really don’t want to waste time with build tools.
Whilst this tutorial explains setting up basic type-checking for TensorflowJS it should work for any global library that has TypeScript documentation. …
That feeling when you see some awful code, and then realise you wrote it. Here’s a story of how some bad code I wrote in a unit test, made it into production and caused a memory leak in a NodeJS application.
A project that I work on started showing crashed Pods in our Kubernetes (K8s) cluster, which runs a NodeJS server in a container, it was failing with a dreaded “OOMKilled” (Out of memory killed) error, which sent me down the path of learning about profiling NodeJS applications for memory leaks.
If you don’t know much about Kubernetes, that doesn’t matter for this article, the fact the NodeJS application is running in K8s is incidental to the tale, and I will only mention it briefly when discussing debugging in Kubernetes.
I learnt a lot through investigating this memory leak, not just…
Masonry layouts, think bricks, think Pinterest, have had many solutions in the web over the years. Many use too much JavaScript, but there is some exciting new things coming to CSS grid to enable Masonry layouts. But you don’t have to wait, you could implement today, using progressive enhancement. Progressive enhancement is like technical debt that fixes itself.
A few days ago I found that I had talked myself into re-designing a website. The website is for my brothers’ guitar teaching business which I had previously worked a few years ago, when I was a student. (if you click that link and view it before the rework, yeah I know the site needs work, that’s what i’m doing here).
As part of the redesign I was trying to think of ways to lay out testimonials from students, which may have varying length/content, I stumbled onto the idea of using a masonry layout (think bricks, think Pinterest).
It turns out configuring ESLint to use Stage 3 proposals is actually a massive pain, and sends you down a rabbit hole of Babel, assumed knowledge, renamed packages and half answered questions.’
Some members in my team this week wanted to make use of Private class fields in a NodeJS server. This proposal is currently shipped in Chrome, Edge, Firefox and NodeJS, with Safari notably absent. In this instance, we wanted to get them working for a backend server application, so support since Node 12, we’re good to go, or so I thought, turns out linters aren’t always here to save you time.
I summed my feelings on the whole process of figuring this out on Twitter.
Feel free if you want to skip ahead past the story, and to head…
I work with React and painfully slow Webpack builds every day, using 11ty for my blog was a breath of fresh air. By using the 11ty starter projects and awesome courses and tutorials for help, I felt like I had superpowers!
This article details some of the different resources that I used for learning 11ty to build out my personal website. This is not a tutorial, it is more of a description of the journey that I went on, with the hope some of the steps that I took might help others.
When building griffa.dev I wanted to bring things as back to basics as much as I could.
I wanted to write:
- HTML
- CSS
- and vanilla JS/Node JS
I wanted to have:
Adding share links for all the various places users can share content from Twitter, to LinkedIn or Reddit and many more, can be a real pain. The Web Share API is growing in support, making sharing content on the web easier than ever. For browsers that don’t support the API you can fall back to self generated share targets.
Supporting all of various places that content can be shared on a web site is tricky, all sites have their own mechanisms for doing it, and you can never support all of the places that a user may want to share content.
Thats where the Web Share API comes in, with it, sharing content on the Web is much more straight forward, using this API also gives your users the freedom to share content wherever they like, from chat apps and social media to a notes app.
At the end of the article I go into the all important html…
Some quick debugging tips that I came up with whilst building my personal blog.
The 11ty documentation is really great, but when it comes to developing and debugging, I really prefer to use a live debugger. It can help to understand a problem, but also can serve as a really great way of understanding how you might go about hooking into a framework, in this case 11ty.
Using a filter to debug 11ty
In my config for 11ty projects I put in this little debugging filter.
You could use this filter to find out the available attributes on a post, for you to use in your template, for example.
I have a hero object on my posts:
In…
I took a progressive enhancement approach to using frontend javascript for my blog, Web Components are the perfect fit here.
This posts describes one of the things that was involved in building out my personal blog griffa.dev, more more details and live demos feel free to read over there.
I wanted to bring things back to basics with this blog, focusing on web fundamentals e.g. html and css. In addition to this, by using 11ty, i’m able to author in Markdown, meaning i’m free to add HTML anywhere in my posts.
However, whist i’m focusing on HTML/CSS, there are areas where it makes sense to sprinkle in JavaScript, for extra interactivity, this is where Web Components come in.
Hey! He…
