CSS

CodePen Challenge: details

~ ihatetoast ~ Leave a comment

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

~ ihatetoast ~ Leave a comment

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

~ ihatetoast ~ Leave a comment

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

~ ihatetoast ~ 2 Comments

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

~ ihatetoast ~ Leave a comment

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

~ ihatetoast ~ Leave a comment
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

~ ihatetoast ~ Leave a comment

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!

Pure CSS fun

~ ihatetoast ~ Leave a comment

Because I needed another challenge …

I do not know why I signed up for the Daily CSS Challenge. All I know is that I saw someone’s 100-Days-of-Code tweet that had some cute image and this hashtag I had not seen before: #dailycssimages. What is that? I had been using CSS and CSS3 to place boxes of paragraphs and images onto my screen. What is this new tasty candy I see? I looked it up and found myself taking The Coding Artist‘s (Mike Manialardi) tutorial on making a pure CSS image. I was hooked. I signed up for the (week) daily challenge.

I feared that I would use this as a way to avoid other projects when they got difficult. I also worried that this would soon become something that was glorified doodling.

Wrongo, Falsetta von Falshenberg.

Here’s what I thought I’d be doing: making boxes, making circles, using background colors.

Here’s what I have done: learned how to use mixins, used box-shadow to make pixel pictures, become familiar with Pug, used for-loops in Pug and SCSS, improved my ability to animate features and coordinate the timing.

And I am not even done. I just found this YouTube account from following other people in the challenge: Eleftheria Batsou. Now that I am used to how I break ideas down into shapes and concepts, I would like to see how others do it. I can’t lose when I see what other people do.

I keep a bucket of my entries, but these are some of my favourites:

 

 

 

I do it my way … mostly

~ ihatetoast ~ 1 Comment

I just did a quick game called Egg Fox Feathers (v1) that is my style of Rock Paper Scissors:

Screen Shot 2017-04-02 at 9.24.00 AM
It’s you vs. Farmer Ted.
Screen Shot 2017-04-02 at 9.23.39 AM
Maybe a bit gross.

It’s my first go. I had a lot on my “to-practice” list: Flexbox, ES6, Sketch app. I wanted to keep my JavaScript basic enough so that at least something was “easy”. Well. it grew. Doesn’t it always?

When I came up with the idea, I was just going through old tutorials I did when I was just starting. I saw my old Rock Paper Scissors and figured I could use that but then make results show on the DOM and not just my console or the tutorial’s editor. And it kept growing. I could have kept it to three images and text but no. And as it grew (back away from the Sketch app, Katy), I found that I was repeating myself. Or I felt that I could dry it up. But how? I always refer to K.I.S.S. as Katy Is Super Sizing when I really need to Keep It Simple, Stupid. I’ve sent the code to my instructor in hopes that he’ll come up with something. It’s version 1. I need to remember that and be happy with it. Admire what I do like (my images, using dataset, that I did this in a few days, not weeks) and not beat myself up for I need to improve upon. VERSION ONE, WOMAN! I also know that the way for me to learn is stepping away, asking advice, and moving on to another project. Target fixation is not healthy as a motorcyclist or junior developer.

Now that I have finished this one, what next? I like to do things my way when I’m the boss and employee. And janitor, chauffeur, and kennel keeper. I need to return to ReactJS for little things before I re-tackle my Scrambled app, which is a bigger ReactJS project. I’m thinking about games. Wes Box’s JavaScript30 ends with a Whack-a-mole. I’ve thought about doing that my way:

NAME HOMES ITEM THEME
Whack-a-mole dirt mole amusement
Guac-a-mole bowl guacamole food
Boop-da-Boob breast ball/cyst breast cancer symptoms

I am leaning towards Boop-da-Boob. I won’t let it be a Susan G. Komen thing. I think their lawyers have ruined the organisation. I prefer to incorporate symptoms to the game, not have it be just another pink thing. I’d also like to build something for ovarian cancer (and make it reference Teal Toes in memory or Carey Fitzmaurice) and prostate and testicular cancer. The “embarrassing” cancers need attention. I believe if we make it amusing, it’ll be less awkward.

Another JavaScript30 project was a drum machine. I have never seen a project that so desperately needs to be done my way but sighthound bottoms as drums and noses as cymbals. I have to do it. Tutorials are great, but if I don’t take what I built while someone held my hand, I don’t learn.

Tutorials are great, but if I don’t take what I built while someone held my hand and make something new that is mine and done my way, I don’t learn.