Showing posts from the category "Web"

  • Converting Behind the Source to 11ty

    Posted on 7th October 2020.

    I spent the week converting Behind the Source from Craft to Eleventy (a static site generator). Will I use it again?

  • Useful command line MySQL commands

    Posted on 5th July 2020.

    It seems I have been doing a lot of command line work on Debian with MySQL recently and have been having to search the internet (or my bash history) every time I need to do something. Here is a collection of commands I have been using

  • The Git Commit Hash

    Posted on 28th May 2020.

    The magic 40 character string that is attached to every commit you do. What is it, where does it come from and will understanding it help you with Git in the future?

  • Why should you consider Cloudflare for your website?

    Posted on 20th April 2020. Written For Liquid Light

    Cloudflare is a service which, among other things, provides a CDN (Content Delivery Network), firewall, and performance layer for your website. It has plenty of paid upgrades and features and ...

  • Setting up Tiny Tiny RSS to collate feeds

    Posted on 16th April 2020.

    I set up Tiny Tiny RSS as a self-hosted feed reader, but it wasn't clear how get the application to fetch RSS feeds in the background. This blog post gives a walkthrough

  • The Real World of Web Development

    Posted on 31st July 2019.

    I read "The Real Dark Web", a blog post from @sonniesedge and within a few paragraphs it really hit home. There are a few noisy web developers who are innovating, ...

  • Build your own "share this" component

    Posted on 3rd May 2019.

    Using a Share This plugin (or similar) or the native sharing widgets from social networks can really bloat your page and look ugly. This code is how we, at Liquid Light, implement social sharing widgets

  • Using Vue.js with a Lumen powered API

    Posted on 18th October 2018. Written For Liquid Light

    Lumen is a micro-framework from the creators of Laravel. Using Laravel methodology, Lumen offers a leaner, cut-down version of the framework. By including less code, Lumen is able to offer ...

  • Uses

    Posted on 13th August 2018.

    I've had a few questions regarding what apps I use with which themes and settings. This is an up-to-date blog post with the answers.

  • Backup Gitlab data locally

    Posted on 12th March 2018.

    I've recently moved all of my git repositories to Gitlab, this blog post walks through a script I have written to clone all of my repositories locally as a backup.

  • How can I verify my Google Event Tracking is working?

    Posted on 18th September 2017. Written For Liquid Light

    Validating your Google Event tracking is working can be a tricky business. This blog post walks you through checking the data being sent to Google Analytics, so you can verify the information is correct.

  • Navigation drop-downs. Should they be hover or click?

    Posted on 15th August 2017. Written For Liquid Light

    Navigation drop-downs, or mega menus as they are sometimes dubbed, are becoming more and more common on the web. A drop-down menu is a navigation block which appears when a ...

  • SCSS Reverse direction

    Posted on 3rd July 2017.

    There may be a point in your CSS coding that you want to know the opposite of a direction (e.g. up, down). This function allows you to pass it a direction and get the opposite back!

  • Rarely handy Git commands

    Posted on 15th May 2017.

    There are rare times when you need a slightly obscure git command. You spent several minutes googling, crafting and constructing your command only to run it once and not need it again for a while. This blog post will serve as my dumping ground for those odd commands I seldom need, but when I do I can then copy and paste. Feel free to get in touch with your favourite curve-ball command and I'll do my best to add it to the list!

  • HTML 5 collapsable information - works in a Github/Gitlab issue

    Posted on 10th May 2017.

    It may be that you wish to include a lot of information in a Github issue (or anywhere else on the web that allows HTML) but don't want the code/error to fill out the page. Luckily, there is a way to collapse it using latest HTML tags.

  • Multiple transition delays

    Posted on 3rd May 2017.

    Being able to animate with CSS transitions is great, although there are a few gotchas when using them. This one with transition-delay had me scratching my head for a while.

  • CSS Custom Properties - everyday applications

    Posted on 26th April 2017.

    CSS Custom properties are now supported in Edge, meaning you can use them nearly everywhere. However, there are some cases where further browser support is required. Using PostCSS we can use CSS custom properties in development while still maintaining cross browser support.

  • How can I score 100 on Google PageSpeed Insights?

    Posted on 13th March 2017. Written For Liquid Light

    PageSpeed Insights (PSI) is a tool developed by Google to rank the speed of your website. There are a few things it doesn’t look out for, such as code validation or usability but it’s a good starting point at getting your site up to scratch.

  • What's new in Feefo v3?

    Posted on 15th December 2016. Written For Liquid Light

    Feefo, the customer feedback and review website, launched version 3 of their product at the end of September. Although customers had no choice to be updated to version 3, what does this ...

  • Find and remove vendor prefixes in your CSS using Regex

    Posted on 17th November 2016.

    I recently set out to remove all of the vendor prefixes from the CSS for all of our clients at work. This is because we use Gulp with Autoprefixer - which means we have up-to-date prefixes and cleaner SCSS. One way of doing this would be to open every CSS file, search for `-moz`, then search for `-webkit` etc. Some of the CSS I was searching through is well over 5 years old and is rife with vendor prefixes.

  • Building a Vue v2 JS app using Vue-router

    Posted on 3rd November 2016. Written For Liquid Light

    Vue JS is a javascript framework which has recently released version 2. Allowing you to display, manipulate and navigate data, Vue is a React, Knockout and Angular competitor. This blog post walks through building a web app with Vue Router.

  • How we use Trello to keep track of our marketing schedule

    Posted on 2nd August 2016. Written For Liquid Light

    Trello is a great tool which lets you easily manage projects. Ranging from websites to weddings, Trello helps you create tag and move cards. At Liquid Light, we use Trello to keep track of our marketing output - this blog explains how.

  • CSS frameworks and why you should make one

    Posted on 20th May 2016.

    With recent front-end twitter conversation turning to CSS frameworks, I went on a roller coaster of emotions but eventually settled on the above to sum up how I felt about the ordeal. Before we settle once more, let me take you on the journey I travelled.

  • Creating a custom Mailchimp template with layout variations

    Posted on 4th May 2016. Written For Liquid Light

    Creating a responsive, HTML email template is not as easy as it first appears. Email clients are still behind with web standards and supporting latest web technologies, so HTML emails need to be built using the table element and inline styles. This blog will walk you through creating a custom template while still using Mailchimp's WYSIWYG and Image editor

  • How do I update to Gulp 4?

    Posted on 22nd March 2016. Written For Liquid Light

    Gulp is a task runner used for compiling SCSS to CSS, minifying JS and creating SVG sprites. Version 4 is about to be released and this blog post runs you through how to update and use the new features of gulp.

  • Download files via command line

    Posted on 6th March 2016.

    I recently purchased a Western Digital EX2 NAS box for my home storage. This device is a low powered file server which is on all the time - perfect for taking care of those hefty downloads and long running tasks so I don't need to keep my laptop on.

  • Responsive Typography in SCSS

    Posted on 2nd November 2015. Written For Liquid Light

    Making sure your typography is readable on every display is arguably one of the most important aspects of front-end development. If your users can’t read the content on the ...

  • Export Locko to 1Password

    Posted on 17th June 2015.

    Getting your passwords out of Locko into something else can be tricky due to their unique export format. This post helps with PHP

  • Git for Beginners: An Overview and Basic Workflow

    Posted on 10th March 2015. Written For Liquid Light

    Git is a tricky subject to get your head around. Knowing the commands is one thing, but knowing how to use them is another. This article will walk you through a simple, single developer Git workflow - covering the commands that you would use at each stage.

  • Filtering Tables with jQuery

    Posted on 12th February 2015.

    I was recently asked by a friend how you would make a table filterable by using a select box & jQuery - for example "show me films made just in 2014.

  • HTML Newsletters - Design Considerations

    Posted on 15th December 2014. Written For Liquid Light

    HTML emails are a great way of keeping your customers up-to-date, but are not as versatile as web pages. Here's our list of things to consider when designing and building HTML emails.

  • PHP Classes - Explained

    Posted on 3rd December 2014.

    To put it very simply, a PHP class is a way of grouping a set of functions and variables into entities,allowing them to be used as self-contained instances . It ...

  • Creating SVG Sprites using Gulp and Sass

    Posted on 11th November 2014. Written For Liquid Light

    Following on from our recent blog post about SVG Sprites which gave an introduction and overview to using SVGs in a sprite, this post will outline the processes and tools ...

  • Working with SVGs in Sprites

    Posted on 7th August 2014. Written For Liquid Light

    This article will explain how and why you would want to use SVGs and what advantages using them in a sprite can bring. It will also cover scaling the images ...

  • Advanced Gulp File

    Posted on 22nd May 2014.

    With gulp starting to find itself into my everyday workflow - I've started to understand its quirks and twists, and how to get along with it. This is an advancement on my original gulpfile from a few months ago

  • Ignoring libraries in git

    Posted on 13th May 2014.

    Far too often recently I've noticed people committing libraries and packages to their main application (website) repository.

  • Bower

    Posted on 8th May 2014.

    I have recently discovered the power of Bower - a front end package manager. Rather than having to go and find the hosted jquery link, or download the files for fancybox and copy them into my application (website), I can download them off bower.

  • An Introduction to CSS Preprocessors

    Posted on 24th March 2014.

    Writing and updating CSS can be a repetitive, tedious and arduous task - especially for big projects. CSS preprocessors can help with that - amalgamating related styles and helping you make your style sheets more DRY

  • Sass Rule Layout

    Posted on 23rd February 2014.

    We've been going through a bit of a reshuffle at work with regards to our front-end conventions and layout. With the introduction of Sass into the team, we took it ...

  • From Less to Sass

    Posted on 4th February 2014.

    Recently we've decided a change in preprocessor to help optimise our workflow. Within this blog post, I am going to type Sass, but really I mean Scss.

  • Compiling Less on the Command Line

    Posted on 19th October 2013.

    We have been using LESS for a while now, but our process involved including the less.js in the header during development, compiling the LESS using an app before launch and then maintaining the site using the css.

  • Wordpress - Pulling An Archive

    Posted on 18th May 2013.

    As I mentioned in my first post I have made an archive of my previous Wordpress blog posts into a static page. This is done through some SQL and ...

  • Points

    Posted on 13th May 2013.

    This week I announced that I was closing the curtain on my mini-conference Points Brighton. Points has been my baby, my creation. I feel, now it has found its end, ...

  • Setting up a local development server

    Posted on 3rd January 2013. Written For 12 Devs of Christmas

    There are plenty of articles on the web about how to become a web designer, how to build sites and how to sell them. What this article opens up, is ...

  • Sass - Hidden Gems

    Posted on 11th November 2012.

    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 ...

  • ratio - a mikestreety app

    Posted on 30th June 2012.

    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 ...

  • Domains - Pitfalls and Propagation

    Posted on 23rd June 2012.

    Many a times I have dealt with various companies and agencies about pointing different domains at our servers - what shocked me is the basic level of understanding, most of the time, is 0. I thought I would dump my brain about domains and whatnot, because then even if everyone has a basic understanding, life will be good.

  • /blog/phpfed-variables/

    Posted on 18th May 2012.

    Before you continue - make sure you understand the story. The next thing is that php lines always need to end with a semi-colon (;). This tells php that the line ...

  • /blog/phpfed-includes/

    Posted on 10th May 2012.

    Before you continue - make sure you understand the story. When developing static sites (i.e. sites without any sort of CMS - be it Wordpress, Drupal etc.) the ...

  • Points Brighton - The Aftermath

    Posted on 9th May 2012.

    Last night was the second of my mini-conferences, Points Brighton. It featured speakers and keynotes of all different varieties, and the infamous Points Bazaar (the raffle) was, once more, a ...

  • Points mean Pixels

    Posted on 29th February 2012.

    Points. A simple, barely-a-conference conference. For ease of reading, this post will follow a traditional approach with a modern twist: Who, What, How Much, Where, When, Speakers, Sponsors Why. ...

  • It's My Way or the Highway. Not.

    Posted on 24th January 2012.

    Recently with the spate of CSS3 and media queries, there has been a few debates over how development should be done.

  • Limit Items (e.g. News posts)

    Posted on 10th March 2011.

    If you would like to limit the amount of items coming out of an array (for example the first 5 news items)

  • Redirect to one central domain - htaccess

    Posted on 21st February 2011.

    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 ...

  • Get an 'Even' Class

    Posted on 16th February 2011.

    This PHP statement applies class="even" to every other element when in a loop.

  • Giving something a 'Last' Class

    Posted on 14th February 2011.

    If you want to apply a different class to the last item in a list generated by PHP, start off with Setting the $lastOne variable to the end of your list

  • Using PHP to get the dimensions of an image

    Posted on 4th February 2011.

    The following code will get the dimensions of an image: <?php list($width, $height, $type, $attr) = getimagesize(PATH_TO_IMAGE); I found this useful when using a lightbox to ...

  • Creating a HTML Email

    Posted on 17th November 2010.

    Creating a HTML email is like going back to the nineties with web design – you have to go against all your natural instincts as a web designer.

  • Designing for Mobile

    Posted on 5th October 2010.

    Recently I was tasked to transform a full website into a stripped down mobile version for those visiting on their i-whatsits.

  • The next step...

    Posted on 2nd June 2010.

    So you've got a brand new website that you want to promote? Recently I finished a website for Frag Records. Once completed they asked me for some hints and tips ...

  • Twitter; Twettle

    Posted on 22nd April 2010.

    Just a short note on my Twitter series of posts! I thought i'd let you know about this tweeting kettle...or Twettle (seeing as it is on the title..). I ...

  • Twitter; Twintergration

    Posted on 21st April 2010.

    Twitter, Twitter Twitter. How you have taken over the world? (And my life?) I have recently properly got into Twitter. Before it was just a laborious update to show I ...

  • CSS - The basics

    Posted on 25th January 2009.

    CSS, or Cascading Style Sheets are the easiest, cleanest and most accessible way of styling a website. Tables were previously used to position objects on the page and CSS used just to make the text look pretty. Now CSS is being relied more and more to position images, text, add spacing to websites and bring the whole site together.