A map to help guide you round the ‘cloud’, from an educational perspective.
Tutorials & guidance to help you get the most from technology.
Rationale
The web we know is crammed with valuable and insightful information. Yet we frequently struggle to ask the right questions as we drown in this rich and varied sea of possibilities. Too often the potential of technology is overlooked as it is considered ‘complex’ or ‘time-consuming’.
Even the most diligent of us are also guilty of glancing at tutorials, articles and examples without actually reading them. A ‘search-first’ world has dented our capacity to really pay attention to the written word, reducing our own ‘information seeking’ habits to merely skimming and discarding when gratification is not immediately forthcoming.
This site is an attempt to swim against this tide, by sharing guidance and thoughts on what has become commonly known as ‘cloud’ technologies. The article format, with a focus on words and explanations rather than screenshots and step-by-step instructions, is aimed at encouraging thinking & understanding.
Why the name?
In computer science, a stack has a particular technical meaning. More recently, it has begun to be used as shorthand for a development or solution stack. In these technological terms, it describes a group of applications, or services, which come together to build a platform for work. The tools you use every day to get your job done, to function fully in a connected world. This site is all about those tools, how they can work smoothly together and how you can use them better. In short, it’s about the stacks upon which we build our technological lives.
Content
Most recent published content: 01 Jul 2019 - Denormalise & join tabular data into simple rows
All the content for this site is original work, the culmination of work and experience with a wide range of technologies. Everything is authored in a simple text-based language called Markdown, which was originally proposed and design by Jon Gruber. It is a simple format that allows for a clean separation of these words from their style and presentation on your screen. Like technology itself, all posts on this site should be considered as ‘work in progress’ and are available online (under an open-source license - see below) for amendment by anyone who would like to propose changes or improvements.
To do this you will need a free Github account. Once you have an account, you can click on the small Github Logo (the octocat) at the bottom right of each post which will take you directly to the source of the article on Github. From here, you can edit your own version of the article (part of what is known as a fork) by clicking on the small pencil/edit icon near the top of the page. Once you have completed your edit, you can ask that your change be merged into the live version of this site by creating a pull request (or, more simply, a request that your changed be ‘pulled’ into the live version of this site). If you supply a reason with your request, and your request is accepted, your change will be published and the article will be updated.
Taxonomy
All the posted content on this site is both categorised & tagged: this is the ‘structure’ or taxonomy of the site. The categories (articles, tutorials, links etc.) reflect the type of content. The tags refer to subjects covered by the content. You can easily navigate by either category (using the navigation menu or links at the top of each post) or from the tags page.
Design
Current version: 1.0.9. A test page is provided to illustrate the different types of formatting used across the site.
Typography
The typefaces for this site are open-source and are served from Google Fonts. They have been selected to deliver a timeless aesthetic, aid readability, encourage focus & help concentration. The page & post titles are set in Baumans (as is the lifestack logo), headings are in Raleway and the body is in Alegreya (an award winning & highly readable typeface from Huerta Tipográfica. Text emphasis is provided by bolds and italics, with clickable link denoted by small CAPITALISATION (rather than the normal yet inelegant underlining). Abbreviations, such as HTML, are set in a lighter-colored bold and will display their meaning if you hover over them.
Colours
A simple three-layer scheme is used throughout the site, with deep blacks & greys for the main content, lighter greys for background information or_icons_. A bold red highlight is used for links, titles and the navigation menu. As above, this simplicity is a deliberate design decision to help focus attention on the words themselves. Keyboard shortcuts, such as ctrl-v are memorably emphasised with a dark background and extra spacing to help them stick in the mind, to hopefully save you time in the future.
Layout
The layout of the site is build around a content column, restricted to a maximum line-length to ensure readability whilst also making the most of larger screens. A left-hand column & wide spacing-gutter is home to explanatory notes and used for header links to help structure and navigate longer posts. On smaller screen devices (e.g. mobiles), this column will fold into a single-column design taking up the full width of the screen. Navigation is provided by a ‘fly-out’ navigation menu that remains normally hidden to reduce visual clutter and distraction.
Logo
Like the titles, our logo is set in Baumans. It has been conceived as a Bauhaus inspired play on the notion of a ‘stack’. Bold, memorable and striking, it hopefully conveys modernity and modernisim without falling back on the well-worn imagery of the ‘technology’ industry.
Illustration
Illustrations, rather than screenshots or photos, are used to illustrate individual posts. These help ensure a consistent style and also don’t age as quickly as screenshots (for the exact design of web-applications changes frequently). For this reason, and to ensure longevity of utility, actions tend to be described (e.g. submit the registration form) rather than narrated (e.g. click on the large blue button entitled ‘submit’ at the bottom left hand side of the form).
Architecture & Process
This site is a static website, meaning no server-side code runs when you request each page. This makes it easier to author, manage and host. It should also be faster to load. When the site content or design is changed in anyway, the whole site is re-generated using a tool called Jekyll which runs on a programming language called Ruby. Jekyll helps manage index pages and merge the files containing text content with the style & layout of the site (authored in standard HTML and SASS). The static HTML content is compressed to help ensure it is delivered as quickly & efficiently as possible. All the content & styling is authored using Codeanywhere or Google Docs and the Gabriel add-on to convert the document to markdown and publish it.
Copyright & Licensing
To help you use the content on this site in useful ways, everything is open-source, and here is a summary of how the site is licensed.
© 2014-2023, LifeStack.io.
All the written content on this site is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. This means you are free to link to, copy, redistribute and build upon this work providing you share the results, give attribution and don’t use it for commercial purposes.
Unless otherwise stated in the code, the operational plumbing of the site (code, CSS etc.) are made available under a GNU GPL v3 licence, so you are free to redistribute it under the same terms but this means there is absolute no warranty.
Finally, any code examples that are used for illustrative or educational purposes within the content on the site is provided under a permissive MIT license, meaning you can use it in pretty much anyway you wish (including commercial works!).