Archive of: June, 2020

• 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.

  CSS, HTML, code

• 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.

  CSS, HTML, code

• 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.

  CSS, HTML, code, ramen

• 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.

  CSS, HTML, code

• 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.

  CSS, HTML, code

• 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, HTML

• 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.

  CSS, HTML, code

• Sakura petals falling with CSS and JS

  June 23, 2020

  I worked with my sakura petals again today. I wanted to see if I could animate the petals falling and randomize their positions to some extent. Luckily with the help of Chris Ferdinandi's concise and insightful posts on his website, I was able to add some vanilla JavaScript to help me do just that.

  CSS, SVG, HTML, JavaScript, code

• SVG and CSS Sakura

  June 22, 2020

  Today I wanted to play with using a flower petal made in SVG and see if I could reuse the original SVG multiple times throught my HTML and manipulate it with CSS. I'm glad I was able to sort out the rotation point with transform-origin. Firefox's inspector really came in handy when sorting where to place it.

  CSS, HTML, code, SVG

• Animating background-image

  June 21, 2020

  I just realized that I've never tried to animate the position of an element's background before. I've used it within media queries before, but never animated it. This could be interesting, but needs to be used subtlely.

  CSS, HTML, code