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.

CodePen Challenge: del & ins tags

This is my first CodePen challenge, and the topic is using the del and ins tags.

list of greyhound myths
Screenshot of my del and ins attempt

My applied creativity level was low for this one. I have never used del and ins and had to figure out what their default styles were and how I could alter them. The examples found on CodePen are fanbloodytastic. I’d like to play more with del and ins and include animations like this one by Mark Praschan or make the strike-outs more organic like the school essay example by Halida Astatin (also has great animations). These were just a few. I had to back off the CodePenChallenge rabbit warren to stay focused.

This challenge didn’t excite me as much as others I have seen; however, since I did not know about del and ins, I found value in it. Learning can’t always be snazzy. Now that I have explored the other submissions, I could snazzy up my edits.

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.

Sometimes I rant on Facebook

Like today:

I don’t think subjects and verbs should agree all of the time. I mean, what if they’ve grown apart? What maybe verb doesn’t always want to go along with what subject says because it’s always about subject, subject is all, like, totally “It’s all about me”, which is interesting because “me” is an object. It can’t even talk about itself because “itself” is reflective (unlike the ever selfish subject).
Since verb does all of the action, maybe verb should come first and subject can just bloody well agree with it. Maybe you need to think about your desperate need to have everything ok in front of the neighbours. Yeah. Didn’t think about that, did you?

I may be dealing with HTML/CSS, JavaScript (React to Node), and (no)SQL languages, but I first majored in German, and I have never lost my interest in spoken languages. It’s also why I kind of roll my eyes a bit when people (including me) call them programming languages. Spoken languages are much more forgiving. Hell, I know a lot of JS programmers who write or say “… between him and I”. I IS NOMINATIVE! Use “me”, and object, because the preposition takes objects. Quit thinking that “me” is impolite. If this were code, you’d get an error. Shut down. Borked. I’ve seen code documentation written by someone who fears the semi-colon. Oh, the irony. Spoken language is forgiving. Or should be. Let’s not talk about Americans telling people to speak English while butchering the grammar or spelling.

I think programming is less a language than it is a grammar. Imagine writing consoule.log in one region and console.log in another. I know if someone is midwestern, a Texan, or from the Pacific northwest by how they refer to carbonated sugar beverages.

I like to think that somewhere someone would write “council.log” and in a pull request on GitHub, another would write only *console like people do when they see a their/they’re/there error.

I get it. People like to label things. What do we call Java, Ruby, C++, JavaScript, Go, etc? Languages was easy and makes sense, but was clearly chosen by someone who didn’t major in languages. They’re grammars. I guess that would have felt old and stilted. Maybe we should just give them another name: Stanleys.

Make it so.

 

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.

 

Saying good-bye to a great man

Just a few words in this post. I’m on my way to San Antonio to say goodbye to and remember Paul Erwin. The entire Erwin family is inspiring to me. Paul started The Winston School, a school for kids with average and above intelligence who struggled in mainstream schools because of their learning differences. His first wife was my English and language arts teacher. She always reminded me of what I thought a lady in the Renaissance would be like. His oldest daughter is a childhood friend who was a killer debater, sharp as a tack, kind, and in possession of one of the best laughs I know. His other daughters are two of the three Dixie Chicks. No one in this family shies from opinions, education, and class.

I’ve done the math. My friends’ parents and my own are aging. I already lost my dad. Saying goodbye to Mr. Erwin is just as much a part of saying goodbye to my childhood as it is to him and his memory.

I lost my dad last year. I almost forgot to be sad at his memorial because I got to see my old childhood friends again. That helped me. I hope it helps his family today, too.

Sigh.

 

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.

Egads, woman. Stop.

I have not written a word (here) since January? I can say that I haven’t blogged since I was 49. No excuse. Not for a chatty Kathy like myself. I know that blogging my problems, processes, solutions has been helpful in the past, but I still won’t do it because I won’t stop coding. I need to remember that it’s okay—good, even—to stop coding.

Here is what happens when I do not stop coding:

  • I do not run.
  • I do not knit.
  • I do not put my Raspberry Pi together.
  • I do not go to movies or watch movies.
  • I do not read for fun.
  • I do not walk the dogs.

Basically, I become a boring cow. (No offense to cows with awesome personalities.) I’m full of do-nots instead of do-nuts. (Mmmm. Donuts.)

There really is no benefit to doing nothing but coding. We convince ourselves as newbies to code every day (cool, do that), but that doesn’t mean every hour of every day. It’s not good to deny ourselves our other passions. I can love JavaScript as I love reading, running, and rknitting. When I want to practice what I have learned with React, Vue, Node, etc., I’ll probably want to make something that supports another passion, but if I let those passions fizzle or think they cannot be nurtured alongside coding, I find myself doing nothing more than making another fkn to-do list.

Egads, woman. Stop. It’s not forever. Just stop coding to let yourself do some other things.

Things that happen when I do these so-called “other things”:

  • I think of solutions to the problems I encountered.
  • I come up with ideas for new projects.
  • I feel good about myself physically.
  • I have other things to talk about other than passing state down as props or mapping.
  • I attend Meetups.
  • I see movies.
  • I ride my motorcycle.
  • I start Couch-to-5k.
  • I start 750 Words.
  • I rest one part of my brain.
  • I exercise other parts of my brain.

I become more interesting. I return to being the person who, when asked “What do you do?”, returns with “What don’t I do?”

Today? I’ve prepared for teaching Python to a youngster, but I’m also starting my Couch-to-5K plan … again. A plan I keep quitting because I wouldn’t quit coding. Today I start with day 1 and will come home after that 30 minutes to work on my MERN HomeChecker app and a smaller React project. I can give up that time. Yes, I want to be a paid developer, but I do not want to become a boring blob.