Commit d35c451d authored by Mike Street's avatar Mike Street
Browse files

Further content audit

parent dd67f206
---
title: Limit Items (e.g. News posts)
date: 2011-03-10
updated: 2016-04-08
intro: If you would like to limit the amount of items coming out of an array (for example the first 5 news items)
permalink: "blog/limit-items-e-g-news-posts/"
tags:
- Web
- PHP
---
If you would like to limit the amount of items coming out of an array (for example the first 5 news items), then before your loop (e.g. while), specify your start and finish points
```php
$A = array_slice($A, START, END);
while $A {
```
For example, if you did want to only pull out the first 5 news items in an array, you would:
```php
$news_items = array_slice($news_items, 0, 5);
while $news_items {
```
---
title: It's My Way or the Highway. Not.
date: 2012-01-24
updated: 2016-04-08
intro: Recently with the spate of CSS3 and media queries, there has been a few debates over how development should be done.
permalink: "blog/its-my-way-or-the-highway-not/"
tags:
- Web
- CSS
---
Recently with the spate of CSS3 and media queries, there has been a few debates over how development should be done. Several people have emerged saying that you should be considering [mobile first.](http://www.netmagazine.com/features/mobile-first) The attitude of some of these people on the web, is do mobile first or don't bother doing it at all.
Now, I understand why you should. It helps you focus and means that the content is all the content you need. If you do mobile first, you're not tempted to slide in the odd random graphic here or there. But i've been thinking. _Why should we **have** to do it this way?_
I've always been of the mindset that with the web, as long as its accessible and semantic and it makes sense, its perfectly acceptable. There are hundreds of different ways to skin a cat and as long as you get a clean website at the end, who cares how you got there? (People even have prejudices against certain bits of software...).
I often get annoyed on the web when people tell me I _have_ to do something a certain way. I prefer to be nudged in a general direction than having a certain technique forced upon me. For example, I have recently read a couple of Sitepoint books - [jQuery: Novice to Ninja](http://www.sitepoint.com/books/jquery1/) and [HTML5 & CSS3 for the Real World](http://www.sitepoint.com/books/htmlcss1/). They are fantastic books (highly recommended for people starting out in jQuery and HTML5).
The thing I like about the books is that they imply that there are several ways to do things. The code examples in the book are starting points  that give you a nudge in the right direction. Before I read the jQuery book - I was under the impression that it was really complex, but the book showed me how simple things were and from that I have evolved into a jQuery Deputy Master.
So next time you read a technique, or tutorial, remember that it is not the only way and no matter what operating system, software or method people are using, please be nice and accept their working process - you might be surprised and realise they're doing it better.
---
title: HTML5 - Explained. Briefly
date: 2012-02-07
updated: 2019-03-27
intro: After reading the aforementioned HTML5 & CSS3 for the Real World book, I have come to realise that there are loads of changes included with HTML5.
permalink: "blog/html5-explained-briefly/"
tags:
- Web
- Front-end Development
- HTML
---
After reading the aforementioned [HTML5 & CSS3 for the Real World](http://www.sitepoint.com/books/htmlcss1/) book, I have come to realise that there are _loads_ of changes included with HTML5. I have the book in front of me for me to reference, but I find it laborious to keep opening it to check on the semantic meaning behind `<small>` or `<section>` elements.
So this post is not ground breaking, its not amazing. Its just a summary of changes to the HTML spec in English I understand and can refer back to. Its also to pass to my back end developer so he knows what's what. \[I'm also posting it incomplete - post a comment if you have an additions/suggestions\].
Before you can use any of these elements - you should really use the HTML5 Shiv - found in  my basic [HTML5 Template](https://gist.github.com/mikestreety/1657670).
If you get stuck - HTML5 Doctor created this [amazing flowchart](http://html5doctor.com/downloads/h5d-sectioning-flowchart.png)
`<header>`, `<nav>` & `<footer>` are all self explanatory
`<section>` - This is content which is related to one another. I.e. a 'section' of quotes, sections of a tabbed interface.
`<article>` - Should be a self contained piece of content
`<aside>` - Should be something that is tangible to the content, or something like a sidebar or ad space. It should _not_ contain main content.
`<h1>` - These can appear more than once on a page and should be within context of where it is. I.e. you should be able to remove the parent and everything to still be correctly titled. Each `<article>` should have one.
`<figure>` & `<figcaption>` - perfect for an image and caption. Would be marked up like:
```html
<figure>
<figcaption>An image</figcaption>
<img src="" alt="">
</figure>
```
`<b>` - can be used to make something bold, without it being significant - e.g. showing a change in a **lump** of code
`<i>` - for use in the case that you want italics, but not for emphasis - e.g. _"Hello"_ he said
`<small>` can still be used to show text that is smaller, than the rest - e.g. `<small>Copyright Mike Street</small>`
`<a>` - can now be around block elements!
---
title: I bloody love twitter
date: 2012-05-16
updated: 2016-04-08
intro: I bloody love twitter. It's great. Now, I'm not some twitter addict or nerd, well I am, but that's by the by.
permalink: "blog/i-bloody-love-twitter/"
tags:
- General
- Thoughts
---
I bloody love twitter. It's great.
Now, I'm not some twitter addict or nerd, well I am, but that's by the by.
Some people just don't _get_ twitter and its those people that I don't _get_. I've recently returned from future of web design conference and without twitter, it don't think it would exist.
Twitter is one of those things that it's hard to explain, and it's hard to see the benefits when you are an an outsider, but when you come inside, to the warmth of followers and the glowing fire of your mates it's amazing.
You can ask for help, and people will help, you can ask for advice, and people will advise, you can ask for attendance and people will attend - the list goes on and it's bloody brilliant.
Still not convinced?
A case study:
I run an event called Points. You may know of this event, you may not. But it's a mini-conference. It was held last Tuesday, 8th may. I only promoted it on twitter and 25 people came. That's 25 people whom I may or may not know, who found out about the event on twitter. It was raising money for a charity, Tia's trees, set up by Remy sharp, who I met through twitter. How is that for a case study?
At the FOWD conf, I met up with people who I know on twitter, and I met people who I now follow on twitter, because emailing them is too formal and the conversation is forced if you email. But with twitter, you can tell them what you're up to, or show off you latest projects without looking like a dick.
Twitter also allows you to realise that people are just that, people. That amazing web guy, or celebrity you love? Follow them on twitter and you realise that they get cramp, or spots, or colds and it makes you love the more, because they're human. Its also a portal to start a conversation with said mega-star and who knows, you might become friends.
So love twitter, and I would love to hear your twitter experiences. In fact, [croydon creatives](http://www.croydoncreativ.es/) is perfect example of some good twitters.
---
title: I hate road cycling
date: 2012-07-19
updated: 2016-04-08
intro: Road cycling. Its boring. Its rubbish. Most road cyclists just go round in circles. Up to the top of a hill, turn round and back again - wash, rinse, repeat.
permalink: "blog/i-hate-road-cycling/"
tags:
- General
- Thoughts
- Cycling
---
Road cycling. Its boring. Its rubbish. Most road cyclists just go round in circles. Up to the top of a hill, turn round and back again - wash, rinse, repeat.
Mountain biking is where is at. You get to go to the top of the hill, turn round but this time its bumpy, its muddy, its fast, its dangerous, you go over jumps, round bumps and have to constantly watch out for pot holes. When you're at the bottom you feel like a ninja. A pro. Simple.
This was my view on cycling for years. I used to go out on the trail, find the steepest hill and try and get as muddy as possible. My enthusiasm dropped as I got busy with life, uni and bordom got in the way. Then life got in the way and had to move to Croydon. It was here I found the passion for biking again, oddly, but not on a mountain bike, or a road bike - a fold up bike for my commute.
Circumstances changed and I headed back to Brighton - needing to cycle again, I transformed my mountain bike into a hybrid - buying road tyres and making the riding position a bit more comfortable. But still my heart was on the trail, always wanting to get back in the mud.
That was, of course, until I did the London to Brighton Bike Ride. I loved it. It was that, and the training, that made my mind sing. I don't know what it was, but it twigged. I loved it.
So against all the shouting voices in my heart I bought a road bike. A proper road bike. An this morning I went out, cycled up a hill and turned round again. I loved every single minute of it. I rode and I smiled. I am a convert. Pure and simple.
---
title: Hovélo - a new Hove-based cycling group
date: 2014-07-25
updated: 2019-04-08
intro: Posts round here have been a bit quite because my time has been taken up by starting a new cycling club - Hovélo
permalink: "blog/hovelo-a-new-hove-based-cycling-group/"
tags:
- Cycling
---
Posts round here have been a bit quite because my time has been taken up by starting a new cycling club - [Hovélo](https://www.hovelo.co.uk)
Hovélo is a casual group of cyclists who enjoy biking but not the seriousness of proper bike clubs. Meeting every Sunday at the Small Batch on Goldstone Villas in Hove, the rides are whatever distance people turning up want. Generally, they end up being around 35-40 miles being back in Hove by 11. 
If you're thinking of coming along, hop over to the [Strava group](https://www.strava.com/clubs/hov%C3%A9lo-94708), introduce yourself and head out!
......@@ -3,6 +3,7 @@ title: How I kicked a millennial habit
date: 2017-06-22
updated: 2017-07-25
intro: Changing habits is hard - especially when it's being part of your lifestyle for so long. After watching a video, I decided to address my reliance on social media and mobile phones.
permalink: "blog/how-i-kicked-a-millennial-habit/"
tags:
- General
- Ramblings
......@@ -24,7 +25,7 @@ The points in the video Simon raised resonated with me, and I started looking at
It's not just this video that made me decide to do this. I've just got back from a camping trip and it was so nice to just sit, let your mind wander. Doing this made me not so scared to be bored and device-less.
My first step was my Fitbit. I own a [Blaze](https://www.fitbit.com/uk/blaze) which one of its selling points for me were all the notifications you could receive. These had to stop, as the moment my gadget buzzed I would lose track of the conversation to read my watch. I turned off all notifications except phone calls (as per the point above).
My first step was my Fitbit. I own a [Blaze](https://www.fitbit.com/uk/blaze) which one of its selling points for me were all the notifications you could receive. These had to stop, as the moment my gadget buzzed I would lose track of the conversation to read my watch. I turned off all notifications except phone calls (as per the point above).
My phone also stays on silent all the time so I can get to notifications when I want to address them, not when my phone demands.
......@@ -32,10 +33,10 @@ The next point to address was my constant "dual screening" in the evenings. I wo
When I got into work and sat down at my desk, my first action was not to check my emails but to pull out my phone and rest it in front of me. During the day I would then instantly pick up my device whenever it's little screen lit up - getting that hit of dopamine Simon mentions, answering to its every beck and call. This now doesn't happen and the phone stays firmly in my pocket until I'm ready to look at it.
These are all just small steps but already, a week later I'm noticing a difference. I do find myself slipping up every now and then, but I'm getting better (I think). I've also mentioned it to my wife and have noticed a difference in her "presence".
These are all just small steps but already, a week later I'm noticing a difference. I do find myself slipping up every now and then, but I'm getting better (I think). I've also mentioned it to my wife and have noticed a difference in her "presence".
To some people, this blog post may seem like a "poor me" or "well done you" attention seeking post and in a small way it is but I post it in the hope it makes someone else aware and helps someone else break that "habit".
Let me know how you get on!
<div class="video"><iframe src="https://www.youtube.com/embed/hER0Qp6QJNU"></iframe></div>
\ No newline at end of file
<div class="video"><iframe src="https://www.youtube.com/embed/hER0Qp6QJNU"></iframe></div>
---
title: How to filter an array of objects based on a secondary array in JavaScript
date: 2018-08-07
updated: 2018-08-07
intro: Sounds confusing, but there is a use-case, honest! Imagine you have an array with a set number of items in and you wanted to filter another array of objects based on that in your JavaScript. The post explains more!
permalink: "blog/how-to-filter-an-array-of-objects-based-on-a-secondary-array-in-javascript/"
tags:
- Web
- Javascript
......@@ -14,36 +14,42 @@ _Was recently asked to help write some code for this scenario - just jotting it
There is an array of objects with details of a football game. Each player that played in the match is associated with an ID and tracked on the game object:
<pre class="language-js">const games = [
```js
const games = [
{
id: '1',
players: [1, 2, 4, 5]
}, {
id: '2',
players: [3, 5, 6]
}, {
id: '3',
players: [1, 2, 4]
}
];</pre>
id: '1',
players: [1, 2, 4, 5]
}, {
id: '2',
players: [3, 5, 6]
}, {
id: '3',
players: [1, 2, 4]
}
];
```
We then wish to filter this array, by extracting the games that _either_ of the following players played in:
## The filter
<pre class="language-js">const playersToFilter = [3, 5];</pre>
```js
const playersToFilter = [3, 5];
```
With the code, we should get an array with games `1` and `2` in - as players `3` and `5` played in one or both of them:
## Expected output
<pre class="language-js">[{
id: '1',
players: [1, 2, 4, 5]
```js
[{
id: '1',
players: [1, 2, 4, 5]
}, {
id: '2',
players: [3, 5, 6]
}]</pre>
id: '2',
players: [3, 5, 6]
}]
```
## The result
......@@ -51,17 +57,21 @@ Filtering the array took some time to get to the result, but once figured out it
### ES2015
<pre class="language-js">const filteredGames = games.filter(game => {
return game.players.some(player => playersToFilter.includes(player));
});</pre>
```js
const filteredGames = games.filter(game => {
return game.players.some(player => playersToFilter.includes(player));
});
```
Before I jump in explaining what each line/function does - I'll also include the code in "old money" (still using the functions) but without the `=>` shortcutes
<pre class="language-js">var filteredGames = games.filter(function(game) {
return game.players.some(function(player) {
return playersToFilter.includes(player)
})
});</pre>
```js
var filteredGames = games.filter(function(game) {
return game.players.some(function(player) {
return playersToFilter.includes(player)
})
});
```
## The explanation
......@@ -71,29 +81,33 @@ The filter function enables you to quickly trim down an array by using a conditi
As an example, say you wanted all numbers lower than `3` from an array. You could use `filter()` like so:
<pre class="language-js">let numbers = [1, 2, 3, 4];
let lowNumbers = numbers.filter(n => n < 3);</pre>
```js
let numbers = [1, 2, 3, 4];
let lowNumbers = numbers.filter(n => n < 3);
```
`lowNumbers` would now equal `[1, 2]`. Pre ES2015, this code would look something like:
<pre class="language-js">var numbers = [1, 2, 3, 4];
```js
var numbers = [1, 2, 3, 4];
var lowNumbers = [];
for (i = 0; i < numbers.length; i++) {
if(numbers[i] < 3) {
lowNumbers.push(numbers[i]);
}
}</pre>
if(numbers[i] < 3) {
lowNumbers.push(numbers[i]);
}
}
```
You can already see that the `filter` function allows for more succinct code.
`return game.players.some();`
Remembering that, within the `filter` function, we are "looping" through the objects, we now have the properties available to us. `game.players` will return the array of players.
Remembering that, within the `filter` function, we are "looping" through the objects, we now have the properties available to us. `game.players` will return the array of players.
The `some()` function is really the magic ingredient here. It allows you to test an array to see if any of the items match the conditions you're passing in. Once again, it loops through each element (in this instance `player`). You can [read more about the `some` function on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some).
Without the `some()` function, we would need to loop through the players, setting a variable to `true` if the condition exists and then passing that variable back at the end.
Without the `some()` function, we would need to loop through the players, setting a variable to `true` if the condition exists and then passing that variable back at the end.
`playersToFilter.includes(player)`
......@@ -101,8 +115,10 @@ This is the condition we are passing to the `some()` function. It is a check to
If this returns `true` to the `some()` filter, it would mean this line would return `true`:
<pre class="language-js">return game.players.some(player => playersToFilter.includes(player));</pre>
```js
return game.players.some(player => playersToFilter.includes(player));
```
With that line returning `true`, this would in turn pass `true` to the `filter()` function, which would include it in the new array.
Still not making sense? Feel free to drop a comment below or [tweet me](https://twitter.com/mikestreety) with your questions!
\ No newline at end of file
Still not making sense? Feel free to drop a comment below or [tweet me](https://twitter.com/mikestreety) with your questions!
......@@ -3,6 +3,7 @@ title: How to set up and use Laravel Mix with your project
date: 2021-02-01
updated: 2021-01-14
intro: Despite the name, Laravel Mix isn't just for Laravel. It is a tidy, succinct task runner with understandable syntax and a single config file. This tutorial will run through setting it up with your project
permalink: "blog/how-to-set-up-and-use-laravel-mix-with-your-project/"
tags:
- Web
- Front-end Development
......@@ -13,7 +14,7 @@ Despite the name, Laravel Mix isn't just for Laravel. It is a tidy, succinct tas
## Intro
I am a massive advocate of Gulp and have used it for years. However, there is a new player in town and. for all my side projects it knocks the socks off Gulp. [Laravel Mix](https://laravel-mix.com/) is a Webpack wrapper - this means it uses its own config files while benefitting from the greatness that is Webpack.
I am a massive advocate of Gulp and have used it for years. However, there is a new player in town and. for all my side projects it knocks the socks off Gulp. [Laravel Mix](https://laravel-mix.com/) is a Webpack wrapper - this means it uses its own config files while benefiting from the greatness that is Webpack.
It's created by Jeffery Way, the author of Laravel, which is where I assume it gets its name from but you don't need to have a Laravel powered app to utilise its power. There are plenty of plugins available too. We will set up Laravel Mix with SCSS, ES6 compilation, image optimisation and run it alongside Eleventy.
......@@ -51,23 +52,28 @@ Just want to copy and paste? In a rush and just need the bullet points?
As with any "cool" tech these days, we need to start with `npm`. If you haven't done so already, run the following on the command line (make sure you have `cd`d to the correct directory). If you are unsure whether this is required, look for a `package.json` file in your folder.
<pre class="language-bash">npm init</pre>
```bash
npm init
```
This will run you through some questions and set up a `package.json` file for you.
Next we need to install `laravel-mix`. This can be done by entering the following command:
<pre class="language-bash">npm install laravel-mix --save</pre>
```bash
npm install laravel-mix --save
```
This will take a few minutes to install as it has several dependencies to install itself.
Next, using the your editor, IDE or the command line, create a new file called `webpack.mix.js` in the root of your projects
### <a id="file-structure"></a>SCSS and JS file setup
### <a name="file-structure"></a>SCSS and JS file setup
The code below assumes you have the following file structure (if not, you should should adjust the code to suit)
<pre>- build/
```
- build/
- css/
- screen.scss
- js/
......@@ -76,51 +82,66 @@ The code below assumes you have the following file structure (if not, you should
- index.html (or similar)
- assets/ (this will be auto generated)
- webpack.mix.js
- package.json</pre>
- package.json
```
### <a id="sass-js"></a>SCSS and JS Compilation
### <a name="sass-js"></a>SCSS and JS Compilation
Open the `webpack.mix.js` file and put the following in (not forgetting to update the paths if yours are different).
<pre class="language-js">let mix = require('laravel-mix');
```js
let mix = require('laravel-mix');
mix
.sass('build/css/screen.scss', 'public/assets/css/style.css')
.js('build/js/app.js', 'public/assets/js/app.js');</pre>
.js('build/js/app.js', 'public/assets/js/app.js');
```
This defines a new "mix" (using `laravel-mix`) and then specifies a sass (scss) and JS processor.
Once saved (and the file structure set up) you can run the following command to compile and generate your assets
<pre class="language-bash">NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --env=production --config=node_modules/laravel-mix/setup/webpack.config.js</pre>
```bash
NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --env=production --config=node_modules/laravel-mix/setup/webpack.config.js
```
To make this less hassle (and easier to remember), you can create a script in your `package.json` file. Open up the file and replace the `scripts` block with the following:
<a id="npm-script"></a>
<pre class="language-json">"scripts": {
<a name="npm-script"></a>
```json
"scripts": {
"prod:assets": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --env=production --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch:assets": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
}</pre>
}
```
This lets you now run the following instead of that lengthy command:
<pre class="language-bash">npm run prod:assets</pre>
```bash
npm run prod:assets
```
This will create your assets for production. As a bonus, this also includes a **watcher** script, which will compile as you save either the `scss` or `js` files. This can be activated, by running the command:
<pre class="language-bash">npm run watch:assets</pre>
```bash
npm run watch:assets
```
With your assets hopefully compiling, they can be included in your template, as you would with other CSS and JS files
<pre class="language-html">&lt;link rel="stylesheet" href="/assets/css/style.css"&gt;</pre>
```html
<link rel="stylesheet" href="/assets/css/style.css">
```
### <a id="image-optimisation"></a>Image Optimisation
### <a name="image-optimisation"></a>Image Optimisation
The next step is to add image optimisation to our build process. This will minify the jp(e)gs and pngs and also generate webp images. Serving up the webp images can either be hardcoded in your files, templates & content or you can use browser sniffing to serve up the right versions. We'll cover that in another post.
Add the following to your `laravel.mix.js` file, after the JavaScript configuration (included in the snippet below for reference). Be careful of your semi-colons (the one after `js()` has been removed)
<pre class="language-js">.js('build/js/app.js', 'html/assets/js/app.js')
```js
.js('build/js/app.js', 'html/assets/js/app.js')
.imagemin({
from: 'img/**/*'
}, {
......@@ -141,7 +162,7 @@ Add the following to your `laravel.mix.js` file, after the JavaScript configurat
]
})
.setPublicPath('html/assets');
</pre>
```
`imagemin` has slightly different syntax for the to and from, so if your paths change be sure to update the `context` and the `setPublicPath` paths at the end. With the `context`, this is folder your image folder is in.
......
---
title: Hovélo - a new Hove-based cycling group
date: 2014-07-25
updated: 2019-04-08
intro: Posts round here have been a bit quite because my time has been taken up by starting a new cycling club - Hovélo Hovélo is a casual group ...
tags:
- Cycling
---
<p>Posts round here have been a bit quite because my time has been taken up by starting a new cycling club - <a href="https://www.hovelo.co.uk">Hovélo</a></p>
<p>Hovélo is a casual group of cyclists who enjoy biking but not the seriousness of proper bike clubs. Meeting every Sunday at the Small Batch on Goldstone Villas in Hove, the rides are whatever distance people turning up want. Generally, they end up being around 35-40 miles being back in Hove by 11.&nbsp;<br></p><p>If you're thinking of coming along, hop over to the <a href="https://www.strava.com/clubs/hov%C3%A9lo-94708">Strava group</a>, introduce yourself and head out!&nbsp;</p>
\ No newline at end of file
---
title: HTML5 - Explained. Briefly
date: 2012-02-07
updated: 2019-03-27
intro: After reading the aforementioned HTML5 & CSS3 for the Real World book, I have come to realise that there are loads of changes included with HTML5. I have the ...
tags:
- Web
- Front-end Development
- HTML
---
<p>After reading the aforementioned <a href="http://www.sitepoint.com/books/htmlcss1/" target="_blank">HTML5 & CSS3 for the Real World</a>&nbsp;book, I have come to realise that there are <em>loads</em>&nbsp;of changes included with HTML5. I have the book in front of me for me to reference, but I find it laborious to keep opening it to check on the semantic meaning behind <code>&lt;small&gt;</code> or <code>&lt;section&gt;</code> elements.</p>
<p>So this post is not ground breaking, its not amazing. Its just a summary of changes to the HTML spec in&nbsp;English&nbsp;I understand and can refer back to. Its also to pass to my back end developer so he knows&nbsp;what's&nbsp;what. [I'm also posting it incomplete - post a comment if you have an additions/suggestions].</p>
<p>Before you can use any of these elements - you should really use the HTML5 Shiv - found in &nbsp;my basic <a href="https://gist.github.com/mikestreety/1657670">HTML5 Template</a>.</p>
<p>If you get stuck - HTML5 Doctor created this&nbsp;<a href="http://html5doctor.com/downloads/h5d-sectioning-flowchart.png">amazing flowchart</a></p>
<p><code>&lt;header&gt;</code>, <code>&lt;nav&gt;</code> & <code>&lt;footer&gt;</code> are all self explanatory</p>
<p><code>&lt;section&gt;</code> - This is content which is related to one another. I.e. a 'section' of quotes, sections of a tabbed interface.</p>
<p><code>&lt;article&gt;</code> - Should be a self contained piece of content</p>
<p><code>&lt;aside&gt;</code>&nbsp;- Should be something that is tangible to the content, or something like a sidebar or ad space. It should <em>not</em>&nbsp;contain main content.</p>
<p><code>&lt;h1&gt;</code> - These can appear more than once on a page and should be within context of where it is. I.e. you should be able to remove the parent and everything to still be correctly titled. Each <code>&lt;article&gt;</code> should have one.</p>
<p><code>&lt;figure&gt;</code> & <code>&lt;figcaption&gt;</code> - perfect for an image and caption. Would be marked up like:</p>
<pre class="language-html">&lt;figure&gt;
&lt;figcaption&gt; An image&lt;/figcaption&gt;
&lt;img src="" alt=""&gt;
&lt;/figure&gt;
</pre>
<p><code>&lt;b&gt;</code> - can be used to make something bold, without it being significant - e.g. showing a change in a <strong>lump</strong> of code</p>
<p><code>&lt;i&gt;</code> - for use in the case that you want italics, but not for emphasis - e.g. <em>"Hello"</em> he said</p>
<p><code>&lt;small&gt;</code> can still be used to show text that is smaller, than the rest - e.g. <code>&lt;small&gt;Copyright Mike Street&lt;/small&gt;</code></p>
<p><code>&lt;a&gt;</code> - can now be around block elements!</p>
\ No newline at end of file
---
title: I bloody love twitter
date: 2012-05-16
updated: 2016-04-08
intro: I bloody love twitter. It's great. Now, I'm not some twitter addict or nerd, well I am, but that's by the by. Some people just don't get twitter and its ...
tags:
- General
- Thoughts
---
<p>I bloody love twitter. It's great.</p>
<p>Now, I'm not some twitter addict or nerd, well I am, but that's by the by.</p>
<p>Some people just don't <em>get</em> twitter and its those people that I don't <em>get</em>. I've recently returned from future of web design conference and without twitter, it don't think it would exist.</p>
<p>Twitter is one of those things that it's hard to explain, and it's hard to see the benefits when you are an an outsider, but when you come inside, to the warmth of followers and the glowing fire of your mates it's amazing.</p>
<p>You can ask for help, and people will help, you can ask for advice, and people will advise, you can ask for attendance and people will attend - the list goes on and it's bloody brilliant.</p>
<p>Still not convinced?</p>
<p>A case study:</p>
<p>I run an event called points. You may know of this event, you may not. But it's a mini-conference. It was held last Tuesday, 8th may. I only promoted it on twitter and 25 people came. That's 25 people whom I may or may not know, who found out about the event on twitter. It was raising money for a charity, Tia's trees, set up by Remy sharp, who I met through twitter. How is that for a case study?</p>