For so long digital and web designers have optimised their looks to be light, easy to use and sleek. Brutalism is the the reaction of the fresh generation of web designers. It’s a lack of concern about what we cared about before and only seeks to get its message across!

A complete disregard for the predefined unwritten rules web designers typically follow and very far away from even attempting accessibility.

It’s hard to come down on any side of the fence for me, I’m always felt a prang of sorrow for the way bootstrap and similar frameworks took over and whilst of course these are great for beginners and certain projects it felt that the very character of designs was being lost and everything felt the same. Whilst brutalism certainly doesn’t care about frameworks and strives to have every creation be it’s own thing it also disregards the lessons designers have learnt.

I’m sure there are going to be some lovely pieces showcased but I, at the moment, can’t see this trend lasting too long.

You can check out more Brutalism sites on:

Awwwards: Brutalism: BrutAl wEbsIteS for mOdern dAy webMAsTeRS.

Brutal websites

 

Google PageSpeed sometimes provides this wonderful error: Remove Render-Blocking JavaScript. Now the solution to this is actually incredibly simple, you add a simple ‘async’ to your script calls. For example:


 

Changes to this:


 

Simples. Except I had a couple of scripts running after, a plugin script and my 'script.js' and the problem was that half the time the jquery due to it being async hadn't loaded before the other scripts triggered. Thus my particular animation was only working half the time and throwing up errors.

So how do we get the jquery to async and then load my script? Well we add an onload function trigger to the async jquery call like this:


 

and then a small snippet to load the script as the 'init' function like this:



    function init() {
    $(document).ready(function() {
                  jQuery.getScript("path-to/script.js")
                .done(function() {
                    //console.log('I'm loaded!');

                })
                .fail(function() {
                //	console.log('not so loaded :(');
            });
    });
  }
 

Everytime I read something about the hamburger it’s always blasting it as lazy and that people don’t understand what it means. I like it.

 

To have menu items hidden away and with a simple tap have them all available is exactly what user experience is about. The argument is that 2 or 3 clicks/taps is the maximum a user should use to find the page they’re after and tapping the hamburger icon takes up one tap.

 

This issue came up for me recently and here’s how to fix it:

1) Create web.config in notepad.
2) Paste this code into it:


<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="wordpress" patternSyntax="Wildcard">
<match url="*"/>
<conditions>
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true"/>
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true"/>
</conditions>
<action type="Rewrite" url="index.php"/>
</rule></rules>
</rewrite>
</system.webServer>
</configuration>

3) Use FTP to upload it to the WordPress root directory (Where the wp-config lives)
4) In WordPress dashboard, Settings > Permalinks, and change the structure to Plain and then back to ‘Post Name’

 

 

Jose Aguinaga made a post about the state of JavaScript frameworks and it’s community in 2016 which you should totally read here. Even if you know barely anything about Javascript frameworks, that’s kind of the point.

A nicely framed opinion, of which, I totally understand. Being a ‘Web Designer’ nowadays is a bit of an outdated term. Sooner or later you’re end up learning a bit of back-end stuff, then perhaps logo and template designs give you a bit of a graphic designer skill set, suddenly you’re rendering videos. It’s a wobbly sector to work in, as there’s a lot of grey areas about what job title does what. In the end, we end up being a at least a little of everything. Thus keeping an eye on the latest industry standards, techniques and frameworks is almost a full time job itself.

Amount of Javascript Frameworks is overwhelming

JavaScript Frameworks

This is where I’m totally in agreement with what Jose is trying to put across, the world of JavaScript is very diverse, there’s dozens a framework for every little thing. To a newbie, well, even people with years experience in the digital field, it’s overwhelming and off-putting, at least to some. It seems every time I sit down, finally having scraped enough time together, to look into a new framework there’s already a different newer one. So why should people bother learning something which is going to be obsolete very soon. How long does a framework have to exist in general industry practice for it to be viable to put in the time to learn it?

The argument that you don’t have to learn everything and learn what you need is a valid one. It just doesn’t seem to take into consideration the ‘Time to Learn’ to ‘How long am I able to actually use it for’ ratio.

But that’s not to say they should stop

Though the argument for the other side is, each of these frameworks exists for a reason. A person or group of people sat down somewhere and attempted to build something to solve a problem and created a framework with that purpose in mind. These are the people that make life a million times easier especially for us more Front-End/Designer types. It seems to me there needs to be a little more understanding on both sides about how this industry moves forward. Documentation for new frameworks and ease to learn needs to be at it’s best for a framework to flourish. Those of us that benefit need to be a little open minded and relax a little bit for a dabble into something that looks interesting.

Still, when you have two projects on the go, marketing campaigns to organise and a backlog of accounts to finish it’s horrible to feel you’re falling behind because you can’t find the time to learn the latest stuff.

My advice: Just get HTML, CSS and jQuery in your quiver and go from there. Have a little look into frameworks, have a tiny dabble but if something feels wrong just move onto something else. Time is precious in this industry, so it’s important to know when to start over if something doesn’t click with the way you work.

 

 

 

W3 total Cache

Website Performance equals better search ranking and user experience. W3 is the best out there at the moment, though there are others hot on it’s tail!

 

Yoast SEO

Yoast SEO helps sort out your search rankings a bit more directly.

 

Advanced Custom Fields

If I was forced to marry a plugin, it would be this one. So much functionality is added to WordPress with ACF, I even heard on the grapevine WordPress was considering bringing it into the Core setup.

 

Honourable Mentions

 

 

I love SCSS. But getting me to jump ship initially from standard CSS was difficult. Why did I need to change from the lovely CSS?! How the hell do I set it up? Like many things, once you get your head round it you realise just how simple it really was.

Both Sass and SCSS are CSS preprocessors, meaning they process a file into a valid CSS file. They do sim ilar things but the file you write before processing is where the difference lays, let’s take a quick look at the two different writing style:

Sass (Syntactically Awesome Stylesheets) looks like this:


.container
  width: 100%

article[role="main"]
  float: left
  width: 600px / 960px * 100%

SCSS (Sassy CSS) looks like this:


.container { width: 100%; }


article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

Now don’t panic!

Sass doesnt have brackets and is quite hellish different to the regular old CSS, where as SCSS looks pretty much identical. For this reason, if you’re going from CSS to a preprocessor and are worried, go for SCSS. You can literally do a CSS as normal and SCSS will process it. You’d miss out on the majority of the features but it’s still good to know you have a safety net in place!

OK, so you’re decided to take the dive, tentatively you say you want to try SCSS on a quick project to try it out. How do you being? Don’t you need Grunt and all that other scary stuff?

No. To this day I use Prepros. It’s free and nagware (every so often it’ll nag you about buying a license for non nag edition like Sublime) and it simply runs, keeping watch on a file directory you choose for a SCSS file and will automatically process it when you save the SCSS file. It’s really easy and straight forward! Seriously, it’s like less than a minute to setup and you can start coding away.

SCSS Typical WordPress Setup (at least for me)

I have a CSS folder in my theme root. Inside a file called styler.scss. I boot up Prepros, ‘Add Project’ navigate to the CSS folder and select it. Prepros will then show the contents of that folder, click the styler.scss and these are the settings I use:

scss-setup

It’s then a good idea to right click the CSS folder on the left panel and change the project name in ‘Project Options.’ All these settings will be explained in another post, but hopefully that should get you started!

Pottermore – Patronus

Well I think it’s fair to say, this is a fantastic website. Lovely, beautiful, magical (yeah I said it!). These sweeping polygon trees brush by as you travel through this forest answering questions to discover your patronus. Sparkling Embers reveal your questions and a lovely ambient sound accompanies you on your little journey. Then, if you’re like me, after seeing everyone getting awesome patronuses you end up with a ‘Mongrel Dog’ and weep silently as disappointment fills you after you’d just regained some sort of self esteem back after the ‘You’re sorted into Hufflepuff’ incident. Check this site out though, it’s a wonderful little experience.

57fa898491ec0

 

RSQ

57e14f7c91fa3

Dess

57e9e8b25d84e

Driver

driver-website

Be the Drop

bethe-drop-website