I saw a plugin that used the Octocat as a link and I really wished it animated when you hovered over it. So I made a little one on Codepen. Happy Caturday.
As a developer, my first mission is to solve problems. As a designer, those problems are often solved by creating usable and intuitive products. Some friends and I are about to start training for a half marathon, my first since my disastrous marathon injury several years ago (another story entirely).
And like any good runner, I obsess over crafting the perfect training plan, which often needs to fluctuate from week to week. I haven’t yet found a schedule app that I really enjoy, one that lets me quickly create my own running schedule without a lot of bells and whistles.
So over a couple of lunch breaks at work this week, I decided to build my own, honestly in large part because I’m better with HTML than I am with Excel (and lets the frank, this is basically a glorified spreadsheet). But I then realized that my running buddies probably want some kind of schedule too, so I made it editable and more aesthetically pleasing than traditional spreadsheets.
It’s using local storage so it won’t work cross platform, but it’s definitely going to make my half training easier, so I call it a lunchtime win.
See the Pen Editable Running Schedule- Right click to mark days as done by Lexi Namer (@lexinamer) on CodePen.
In everyone of my classes, students struggle to understand file paths and how to link to different folders and files. Last week, I impromptu grabbed our container of mini coffee creams to demonstrate how you need to hop in and out of folders in order to link files properly.
Here is a very basic setup of a simple project structure:
In order to link from ourfile to file-green, you have to follow the file path like so:
Similarly, if we are in file-green and want to link to file-red, you have to follow the file path like so:
Here is an animation I made to explain it a little bit better…
In teaching, I often explain nebulous concepts by using metaphors of random inanimate objects. Coffee creamers, picture frames, housing construction, etc. I’ve found that it takes an often-confusing concept and makes it more relatable to understand. So I’m starting a new blog series called Household Coding. In it, I will share small animations and graphics of these metaphors to explain coding concepts. Here is the first installation, Learning the Box Model.
One of the most basic concepts of CSS that my students often struggle with when first learning the language is the box model. As explained by the MDN,
In a document, each element is represented as a rectangular box. Determining the size, properties — like its color, background, borders aspect — and the position of these boxes is the goal of the rendering engine.
In CSS, each of these rectangular boxes is described using the standard box model. This model describes the space of the content taken by an element. Each box has four edges: the margin edge, border edge, padding edge, and content edge.
For the past two cohorts, I have used an analogy of picture frames and an art gallery to visually represent the box model. So here is a little animated movie I created using Sketch and Principle to explain the box model.
I use to spend a lot of time working on art and creative projects just for fun. Nowadays, I spend more of my day than not in front of a screen, working on teaching, client work and personal projects.
So when I read this great article on CSS images, I was immediately inspired and excited. I’ve been wanting to learn CSS3 animations more in depth, and created this little bear this morning as I’m spending next weekend in the woods with friends.
Oh, and read the article here: How I Started Drawing Using CSS