DEV Community: Deniz Akşimşek

You don't need a modal window

Deniz Akşimşek — Sun, 11 Jun 2023 23:23:05 +0000

After a conversation in the htmx Discord, and realizing .dev domains aren't as expensive as I remember, I decided to make a microsite:

YouDontNeedAModalWindow.dev

I tried to talk about the flaws and dangers of modal windows and how I think they're overused, while also acknowledging the cases where they are the right solution.

What do you think?

Intentionally Unscalable

Deniz Akşimşek — Sun, 06 Feb 2022 11:52:45 +0000

_hyperscript is intentionally unscalable. We make decisions that would be obviously inadvisable to anyone looking to make scalable software, and dismiss features like reactivity that seem to have proven themselves in this regard. To understand why, I examine and critique the concept of “scalable”.

Scalability refers to the ability of a system to handle more work given more resources. This definition matches both formal definitions and common use in application development circles. Given this definition, we can see that:

Scalability is unidirectional — it only refers to scaling up, never scaling down. In fact, I never hear “scaling down” discussed at all. Declaring it out-of-scope to ascribe this to a wider culture of growth, I’ll just speculate that perhaps scaling down is assumed to be trivial, or not necessary as a system that handles a large amount of work can necessarily handle a small amount, adequately, without modification.
When people talk about the scalability of a tool, they are usually employing metonymy^[1]. They are discussing the impact of the tool on other systems’ scalability (will _hyperscript hinder us as we get more users/our app gets more complex?) and not the scalability of the tool itself (can we get hyperscript to run N lines of code in T time with better hardware?)
System, work, resources — a software development team consists of multiple systems using multiple kinds of resources to do multiple kinds of work. Which system is being discussed is usually clear through context, but we should be aware when “scalable” is used without such context.

System	More Work	Resources
Software	Serve more users.	Computers.
Team	Add complexity to the software and maintain it.	Time, money.

The two main systems in a software organization.

Why is scalability desired?

“As our app gets more complex, X will prevent us from growing and maintaining it”.
“As we get more users, the app we built with X will need rewriting”.

Write to rewrite

Expect that you might need to rewrite your code, and be considerate of your future self who is doing that. _hyperscript helps you do this in two ways:

Readability over writability. The fact that _hyperscript code examples look like plain English is just as much an achievement of the author as it is _hyperscript’s. We do not do anything smart like Natural Language Processing; _hyperscript uses common and normal parsing techniques. C++, Perl, perhaps even Ruby have more complex grammars than _hyperscript. We give you tools like the prop of object and object's prop syntax. and theit variable that might seem magical but is actually little more than the accumulator register in an 8-bit processor. It is up to you the programmer to use these tools to create readable code. The burden you take upon your shoulders can include (but will not be limited to):
Locality of behavior. Ever looked through a GitHub repo, not been able to find the code you were looking for, eventually clone the repo locally and start “Jump to Definition”-ing and “Peek References”-ing your way towards your target, only to find out it’s a wrapper for yet another function? If it is a Java project, I usually give up before reaching any source code files at all. Htmx “Carson” Org has written about Locality of Behaviorpreviously, so I’ll direct you there.

Conclusion

I recall what I now know to be an urban legend about the great architect Mimar Sinan. Supposedly, when the keystones of some arches in a mosque he built were yielding to old age, an engineer working on the restorations found a note in a bottle signed by Koca Mimar Sinan Ağa himself. It was a step-by-step guide on how to replace the keystone without disruption to the rest of the structure, complete with drawings.

Putting aside the implication that our modern architects don’t know how stone arches are built, and that Great Sinan Agha The Architect expected such architects to restore his works, this fictional Mimar Sinan clearly doesn’t know anything about scalability. If he did, he would predict when the Sultan would die and make the mosque last exactly that long.

When asked what their language is good for, many designers would say “everything” which really means “nothing”.

– Robert Nystrom, What I Learned at the Emerging Languages Camp

Nystrom said this in the context of choosing a niche for your language, but I believe it applies just as well to choosing a scale.

I was excited when looking up this word on Tureng, but “metonymy” doesn’t really have the barebones simplicity of the Turkish “ad aktarması” or the weight of the Arabic loan “mecaz-ı mürsel”. ↩︎
The way that the “we’ll need rewriting” argument assumes growth, but rejects relying on it reminds me of paying people in shares. If you can’t trust it enough to just pay me the money you’ll definitely make back, why should I? ↩︎
originally said this much more pithily: “if you are certain you’ll grow to 1 billion users, and you need an app that can handle that, why build it now on a startup budget when you’re going to have the budget of a 1B-user app soon” ↩︎
I’m aware that some people do programming purely as a job. I sometimes envy the indifference I imagine they have towards our petty squabbles. ↩︎

Sprinkle Sharing

Deniz Akşimşek — Thu, 02 Sep 2021 16:41:00 +0000

This post is directly from my notes, with no edits.

When people talk about code sharing between server and client, the usual suspects are Node.js and sharing model classes. However, there’s often good reason to duplicate these.

A far more interesting type of code sharing to me is eliminating this duplication:

When you are writing a server-driven web app with “sprinkles” of JS, you want to have interactive components, but also deliver usable HTML to non-JS-enabled ^[1] clients. This means you are essentially writing a component with the first render and subsequent updates are written in different languages – HTML then JS. How to make this nicer? (Existing answers follow)

Alpine and similar

Write both in one language: “HTML with JS inline in special attributes”.

React and similar

Write both in one language: “JS optionally with JSX”. Hard to set up sprinkle style, but wasn’t this how it was originally created to be used?

“Non-JS-enabled” includes not only browsers where the user turned off JS, but also times when the JS didn’t load, or errored due to use of unsupported modern features. ↩︎

Event Delegation in _hyperscript

Deniz Akşimşek — Thu, 20 May 2021 09:43:49 +0000

on click
  tell the closest <li/> to the target
    remove yourself
    -- do more stuff...
    -- "you" refers to the clicked list item

I’ve seen some people use a pattern like this:

<ul>
  {% for item in items %}
    <li _="on click remove me"></li>
  {% endfor %}
</ul>

This is convenient to write if you have a server-side templating system, but has a few issues:

The code needs to be parsed N times where N is the number of items.
The resulting HTML is bloated.
If you add more items client-side, you need to repeat the code there.

The pattern for resolving this is called event delegation. Here’s how you might do it in JavaScript:

ul.addEventListener('click', e => {
  const li = e.target.closest('li')
  if (!li) return
  li.remove()
})

We add a single event listener to the enclosing list, which finds the item that was clicked and manipulates it.

In _hyperscript, the tell command allows us to manipulate an element other than me conveniently, by changing the implicit target from me to ypu, which refers to the element being “told”.

Hypelet: make bookmarklets with _hyperscript

Deniz Akşimşek — Sat, 01 May 2021 12:06:37 +0000

I made a tool to make bookmarklets in _hyperscript. You just write some code in the box and drag the bookmarklet into your bookmarks toolbar. Hypelet injects glue code to load hyperscript dynamically and run your code. You can get a permalink to share your bookmarklet.

Here’s Hypelet: Hypelet
Here’s the code for a bookmarklet to get the RSS feed of a page: Get RSS – Hypelet

The Implementation of HDB, the _hyperscript debugger

Deniz Akşimşek — Thu, 18 Mar 2021 07:44:13 +0000

The 0.0.6 release of the _hyperscript hypertext UI scripting language introduces HDB, an interactive debugging environment. In this article I discuss how the hyper-flexible hyperscript runtime allowed me to implement the first release of HDB with ease. If you'd like to see what HDB is like, I have a a demo on my website.

Implementation

HDB lives in a single JavaScript file.

Turning the keys

In the hyperscript runtime (which is a tree walking interpreter), each command has an execute() method which either returns the next command to be executed, or a Promise thereof. The execute method for the breakpoint command creates an HDB environment and assigns it to the global scope (usually window):

hdb.js ln. 20

var hdb = new HDB(ctx, runtime, this);
window.hdb = hdb;

The HDB object keeps hold of the current command and context as we step through. (The context is the object holding the local variables for the hyperscript code, and some other things the runtime keeps track of). We call its break() method:

hdb.js ln. 35

HDB.prototype.break = function(ctx) {
    var self = this;
    console.log("%c=== HDB///_hyperscript/debugger ===", headingStyle);
    self.ui();
    return new Promise(function (resolve, reject) {
        self.bus.addEventListener("continue", function () {
            if (self.ctx !== ctx) {
                // Context switch
                for (var attr in ctx) {
                    delete ctx[attr];
                }
                Object.assign(ctx, self.ctx);
            }
            delete window.hdb;
            resolve(self.runtime.findNext(self.cmd, self.ctx));
        }, { once: true });
    })
}

There are a few things to unpack here. We call self.ui() to start the UI, which we'll get to later. Remember how a command can return the next method to execute as a promise? The break method resolves after the internal event bus receives a "continue" event, whether by the user pressing "Continue" or simply reaching the end of the debugged code.

The "context switch" is the dirtiest part of it all. Because we can step out of functions, we might finish debugging session with a different context than before. In this case, we just wipe the old context and copy the current context variables over. Honestly, I thought I'd have to do a lot more of this kind of thing.

Speaking of stepping out of functions...

Stepping Over and Out

Firstly, if self.cmd is null, then the previous command was the last one, so we just stop the debug process:

hdb.js ln. 58

HDB.prototype.stepOver = function() {
    var self = this;
    if (!self.cmd) return self.continueExec();

If not, then we do a little dance to execute the current command and get the next one:

hdb.js ln. 61

var result = self.cmd && self.cmd.type === 'breakpointCommand' ?
    self.runtime.findNext(self.cmd, self.ctx) :
    self.runtime.unifiedEval(self.cmd, self.ctx);

We perform a useless check that I forgot to take out (self.cmd &&). Then, we special-case the breakpoint command itself and don't execute it (nested debug sessions don't end well...), instead finding the subsequent command ourselves with the runtime.findNext() in hyperscript core. Otherwise, we can execute the current command.

Once we have our command result, we can step onto it:

hdb.js ln. 64

if (result.type === "implicitReturn") return self.stepOut();
if (result && result.then instanceof Function) {
    return result.then(function (next) {
        self.cmd = next;
        self.bus.dispatchEvent(new Event("step"));
        self.logCommand();
    })
} else if (result.halt_flag) {
    this.bus.dispatchEvent(new Event("continue"));
} else {
    self.cmd = result;
    self.bus.dispatchEvent(new Event("step"));
    this.logCommand();
}

If we returned from a function, we step out of it (discussed below). Otherwise, if the command returned a Promise, we await the next command, set cmd to it, notify the event bus and log it with some fancy styles. If the result was synchronous and is a HALT; we stop debugging (as I write this, I'm realizing I should've called continueExec() here). Finally, we commit the kind of code duplication hyperscript is meant to help you avoid, to handle a synchronous result.

To step out, we first get our hands on the context from which we were called:

hdb.js ln. 80

HDB.prototype.stepOut = function() {
    var self = this;
    if (!self.ctx.meta.caller) return self.continueExec();
    var callingCmd = self.ctx.meta.callingCommand;
    var oldMe = self.ctx.me;
    self.ctx = self.ctx.meta.caller;

Turns out _hyperscript function calls already keep hold of the caller context (callingCommand was added by me though). After we change context, we do something a little odd:

hdb.js ln. 92

self.cmd = self.runtime.findNext(callingCmd, self.ctx);
self.cmd = self.runtime.findNext(self.cmd, self.ctx);

Why do we call findNext twice? Consider the following hyperscript code:

transition 'color' to darkgray
set name to getName()
log the name

We can't execute the command to set name until we have the name, so when getName() is called, the current command is still set to the transition. We call findNext once to find the set, and again to find the log.

Finally, we're done stepping out:

hdb.js ln. 95

self.bus.dispatchEvent(new Event('step'))

HDB UI

What did I use to make the UI for the hyperscript debugger? Hyperscript, of course!

hdb.js ln. 107

<div class="hdb" _="
    on load or step from hdb.bus send update to me
    on continue from hdb.bus remove #hyperscript-hdb-ui-wrapper-">

There are a lot of elements listening to load or step from hdb.bus, so I consolidated them under update from .hdb. #hyperscript-hdb-ui-wrapper- is the element whose Shadow DOM this UI lives in --- using shadow DOM to isolate the styling of the panel cost me later on, as you'll see.

We define some functions.

hdb.js ln. 112

def highlightDebugCode
    set start to hdb.cmd.startToken.start
    set end to hdb.cmd.endToken.end
    set src to hdb.cmd.programSource
    set beforeCmd to escapeHTML(src.substring(0, start))
    set cmd to escapeHTML(src.substring(start, end))
    set afterCmd to escapeHTML(src.substring(end))
    return beforeCmd+"<u class='current'>"+cmd+"</u>"+afterCmd
end

Now, I wasn't aware that we had template literals in hyperscript at this point, so that's for the next release. The escapeHTML helper might disappoint some:

hdb.js ln. 122

def escapeHTML(unsafe)
    js(unsafe) return unsafe
        .replace(/&/g, "&amp;")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/\\x22/g, "&quot;")
        .replace(/\\x27/g, "&#039;") end
    return it
end

Unfortunately, hyperscript's regex syntax isn't decided yet.

And we have the most broken part of HDB, the prettyPrint function. If you know how to do this better, feel free to send a PR.

Having defined our functions we have a simple toolbar and then the eval panel:

hdb.js ln. 158

<form class="eval-form"  _="
    on submit call event.preventDefault()
    get the first <input/> in me
    then call _hyperscript(its.value, hdb.ctx)
    then call prettyPrint(it)
    then put it into the <output/> in me">
    <input type="text" id="eval-expr" placeholder="e.g. target.innerText">
    <button type="submit">Go</button>
    <output id="eval-output"><em>The value will show up here</em></output>

Why do I use weird selectors like <input/> in me when these elements have good IDs? Because #eval-expr in hyperscript uses document.querySelector, which doesn't reach Shadow DOM.

A panel to show the code being debugged:

hdb.js ln. 170

<h3 _="on update from hdbUI
        put 'Debugging <code>'+hdb.cmd.parent.displayName+'</code>' into me"></h3>
<div class="code-container">
    <pre class="code" _="on update from hdbUI
                            if hdb.cmd.programSource
                                put highlightDebugCode() into my.innerHTML
                                scrollIntoView({ block: 'nearest' }) the
                                first .current in me"></pre>
</div>

Finally, a context panel that shows the local variables.

hdb.js ln. 106

<dl class="context" _="
    on update from hdbUI
    set my.innerHTML to ''
    repeat for var in Object.keys(hdb.ctx) if var != 'meta'
        get '<dt>'+var+'<dd>'+prettyPrint(hdb.ctx[var])
        put it at end of me
    end end
    on click
        get closest <dt/> to target
        log hdb.ctx[its.innerText]"></dl>

That loop could definitely be cleaner. You can see the hidden feature where you can click a variable name to log it to the console (useful if you don't want to rely on my super-buggy pretty printer).

Some CSS later, we're done with the UI! To avoid CSS interference from the host page, we create a wrapper and put our UI in its shadow DOM:

hdb.js ln. 350

HDB.prototype.ui = function () {
    var node = document.createElement('div');
    var shadow = node.attachShadow({ mode: 'open' });
    node.style = 'all: initial';
    node.id = 'hyperscript-hdb-ui-wrapper-';
    shadow.innerHTML = ui;
    document.body.appendChild(node);
    window.hdbUI = shadow.querySelector('.hdb');
    _hyperscript.processNode(hdbUI);
}

The End

In just 360 lines, we have a basic debugger. This speaks volumes to the flexibility of the hyperscript runtime, and I hope HDB serves as an example of what's possible with the hyperscript extension API. Like the rest of hyperscript, it's in early stages of development --- feedback and contributors are always welcome!

Iota (from Golang) in JavaScript

Deniz Akşimşek — Sun, 10 Jan 2021 14:57:00 +0000

(Skip to code)

Enums in Javascript

Currently, the ways we create enums include

String literals (see addEventListener), which can be typed with TypeScript, but look a bit ugly
```
type Direction = 'north' | 'east' | 'south' | 'west'
```

TypeScript enums

enum Direction { north, east, south, west }

Integer constants, IMO your best option if you’re not using TypeScript

const Directions = { north: 0, east: 1, south: 2, west: 3 }

Enums in Go ^[1]

Go doesn’t have enums, but an unusual keyword iota:

type Direction int
const (
    North Direction = iota
    East
    South
    West
)

There’s something subtle going on here. The iota relies on a few Go features:

When multiple const declarations are grouped together, the right hand side is implicitly repeated
Iota is incremented every time it is evaluated, and reset with each const

My JavaScript shorthand is nowhere near as magical… but it does make use of proxies.

function iota(start = 0) {
    let count = start
    return new Proxy({}, {
        get(o, prop) {
            if (prop in o) return o[prop]
            else return o[prop] = count++
        }
    })
}

const { north, east, south, west } = iota()
console.log(north)

So, is this function any good?

For one, it lacks some of Go’s iota capabilities — you can’t create bitmasks with this the way you would in Go with 1 << iota. We could augment it a bit by accepting a callback:

function iota(cb = (i => i)) {
    let count = 0
    return new Proxy({}, {
        get(o, prop) {
            if (prop in o) return o[prop]
            else return o[prop] = cb(count++)
        }
    })
}

// flag bits
const { hasPermissionFlag, userModeFlag, useLegacyProtocolFlag } = iota(i => 1 << i)
const hasPermission = options & hasPermissionFlag

I don’t think bitmasks are very common at all in JavaScript code, though.

A more significant setback is that you can’t get a list of all the enum values — nothing we can’t fix:

function iota(start = 0) {
    let count = start
    let firstProp = true
    return new Proxy({}, {
        get(o, prop) {
            if (firstProp) {
                firstProp = false
                return { // Enum descriptor
                    get values() { return o }
                }
            }
            if (prop in o) return o[prop]
            else return o[prop] = count++
        }
    })
}

const { Direction, north, east, south, west } = iota()
console.log(Direction)

This is open for extension — we could add more methods on the enum description such as converting the integer value of a Direction to its name, or validating a Direction that we parsed from a config file.

I might have a metaprogramming addiction.

Initially I wasn’t going to bring Go into this at all. However, it turns out enum is a reserved word in JS, so I went with iota for the name of the function, and felt the need to explain it. ↩︎

Eleventy + Markdown + CoffeeScript = ❤

Deniz Akşimşek — Fri, 16 Oct 2020 14:12:00 +0000

I’ve started using CoffeeScript instead of YAML for frontmatter, and it works like a dream. Endorsed by Zach Leatherman.

Markdown with Frontmatter

As far as I know, Jekyll is the origin of using a YAML block at the top of a Markdown file for metadata. It’s not hard to imagine why this became popular — associating prose with data is a common use case, and though they have their issues, both Markdown and YAML look pretty^[1].

Eleventy Frontmatter

Eleventy uses frontmatter blocks (delimited by ---) for all kinds of files. Markdown posts, HTML partials and Nunjucks/EJS/Liquid/… templates can all have them. The data in the frontmatter can then be used in templates. In the following, title is not a reserved name:

--------
title: 'A Blog Post'
--------

# {title}

Lorem ipsum dolor sit amet...

We could have used name, heading or kdsad983erj33.

Eleventy’s “Computed Data” feature relies on functions in the frontmatter. As YAML doesn’t have functions, you are expected to use JS (well, you can use template strings I guess…):

--------js
{
  title: "My page title",
  eleventyComputed: {
    currentDate: () =>
      new Date().toLocaleString() 
  }
}
--------
<!doctype html>
<html>
<!-- … -->
<body>
  <h1>{{title}}</h1>
  <p>Published on {{currentDate}}</p>
  <!-- … -->

Computed data is cool. Among other things, it allows me to move logic away from my templates and express it in an actual programming language. However JS frontmatter is not very pretty, and I don’t want to convert my whole frontmatter just for one function.

If only there was a language that had the expressive power of JS, and the visually clean data notation of YAML…

CoffeeScript All The Time!

CoffeeScript is actually mentioned in the GitHub repo for gray-matter, the library Eleventy uese to parse frontmatter. Compared to YAML, it’s not much more verbose:


--------
title: Street sign in İstanbul
date: 2020-10-10T19:27:39+03:00
tags:
- place
- design
uPhoto: /assets/photos/IMG20201007085906-02.jpeg
türkçe: /2020/istanbul-sokak-tabelasi/
--------

<!-- YAML -->


--------
title: 'Street sign in İstanbul'
date: '2020-10-10T19:27:39+03:00'
tags: ['place', 'design']
uPhoto: '/assets/photos/IMG20201007085906-02.jpeg'
türkçe: '/2020/istanbul-sokak-tabelasi/'
--------

<!-- CoffeeScript -->

The CoffeeScript code above is actually fully YAML-compatible! This keeps my templates portable. And with computed data:

--------
layout: 'layout'
eleventyComputed:
  syndicationLinks: (data) ->
    DEV: data.devToSyndication[data.page.url]
--------

<article class="h-entry">
<!-- ... -->
{%for silo, link in syndicationLinks%}
  <a class="u-syndication" href="{{link}}">{{silo}}</a>
  {%if not loop.last%} | {%endif%}
{%endfor%}

I think that computed frontmatter gives a nice balance of logic-less^[2] and logic-full templates.

“It looks pretty” is often what people really mean when they call something “human-readable”. ↩︎
Logicless templates: For people who will never need to make an HTML monthly calendar! ↩︎

Add Syndication Links On Your Personal Site Using Dev.to API

Deniz Akşimşek — Thu, 17 Sep 2020 18:10:00 +0000

I recently started using the RSS publishing option to syndicate posts from my personal site to DEV. This allows people to post comments under my posts, many of which might contain useful info. To allow my millions of readers (!) to easily discover and participate in these discussions, I’ve added links to the dev.to copies under my posts.

(Skip to code)

I could, of course, add these links manually whenever I post, but being armed with such a powerful static site generator as Eleventy, I couldn’t possibly not automate it.

The API and the Data File

Eleventy users will be aware of how easy it is to gather all kinds of data from various APIs and put it in your site, all statically without client-side code. Our task here is exceptionally simple: Pick out the url and canonical_url properties for each article, and create a mapping from the latter to the former.

const fetch = require('node-fetch')

module.exports = fetch('https://dev.to/api/articles?username=dza')
    .then(res => res.json())
    .then(articles => articles.map(
        ({canonical_url, url}) => [canonical_url, url]))
    .then(Object.fromEntries)

Note: If you are copy-and-pasting this code, make sure to replace dza with your own dev.to username.

This will give us an object like this:

{
    "https://www.denizaksimsek.com/2020/css-additional-box-shadow/":
        "https://dev.to/dza/css-adding-additional-box-shadows-2lob",
    ...
}

Now let’s try using it in our templates:

{%if devToSyndication[page.url]%}
<section class="syndication-links">
This article is syndicated to <a class="u-syndication"
    href="{{devToSyndication[page.url]}}">DEV</a>, where you can comment on it.
</section>
{%endif%}

Small problem: the page.url property Eleventy provides us is a relative URL, whereas the URLs we got from DEV are absolute.

Sounds like a job for the URL class!

function makeRelativeUrl(url) {
    const urlObj = new URL(url)
    // you might want to append url.search and url.hash too
    // but it's unlikely, and a small amount of tech debt is
    // good for the soul
    return urlObj.pathname
}

...
({canonical_url, url}) => [makeRelativeUrl(canonical_url), url])

Now you should see links on any post that is syndicated to DEV.

Appendix: The Final Data File

const fetch = require('node-fetch')
function makeRelativeUrl(url) {
    const urlObj = new URL(url)
    // you might want to append url.search and url.hash too
    // but it's unlikely, and a small amount of tech debt is
    // good for the soul
    return urlObj.pathname
}
module.exports = fetch('https://dev.to/api/articles?username=dza') 
    .then(res => res.json())
    .then(articles => articles.map(
        ({canonical_url, url}) => [makeRelativeUrl(canonical_url), url]))
    .then(Object.fromEntries)

Tip: Instantly Edit Your Eleventy Site on Github

Deniz Akşimşek — Thu, 17 Sep 2020 00:00:00 +0000

You’re looking at the blog post you made yesterday, when suddenly a typo catches your eye. What is the fastest way to fix it? (Skip to code).

Note: This tip assumes you use GitHub. It could likely be adapted easily for other Git providers.

Add the following to your base layout (note the {{ }} and replace <username>/<repo> with the repo for the site):

<script>
addEventListener('keyup', e => {
  if (e.shiftKey === true) {
    switch (e.keyCode) {
    case 69: // E
      window.location = 'https://github.com/<username>/<repo>/edit/master/{{page.inputPath}}'
      break 
    }
  } 
})
</script>

When you press Shift+E, the GitHub editor will open to the current page! The switch statement is there because I used to have a few more hotkeys.

CSS — Adding Additional Box Shadows

Deniz Akşimşek — Wed, 02 Sep 2020 09:54:44 +0000

When you want to add a box shadow to an element, but don’t want to override any it might already have. (Jump to code)

Less-than-amazing solutions

We could copy the box-shadow property from the element in question, paste it and append our additional shadow at the end. Of course, this requires us to know the box-shadow on the target element, which might not always be possible (say, making a reusable .highlight-glow class).

StackOverflow says to put the shadow on an absolutely-positioned pseudo-element. This leaves us with a similar problem to the one we started with — the element in question might already have styles on the ::before or ::after that conflicts with ours.

My solution

Use CSS variables to apply box shadows.

.shadowy-figure { --box-shadow: .5em .5em 1em #333; box-shadow: var(--box-shadow);}

Later on, you can tack things on at the end of this variable, like so:

.highlight { box-shadow: var(--box-shadow), 0 0 .1em #fff inset;}

One drawback is that we cannot use this technique in several classes and apply them to one element. We can solve this problem when parent-var() is a thing in CSS — if it already is by the time you read this post, do let me know!

Eleventy — Dynamically Inlining Google Fonts

Deniz Akşimşek — Fri, 24 Jul 2020 11:33:00 +0000

When you add Google Fonts to your website by copying the link from the fonts.google.com website, you create a request chain. That is, after loading the HTML of your page, the browser then needs to request a bit of CSS from Google, and only then can it start loading the fonts themselves.

A simple solution to this is to copy the CSS returned by Google and paste it into a <style> element in your page. However, I like to change fonts quite frequently, and I’d like to automate this process. This is easy with Eleventy.

A JavaScript data file

We simply fetch the CSS at build time.

// _data/googleFontsStylesheet.js
const fetch = require('node-fetch')
const url = 'the URL in the Google Fonts stylesheet link href'
module.exports = fetch(url).then(res => res.text())

And include it in our base layout.

<style type="text/css">{{googleFontsStylesheet|safe}}</style>

Enjoy your improved Lighthouse scores!