Castle Blackness.

Elafonisi, Crete.

Hopetoun House, Scotland.

London

Bridgetown, Barbados.

This my first personal entry.

well is it?

- What is the atomic unit of information?

- When does it become useful?

- What is it otherwise?

- inconsequential?

https://themanual.org/read/issues/3/ethan-marcotte/article

Cambridge, UK.

Being always the last one at the party I only recently heard the term “Isomorphic Javascript” for the first time.

The first part of the term Iso from the greek work ίσος meaning equal in measure the second part of the term morphic from the greek work μορφή meaning shape.

My main argument against this is in the re-purposing of a existing mathematical term and trying to shoe horn it to mean something completely different based on an extremely weak argument.

To put it in simpler terms we could have just easily named it palindrome javascript or carcenic javascript, or symetric javascript and I honestly dont understand how the term full stack javascript has been overlooked especially given it gives a much more accurate description.

There is no form and the is no equality criterion as there is nothing to compare. Especially in engineering

https://blog.nodejitsu.com/scaling-isomorphic-javascript-code/

http://sudomakethought.com/08-defining-isomorphic-javascript

https://sarantakos.wordpress.com/2014/05/09/palindromes/

Viking guard.

Cretan hound pup.

Shameless, just shameless…

London Paddington tube station.

Taken in Amsterdam, the Netherlands.

Having the footer on a webpage stick to the bottom of the page if the content is not big enough is a very common problem in website development. Up until now the solution involved a fixed and known footer height like this or this.

More recently with support for flex increasing it has, depending on your browser support requirements, become more straightforward to use flex for the solution.

For this website we used this solution for the first time.

It is a very straightforward and clean solution:

body {
display:flex;
min-height:100vh;
flex-direction:column;
}
.main-content {
flex-grow:1;
}


Where .main-content is the element that is on the same level as the footer and contains the main content:

<div class=“main-content”>The main content container</div>
<footer>The footer</footer>

Yes but how exactly does this work?

First of all the display property of the body is set to flex, this makes the body element use the flexbox layout.

Next we set the min-height property to 100vh. vh is a length unit in css that represents 1/100th of the viewport height (vh) with decent browser support, so practically we making sure that the body takes up the entire height of the window.

With flex-direction: column we are setting the way the elements are laid out inside the flexbox layout, column lays the elements in a column with the first one on the top and the others following.

Finally we set flex-grow: 1 for the .main-content, flex-grow determines the element’s ability to grow within its container. There are no units for this property, it is only a value that determines the proportion of space the element will take. Since the value defaults to 0 the footer will have a value of 0 and the main content container a value of 1 which means it will stretch to take up all empty space.

References:

http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

https://developer.mozilla.org/en-US/docs/Web/CSS/flex

http://caniuse.com/#feat=flexbox

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://developer.mozilla.org/en-US/docs/Web/CSS/length#Viewport-percentage_lengths

http://caniuse.com/#feat=viewport-units

Taken in Liverpool Street, London on a foggy day.

Taken in Balos, Crete.

I decided to create a Style Guide inspired by Anna Debenham’s “Front End Style Guides” even though I was more than half way through the process of creating the Digital Bliss website.

I have many reasons for doing so but mostly I wanted to investigate in practice how a Style Guide could become part of my process, its effect on the efficiency of the process and of course the end result especially in the context of a responsive, content and mobile first approach. In addition I was certain the process would help me in refactoring the CSS codebase for the better.

The first part of the process included me creating a static style guide that would include all the basic HTML elements of the website and their associated styling. I included everything on a single page and used .LESS as the CSS language of choice. This process took me about 20hrs but that was because the styling already had been done for the website so the whole process was mostly about refactoring the existing CSS.

The new structure now is as follows in order of inclusion:

• reset.css, sets the initial values of the page, this is a widespread common practice and there are many reset files available online. Should be reusable across websites.
• library.css, contains all mixins and utilities, again this should be reusable across any website.
• global.css, contains global styling variables such as colors and fonts, in theory overriding this file would change the color theme of the website. All LESS/SCSS variables go here.
• styleguide.css, the actual style guide file, it includes styling for all the elements and layouts used in the website.

In the second part and after I had finished a basic first version of the Style Guide I went back to the website code and worked on including the Style Guide as part of the process. As a result I managed to remove a lot of duplicate code and to update my boilerplate css templates to include the style guide.

Figure 2. show the new structure of the LESS code for this website. The first four files are the same as the style guide and serve as a good starting point for any project. File number 5 main.less contains the main styling of the website for elements that are used in more then one pages. The remaining files are section specific styling rules.

The most recent version of the code can be found here.

While working on this website I actively tried to demolish all preconceptions I had about website development. I tried to approach every single page from a fresh perspective. In this spirit I decided to something playful with the 404 page of the website.

Taking advantage of photographs from a recent trip and my unexplainable compulsion to photograph street signs, I decided to adapt house number signs to fit my purpose.

I selected 4 photographs out of which I would randomly display one on the 404 page.

I tried to retain the look and feel by finding similar fonts for the signs and by applying filters to the processed photography to make the numbers look original but my knowledge of photoshop is very limited.

In addition I use the background-size CSS property and a media query that uses the aspect ratio to determine how to display the background.

You can have a look at the finished result here.