Archive of: 2020
-
Whitespace and Tab Size Practice
July 3 2020
While I have been doing these daily code practices, I've been disappointed with how the code displays in the HTML, CSS, and JS sections. I wanted to investigate some ways that I can clean it up and make it more readable. Unfortunately I got a bit distracted with a few other properties. -
Imitation Halken Logo built with only CSS
July 2 2020
Today I made the mistake of trying to reproduce the Halken logo with just CSS. In the future I think I would opt to do this as an SVG. I ran into an odd issue with selectors on the green bits. -
Scrolling animation practice
July 1 2020
On the most recent episode of ShopTalk Show (episode 419), Chris Coyier mentioned a simple piece of JavaScript that can be used to create a custom CSS property that helps animate elements alongside scroll position. The article containing the JS is on CSStricks.com. -
Quick Table Practice
June 30 2020
I'm trying to get back into my Japanese studies, so I thought I'd make a quick Katakana table. I haven't built a table in a while and it is always something I need to get better and faster at doing. I normally use VS Code on my PC, so table building is a bit faster with Emmet shortcuts, but today I built this bit of code in Coda/Code Editor for iOS. -
Laying out a Mega Drive cartridge case cover
June 29 2020
For Father's Day I received a game coupon allowing me to pick any game I'd like to have and be treated to it. Most modern games on systems like the Nintendo Switch and PlayStation 4 start around $60, so I asked if I could instead get two cheaper retro games. One of them being a Sega Mega Drive game. I have yet to play it, but it prompted me to try and lay out the front of the game case using flexbox. I'll give it a better go at a later date. -
Attempting to animate line height
June 28 2020
Today I cooked a pack of shio ramen for a late evening snack. While I was boiling the ramen, I wondered if I could animate a paragraph's line-height and animate the line-thickness on a wavy underline to simulate the breaking up of instant ramen noodles as they are boiled in water. It looks like line-height doesn't really animate that smoothly. -
Shape Outside Practice
June 27 2020
I was about to do some more random practice, but I realized I haven't played with shape-outside in a while. I first learned about it from a talk or video by Jen Simmons. I wish I had something I could put it to use on right now. Maybe I should make something. -
Random Animation and Grid Practice
June 26 2020
Getting my practice in on a Friday night can be a bit tough, but I have to keep the streak going. Today's is a bit random. -
More Grid Area Practice
June 25 2020
I wanted to do a bit more practice with grid areas today. I found out that I can't use a variable when definiing a grid area, or at least I couldn't figure it out today. I wonder if that would be useful in any way. -
CSS grid area practice
June 24 2020
I never use grid-areas within my grids in CSS. Time to change that and learn how to take advantage of them.