Rumyra's Head

Compressing images

I’m currently doing a WordPress -> Middleman shuffle for our team blog at work. This came from a review of all our infrastructure and where we could do some cost cutting. We decided to decommission the WordPress site, as the content was primarily flat, (just blog posts), and we could host that for free on Github pages.

Most of the build was pretty straight forward. As a quick run down I chose to use middleman as I was already familiar with it, I added the middleman-blog and middleman-deploy gems to make my life easier and translated all the posts to markdown using the wp2middleman command line tool. There are plenty of good tutorials out there that run you through this.

When it came to transferring over the media it became important to me to keep the size of the images down to a minimum. Page weights are getting heavier these days (imo) unnecessarily. So when asking in the wonderful Front End London Slack about what I could use for batch image compression I received the following responses:

Full Article ➺

Tweet activated rose

To see how to make the rose, please see my blog post over here on my craft blog, (it seemed a more appropriate place for a how to make pattern).

TLDR; I crocheted a rose, a couple of rows of which contained wire, I then sewed LEDs on the rose in a parallel circuit. This post describes how I made it flash when someone tweets with a specified string, head down to the bottom of the post if you don’t care about the code, there’s a cool video :)

Lit up crocheted rose, with equipment and code running to make it flash

The idea

What I want to happen, now I have a rose which lights up, its to have it flash any time anyone tweets with a string I specify. (The idea came from my workplace, as O2 sponsor the England rugby team, the rose is the English rose and the hash tag to look out for was one O2 was promoting – #WearTheRose).

Along with the rose, I needed an Arduino (I used an Arduino UNO), a script that looked for tweets containing the string I specified and broadcasted them to an Arduino script, which turned the LEDs on when triggered.

Full Article ➺

Out with the mechanical, in with the ‘computerised’

I like to think I’m comfortable with new technology, that I’m a woman who embraces new exciting developments in the world around her. I almost grew up online, dad always made sure there was a computer in the house and I thank him for that, because if it wasn’t for the BBC there wouldn’t have been any Chuckie Egg (imagine a world without Chuckie Egg, not even). I had one of the Motorola bricks at college and finally my own HP Desktop computer at university with shiny shiny windows 2000.

I always want to urge people to try new things, new things can be better, worried that those that are ‘happy with what they have’ could be missing out on better processes, saving time, seeing more awesome.

old mechanical janome sewing machine next to new computerised sewing machine

But today, today I saw the other side. Today I got a new sewing machine.

Full Article ➺

Today I was given a web page design…

This isn’t my typical way of working these days. User experience & flow, UI & wireframing, design, mark up, styling and interactivity are all very iterative to me. They don’t come in a waterfall sequential order anymore. Working in a lab team, I concentrate on seeing whether an idea, product or technology to solve a problem is useful, before it goes into production, so I usually prioritise content, UX flow and interactivity, before a finished perfectly styled site or app.

Don’t get me wrong, I do think styling is important, I just have to weigh up priorities with time constraints. I also built some starter files (more about these later) to help me along the way with styling, so it doesn’t fall by the wayside entirely.

Sorry I’m getting side tracked…

Full Article ➺

Just a quick Friday tip

I know a lot of you out there are already aware of this and to you it will seem obvious, however, I’ve found myself giving this tip a few times over the past couple of weeks, so think it’s worth quickly noting.

If you have a containing element, (div, article, section etc…), with a lot of content inside, reference which one it is at the closing tag. E.g:

<section role="main">

  <!-- ALL the page's content here -->

</section><!-- this is the end of section[role="main"] -->

This is particularly helpful if you have your HTML file split into partials. You may close a container in a different file to that which it starts.

Chaining CSS :not()

I found myself using the CSS psuedo class :not() the other day. It proved superbly useful. For those that are unaware, by adding it to your CSS, you can choose not to affect a set of elements.

myelement:not(.ofthisclass) { style: property; }

There’s a couple of good resources about it in the CSS Tricks Almanac or the MDN docs.

What I was looking for was a way to affect anything but a certain class, plus another certain class. If I had declared both separately in my CSS, the first declared would have been overwritten. In this example the div with a class of blue would still have a crimson background, as the declaration below it would overwrite it.

div:not(.blue) {
  background: crimson;
div:not(.green) {
  background: crimson;

But wait… there is a way. All we need to do is chain the two nots together:

div:not(.blue):not(.green) {
  background: crimson;

Voilà! Just what I was looking for. For a demo, check out this codepen.

I want a sarcasm element!

<sarcasm>Throws toys out the pram</sarcasm>

For aaaggees now I’ve wanted a way to express my sarcasm over the internets. When you’re typing this can be pretty hard… it can get lost pretty quickly when words on a screen don’t come with tone.

Enter the <sarcasm> element*. I, (as well as others), have been know to add this to IRC chats, or at least end a line with </sarcasm>.

It suddenly changes the tone of the conversation. You become enlightened as to body language that otherwise gets missed when not in direct vicinity with another person.

And why stop at sarcasm, could we express other emotions too – just with one element and it’s attributes?

<emotion type="excited">I'm going to the fair tomorrow!</emotion>

Are there too many emotions, (and variations of such), or maybe I’m just about to step into a debate about how emotions don’t matter and only logic prevails.

<emotion type="scared">I'd better get out of here!</emotion>

*This idea is in no way practical.

EDIT 9.1.15: There is a sarcasm punctuation mark, as I discovered whilst watching University Challenge the other day. There’s more about it on the sarc mark website.

Animation code snippet

Because I keep referring back to it:

@include simple-vendor-prefix(animation,
    animation-name(name [default:none])
    animation-duration(Xs | Xms [default:0s])
    animation-timing-function(ease | ease-in | ease-out | ease-in-out | linear | cubic-bezier(x1,y1,x2,y2) | step-start | step-end | steps(X start|end) [default:ease])
    animation-delay(Xs | Xms [default:0s])
    animation-iteration-count(X | infinite [default:1])
    animation-direction(normal | reverse | alternate | alternate-reverse [default:normal])
    animation-fill-mode(none | forwards | backwards | both [default:none])
    animation-play-state(running | paused [default:running])

This is the Sass I use for declaring CSS animations. It’s a good list of all the parameters you can get for the CSS animation property, with their parameter format and default value.

Full Article ➺

Finding your break

I remember someone stating a few months back: “I’ve only just realised the ‘break’ in break-points was referring to the design breaking, I thought it was device related.”

Shouldn’t we be taking both into account? The design I’m working on at the moment really needs some tweaking at around 980px, but I think I’ll make my break point just above 1024px.

Full Article ➺

Choosing a colour scheme

I thought I’d document how I usually go about deciding on colours for a new website design.

I’m currently working on a personal project and have already put together some interactive wireframes using my White Paper (link coming soon). The next stage for me is to decide on some colours and fonts which I will then integrate into the wireframes and go on designing from there.

For this project I only have the subject matter for inspiration. Usually I would have a fair idea of look and feel in my head before I start looking for colour influence. However this one is very much an open book.

The first thing I do is turn to Colour Lovers and have a browse through the palettes on there, searching with keywords as I see fit. I screen shot any palettes or colours I am drawn to. I then put all these into one file in Photoshop.

From there I can start to see common colours, what I like, what I don’t like, things I have maybe been drawn to before (for instance the third palette down looks a lot like the colours for this site!).

Full Article ➺

Next Page »