CodePen Challenge: details

This week’s CodePen Challenge: details and her little bestie summary. I had no idea they existed, so chalk another one up to benefits of a challenge.

Confession time: I did not research too much about how to style the accordion function or even if I could. I did not find any need to with what I had chosen. Not this time. When I use details in a project, I’ll probably wonder more about the styling. When the week is up, I’ll peek at other people’s attempts.

I chose coffee types after looking at coffee graphics. I love posters that show how to make different espresso drinks. The theme announced itself. I had no choice in the matter. I’d like to style the cups more—maybe add a handle—and see if I could animate filling, but probably not for all of the drinks. Maybe the classic three: espresso, cappuccino, latte. Perhaps make an end-of-month challenge combo as a pure CSS entry.

We’ll see. Katy has big-idea-eyes and tiny-time-stomachs.

coffee_math

Pure CSS Images: Now what

Here I am so far. (I am using screenshots because my version is not responsive.)

mid-century modern prints
Original by Kerry Beary and my wip. (I believe she spells it -mellows and not -mallows because she’s punny.)

In terms of what is left to do that is furniture or furnishings, I have the lamp and interior of the pod. I can do those and stay pretty true to the original; however, when it’s time to do the cats …

What do I do? Do I make CSS cats that are not much like the original? There are limits with CSS. Do I make them in SVGs? I think if I do that, it feels too much like plagiarising. SVSs are a last resort. Or maybe just put a cat in the back and a person on the bench? Change it enough? I have no idea. Thankfully, I still have that lamp to do. I might animate that.

I’m exhausted.

Checkers did my head in

My current Pure CSS Image attempt is this gem from Kerry Beary.

I cannot tab in my code snippet, so just deal with it. (It even hurts my own eyes.)

@for $i from 1 through 7{
.#{rectangle-band}-#{$i}{
margin-left: 0px;
@if $i % 2 == 0 {
@for $i from 0 through 3{
.#{square}-#{$i}{
margin-left: $i*60px;
@if $i % 2 == 1 {
background: $evenband;
}
}
}
}
@if $i % 2 == 1 {
@for $i from 0 through 3{
.#{square}-#{$i}{
margin-left: $i*60px;
@if $i % 2 == 0 {
background: $evenband;
}
}
}
}
}
}

Iterating in Pug. Iterating in Sass. Nesting them. Checking for odd or even. ERMAGERD! But I did it.

Screen Shot 2018-05-07 at 1.38.12 PM

For now. But looking at it above, I see that the chair is too big. No. I’m not going to fuss. There are times to let it go. This is one of those times.

I have to get circles or semi-circles in there. That’ll be a new set of curse words. Let me just admire this for a second!

Ok. Done. Now I have to dry heave.

So I made a thing

So I made this thing:

charley_harper_calc

See the Pen Charley Harper Calculator (no fcn) by Katy Cassidy (@ihatetoast) on CodePen. Charley Harper’s style is very CSS-friendly. Hellur, geometry! These ladybugs were taken from the “Last Aphid” print.

Since it had been a while since finishing the pure CSS challenge, remembering what I learned was tough. I use Text Expander for Pug and Sass for-loops. That helped. I was hoping to use the for loops for the dots and buttons, but some needed specific help. I could loop through all 9 dots or just the odd ones, but eventually I had to pick and choose which dots appeared to satisfy the look.

There’s no functionality here. Nothing to add or subtract. I would love create a calculator with this as a design, but I’d use SVGs for the bugs. I thought it would also be fun if instead of their twitching, they’d skittle off in all directions on hover, but with the various levels and z-indices, it made for a lot of decapitation.

I am not disappointed in learning those limitations. It’s learning. I love making a purty thang, but I love even more that I learned something while doing it. So. What is next? I am thinking mid-century gravel art.

 

Tenacity

Almost nine months ago, I completed a (week) daily coding challenge called Daily CSS Images. I am about to embark on round 2. I say “about to” because I do not know if I am going to redo the challenge and stick to the old prompts or find others. If I decide to do my own prompts, I need to have 50 ready. I don’t want to spend half of the day deciding.

It is no surprise that I learned a lot about Pug/Jade and Sass in this challenge, but what I learned (or realised) the most was how daily practice improves a skill. I knew that, but that knowledge had become dusty. What I love is seeing the change.

Day 1: Bear Cub

Screen Shot 2018-04-27 at 12.43.00 PM

See the Pen DailyCSSimages Day 1: bear cub by Katy Cassidy (@ihatetoast) on CodePen.

Day 49: Dance Dance Revolution pad

Screen Shot 2018-04-27 at 12.45.23 PM

See the Pen Daily CSS Images Day 49: Dance Dance Revolution pad by Katy Cassidy (@ihatetoast) on CodePen.

Day 50 was Party City. It was ok. I’m not ashamed of it, but I think day 49 shows more of what I learned:  Daily CSS Images Day 50 – Party City by Katy Cassidy (@ihatetoast) on CodePen.

I code every day. That is not hard to do. Harder is not coding, getting up, stepping back, going outside. Oh, I love the outside. I’d code there if I could and if mosquitos left me alone. I’d moto to the hill country if I could trust reception or remembering to pack up and return home before sundown. Coding every day is not a problem. Harder is keeping a track going. Using my tenacity and my ADHD (which I call KatyHD) hyperfocus to stick to one or two themes. Depth over breadth. Do the thing, not do all the things. Do the thing and do it every day. Hard when one has a breadth of interests. Sigh. Sadly, this requires the S-word.

SCHEDULE

I know! Sent shivers down my back, too. Following a schedule is not the hard part. I can do that. Making it. Ugh. Making one will require me to let some interests come before others. How can I choose? It’s like choosing sad critter over all the others in the shelter. Alas, my tenacity requires such discipline.

 

Gatsby 101

In another episode of LEARN ALL THE THINGS, I am redoing my old portfolio site using Gatsby. Why not? I love React. I love easy things. I love cake. This includes almost all of those.

 

One thing that distracts me while following a tutorial is the onslaught of ideas as I progress. I’m currently working on changing up my portfolio to be a Gatsby site, but I am thinking now about making my Pure CSS Images site a Gatsby site. That’s being redone as a React site, but do I need full pure React for it? I don’t know. Or maybe I don’t need it to be fancy and full React but just working with React would be helpful. Hm.

 

What do I want to do first:
  • simple pages that do not do much other than present a div and p or two or three
  • pages that map over data
  • style (keep it CSSimple or learn the Sass plugin)?

I don’t know how people switch around their portfolios. I’m not a UX person. I do not want to spend hours on a pixel to the left or right of some div. That’s not my bailiwick. While I do not want my site to be dull, the UX part of it is not what I want to spend time on. Gatsby at least allows me to deal with JavaScript. I see a bigger problem in figuring out how to style it. No, I don’t want to have it win an award, but I don’t want a blocky site because I can’t style in Gatsby.

Mmmm. I smell a challenge.

Side Note: Grammarly cannot deal with React.

100 Days of Code III and Codie Jodie

After going 150+ days in the second round, I put this challenge to bed.

Until this year. On the first, I started the challenge over. I will adjust some of the rules as they’re rigid (to me). They’re better rules for those not taking classes and following tutorials. I am doing both. I won’t count classwork or homework as part of the challenge, but I will count any supplemental tutorials or mini-projects. In doing so, I hope to balance my days. If I’m learning NodeJS, then support that with a tutorial, but also keep the UI and frontend fresh with a small snippet, bit of research, or a little project.

Don’t we all need to keep our backend and frontend fresh?

My first few days have been dedicated to finishing Wes Bos’s Learn Node tutorial. This makes my fourth completed WB tute: JavaScript30, What The Flexbox, React for Beginners, and Learn Node. I am always working on ES6 for everyone. I start that one over all of the time to get the practice in. When he releases his CSS grid tutorial, I’ll do that one, too.

Learn Node is a large project that jumps into Node at the late beginning stages. No play in the terminal. Just starting off index and Express, requiring, exporting … He’s taken care of the project decision (a Yelp-like app) and the styling. While at first I felt overwhelmed, by the end, I felt this was a great way to see what it is like to come into a project other people have started.

Now I’m ready to do another that is more ground up. Hello, Andrew “Fantastic” Mead. Honestly, he says “fantastic” all of the time. I like to pretend he has to force himself to say “fantastic” or else he’ll end up saying “fucking awesome”. He’s also like a hot Pee Wee Herman.

Two different styles. I like them both.

But all of this Node is leaving my fronted out to get stale. Ha ha, Code Matey! Not for long. Every workday I have to look at horrible Secretary of State websites. They’re just awful. And you know what has happened. Some manager has dumped the web and online content management to someone who was good with email. Poor sod is already overworked and now has to build and maintain the website.

I do not want to be the person who laughs at ugly sites. They are the same people who love correcting other people’s grammar. Thou shalt not be a dick. Ever. Or we shall try not to, and we shall scold ourselves when we get high and mighty.

Instead of mocking the websites, why not use them as a way to learn and practice the CSS grid system and keep up with Flexbox? (Screw you, Bootstrap. You bore me and junk up my HTML!) The content of those sites is pretty boring. Or at least the section I have to visit. I’d have to keep it ipsummy loremmy. All I care about are the colours, layout, and responsiveness. We’ll see. It’s an idea.

As is Dressy Bessy or Codie Jodie! The doll, which I never had, seemed to have all the fun things: snaps, a button, zipper, laces. She was a shocking mess for fashion, but her purpose was to teach kids to zip, tie, snap, fasten, and whatever else you can do with clothing. Taking notes about the states’ SoS sites, I got to thinking about just the states in general. 50 states. About 50 weeks in a year with two for fluff time. Why not a state a week that had facts about the state, some decoration, enough boxes and divs to fill a page, buttons that did things, etc? Wouldn’t be pretty, but if the only goal is to practice frontend play, why not? Codie Jodie. She’s got buttons, a responsive grid, some css animations, jQuery plug ins, …

Again. We’ll see. I will need to have all things outside of the class and its homework be short and sweet. Not interested in losing more time.

Planning to plan. On it!