I have 4 (rounded up) beefs with language-y AI bots that have resulted in me sort of avoiding them altogether: They have the personality of a middle manager who writes Google Docs all day that nobody wants to read They’re reallllly good at guessing but not actually that smart, which leads to very convincing lies (see: the “how many Rs in...
.floatie-bit img { object-fit:cover; transition: transform 0.3s ease-in-out; cursor: zoom-in} .floatie-bit img:hover{ transform: scale(1.5); z-index: 1000; } @media (max-width: 700px) { .floatie-bit > img { margin-top: 0; margin-bottom: 24px; width: 100%; } } Wow, long time, no posts! Anyway, about them text-to-art...
(This is a post mostly about art but I swear there’s a moral in here for all you tech readers, or at least a discounted therapy lesson.) As you may have noticed from these latest posts, at the beginning of this year I decided to “do more art”. This went really well for a couple of months: I was making new shit; I was pumped; I felt competent....
.floatie-bit { display: flex; flex-direction: row; } .floatie-bit > p { margin: auto; padding-left: 24px;} .floatie-bit > img { width: 35%; flex-shrink: 0; vertical-align: middle; border-radius: 10px; } .floatie-bit > .img-column { width: 30%; flex-shrink: 0; display: flex; flex-direction: column; margin-right:...
The last time I changed something big on my site was 3+ years ago. I was really into gradient rainbow text and IBM Plex Mono. It was a mild increment over whatever I had before, which was just a cleaned up and colourful version of Left from like 6 years prior. Anyway, what I’m saying is: this website had hella split ends. Here’s the before and...
.floatie-bit { display: flex; flex-direction: row; } .floatie-bit > p { margin: auto} .floatie-bit > img { width: 35%; flex-shrink: 0; vertical-align: middle; border-radius: 10px; } .floatie-bit > .img-column { width: 30%; flex-shrink: 0; display: flex; flex-direction: column; margin-right: var(--spacing-s); } .img-column...
My one policy about blogging is “write the blog post you wanted to find in the search results”. I spent an inordinate amount of time yesterday trying to get typedoc to only show the docs for the files I’m actually exporting in my library, and didn’t find anything on the internet to help me, so here is the blog post I wanted to read. The problem...
Back in the day when I worked on Polymer I got used to relying on a bunch of useful CSS classes that at the time we called iron-flex-layout. They were there partly because flexbox was a sadness on IE and you needed to say everything 3 times to maybe get it right twice, and add some very special flex-basis: 0.000000001px “bug fixes” that tbh...
img.plot { max-height: 400px !important; } My job nowadays involves a lot of music and JavaScript. You know what musicians really care about? Paychecks (support your local musicians, go to concerts, don’t steal music from indie musicians). But also: keeping time. Keeping time in JavaScript is kind of a joke, not just because time is a social...
One of the first things you stumble on when you start using TensorFlow.js is that sometimes you need your data as a Tensor, and sometimes you need it as a JavaScript number. Maybe it’s for logging it, maybe it’s for displaying it somewhere during training, maybe it’s because you don’t trust the robots to be better than you at math. This is a...
Inktober is a project where artists make an ink drawing every day for the whole month of October. This year I did an inktober but ignored all the rules, and made Internet Stuff™️ instead. That experiment lives here, but I want to tell you why I did it before you go ahead and judge it. I think that it’s also important to tell you it was a huge...
Magenta.js is a JavaScript library that helps you generate art and music on the web. It’s also the team that I work on now! One of the things that I do whenever I join a new team is learn a bunch of things, and then make a bunch of tutorials that past Monica would’ve loved to stumble over. This is one of them! In this tutorial, we’ll talk about...
iframe { height: 640px; width: 100%; margin: 0 auto; border: 5px solid #E0F7FA; border-radius: 3px; } Machine Learning (ML) is the dope new thing that everyone’s talking about, because it’s really good at learning from data so that it can predict similar things in the future. Doing ML by hand is pretty annoying since it...
iframe { height: 800px; width: 100%; margin: 0 auto; border: 5px solid #E0F7FA; border-radius: 3px; } When you have a float CSS property on a box (with a value different than none), this box must be laid out according to the float positioning algorithm. Loosely, it says: if the box has float:left, the box is positioned at...
img.otter { max-height: 220px !important; } iframe.otter { height: 800px; width: 100%; margin: 0 auto; border: 5px solid #E0F7FA; border-radius: 3px; } Before I wrote the JavaScripts, I got a master’s in AI (almost a decade ago 🙀), and wrote a thesis on a weird and new area in Reinforcement Learning. Or at least it was...
So testing, right? We should do it. The thing is, testing is hard, and good testing is reaaaaaaally hard, and tbh I’m pretty bad at testing. So I end up not testing my apps, and then I feel guilty about it, but I’ll stop you now: you can’t run guilt on Travis. If this sounds familiar, then this blog post is for you. I did a little song-and-dance...
You can tell I hate writing year in reviews because this one is really, really late. I tend to hate bragging, and I definitely hate introspective and, in particular, I always think I am underperforming (and that’s fine). However, that’s usually not true, and writing a year in review forces me to see the awesome things I did, so even if I did end...
Updated May 18, 2020 (get it? :: ? I made a funny) Shadow DOM is a spec that gives you DOM and style encapsulation. This is great for reusable web components, as it reduces the ability of these components’ styles getting accidentally stomped over (the old “I have a class called “button” and you have a class called “button”, now we both look...
There’s this thing I hate about the modern web which is that sites are rarely one giant html file filled with goodies. You can’t just “run a site” locally. You need an npm or a gulp step or a docker if you’re lucky. And probably a local server, but not the one you have installed. Which, I mean, makes sense, because modern web sites are big and...
Shadow DOM is a fairly recent-ish spec that gives you DOM tree encapsulation – it’s one of the superhero lions in the Voltron of specs called “Web Components”. Web Components let you create reusable, self-contained components in JavaScript; the Shadow DOM bit makes sure that the CSS and markup you bundle with your implementation is encapsulated,...
.content img:not(.emoji) { border: 1px solid #efefef; margin: 24px 0; } The Meownica Web App Workflow™ goes like this: Write bad code until the file is too long Refactor that code into some web components Repeat steps 1-2 until done Realize you forgot to do the PWA dance, so your app is scoring 45 on Lighthouse Make it into a PWA by...
img.otter { max-height: 220px !important; } iframe.otter { height: 250px; width: 100%; margin: 0 auto; border: 5px solid #E0F7FA; border-radius: 3px; } iframe.otter-two { width: 100%; height: 320px; border: 5px solid #E0F7FA; border-radius: 3px; padding: 0px 10px; } I work on a library called...
.highlight .err { color: inherit; background-color: inherit; } .highlight .s1, .highlight .s { color: #336699; background: inherit; } pre { margin-bottom: 30px; } pre, code { background: #f4f6f8; } p > code, li > code { font-weight: bold; } pre { border-bottom: solid 1px #CFD8DC; } This is a cheat sheet for the Polymer 2.x...
This year was pretty shit, so I wasn’t very keen on doing one of these posts. So many of my favourite musicians died, so many of my favourite countries made mistakes, so many of my favourite people are worried and sad, and I am worried and sad with them. But this year was not the worst year we’ve ever had, or might ever have, so I will tell you...
.highlight .err { color: inherit; background-color: inherit; } .highlight .s1, .highlight .s { color: #336699; background: inherit; } pre { margin-bottom: 30px; } pre, code { background: #f4f6f8; } p > code, li > code { font-weight: bold; } pre { border-bottom: solid 1px #CFD8DC; } This is a cheat sheet for the Polymer 1.x...
phantom underlines. isn't this amaaaaaazing. i love waiting for 8 seconds and seeing this. look at it. srsly. looooookat it. I spent a week traveling around Taiwan, on my awesome free roaming 2G data plan, and friends, we need to talk about your web fonts. Also cats. They really love cats there. Anyway, the thing about 2G is that I...
You know the scenes in Friends when Ross starts talking about dinosaurs and he’s SUPER excited but everyone else is losing the will to live? This is basically that, only instead of dinosaurs, it’s emoji, and unlike Ross, I have never successfully befriended a monkey. Last month, my coworker casually told me he still has a 2001 era DoCoMo phone,...
You know that scene in The Rock where Nicolas Cage is super dreamy (like he is) and decides his life mission is to look for VX poison gas and save San Francisco (like he would)? That’s baaaasically me, if by “look for VX poison gas” you mean “nerd out on emoji”, and by “save San Francisco” you mean “and tell everyone about it”. I mean, you...
Here’s the thing: I have this sweet pair of headphones that I got from a friend a gazillion years ago. I’ve always liked them because they were free and they look super quirky but it turns out they were a limited edition done for Ed Banger Records, which is the label that produces Justice and Mr. Oizo. It also turns out the wire on the side is...
I’ve never really done a year in review. One day, I’d like to open source my goals, but since I’m still a chicken, this is a baby step towards that. Plus, this is one of the first years I’m really proud of, and things that you’re proud of tend to live on the Internet, for posterity. Here’s what my GitHub contributions say about it: Burning out...
Some people build furniture. Some people knit. Some people have hobbies that don’t involve HTML specs from the 90s. I am not those people. So here’s a story about , how it got to be the jerk that it is, and why it needs to die in a fire. The early years 1995 was a good year. Friends, ER, Xena were all on TV. TLC had dominated the charts with...
One of the beefs (and there aren’t many) that I have with CSS is that it has a very weak opinion about style encapsulation. That opinion is basically “well, name your classes well” or else bad things happen. Know this: I come from C++, land of rules and disappointed compilers; this hand waviness drives me crazy. This matters because now you have...
The keypress event works maddeningly differently in Chrome/Safari and Firefox, and this is the story of how I spent two hours discovering that, so that hopefully you don’t have to. Keypress what? A keypress event is one of the events you get when you mash on the keyboard. It’s special because according to the spec, you should only get a keypress...
My favourite thing about the Chromium code is this enum of cats and all the comments in that file. My second favourite thing is OWNER files. Guess what this post is about (hint: it’s not about cats NOT EVERYTHING IS ABOUT CATS, OK?) Edit: In a clear and deliberate conspiracy, the cats have been removed from Chromium. The old new cool thing is...
I gave a talk about how to get started contributing to Chromium, but it wasn’t recorded, and my slides by themselves look like cold-medicine induced hallucinations (which, to be fair, they were). So instead, here is a giant blog post that will take you through every step from “checking out the code” to “landing the code in the Chromium repo”. It...
I talked about Cat-DNS at Cascadia.js, and it wasn’t terrible! There is a video. Of me talking! On the internet! What a future we live in. =^..^= The internet needs more cats. DNS servers are the authority on all things internet. Therefore, the best DNS server is the one that resolves everything to cats. This talk is about that. We’re going to...
lldb stands for Llama-DB, and is a database of llamas you can use to debug programs compiled with clang (lldb is to clang like gdb is to gcc). If you already know how to use gdb, then here’s a translation of the common commands. Disclaimer: There is a ton of tutorials and pages about all of the awesome features and commands of lldb, and how to...
You’ve given a talk. It went great, and now everyone wants to see the slides. Hurray! Before we do anything else: give yourself a high-five. Giving a talk is hard, and you did it! This is something to be proud about. Here’s the thing about slides, though: if you did them right, your slides should be pretty sparse. They’ll have very few words,...
But only if your family is code. So this is a bit of a terrible blog post because a) it’s about a really obscure atrocity that happens in C++ (as opposed to the common atrocities that happen in C++ on the regs) and b) there are not enough funnies in the world to make up for it. I recommend skipping it if you’ve just eaten, are feeling...
I am the poster child for writer’s block. I can’t write the #ifdef header guard correctly for a brand new C++ class, I don’t remember the order of the public static void main args incantation in Java, and for the life of me, I can’t start working on an empty presentation. Not even if you promise me pizza. (Please promise me pizza though.) Start...
Stats: a preamble I’ve been reading too much about March Madness brackets, so I thought I had to run some numbers around here like the cool kids do. Get your umbrella out, it’s about to rain cold facts. In the history of time, Chromium has had 205,095 commits made by 1,943 contributors representing 7,431,088 lines of code. In the last 30 days,...
One of the hardships about being Canadian is that most programming languages are quite simply, rude. Descriptions like ‘imperative’ and ‘declarative’ are enough to fill even the most impolite of Canadians with a vague sense of discomfort. Fear no more! Ruby is the sort of language that addresses all these concerns, and adds a familiar,...
Imagine this: you have forked a repo a long time ago and have since been in a happily committed relationship with the master branch, modifying files and committing from the hip. In case you have doubts about the likelihood of this scenario, we’re talking about my notwaldorf.github.com blog branch, which I forked from holman/left. All my changes...
The internet needs more cats. DNS servers are the authority on all things internet. Therefore, the best DNS server is the one that resolves everything to cats. Guess what kind of DNS server this is (Hint: it’s the cat kind). Making it go First, get the code, and the npm packages you need (the instructions are with the code). To run, start the...
Do you sometimes feel the internet is holding you hostage? Don’t you wish the internet would look like it’s holding you hostage? Worry no more! Dear-sir-or-madam is a bookmarklet that makes web pages look like they’re ransom notes. For example, like this: How to use Bookmark this by dragging it to your bookmark bar: ransomify!. Then go to a...
Here is my confession, internet: I am writing a cat DNS. That is, a DNS server that resolves everything to cats. You want your email? Cat! You want to check the weather? Cat! It’s always cat. Wait why? We were talking at work about DNSes, and it turns out I only hand wavingly know how they work. I also like things that troll you. The reason why...
Because that would be crazy. Crazy is in the next blog post. I’ve had to write a sizeable chunk of (fairly mediocre) Objective-C code recently, and I’ve formed the following opinions: It’s easier if you just get over the thing with the brackets Event listeners are sooper cool Standard Cocoa controls are great if you want them to look...
Disclaimer: these aren’t new protipz. I didn’t make them up. They’re actually straight out of the Chromium code style, they’re pretty trivial, and you might already use them. But just in case you’re not a Chromium committer (the outrage), or are fairly new at C++ and want to make your code less suck, here they are. I think they’re neat. Copy...