Handling JavaScript events with Web Workers

Alex MacArthur: The advantages of Web Workers are many, but things really clicked for me when it came to the several DOM event listeners in any given application. These all necessarily live on the browser’s main thread, and if that thread is congested by a long-running process, the responsiveness of those listeners begins to suffer, …

Fullwidth Content Strips and CSS Subgrid = ❤️

When having fullwidth content strips on your site CSS Grid is a thankful piece of technology. You can use it to place items between the first and last grid-line, as detailed in Breaking Elements out of Their Containers in CSS 💁‍♂️ Alternatively you can also use this .full-bleed utility class To lay out the content …

Getting started with GitHub Actions and Laravel (~PHP)

Ruben Van Assche from Spatie: When GitHub released its new product: GitHub Actions a whole new world opened for developers. Let’s dive right in and see what it brings for the Laravel community. In How to set up PHP for use in a GitHub Action I’ve layed out how to use shivammathur/setup-php@v1 in GitHub Actions. …

Countries, An example GraphQL API

If you’re looking for an example GraphQL API to play with, check out Countries. A public GraphQL API for information about countries, continents, and languages. curl ‘https://countries.trevorblades.com/’ \ -H ‘Content-Type: application/json’ \ -d ‘{“query”:”{ country(code: \”BE\”) { name, native, emoji, currency, languages { code, name } } }”}’ The schema’s available on the playground. Countries …

How to set up PHP for use in a GitHub Action

To use PHP in a GitHub action there’s the magnificent setup-php action. It also allows for installing extensions and setting several php.ini directives. steps: – name: Checkout uses: actions/checkout@v1 – name: Setup PHP uses: shivammathur/setup-php@v1 with: php-version: '7.4' extensions: mbstring, intl #optional, setup extensions ini-values: post_max_size=256M, short_open_tag=On #optional, setup php.ini configuration coverage: xdebug #optional, setup …

mermaid – Generation of diagram and flowchart from text in a similar manner as markdown

Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs. The code for the sequence diagram at the top is this: sequenceDiagram Alice ->> Bob: Hello Bob, how are you? Bob–>>John: How about you John? Bob–x Alice: I am good thanks! Bob-x John: I am good thanks! Note right of John: …