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

Further content audit

parent 2b831ed8
---
title: Redirect to one central domain - htaccess
date: 2011-02-21
updated: 2016-04-08
intro: If you would like to 'redirect' all your users to a central domain (for example if you would like all users to browse your site with the www or you have several parked domains)
tags:
- Web
- Server
- htaccess
---
If you would like to 'redirect' all your users to a central domain (for example if you would like all users to browse your site with the www or you have several parked domains) then paste the following code into your `.htaccess` file (normally located in the root) - works on Linux servers with cPanel.
```apacheconf
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{HTTP_HOST} =mikestreety.co.uk
RewriteRule ^(.*)$ http://www.mikestreety.co.uk/$1 \[L,R=301\]
</IfModule>
```
Change the domain where appropriate. In English this says if its not `mikestreety.co.uk` then redirect to `mikestreety.co.uk`.
This is especially good for SEO purposes as it means google does not see duplicate content if you have several parked domains, or if you have flash on your website which generally requires the www. prefix to work
---
title: ratio - a mikestreety app
date: 2012-06-30
updated: 2016-04-08
intro: An app for working out ratios
permalink: "blog/ratio-a-mikestreety-app/"
tags:
- Web
- Projects
---
I've been cleaning up my sever space recently and found a few apps i've made that i may have tweeted about before, but aren't linked anywhere. So in the interest of SEO and making people more aware of the little things I've built, I thought what better way than to blog about them?
The first one is [Rat:o - a ratio calculator](https://ratio.mikestreety.co.uk/ "Ratio calculator").
I built this app just after I started learning jQuery - I wanted to test my knowledge so I thought I would knock this up. It took a few evenings (longer than it should have) but now does the job perfectly. You can chose to get exact or round to the nearest 'pixel'
I built it as on a day to day basis in my job, I am [resizing images](https://ratio.mikestreety.co.uk/) or youtube videos and such and to do this, I found myself opening photoshop, making a new file the size of the original and then going to Image -> Resize. This technique didn't really matter if I had Photoshop already open, but you can imagine the laborious task that it turned into when I had to open that massive program.
Operation of this app is fairly easy. Put the original dimensions or the ratio you want you picture or video to be and then enter the desired width or height and it fills in the other one! Simple!
Try [Ratio](https://ratio.mikestreety.co.uk/) out for yourself
---
title: Sass - Hidden Gems
date: 2012-11-11
updated: 2016-04-08
intro: I've recently been getting into pre-processors for CSS and I have been using LESS for sometime - getting to grips with the nesting and variables while keeping a library of my own mixins.
permalink: "blog/sass-hidden-gems/"
tags:
- Web
- Front-end Development
- CSS
---
I've recently been getting into pre-processors for CSS and I have been using LESS for sometime - getting to grips with the nesting and variables while keeping a library of my own mixins.
The only trouble with LESS is, there is no way to easily remote compile a LESS file on the server upon save. I was having to use the JS include at the top, compile near launch and switch to editing the CSS once compiled. This was ok, but tricky if you were switching between one project in LESS and another in plain ol' CSS.
I did eventually find a way to compile on the command line, bit it requires both Node (with lessc installed) and Ruby, with a gem called watchr. This was a very convoluted approach, and it didn't always work, And as another dev pointed out - if I was installing Ruby I may as well use Sass.
Before you harp on at me about the local compiling of LESS files and such - I don't just work on little sites on my own. This is for work, and at work we have a behemoth of a CMS with multiple devs working on it at once on a dev server - so I wanted a solution that would integrate with that.
What i'm after is a solution that everyone can work on and that generates a compressed CSS file for production. Sass seems the obvious answer to me as it means everyone will have all the files with the compiler on the command line and not on the local machines. I will be writing about the development set-up I have at work and why we chose to go down that route.
Below are some resources i've found which has helped me understand the hidden 'gems' of Sass. I've yet to fully develop with Sass, so I can't conclude yet...
- [http://sass-lang.com/docs/yardoc/file.SASS\_REFERENCE.html](http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html) - the official sass documentation
- [https://gist.github.com/3181172/0c6a8d7050413ca9ad9fcd4cdc53890ceed8b7c5](https://gist.github.com/3181172/0c6a8d7050413ca9ad9fcd4cdc53890ceed8b7c5) - a gist from phil documenting some of the built in mixins
- [http://jc-designs.net/blog/2010/10/sass-scss-and-compass-cheat-sheet/](http://jc-designs.net/blog/2010/10/sass-scss-and-compass-cheat-sheet/) - a cheat sheet
- [http://compass-style.org/](http://compass-style.org/) - One of the best 'hidden' features (apparently) of Sass
- [http://compass-recipes.moox.fr/](http://compass-recipes.moox.fr/) - more recipes for the compass
- [http://singularity.gs/](http://singularity.gs/) - A responsive grid system
- [https://github.com/canarymason/breakpoint](https://github.com/canarymason/breakpoint) - simple sass media queries
- [http://foundation.zurb.com/](http://foundation.zurb.com/) - not so much a resource - but a templating system that uses Sass is always good to pull apart and see how they do it.
---
title: Remaking the Sass News Newsletter
date: 2014-06-10
updated: 2021-09-21
intro: With the weekly golden nectar of Sass News winging its way into my inbox every week, I decided to take on the challenge of giving the newsletter a facelift
permalink: "blog/remaking-the-sass-news-newsletter/"
tags:
- Web
- Front-end Development
- CSS
---
With the weekly golden nectar of [Sass News](https://twitter.com/SassNews) winging its way into my inbox every week, I decided to take on the challenge of giving the newsletter a facelift (if you're not subscribed and you like Sass - [you should do it](http://sassnews.us7.list-manage.com/subscribe?u=b4a4054cce715a3b0ae5e7d35&id=f7c505323d))
Many people would run away at the thought of designing and making a HTML newsletter, but I strangely enjoy it!
### Start with a template
Mailchimp have a _fantastic_ resource of [email blueprints](https://github.com/mailchimp/Email-Blueprints) to get you started. You can pick and chose from a whole myriad of templates - with cross-client compatibility. The other sites i've often referenced and used are [Zurb's Ink framework](http://zurb.com/ink/) and [Antwort](http://internations.github.io/antwort/)
With mobiles and emails taking off, responsive mailouts are paramount. No-one wants to be zooming in and out on a mobile just to read the text!
### Build the mail
I picked the basic [single column responsive layout](https://github.com/mailchimp/Email-Blueprints/blob/master/responsive-templates/base_boxed_basic_body_image_query.html) and started modifying colours and fonts, taking hints from the [current mailout](http://us7.campaign-archive1.com/?u=b4a4054cce715a3b0ae5e7d35&id=2244d26e0b). I felt the current mailout was missing emphasis on the different sections and an image to draw the user in.
To make sure the mailout worked with the length and type of content that Stu would be sending out, I knocked up a couple of the past ones - making sure links worked and acted as expected in all the browsers.
To save time, I used `<style>` blocks at the top of the page while prototyping and getting the mailout looking sweet. Those that build mailouts know that Outlook (and other clients) don't play well with style blocks - preferring inline styles. Rather than going through each element and replacing the class with style tags, I used mailchimp's amazing [css inline tool](http://templates.mailchimp.com/resources/inline-css/) \- it saved an absolute ton of time!
### Test, test, test
Once built with initial content, I ran a few inbox tests. [Putsmail](http://putsmail.com/) is a great service for creating and sending HTML newsletters for free - It enables you to send to up to 10 accounts at a time and it's a great, easy way of checking all sorts of email clients and devices. Always measure twice cut once, just because the change you made will "probably work", there is nothing worse than sending a big mailout and realising you missed an `</a>`. Its also a good idea to look at the statistics of previous mailouts if you can, there is no point sweating over a missing border in Outlook 2003 if only 1 person uses it.
### Make it dynamic
If you've ever had to do regular (or even irregular) mailout creations, you quickly realise that copying and pasting `<td>` is tedious, boring and sometimes dangerous. Missing that vital `</tr>` can be the difference between your mailout getting 1000s of clicks and it going into spam. It also takes a long time, working out where one story starts and another ends.
To speed up development of the Sass newsletter, I made it dynamic - running off a `json` file so the mailout does the heavy lifting of working out where to loop stories. I have used php to convert the json into an object
I started off by dividing the mailout up into stories and sections - and working out where each one is: (this is _not_ the actual code - just example!)
```html
<tr>
<td colspan="2">
<h1>[NEWSLETTER STORY]</h1>
<p>[INTRO TEXT]</p>
</td>
</tr>
<tr>
<td colspan="2">
<h3>[TITLE]</h3>
</td>
</tr>
<tr>
<td>
<img src="[IMAGE]">
</td>
<td>
[CONTENT]
</td>
</tr>
```
You can see - even for a basic example that's already a few lines of code!
Once I had separated out the newsletter into sections, I started to build the json up:
```json
{
"title" : "Welcome to Issue #17",
"intro_text" : "This issue features fun, frolics and even more articles from Hugo!",
"content" : [
{
"image" : "http://www.mikestreety.co.uk/image1.png",
"title" : "Speak at Sassconf",
"text" : "Got a great idea for a talk or workshop? The closing date for submissions to this years Sassconf has been extended to May 30th. "
}, {
"image" : "http://www.mikestreety.co.uk/image2.png",
"title" : "Speak at Sassconf",
"text" : "Got a great idea for a talk or workshop? The closing date for submissions to this years Sassconf has been extended to May 30th. "
}
]
}
```
We have the structure and the content - we just need to tie the two together. Saving the `json` in a separate file enables us to pull it in and decode using php.
<?php $email = json\_decode(file\_get_contents('content.json')); ?>
The variable `$email` is now an object with all the data from the file. To get the title and intro text, output the `title` and `intro_text` properties on the `$email` object:
```php
<tr>
<td colspan="2">
<h1><?php echo $email->title ?></h1>
<p><?php echo $email->intro_text ?></p>
</td>
</tr>
```
We now have an array of stories, enabling us to just use one block of html for all the articles. As its an array, we are able to `foreach` through them:
```php
<?php foreach($email->content as $article) : ?>
<tr>
<td colspan="2">
<h3><?php echo $article->title ?></h3>
</td>
</tr>
<tr>
<td>
<img src="<?php echo $article->image ?>" alt="<?php echo $article->title ?>">
</td>
<td>
<?php echo $article->text ?>
</td>
</tr>
<?php endforeach; ?>
```
Any bugs with the news story html only needs to be adjusted once, plus if you update the article title, it will update the `<img>` alt tag too. From there, updating the newsletter each week is as simple as updating the JSON and copying the compiled HTML.
### Example
I have uploaded all the code used as a [Github Gist](https://gist.github.com/mikestreety/f32e8e0fd98692bcc9e4).
......@@ -25,7 +25,6 @@ _This list will be constantly updated & sorted in alphabetical order_
- [Pony Foo](https://ponyfoo.com/weekly) - If i'm honest, I only signed up to this for the name, but has become a great resource for articles
- [Responsive Design Weekly](https://responsivedesign.is/) - All things responsive
- [Smashing Email Newsletter](https://www.smashingmagazine.com/the-smashing-newsletter/) - A round-up of Smashing Mag content, code examples and opinions
- ~[SVG Weekly](https://svgweekly.com/)~ - Exactly what it says on the tin
- [Sass News](http://sassnews.com/) - News about Sass and SCSS
- [Versioning](https://www.sitepoint.com/versioning) - from Sitepoint, not always "web dev" links, but an interesting _daily_ collection
- [WebAIM](http://webaim.org/newsletter/) - A newsletter focused on web accessibility
......
......@@ -3,16 +3,18 @@ title: Set up a new Virtual Private Server (VPS)
date: 2016-10-23
updated: 2019-07-25
intro: How to set up a new VPS with all the expected features and functionality
permalink: "blog/set-up-a-new-virtual-private-server-vps/"
tags:
- Web
- Command Line
- Web
---
<div class="info">Please note, these commands and steps have worked for me. I know a small bit about servers but not enough to take responsibility for anything in this post - enter the commands at your own risk!</div>
I recently acquired a cheap VPS. The thing that is different with a VPS compared to a "hosting" package is that it is complete bare bones. You can choose to install Windows or Linux or anything on it. The problem with this is that it's bare bones. It's your responsibility to keep it up to date and safe!
The following commands are ones I run to set up a new Virtual Private Server with Debian. I have set up these servers for personal projects and repo hosting, so they are not getting hit by big amounts of traffic. If you're expecting that, you should probably get someone proper to do this for you!
The following commands are ones I run to set up a new Virtual Private Server with Debian. I have set up these servers for personal projects and repo hosting, so they are not getting hit by big amounts of traffic. If you're expecting that, you should probably get someone proper to do this for you!
_All the following commands assume you are logged in as the root user and you have command line experience_
......@@ -39,21 +41,21 @@ I have written a blog post with various Linux user commands:
Before you start (once Debian is fully installed), make sure all the base packages are up to date:
<pre class="language-bash">
```bash
$ apt-get update && apt-get upgrade
</pre>
```
You may wish to install vim and/or nano, depending on your poison:
<pre class="language-bash">
```bash
$ apt-get install vim nano
</pre>
```
Once updated, I like to install some basic (expected) components:
<pre class="language-bash">
```bash
$ apt-get install apache2 apache2-doc apache2-utils php-common libapache2-mod-php php-cli php-curl php-mbstring curl git ntp rsync cron host telnet zip
</pre>
```
This list includes:
......@@ -68,17 +70,17 @@ This list includes:
You will then need to enable some modules specific to your PHP version. Run `php -v` and see which one you have (e.g. 7.2). You can then run:
<pre class="language-bash">
```bash
$ apt-get install php7.2-common php7.2-cli php7.2-curl php7.2-mbstring
</pre>
```
### Install MySQL and phpMyAdmin
Chances are you are going to want to have some sort of MySQL database - to do so, install it
<pre class="language-bash">
```bash
$ apt-get install mysql-server phpmyadmin
</pre>
```
When installing phpMyAdmin, you'll be asked a few questions
......@@ -89,27 +91,27 @@ When installing phpMyAdmin, you'll be asked a few questions
Once MySQL has installed, you need to run the configuration tool. During this, it's most likely you will want to say **yes** to all the questions.
<pre class="language-bash">
```bash
$ mysql_secure_installation
</pre>
```
and include the phpMyAdmin config file:
<pre class="language-bash">
```bash
Include /etc/phpmyadmin/apache.conf
</pre>
```
Save and close and restart apache
<pre class="language-bash">
```bash
$ service apache2 restart
</pre>
```
To continue phpMyAdmin installation, edit the `apache2` config file:
<pre class="language-bash">
```bash
$ vim /etc/apache2/apache2.conf
</pre>
```
You should now be able to go to **<your ip address>/phpmyadmin**.
......@@ -119,102 +121,102 @@ If you would like to secure your phpMyAdmin installation, Digital ocean have a [
This is the most important bit - make things pretty. Edit the global `bashrc` file
<pre class="language-bash">
```bash
$ vim /etc/bash.bashrc
</pre>
```
And add the following lines
<pre class="language-bash">
```bash
export LS_OPTIONS='--color=auto'
eval "`dircolors`"
alias ls='ls $LS_OPTIONS'
</pre>
```
### Set the time
<pre class="language-bash">
```bash
dpkg-reconfigure tzdata
</pre>
```
### Updates and Upgrades
You may wish to ensure your VPS is kept up to date (for security reasons). The following commands are quite brutish but seem to work quite well
First, install `unattended-upgrades` - this auto updates many packaes for you.
First, install `unattended-upgrades` - this auto updates many packages for you.
<pre class="language-bash">
```bash
$ apt-get install unattended-upgrades apt-listchanges
</pre>
```
I've stuck with the default config but if you wanted to change it, you can find it here:
<pre class="language-bash">
```bash
$ vim /etc/apt/apt.conf.d/50unattended-upgrades
</pre>
```
Next, put a cron to run once a day with the following command:
<pre class="language-bash">
```bash
$ DEBIAN_FRONTEND=noninteractive apt-get -qq update && DEBIAN_FRONTEND=noninteractive apt-get -y --force-yes -qq dist-upgrade && apt-get autoclean
</pre>
```
If you don't SSH in as root, you'll want to add some `sudo` commands at the beginning and after every `&&`.
### Install Composer
<pre class="language-bash">
```bash
$ wget --no-check-certificate https://getcomposer.org/composer.phar
$ mv composer.phar /usr/local/bin/composer
$ chmod +x /usr/local/bin/composer
</pre>
```
### Install Node & npm
Double check the url on the [node website](https://nodejs.org/en/download/package-manager/)
<pre class="language-bash">
```bash
$ curl -sL https://deb.nodesource.com/setup_6.x | bash -
$ apt-get install nodejs
$ npm install npm -g
</pre>
```
### Disable root password
The following disables the password login with the `root` username and instead relys on SSH keys. If you are not sure what an SSH key is or how to generate one, read the [GitHub](https://help.github.com/articles/generating-an-ssh-key/) tutorial.
The following disables the password login with the `root` username and instead relies on SSH keys. If you are not sure what an SSH key is or how to generate one, read the [GitHub](https://help.github.com/articles/generating-an-ssh-key/) tutorial.
First, add your key to the `authorized_keys` file.
First, add your key to the `authorized_keys` file.
On your computer, run:
<pre class="language-bash">
```bash
$ cat ~/.ssh/id_rsa.pub
</pre>
```
Copy the output, now on your VPS:
<pre class="language-bash">
```bash
$ mkdir ~/.ssh
$ vim ~/.ssh/authorized_keys
</pre>
```
Next, edit the ssh config:
<pre class="language-bash">
```bash
$ vim /etc/ssh/sshd_config
</pre>
```
Look for `PermitRootLogin yes` and change to
Look for `PermitRootLogin yes` and change to
<pre class="language-bash">
```bash
PermitRootLogin without-password
</pre>
```
Restart the current `ssh` service but **make sure you stay logged in** - just in case it does't work
<pre class="language-bash">
```bash
/etc/init.d/ssh restart
</pre>
```
In a new tab, `ssh` into your VPS. If it doesn't ask for a password - assume it worked!
......@@ -228,20 +230,20 @@ This allows you to do subdomains easily too.
First, install the `vhost_alias` module
<pre class="language-bash">
```bash
$ a2enmod vhost_alias
</pre>
```
Next, create a `.conf` file in the `sites-available` folder
<pre class="language-bash">
```bash
$ vim /etc/apache2/sites-available/websites.conf
</pre>
```
Copy and paste the below into your new conf file.
<pre class="language-bash">
&lt;VirtualHost *:80&gt;
```apacheconf
<VirtualHost *:80>
DocumentRoot /var/www/vhosts/
VirtualDocumentRoot /var/www/vhosts/%0/html
......@@ -251,34 +253,34 @@ Copy and paste the below into your new conf file.
ErrorLog /var/log/apache2/error.log
CustomLog /var/log/apache2/access.log combined
&lt;Directory "/var/www/vhosts/*/html"&gt;
<Directory "/var/www/vhosts/*/html">
DirectoryIndex index.php index.html index.htm
AllowOverride All
Options -Indexes
&lt;/Directory&gt;
</Directory>
&lt;/VirtualHost&gt;
</pre>
</VirtualHost>
```
Disable the `default` site conf
<pre class="language-bash">
```bash
$ a2dissite 000-default.conf
</pre>
```
Enable, your new conf file
<pre class="language-bash">
```bash
$ a2ensite websites.conf
</pre>
```
Lastly, restart `apache`
<pre class="language-bash">
```bash
$ service apache2 restart
</pre>
```
Make your folder structure (e.g. `/var/www/vhosts/mikestreety.co.uk/html/`) and as long as the domain name is pointed to your server, it should show in the browser.
......@@ -294,27 +296,27 @@ Next, edit your conf file and add the following to the bottom. You will need to
Replace `[[WEBROOT]]` with the absolute path to your website (e.g. `/var/www/vhosts/domain/html`) and `[[URL]]` with your website address (without the `https://`)
<pre class="language-bash">
&lt;VirtualHost *:443&gt;
```apacheconf
<VirtualHost *:443>
DocumentRoot [[WEBROOT]]
ServerName [[URL]]
SSLEngine on
SSLCertificateFile /path/to/origin/cert.crt
SSLCertificateKeyFile /path/to/private/key.key
&lt;Directory "[[WEBROOT]]"&gt;
<Directory "[[WEBROOT]]">
DirectoryIndex index.php index.html index.htm
AllowOverride All
Options -Indexes
&lt;/Directory&gt;
&lt;/VirtualHost&gt;
</pre>
</Directory>
</VirtualHost>
```
Once saved, restart apache
<pre class="language-bash">
```bash
$ service apache2 restart
</pre>
```
Lastly, head back to Cloudflare and, under the Crypto section, change SSL from flexible to full.
......@@ -328,9 +330,9 @@ There are many modules available for apache which are not installed by default.
To enable any of these, run the command followed by the module name
<pre class="language-bash">
```bash
$ a2enmod headers
</pre>
```
once run, you will need to restart apache.
......@@ -339,4 +341,4 @@ To get a list of all the modules available, `cd` to `/etc/apache2/mods-available
## References
- [How To Install and Secure phpMyAdmin on Ubuntu 12.04](https://www.digitalocean.com/community/tutorials/how-to-install-and-secure-phpmyadmin-on-ubuntu-12-04)
- [How To Install Linux, Apache, MySQL, PHP (LAMP) stack on Debian](https://www.digitalocean.com/community/tutorials/how-to-install-linux-apache-mysql-php-lamp-stack-on-debian)
\ No newline at end of file
- [How To Install Linux, Apache, MySQL, PHP (LAMP) stack on Debian](https://www.digitalocean.com/community/tutorials/how-to-install-linux-apache-mysql-php-lamp-stack-on-debian)
---
title: Render Conf 30th March 2017 - A review
date: 2017-05-18
updated: 2019-03-27
intro: On 30th March, I took the many trains over the many hours required to get to Oxford from Brighton and attended Render Conf. In it’s second year, this conference ...
canonical: https://www.liquidlight.co.uk/blog/render-conf-30th-march-2017-a-review/
publication: Liquid Light
permalink: "blog/render-conf-30th-march-2017-a-review/"
tags:
- General
- Thoughts
---
On 30th March, I took the many trains over the many hours required to get to Oxford from Brighton and attended Render Conf. In it’s second year, this conference already seems to have gained quite an online following. The line-up was jam-packed full of reputable names you’ve heard and people with brains jam-packed full of info.
The venue was huge, a big room for the presentations (with live subtitles) and a second, even bigger room for break-times. The break room featured sponsors giving out swag and a whole table of retro games consoles.