Automatic typography substitution

After reading the series of Death to Typewriters articles on Meduim, I decided to have a go at implementing their automatic character substition rules in JavaScript. Following the guide provided at Death to Typewriters: Automatic replacement and clean-up, I created a simple function that can be called as you type, or when text is pasted, into a text area. Certain character combinations and locations are looked for and replaced with other characters such as correct quotes, arrows and ellipsis. I have put the code up on GitHub with a little bit of documentation.

READ MORE

New website for Nemen Visual

I have just launched a new website for Nemen Visual. The new site is a big departure from the old site which I created over 3 years ago. I took the redesign as an opportunity to explore some new techniques and modernise it a bit.

No more WordPress

The first major change is that is no longer built on WordPress. This time around I decided to go back to static HTML pages. One reason I used WordPress (or just using PHP in general) is the ability to separate the page elements such head headers and footers into separate files and re-use them. Now with all the advancements on the front end tooling world such as Node and Grunt – it is quite easy to set up a system that can generate static pages by compiling seperate HTML files. This gives me full control over how each page is displayed but with the flexiblilty of separating out reusable components such as navigation, headers and footers – which are then compiled into static pages.

Less

All the css is written in Less and compiled to CSS using Grunt. This allowed me to do page theming using variables.

Grunt

I am using Grunt to compile the pages into static HTML files, as well as create theme CSS files from the Less files. Using Grunt Include I can put the markup for repeated elements such as the navigation or footer, into a separate files and then compile them into static pages.

SVG

SVG is used for the logo, and some other small design elements on the page so they appear crisp on all devices.

Responsive

The website is now responsive – allowing you to view it on any device from a desktop to a phone. I wanted to learn how to use the new ‘picture’ element so I have used this on some of the folio pages to ‘art direct’ some of the images on different screen sizes.

Hexagonal grid

I wanted to try creating a hexagonally packed grid, and so I used this on the home page to display folio items. A hexagonally packed grid differs from a regular square grid in that instead of stacking like blocks, items are stacked like hexagons:

packing

 

There are probably some other things that I have forgotten so that is all for now…

Check out the new site