Side Project: lovelyhair.com

6 7 3b

About 7 months ago I started working on a little problem I had always been keen to solve; irritating synthetic eyelashes. This might not seem logical to everyone who knows me in webby land, however, you cannot beat having the skill set to create, design, manufacture and code, all without having to use external people. I’ll forever be grateful for the skills I’ve obtained in the web industry (and the people who’ve helped me along the way), and I still continue to develop these web skills, weekly. I’m not going anywhere.

I’ve grown up doing theatre, and never been able to use synthetic lashes. They would irritate my eyes, make my eye-makeup run and generally I would want to gouge my eyes out with spoons after just a few hours. It turns out, I wasn’t alone and in the UK no one was trying to solve the problem, so I decided to solve it for myself.

Finding a certified, cruelty-free and PETA supported manufacturer was the most important to me. This took some time (as you can imagine) and the cost of such meant less margin on the end product; but it also meant I could sleep at night knowing what I was selling was ethical; no brainer.

I set about designing a set of 6 lashes that would suit every lady, young and old. Each set is handmade using real hair and set on a tiny cotton band, which is far less of an irritant than synthetic plastic – it also means they are feather-light and look much more natural than the sets that can be purchased in drug stores. There was also an added bonus that they didn’t stretch out of shape as easily as synthetic lashes, and could be used up to 25 times, against synthetics that last about 5.

I solved my own problem, and I hope for the beautiful ladies that follow me, it might solve a problem for you too.

My only issue was with the packaging; about 10 boxes in every 100 were usable, I’ll be talking about that in my YouTube video this week. That’s a whole other story and a big tick in the “what to do when things go wrong” checkbox.

You can find them all, here.

How to Fire Someone the Polite and Decent Way

My first little venture into YouTube. I’ve wanted to do this for a while, but for some reason, I was scared. I didn’t want to be pigeon-holed into people thinking I was trying to jump on the YouTube bandwagon and start doing makeup tutorials or “November Favourites” videos. For me, there was a lack of business talk; I could find snippets of business information here and there, normally through something very produced like a business magazine of some kind, but what I wanted was for someone who is in the thick of business-related issues, to talk about their experiences. There wasn’t anyone that I could find easily, so I figured, even if just for myself, I would start documenting the trials and tribulations of my two businesses and see if it helps anyone along the way.

Would really love to know what you think or what you’d like me to talk about next.

Learning Flexbox

Hot off the heels of speaking at An Event Apart – DC my inspiration tank was full and “flexbox” was a word resonating around the corridors and the conference room.

I hadn’t had a period of self-learning for a little while, simply from being too chockablock with client work.

I quickly realised I reverted to the way I used to learn to code back in 2001. Paper, pen and repetition by doing.

A lesson in not eating crisps around your notes…

Flexbox, at first, felt very alien to me. Having got used to all the weird quirks and workarounds of using floats for many years, flexbox solved things, quickly, but I wasn’t entirely sure of why. It reminded me of the first time you learned the clearfix method. You were happy it worked, but weren’t entirely sure why.

I started breaking down each section and quickly realised a lot of the tutorials online referred to, flex-grow, flex-shrink and flex-basis as three different declarations. I had the most trouble understanding flex-grow, for some reason, until I read Chris Coyier’s CSS Tricks that explained everything is given a value of 1, and therefore, equal. If you increase it to “2”, you’re giving that particular box a property to grow twice as much as the others. That’s when I had the aha moment.

The other thing that felt quite alien was the automatic (read: very easy) nature of how flexbox solved problems that have been layout issues for years. I almost couldn’t believe how easy it was and had to triple check various browsers to make sure my eyes weren’t deceiving me.

Chris does a brilliant job of illustrating each nuance of flexbox, so I won’t repeat that here. I’ll just tell you about a few of the “aha” moments I had, to hopefully save you a few hours of “but why” questions.

Feel free to share any of your flexbox conundrums (and how you solved them) in the comments.

flex-basis

You see it written as flex-basis: 200px; in many tutorials, but it’s good practice to actually be incorporated into a shorthand property of flex: 1 0 200px;

It feels a bit like learning the clock trick for padding shorthand, when that came out all those years ago.

Imagine three imaginary headings above each property of 1 0 200px.
1 would have a heading of flex-grow (the 1 distributes all boxes evenly </sidenote>)
0 would have a property of flex-shrink
200px is flex-basis (this can also be a %)

display: flex;

By putting this onto an existing element, such as a <div> you are making that element a flex-container. I got confused when some tutorials kept referring to a “flex-container” like I had to have a special container, aside from any existing element. No. Adding display:flex; to any element makes it a flex container.

Any child elements of that container automatically then become flex items, with no additional coding required on the children (to make them flex items).

flex-wrap

This goes onto the flex container, or the container you’ve chosen to add display:flex; to. You’ll find the CSS in each breakpoint goes down, but the most common thing I found myself changing in breakpoints was

flex-wrap: wrap; to flex-wrap: nowrap;
Or vice-versa.

Vendor Pre-fixes

There’s lots of them. I wasn’t expecting that. No idea why.

For those who use any form of TextExpander, I created a set that I use to help speed things up.

You can get that here and import it into TextExpander or aText (which is what I now use).

Helpful Resources

CSS-Tricks – A Complete Guide to Flexbox
What the Flexbox
Laying Out a Flexible Future for Web Design with Flexbox
Flexbox Playground
Flexy Boxes
FlexieJS
(Hat tip to @cesidio)