Actual = page 63

100 Days of CSS

I’m reading the new book, CSS The Definitive Guide with a goal of 10 pages ever day. You can read about this project in the introductory blog post. This is days 3, 4 and 5.

A combined post since this week included 2 WordPress meetups and a quilt show and there’s always time for a quilt show. I’m finishing up Chapter 2 – Selectors. Selectors Part 1 covered general information about selectors and attribute selectors. The remainder of Chapter 2 covers parent-child, siblings, and pseudo class selectors.

Parent-Child and Ancestor-Descendents

Descendent Selectors

Nope, it’s not about family trees, but is about styling html elements that have a relationship. You know that you can style every link in a website by using the a tag:

a {color:red; text-decoration:underline;}

This paragraph contains a link, which should be red in color and underlined. This is done with the following css:

a {color:red; text-decoration:underline;}

But what if you have a box with a red background?

a {color:red; text-decoration:underline;}
.redbg {background-color:red;}

The link disappears. So, let’s style the link in the red background box to be white

.redbgwhttxt {background-color:red;}
.redbgwhttxt a {color:white;}

The selector ‘.redbgwhttxt a’ can be translated to: only the links in the div with class = redbgwhttxt. No other links in the site will be affected.

Children

Sometimes you want to be more specific in your descendent selectors. You don’t want all descendents, you want direct descendents, also known as children. Here is where you see the greater-than symbol ‘>’.

In this example, I am making all of the strong elements of a paragraph red. If the strong elements are wrapped in another selector, say em, then that strong won’t be affected.

Narrow the element affected to only children of an element.

Narrow the element affected to only children of an element.

This was done with the css:

p > strong {color:red;}

Note: I’ve had to inline style most of these elements in this blog post but you can see all of this on codepen here. Or I’ve also embedded the code pen below.

See the Pen More on selectors by Kelli Wise (@kwise) on CodePen.

The post Selectors Part 2 – Day 3, 4, and 5 of CSS appeared first on Kelli Wise.

Actual = Page 55

100 Days of CSS

I’m reading the new book, CSS The Definitive Guide with a goal of 10 pages ever day. This is day 2.

As I said in Day 1’s post, these first few days are going to cover more than 10 pages a day. Day 2 dives into Chapter 2, which is all about Selectors.

I’m mostly concerned with CSS as it relates to HTML, and the book covers this. It also covers CSS as it relates to XML and the authors are careful to point out when there are differences in the two applications. Selectors are one of those times when there are differences between XML and HTML. XML selectors can be anything but with HTML, there are some elements that we use, such as p, h2 and the like.

We cover element, class, and ID selectors. While ID selectors are supposed to be limited to 1 per site, the browser seems to be oblivious if there are 2 ID selectors that are the same on the same page. This would cause issues with javascript, but the browser renders the page with no errors.

Attribute selectors

Here’s another instance where I’ve kind of taught myself what this is but it’s obvious to me that I didn’t have a great grasp of the topic. I’ve been using them, but I would imagine my lack of mastery is obvious if you dig into my style sheets.

As I was reading this section, an application popped into my head, so I headed over to CodePen and gave it a try:

Highlighting images without an Alt tag

I’m doing more websites that require higher levels of accessibility and making sure that images have alt tags is kind of a big deal. But who wants to check each image on a website one at a time. So, what if I could wrap all of those images in a bright red border so they would stand out? Then I could just edit the images that have red borders. You can see the whole Code pen here and play around with the code, if you want. But this is basically it:

img {border:solid 5px red;}
img[alt] {border: solid 5px black;}

This code starts by making all images have a red border around them. Then it replaces that red border with a black one on any image that has an alt tag. Even if the alt tag is empty, it counts. While that may not be ideal, you can see that the attribute selector works and you can see how it works.

See the Pen Testing for presence of alt tag using CSS attribute selectors by Kelli Wise (@kwise) on CodePen.

Tomorrow will include more information about selectors.

The post Selectors Part 1 – Day 2 of CSS appeared first on Kelli Wise.

Actual = page 28

Since this is the introductory stuff that I either A) already know or B) have a vague grasp on, I expect the first few days of this to cover more than 10 pages per day. Once I start getting into the book, I expect I’ll need to slow down to really experiment with the code.

My learning style benefits from clear examples that I can try and riff off of and then describing what I’ve learned to make sure I really grasp the concepts. When I was on the tech support team for Headway I did a lot of CSS troubleshooting and working with other folks’ CSS. I had to understand what they were trying to do, figure out why their CSS wasn’t working, write code that worked and then explain to them how to fix their CSS. Doing this every day really sharpened my skills but left me with gaps in my knowledge.

Chapter 1

Pages 1 – 28

The book starts off with a brief history of CSS and explains why CSS has been so darn useful. I’ll admit that when I first encountered CSS in the mid 90’s I was a bit baffled about what it’s purpose was and how to use it. There weren’t a lot of blogs and tutorials out there at the time, so I kind of had to experiment on my own. Web design wasn’t my job, it was just a way of building an intranet site for my engineering team so we didn’t have to email out specs and design guides every day. I volunteered to do the intranet site because it looked like it might be something fun to work on while tests ran or I was stuck in long, boring conference calls.

Once you understand why CSS exists, your web design life becomes much less tedious.

After the history, we get a review of the terminology and how the language* is structured. There’s also information on external stylesheets, @import, comments, whitespace handling and media and feature queries.

Things I learned:

Alternate stylesheets.

This is kind of cool and is supported by Firefox but not Chrome, at least not without an extension. I don’t know that it would be all that useful for me, but it’s interesting that it’s available. I also learned that the style sheets need to have a title to make this work.

@import directives

I’ve never seen it called out explicitly, and maybe it just seemed logical to me to do it this way, but @import directives have to be placed before other CSS rules or they get ignored. Through sheer luck I’ve been doing it right all these years. Now I know why I’ve gotten lucky.

Media and Feature queries

There’s a nice table of of all the possible feature descriptors you can use, many of which  won’t be all that useful to me although I can see some of them being loads of fun when I get deeper into grid layouts. I’ve used screen width for responsive designs and I’m comfortable with that, but I’ve never used aspect-ratio before.

* Don’t get pissy with me about CSS not being a ‘real’ language. I know that it’s a markup language but, seriously, anything that has a 1,000 page reference book written about it that can do what CSS can do should count as a language.

The post Day 1 of CSS appeared first on Kelli Wise.

There. I said it. I love CSS. I love how I can move things around and change how they look with just a few commands.

If there is one thing that took me from “Yea, I can design websites” to “I really enjoy designing websites”, it’s CSS. It’s a happy, friendly, computer language.

If CSS were a neighbor, it would be the neighbor eager to lend you their tools and even show you how to use them and then offer to help because that’s what neighbors do.

Javascript is the neighbor with the dog that pees all over your roses, cooks stinky food on the grill, and insists on every house being decorated for holidays you don’t actually celebrate. But javascript is president of the homeowners’ association and you can’t do much about him but tolerate him and try to get along with him.

CSS

I have a have dozen print books on CSS. Even more ebooks. I’ve read a couple of them cover to cover. The big reference books I have read as needed.

I stalked CSS Zen Garden for a couple of years when I was learning CSS. It was an amazing project that really showed off what you could do with CSS. I learned a lot by dissecting that code.

Grid changes everything

This year, CSS Grid started being supported by all the big browsers. I read a couple of tutorials and watched some videos on it. Wow. I fell in love all over again. I bought and read “The New CSS Layout” by Rachel Andrew and I highly recommend it. Rachel Andrew knows what she’s talking about and she actually knows how to explain it. (Never undervalue the talent it takes to explain technical stuff.)

Hot on the heels of  “The New CSS Layout” comes the 4th edition of Eric Meyer’s “CSS The Definitive Guide”. I’ve had the 2nd edition for a decade or so and I’ve just supplemented it with information on the W3C site and CSS Tricks by Chris Coyier. With the release of grid and, earlier, flexbox, I thought it might be worth picking up a copy of the 4th edition.

Picking it up might take more effort than anticipated because it’s over 1,000 pages long. My 2nd edition is a measly 500 pages but a lot has changed in CSS in the last 13 years. While I never read the 2nd edition from cover to cover, I’ve probably read most of it at one time or another. I’m planning to read the 4th edition from cover to cover. All of it. In 100 days.

10 pages per day

I think if I target 10 pages per day – reading and experimenting with code – I should be able to get through the book in 100 days. I want to take my CSS skills from “Pretty darn good” to “call her when you have a CSS question” level. I’ll never be Eric Meyer/Rachel Andrew/Jen Simmons/Chris Coyier good, but I’d like to try getting to a knowledge level where I would understand what they were talking about in a conversation with one of them, should that ever happen. (hint – not likely that it will, but it would be so cool).

So, yes, I’ll be reading this book and blogging about what I’m learning. It could be fun. Or you might just watch my head explode. Either way, here goes.

The post 100 days of CSS appeared first on Kelli Wise.

The only thing you are eligible to do there’s work for them.

You simply might tend to kill.

Nerf n strike stampede.

Never please go on a rear step.

The bow may be sold, but it’s going to soon be jettisoned.

The post Spam Poetry – Nerf n strike stampede appeared first on Kelli Wise.

If you’re trying to find adventure in the bedroom
this is simply not the man for you personally. Bedrail for kids

Bedrails for kids and adventure in the bedroom? This is a WTF comment, for sure.

The post Comment WTF? appeared first on Kelli Wise.

It would really piss me off if it weren’t for the fact that it is so fucking useless and stupid.

Today, I’ve had multiple spammers contact me to get more traffic to this site, get more follows, get more SEO, get a redesign. Multiple of all of these.

So it’s obvious none of these spammers is a legitimate business. If they were, they would have read this site and realized:

This is a fucking personal site, not a business.

Here’s a quarter. Buy a clue.

* image from https://www.flickr.com/photos/janoma/

The post Contact form spammers: you’re all idiots appeared first on Kelli Wise.

In the Songza –

explanation,

a person state.

We could.

Inside a renaissance of social networking.

The post In the Songza – Spam Poetry appeared first on Kelli Wise.

This specific gives into the cheap

Grandfather clock

We would discover

Nowadays,

And in reality often

The anchor escapement is still utilized

Throughout the globe

Inside timepieces

Coming from all size and shapes

The post Spam Poetry – Grandfather Clock appeared first on Kelli Wise.

Making you feel like crap about yourself.

Want to know how to be great in 24 hours? It’s simple.

Quit being so fucking hard on yourself

There. I said it. The one little sentence that makes most of the ‘10 steps to a better you‘ articles obsolete.

Most of our desire to improve ourselves comes from a feeling of inadequacy. At any given point in my life I was sure that I was not:

• tall enough
• thin enough
• pretty enough
• smart enough
• sexy enough
• good enough

Where do we get those messages? Our family of origin, high school, our friends, the media, and the self-help industry. I’ve spent a small fortune on self-improvement over the years only to realize that I’m still me. I just feel lousy about myself sometimes.

There was a time in my mid 20’s that I quit watching TV and reading magazines because I was being bombarded with ‘you’re not good enough as you are‘ messages. A few months away from all of that and my self esteem improved immensely. I watch less television nowadays, but I spend an enormous amount of time on the interwebs. Now, instead of being assaulted by commercials telling me I’m not good enough, I’m assaulted by bloggers telling me I’m not good enough.

Then there’s Facebook. Ever noticed those perpetually cheery people on Facebook? Life is awesome. This meal is the best. Their significant other is without flaws. It’s all motivational messages and smiling, happy people. And it’s leading people to feel bad about themselves because they don’t have that life.

Facebook is to personal happiness as Photoshop is to beauty

They are both manipulated, manufactured, and unrealistic. No one is that fucking happy. No one. But then, no one ever posts their dirty laundry up on Facebook. “My husband and I just had a huge fight over how to budget” posted no one, ever. “My kid just got arrested because she got caught dealing crack out of her school locker” has probably never been posted.

What you normally see on Facebook are things like “My life is amazing” and “My husband is my very best friend” and “My kid just scored all A’s, saved a puppy from drowning, built his own treehouse, and wrote an iPhone app that will cure dysentary”. And here the rest of us are being single, living with a slob, struggling with illness or sick family, juggling bills, and wondering what that weird noise coming from the refrigerator is all about.

If all you post is how Amazing or Awesome your life is, I’m ignoring you

So, I’ve started cutting down on the blogs I read. I’ve quit reading those articles on HuffPost and Cosmo that are ’10 steps to improving ….’ and I’ve quit buying self help books. Done. My reading now is mostly WordPress related, my friend Dale’s poetry, and Facebook. But only the Facebook peeps who make me laugh, cry, or care. If you’re ‘motivational only’ on Facebook, sorry, but I’m just not that into you.

I want to feel good about myself

So, if you really want to be great in 24 hours, here’s my advice

Quit listening to the people telling you that you’re not great

I still struggle with this. Most of us do. But frankly, it’s all bullshit. If I quit obsessing about the things I’m ‘not enough’, then I actually realize that I’m already great. We’re all so busy comparing ourselves to the people around us, we never seem satisfied with who we are.

Photoshop. Personal assistants. Publicists. These are all resources that the rich and famous have to polish up their public image. No matter how hard you try, you will never be as beautiful as the airbrushed version of a celebrity who has had an army of hair and makeup people, great lighting, a brilliant photographer, and hours of photoshopping to make them look inhumanly beautiful. So quit trying.

I am tall enough. Tall enough that my feet touch the floor (hat tip to Abe Lincoln for that). I could be thinner, but I’m kind of tired of obsessing about my weight. Measuring each morsel of food, logging each morsel of food, and going to meetings to weigh myself and listen to hungry people obsess about food is no way to enjoy life. Fuck that. I’m tired of letting my self image be dictated by other people and making myself miserable doing it.

Quit trying to be better and just accept that you’re already great

I’ll be reading fewer blogs. No more self help books (is it unethical to sell the ones I own?). No more Fakebook peeps. Dale’s poetry is still on the list, though.

The post How to be great in 24 hours appeared first on Kelli Wise.