Articles

Page 3



  • Getting to grips with CSS Grids

    🕑7 minute read
    October 6, 2018

    Grids are the latest layout model to join the CSS spec after flex. Like flex, grids open up a whole new world of layout possibilities that will make every web developer's life a whole lot easier. Unlike flex, grids allow you to use more than one dimension at a time. Flex is row OR column. Grid is row AND column.

    As with flex there are some issues with support, but CSS Grids works on the latest major browsers so you can use it right now, but only if you don't need to support older browsers. NB: If a browser ...


  • Create a basic ReactJS app with no config

    🕑13 minute read
    April 11, 2017

    There are many ways that a ReactJs app can be created. The aim of this guide is to get up and running with a basic react app as quickly as possible.

    That means no other fancy libraries such as Redux, Router, Relay or anything else beginning with R (seems like there is a theme going on). There’s also going to be no Flux or jQuery or any other async included and certainly no configuration needed via WebPack, Babel or Gulp.

    How do we get started so easily… Thankfully there is Facebook’s Create React App. These...


  • Hide number input spinners using CSS

    🕑1 minute read
    July 18, 2016

    HTML 5 number pickers are great, since they help restrict users to the input ranges required in certain cases. Some browsers add little up and down arrows to help the user step though numbers.

    On some browsers the pickers show by default even when the form inputs are not focused, which is a bit ugly. You can use CSS to turn off the number input arrows.

    Obviously you want to put them back on focus since they are meant to be there by default.

    // Webkit: // Hide number picker input[type=number]::-webkit-inner-...

  • Running a simple server while developing locally

    🕑2 minute read
    July 12, 2016

    When you’re building a website one of the most important steps is the building of the templates. Building static templates is almost always quicker than building integrated templates such as WordPress, Django or Rails.

    One of the biggest issues with using static templates straight off the file system is that file:// urls can have issues and relative links may have to be different than what they need to be when the site goes live. A local server is what’s needed, but things like MAMP, or LAMP servers can be ...


  • Javascript best practices

    🕑5 minute read
    July 10, 2016

    Where to put the javascript?

    Unless it’s essential for it to be in the head of the HTML document, place all javascript just before the closing body tag of a page.

    What’s essential for the head?

    That can vary from project to project but a rule of thumb would be:

    • A minimal amount of inlined javascript
    • Any javascript that can be loaded async.

    What should do in the footer

    • jQuery. Nothing essential should be using jQuery.
    • Everything else like galleries and slider js, social js etc.

    How many js files should there...


  • A Project code guideline

    🕑11 minute read
    June 14, 2016

    This is my documentation for a new project. I’m writing it here rather than inside a repository so that it can exist across multiple projects. This will eventually be duplicated on to a markdown document for posterity!

    Project structure

    As the project is Django based, the front end files (CSS, Javascript and Media) can live in a few places — The Project folder, the static folder and every app’s static folder.

    Project

    project └── front-end * Compliation and post processing * └── gulpfile.js └── package.json ...

  • Lessons learnt from my first iOS Game

    🕑6 minute read
    February 19, 2016

    A few weeks ago I decided to make an iOS game. I’ve toyed with the idea for a long time, and tried a few times, but never actually made something that was fun enough and worked properly — consequently, I’ve never actually made a game from start to finish. Previously I only got so far, then got stuck, got disheartened and gave up. This time it’s different…

    What did I want to achieve?

    • Make a fun game
    • Learn Swift
    • ????
    • Profit 🤑

    Overcoming my own barriers

    Building a game seems like a massive job. When you look...


  • Start using Git

    🕑8 minute read
    February 9, 2016

    Turning any project in to a Version controlled project is really simple and should be one of the first steps in any project workflow. By the time you realise that you need a version controlled file, it’s usually too late – whether you have accidentally overwritten a days worth of work on a file, or you deleted the wrong thing. Since it’s so easy to setup, there’s really no excuse not to. There are a few best practices and tips as well as a few gotchas to note along the way but don’t worry, I’ll be pointing ...


  • CSS best practices

    🕑5 minute read
    December 16, 2015

    There are a few ways of writing css. For consistency, we will adopt only one naming convention. This is lowercase and hyphen separated. It is the most readable and fits well with other CSS methodologies that are covered below.

    Yes

     .hyphen-separated {...} 

    No

     .camelCase {...} .underscore_separated {...} .alllowercase {...} .ALLUPPERCASE {...} 

    Specificity

    Keep your selectors short and with as low a specificity as possible. A maximum of three classes in your selectors is recommended. Why? Two reasons:

    • Selectors...

  • WordPress localhost redirects to live site

    🕑1 minute read
    May 2, 2015

    When you are developing on WordPress sites it's always quicker to work on a local machine/development server. It's essential to work from the same data as the live site so you can work effectively as possible so taking a copy of the live database and installing it locally is the best and quickest option... but there is one potential pitfall.

    Because WordPress store site settings in the database it means that all the site addresses that were on the live site are now on your development site, meaning every action...