Digitalbliss.uk.com http://apofoitos.com Sun, September 24, 2017 11:10:47 en Photo of the month, October 2015 http://digitalbliss.gr/index.php/play/entry/photo-of-the-month-october-2015 http://digitalbliss.gr/index.php/play/entry/photo-of-the-month-october-2015

Castle Blackness.

Photography Thu, October 01, 2015 7:15:00
Photo of the month, September 2015 http://digitalbliss.gr/index.php/play/entry/photo-of-the-month-september-2015 http://digitalbliss.gr/index.php/play/entry/photo-of-the-month-september-2015

Elafonisi, Crete.

Photography Tue, September 01, 2015 5:13:00
Photo of the month August 2015 http://digitalbliss.gr/index.php/play/entry/photo-of-the-month-august-2015 http://digitalbliss.gr/index.php/play/entry/photo-of-the-month-august-2015

Hopetoun House, Scotland.

Photography Sat, August 01, 2015 6:22:00
Photo of the month July 2015 http://digitalbliss.gr/index.php/play/entry/photo-of-the-month-july-2015 http://digitalbliss.gr/index.php/play/entry/photo-of-the-month-july-2015

London

Photography Wed, July 01, 2015 12:23:00
Photo on the month June 2015 http://digitalbliss.gr/index.php/play/entry/photo-on-the-month-june-2015 http://digitalbliss.gr/index.php/play/entry/photo-on-the-month-june-2015

Bridgetown, Barbados.

Photography Wed, June 03, 2015 8:32:00
My first personal entry http://digitalbliss.gr/index.php/play/entry/my-first-personal-entry http://digitalbliss.gr/index.php/play/entry/my-first-personal-entry

This my first personal entry.

Writing Sun, May 17, 2015 7:21:00
Is the new flat design trend a return to books? http://digitalbliss.gr/index.php/play/entry/is-the-new-flat-design-trend-a-return-to-books http://digitalbliss.gr/index.php/play/entry/is-the-new-flat-design-trend-a-return-to-books

well is it?

Writing Wed, May 13, 2015 1:16:00
When is information complete http://digitalbliss.gr/index.php/play/entry/when-is-information-complete http://digitalbliss.gr/index.php/play/entry/when-is-information-complete

- 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

Writing Wed, May 13, 2015 1:12:00
Photo on the month May 2015 http://digitalbliss.gr/index.php/play/entry/photo-on-the-month-may-2015 http://digitalbliss.gr/index.php/play/entry/photo-on-the-month-may-2015

Cambridge, UK.

Photography Fri, May 01, 2015 8:05:00
Isomorphic? Not really… http://digitalbliss.gr/index.php/play/entry/how-poor-a-term-is-isomorphic-after-all http://digitalbliss.gr/index.php/play/entry/how-poor-a-term-is-isomorphic-after-all

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/

Writing Wed, April 22, 2015 1:40:00
Photo on the month April 2015 http://digitalbliss.gr/index.php/play/entry/photo-on-the-month-april-2015 http://digitalbliss.gr/index.php/play/entry/photo-on-the-month-april-2015

Viking guard.

Photography Wed, April 01, 2015 8:06:00
Photo of the month March 2015 http://digitalbliss.gr/index.php/play/entry/photo-of-the-month-march-2015 http://digitalbliss.gr/index.php/play/entry/photo-of-the-month-march-2015

Cretan hound pup.

Photography Sun, March 01, 2015 8:26:00
Photo of the month February 2015 http://digitalbliss.gr/index.php/play/entry/photo-of-the-month-february-2015 http://digitalbliss.gr/index.php/play/entry/photo-of-the-month-february-2015

Shameless, just shameless…

Photography Sun, February 01, 2015 8:23:00
Photo of the month January 2015 http://digitalbliss.gr/index.php/play/entry/photo-of-the-month-january-2015 http://digitalbliss.gr/index.php/play/entry/photo-of-the-month-january-2015

London Paddington tube station.

Photography Thu, January 01, 2015 8:43:00
Photo of the month December 2014 http://digitalbliss.gr/index.php/play/entry/photo-of-the-month-3 http://digitalbliss.gr/index.php/play/entry/photo-of-the-month-3

Taken in Amsterdam, the Netherlands.

Photography Mon, December 01, 2014 11:49:00
Sticky Footer http://digitalbliss.gr/index.php/play/entry/sticky-footer http://digitalbliss.gr/index.php/play/entry/sticky-footer

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

Projects Wed, November 26, 2014 6:18:00
Photo of the month November 2014 http://digitalbliss.gr/index.php/play/entry/photo-of-the-month-2 http://digitalbliss.gr/index.php/play/entry/photo-of-the-month-2

Taken in Liverpool Street, London on a foggy day.

Photography Sat, November 01, 2014 2:45:00
Photo of the month October 2014 http://digitalbliss.gr/index.php/play/entry/photo-of-the-month-1 http://digitalbliss.gr/index.php/play/entry/photo-of-the-month-1

Taken in Balos, Crete.

Photography Wed, October 01, 2014 2:35:00
Our Style Guide http://digitalbliss.gr/index.php/play/entry/our-style-guide http://digitalbliss.gr/index.php/play/entry/our-style-guide

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.
the new structure
the new structure

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.

Website
Fig 2. The Digital Bliss main LESS file with style guide included.

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.

Projects Thu, September 18, 2014 11:05:00
The 404 Page http://digitalbliss.gr/index.php/play/entry/the-404-page http://digitalbliss.gr/index.php/play/entry/the-404-page

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.

The original image
The original image

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.

The processed image
The processed image

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.

CodePhotography Tue, December 24, 2013 11:05:00