Skip to main content

Senior Web Engineer. Open web / music. Remote DJ. Tall Dutch guy. #3million

micro.blog/sander

svandragt

mixcloud.com/cloudseer

 

The Milk Chocolate Peanut

Aaron Gustafson wrote back in 2008:

Getting into the progressive enhancement mindset is quite simple: just think from the content out. The content forms the solid base on which you layer your style and interactivity. If you’re a candy fan, think of it as a Peanut M&M:

The Chocolatey Layers of Progressive Enhancement

JavaScript first websites have the peanut inside out!

 

Generating Atom feeds from your Lektor site

After quickstarting a Lektor site, a next obvious thing to do is to add a feed to the site's blog. Fortunately, Lektor has a growing ecosystem of plugins, one of them creates atom feeds.

Installation of lektor-atom

The plugin to install is lektor-atom, and is installed via the terminal:

lektor plugin add lektor-atom@0.2
lektor build

This adds a reference to the myproject.lektorproject file with the plugin and installs the plugin into the lektor pipeline.

Configure a feed

However, notice that after building the site no feed is generated! This is because no feeds have been setup yet.

Create a configs/atom.ini containing the following lines (full documentation)

[blog]
name = My Blog feed
source_path = /blog
item_model = blog-post
url_path = /blog/feed.xml

Change the url_path to suit your preferences. Trying to build now would result in an error: E blog/feed.xml (RuntimeError: To use absolute URLs you need to configure the URL in the project config.)

To resolve the build process myproject.lektorproject must be updated with two lines within the project section to indicate the site's live URL and an absolute URL style:

[project]
name = My Project
url = https://myproject.com

[packages]
lektor-atom = 0.2

The site can then build and the resulting feed can be accesssed from https://myproject.com/blog/feed.xml.

 

Building on temporary foundations

Just came across an interesting perspective on frameworks by Timothy Perrett:

It is imperative to understand that the need for composability in our software tools is an absolute requirement. If we as an industry have any hope of not repeating ourselves time and time again, we have to change our ways.

I definately agree that we're doomed to keep making the same mistakes if we're building on top of frameworks and then switching them out for a different one, which I hadn't considered before.

 

Painless Lektor Setup in Less Than 5 Minutes

Two technologies that I have can really recommend you try out - Lektor and Cloud9 - can be used together to start a static site or blog in a matter of minutes. If you want to try out the power of Lektor without leaving a trace on your machine then follow this quick setup.

Lektor is a flexible and powerful static content management system for building complex and beautiful websites out of flat files — for people who do not want to make a compromise between a CMS and a static blog engine.

Cloud9 combines a powerful online code editor with a full Ubuntu workspace in the cloud.

Because every Cloud9 workspace is also a Docker container, you have full access to a ubuntu system with terminal access. We can use this to install a development Lektor install and work on our static website as follows:

  1. Create a new Cloud9 workspace with the Python template, as Lektor is written in Python.
  2. Delete the ex50 folder
  3. In the bash tab of the new workspace, install lektor by running: curl -sf https://www.getlektor.com/install.sh | sh
  4. Once this completes, start a new project: lektor quickstart
  5. Create a new runner (Run > Run With > New Runner) with the following contents (replace myproject):
    {
    "cmd" : ["lektor", "server", "-p", "8080", "-h", "0.0.0.0"],
    "info" : "Started $project_path",
    "working_dir": "/home/ubuntu/workspace/myproject"
    }
  6. Press the Run button to start the server, and Preview > Preview Running Application to browse the Lektor site.

That's all there is to it, you can continue with the Lektor Quickstart instructions.

 

 

 

On The God who Peter Molyneux forgot

Wesley Yin-Pool, writing for Eurogamer:

You will become a digital god, Molyneux proclaims in the video, of 22Cans' next game, Godus. And, you will receive a cut of the money made by Godus from the start of your reign to its end.

18 months later, as Bryan Henderson approaches his 21st birthday, he has yet to become God of Gods, he has yet to receive the "riches" Molyneux promised him, and it's looking increasingly likely he never will.

The core issue with promising such a fantastic reward is that it depends on a future that hasn't materialised:

"But we can't have the God of Gods role without the ability for people to challenge the God of Gods role, and the God of Gods role can't be challenged without combat, and we can't implement the combat without sorting out the server issues, which are being sorted out as of last week. It's just a maelstrom."

It looks to me that the whole team is continually rushed into firefighting the next feature development, with never enough revenue coming in to take a breather and plan things out properly.

He confirms the Godus development team has shrunk considerably to just a few people as resources are diverted to a new game, called The Trail.

Trust me, by the time the server issues are sorted; the combat is implemented; the multiplayer is developed and the God of God feature is finished there will be no players left to make any money from. 22Cans would do better to offer some kind of goodwill gesture to restore the morale of its staff and its fans before this PR opportunity turned completely toxic.

 

 

Release 1.1 - wordpress-basetheme

The aim for wordpress-basetheme is  a bare bones, well structured, easily customisable WordPress base theme.

You can build on it to speed up your own theme development. It's so minimal that I wouldn't recommend it as your final site theme. Instead it makes it trivial to apply your design to a WordPress blog, or to build out from this starting point. This site is build on top of the project for example.

Version 1.1 is now available
Download | View on GitHub

Changes:

  • updated styling and version
  • previous next buttons on singles
  • ie style targeting (unused), remove admin bar until supported, top nav
  • archives added and accessibility improvement
  • date permalinks
  • consistent titling
  • edit link in footer, no home
  • moved comments into its own template file
  • padding issue

Your feedback is welcome.

 

Wordpress Base Theme

I've released a first look at "Wordpress Base Theme", a bare bones base for your own themes:

  • DRY
  • KISS
  • easily customisable WordPress base theme.

You can build on this to speed up your own theme development.

 

Setting up a VM based development system - Part 1

I recently set up a local development server running Ubuntu on VMware player. I thought it would be interesting to document the process and instructions so that it will be useful to others, and you can follow along / correct / improve this guide. On completion of this series you will end up with a complete LAMP local development system..

Installing Ubuntu

You will need:

Install VMware player (VMP). Restart the pc if necessary.

I’m installing the virtual machine on my USB harddisk, this way I can take my whole development with me on the go (home/work) - this is great because you only have to set all this up once, instead of on every machine you plan to use it on.

Start VMP and “Create a New Virtual Machine” and browse to the downloaded .iso. As part of the Easy Install Information write down the login:

username: __________ password: __________ 

Store the VM on your removable drive.

On the Specify Disk Capacity screen you will want to go higher than the recommended disk size, I chose double (40GB). Make sure you have enough free space available, check this before continueing. I went for double the recommended amount as I want to avoid to repartition later. Accept the other defaults and Ubuntu will start. Keep waiting as Easy Install is installing Ubuntu on your behalf.

If you are a chmod 777 user (jackpot settings), this is a great time to read up on file system permissions by reading the article series starting with “Linux File Permission Concepts” (click next in the summary, there are 5 articles in total): http://articles.slicehost.com/2010/7/17/linux-file-permission-concepts

After a restart the login screen appear and after a successful login you will see the desktop. Because we are going to install a bunch of software let’s make sure everything we already have is up to date. Start the update manager > Settings > Ubuntu Software > Other > Select Best Server. This will speed up downloads. Check again and install updates.

Time to read some more, btw have you created a new tag for all these bookmarks yet? When you are finished reading the above articles, here are some really good resources to read later:

You should now have a running Ubuntu system.

(Source: donationcoder.com)

 

Silicon Knights: "used games are cannibalising the industry"

Silicon Knights boss Denis Dyack talks about used games effect on development budgets:

"I don't think as an industry we can afford $300 million budgets. Some games can, don't get me wrong - for a game like Call of Duty, if they had a $100 million budget, or whatever their budget is, they can afford it. That's not the industry, that's sort of a one-off.

Perhaps there is a point after which it makes little sense to spend more money as you simply cannot recoup it in the market. I'm guessing this limit is probably closer to $0 than $300 million.

source Gamesindustry International.

 

Fork webpages

I'm looking for something a bit unusual. Say you are following the instructions for installing a software package (rl example: http://library.linode.com.../webmin/installing-webmin). Now you find out the instructions are outdated, or incomplete.

How do you keep your notes/additional instructions together with the original? Now you have two problems, your instructions and the original can be updated independently. What happens when the original is updated, or a new version of the software is released?

Wouldn't it be great if you could fork the webpage and update it (or even submit a pull request to the maintainer)?

Is there any practical way of working this way - or will I be stuck with a notetaker / blog / bunch of outdated textfiles?

A lot of questions - maybe one of you has the answer.

 

Link: Stop paying your jQuery tax

Speed up your jQuery powered site by moving scripts to the footer.

Turns out that pushing jQuery to the footer is quite easy for the common case. If all we want is a nice $.ready function that we have accessible everywhere we can explicitly define it without jQuery. Then we can pass the functions we capture to jQuery later on after it loads.

The big lesson learned is that we could avoided this whole problem if we started off with my proposed helper.

via Stop paying your jQuery tax.

 

Hide elements that will be shown by jQuery later

I stumbled upon this gem by Jerph on Stackoverflow:

Right after the body tag, put a script tag with this javascript:

jQuery('body').addClass('js');

This gives you a style hook for any elements that will look different in some way when Javascript enabled, and it happens immediately.

via css - Hide jQuery Accordion while loading - Stack Overflow.

 

Project Cars

Sign up to WMD, the somewhat unfortunate acronym chosen for Slightly Mad's World of Mass Development platform, and you're granted access to regularly released builds of the game, which you're then free to pick apart in the official forums. That feedback then gets absorbed by Slightly Mad Studios, a simple loop that means that, when the game is eventually released, it'll be as much a product of the community as it is of the studio.

via Project Cars Preview • Eurogamer.net.

Looks like an interesting development strategy, made famous by Minecraft.

 

Asynchronous UIs - the future of web user interfaces

Discovered this javascript MVC framework SpineJS. The ToDo app is extremely impressive. Try and manipulate items as quickly as possible. Tthen close and reopen the browser. Nice.

via Asynchronous UIs - the future of web user interfaces.

 

Combining multiple Subversion repositories

This post describes a step by step guide on how to combine multiple Subversion repositories whilst keeping individual history (and commit messages).

Dumping

Exporting from pagefeedbacktool repository the /trunk/public folder and integrating that into the services repository under /trunk/public/pagefeedback:

Dump the repository including only /trunk/public as follows:

E:\\Repositories\\pagefeedbacktool>svnadmin dump .| svndumpfilter include --drop-empty-revs --renumber-revs trunk/public > ..\\services\\filtered.dump

Loading

However as pathnames are stored as part of the dump (and replacing the path with a texteditor corrupts the dump), we have to include the full path under a different parent directory:

In VisualSVN create a /trunk/public/pagefeedback/trunk/public folder structure (try without the final public if import fails) then load the dump as follows:

E:\\Repositories\\services>svnadmin load . --parent-dir "trunk/public/pagefeedback" < filtered.dump

The dump is successful but at the wrong path:

currently: /trunk/public/pagefeedback/trunk/public
should be: /trunk/public/pagefeedback/

Post-correction

Open two Windows Explorer windows with both paths side by side, select all the files that should be moved, then RIGHT click drag them to the destination folder and choose SVN Move versioned files here...

Commit from the repository root.

It is now safe to remove the trunk/public folders under /trunk/public/pagefeedback/

Commit again.

 

 

HOWTO Use UTF-8 Throughout Your Web Stack

Unicode can be an issue that's hard to resolve, so it's guide to use the guidance in this document and ALWAYS use unicode where possible.

via HOWTO Use UTF-8 Throughout Your Web Stack

 

Serve.sh updated for terminal use

After publishing the previous article about serve.sh - the shell script I created to easily serve websites in development - I made some changes to make it easier to run it from the terminal, for example over ssh. I thought I'd share it with you.

One of the problems with the original script was that it was optimized for a GUI setting - ie. start the script by clicking on it from the desktop. However usually I want to run it from the terminal. I don't like typing so I added code to make the script available from any directory to the ~/.bashrc:

export PATH=$PATH:~/bin

Then moved it to that path and renamed it to shave another 3 characters off the syntax:

mv ~/Desktop/serve.sh ~/bin/serve

In addition I noticed that prompting which site should be served was just a workaround for commandline arguments, which are now added. It doesn't check that you entered an argument though. So the new script now requires you to specify which directory you want to serve: to serve the current directory simply run:

serve .

Latest script contents:

#!/bin/bash
my_path=`readlink -f $1`
sudo rm /var/www
sudo ln -s $my_path /var/www
echo Now serving $my_path...

 

Serve.sh - A shell script for serving sites

I am experimenting with using a Linux virtual machine as my web development environment of choice. I store the vm on a removable drive so that I can develop from any location, without having to setup a working environment. Previously I had to check out the repositories, setup a local webserver and I had trouble keeping things working, because every configuration change had to be applied in every location. Now it is all centralized and my life is simpler.

The aim is to make working on projects as easy as possible. I have all projects checked out in a folder called /var/sites. They are mostly PHP projects and because of my shared hosting environment they share a single apache configuration. How can I easily serve them? Having seperate virtualhosts for each project would result in me having to make manual changes on every location again, so this was not the way to go.

Instead I created a simple shell script that creates a symbolic link from the Apache's webroot to the project I am working on:

[gallery link="file"]

#!/bin/bash
echo "Available sites:"
ls  /var/sites
echo
echo -n "Type site to serve: "
read site
if [ -z "$site" ]
then
exit
fi
sudo rm /var/www
sudo ln -s /var/sites/$site /var/www

 

Intranet Migration Strategy

Next week we're turning off our old intranet site so I have setup a "Migration Switch" and a redirection page so that from the moment we turn off the site people will not be able to access it. Because if we actually turn off the site we would receive phonecalls with people needing access to their lost data, and because certain parts of the old intranet are reused in our new one, we instead check if the page is embedded, and if it's not check that the user is on a whitelist of specifically allowed users (us). If this is not the case we redirect them.

Next week we will remove all navigation links to the old intranet, turn on the switch, and remove the documents from the search indexer on the (new) intranet. There must be better terminology for old and new intranet.

Hopefully this will ensure that everything works smoothly.