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.