Play through all the major events of 2020: the Australia wildfires, Covid-19, the stock market crash, quarantine, the rise of TikTok, the USA elections, etc.
Nicely made little 2D game 🙂
A rather geeky/technical weblog, est. 2001, by Bramus
Play through all the major events of 2020: the Australia wildfires, Covid-19, the stock market crash, quarantine, the rise of TikTok, the USA elections, etc.
Nicely made little 2D game 🙂
mix-blend-mode
not working? Set a background-color
!💡 If you find your CSS mix-blend-mode
not working as expected (on a white background), you need to explicitly set a background-color
on the underlying element. The easiest way to do so is to apply background-color: white;
on the html
and body
elements.
html, body {
background-color: #fff;
}
~
background-color
setYou’ll notice here that for the “white” sections, the set mix-blend-mode: difference
does not seem to work. The navigation will stay white and visually blend into the white background. Note that the navigation is not actually gone, as you can still see it shine through whenever a number of any of the sections crosses it.
See the Pen CSS mix-blend-mode not working? (1/2) by Bramus (@bramus) on CodePen.
The reason why it doesn’t work is that the white sections don’t really have a white background. They have no background-color
set, so they fall back to the default value of transparent
. Visually this is manifested as a white color, but to the compositor it will still be transparent
. As the compositor can’t calculate the difference of the white
text against the transparent
background, the text will remain white
.
~
background-color
setWith background-color: #fff;
set on the body
/html
the compositor does know how to calc the difference, and the demo will behave correctly.
See the Pen CSS mix-blend-mode not working? (2/2) by Bramus (@bramus) on CodePen.
Alternatively we could set this declaration on the sections themselves:
section {
background-color: #fff;
}
~
I don't do this for profit but a small one-time donation would surely put a smile on my face. Thanks!
To stay in the loop you can follow @bramus or follow @bramusblog on Twitter.
SqUID consists of a synchronized autonomous robotic fleet that has 3-dimensional movement capabilities, allowing a fully flexible operation. A high-end embedded control system and smart real-time data analysis allow BionicHIVE’s algorithmic engine to dynamically learn problems created in one warehouse and apply resolutions to all warehouses in the network.
Cool.
The folks over at Spatie have released a new tool called Ray that helps you with debugging.
Ray is a beautiful, lightweight desktop app that helps you debug your app. After installing one of the libraries to send information to Ray, you can use the
ray()
function to quickly dump stuff. Any variable(s) that you pass to Ray will be displayed.
Since Spatie mainly develops with Laravel it plays very nice with it. It supports logging all performed queries or properly displaying the contents of any Eloquent Model / Mailable for example.
ray('Hello world');
ray(['a' => 1, 'b' => 2])->color('red');
ray('multiple', 'arguments', 'are', 'welcome');
ray()->showQueries();
User::firstWhere('email', '[email protected]');
At its core Ray is “simply” an app that listens for incoming messages on a specific port (e.g. 23517
). That means you can use it with any other programming language, as long as you send it the proper (JSON) payload. Libraries to use Ray with WordPress or JavaScript are already available too.
Ray →
Ray Docs →
Ray Introductory Blogpost →
💁♂️ Sidenote: To debug JavaScript I’d recommend the DevTools you already have though, as they’re already built for it. To debug from a remote source you could use something like JSConsole or get knee-deep in ADB and remote debugging protocols. But from a technological point of view it’s pretty cool that you can use Ray for it if you wanted to.
The Progressive Web App term is now five years old, and it’s time to sit down and understand where we are at 2021 within the platform, what has changed during 2020 and what we are expecting for the upcoming months.
It shouldn’t surprise you while reading that iOS is the bottleneck here …
multiple
attributeA popular tweet of mine that’s been doing rounds again (thanks to an RT by Stefan, whom you should definitely follow) is this little tip:
💡 This works wonderfully well with HTML by the way, as you can have a single input[type="email"] take multiple entries.https://t.co/Gm94MdQRo3
— Bramus! (@bramus) December 4, 2020
By setting the multiple
attribute on an input[type="email"]
you can have it accept multiple entries. Each entry is separated by a comma and is validated individually.
Here’s a little demo video of how that works:
💁♂️ For a slight moment there you can see that [email protected]
is considered valid. As per RFC 822 the [email protected]
format — used mainly in local networks — indeed is allowed.
~
However, it was pointed out to me that on iOS this isn’t usable by default:
Ironically, iOS(iPhone) keyboard dosnt show comma for this İnput field. Cant even try it
— Errorist (@orhnarkn) December 4, 2020
On iOS, the “email keyboard” looks like this, with no comma to be found (not even when switching to numbers/symbols):
To work around this limitation you can manually override the input to use the regular keyboard by setting the inputmode
attribute to text
.
That way we still have the built-in browser validation rules (triggered by [type="email"]
) and a means to type in a comma (triggered by [inputmode="text"]
). Double win!
💁♂️ Sidenote: With this inputmode
attribute you can create better number inputs.
~
Combining what we know, here’s a full demo for you to play with:
See the Pen
Accepting multiple e-mail addresses in one input by Bramus (@bramus)
on CodePen.
~
I don't do this for profit but a small one-time donation would surely put a smile on my face. Thanks!
To stay in the loop you can follow @bramus or follow @bramusblog on Twitter.
Following up on last year’s 2019 edition the results for the State of JS are in. 23,765 people answered the survey resulting in an overview of what’s hot and not for JavaScript and its ecosystem.
It’s great to see that language features like Destructuring, Nullish Coalescing and Optional Chaining seem to be common nowadays. However, just like last year, do take this all with a grain of salt though as 43% of the participants consider them to be experts in … CSS 🤨
☝️ For CSS a likewise survey was done: the State of CSS 2020
Update 2020-01-14: If you’re thinking the survey is too biased towards white male Americans, be sure to read State of JS 2020: Common Criticisms by author Sacha Greif.
I can’t seem to find any mention of this in the Media Queries Module specification, but apparently it’s allowed to nest media queries, as shared by Šime Vidas:
Apparently, nested media queries are a thing https://t.co/2L2pEWy2JW
— Šime Vidas (@simevidas) January 10, 2021
That’s … awesome! 🤯
💁♂️ Don’t confuse this with CSS Nesting, an upcoming feature of CSS, which allows you to nest selectors.
Fiddling with it a bit more, turns out this snippet also works as expected:
@media not print {
@media (min-width: 0) {
p {
font-weight: bold;
}
@media (max-width: 750px) {
p {
background: yellow;
}
}
}
}
You can play with this CodePen demo to try it yourself.
UPDATE: Thanks to reader Vadim Makeev for pointing out that support for nested @media
blocks was added to Opera 12.50 back in 2012! Its syntax is defined in the CSS Conditional Rules Module specification.
You can use dive
to help you optimize your Docker image layers.
Say you have these two layers in your Dockerfile
:
RUN wget http://xcal1.vodafone.co.uk/10MB.zip -P /tmp
RUN rm /tmp/10MB.zip
Then you’ll end up with 10MB
of wasted space. dive
will tell you, so that you can combine these into one optimized layer:
RUN wget http://xcal1.vodafone.co.uk/10MB.zip -P /tmp && rm /tmp/10MB.zip
You can also integrate it as a build step in your CI/CD pipeline, and make it break the build in case you don’t meet a certain quotum.
Installation per Homebrew:
brew install dive
🔗 Related: In How to build smaller Docker images you can find some practical tips to keep your docker image size under control.