Posted in Tutorial
tagged with
jekyll
Fri 9 Feb 2024 8:31 am
Jekyll is a fantastic static site generator and I have recently implemented it to generate this site. While I was perfectly happy with my previous CMS, I enjoyed the idea of writing blog posts in markdown on my laptop locally and pushing content via an rsync command.
When creating Jekyll with the default command, the Minima theme will also be installed. Minima is a great theme and contains features to add author data, social icons and analytics snippets, but if you’ve already got a design like my site had, installing the Minima theme will add extra code that might get in the way of developing your own design.
To remove the theme, delete the theme entry from your _config.yml file and then remove the minima gem from your Gemfile, which should look something like this:
# This is the default theme for new Jekyll sites. You may change this to anything you like.
gem "minima", "~> 2.5"
Next, update the gems with bundle:
The default about.markdown file will contain some info about Minima but you can tidy that up in no time.
Another option is to read the docs in the first place and not install Minima at all, which we can do by using the blank option:
$ jekyll new site-dir/ --blank
Jekyll is an very well established static site generator at this point, but I hope to share more about it soon.
Sloppily typed by Nick Pyett
Posted in Tutorial
tagged with
git
Mon 22 Oct 2012 3:17 pm
Git’s speed and simplicity encourages regular, small commits. Commiting more often makes for smaller and easier to understand code changes, but does make it more likely that you will make a mistake in your commits. Fortunatly Git has the –amend commit option, which can be called like this:
This commit is like any other; only changes staged for commit will be commited. With the amend option, however, the changes made in the current working tree will be added to the changes in the previous commit, and will not create a new commit.
Lets run thought a simple example, starting with creating a directory and initialising a git repo (you will need to have git installed to follow this tutorial).
mkdir amend-test; cd amend-test # Make a new directory and change to it
git init # Initialise an empty git repo
echo 'This is a test file that we will amend.' > test.txt # Echo some text into a new file in our repo
git status # Get the status of our new repo
You should then see something like this from Git.
# On branch master
#
# Initial commit
#
# Untracked files:
# (use "git add <file>..." to include in what will be committed)
#
# test.txt
Add the file in the normal way and do our erroneous commit.
git add test.txt
git commit -m 'We added some text'
You will get a message from Git saying one file changed and one insertions. But oh, crap! We forgot to sign off! Quick Batman, add your name!
echo 'Yours, Nick' >> test.txt
We now need to add the files to be included in our next commit, just like a normal commit.
And now here is the magic…
Your default Git text editor will now pop up and give you a chance to amend the commit message as well, so practice editing that too. I changed mine to “We added some text, and our name”.
(If Vi/Vim pops up are you are not sure what to do, edit the message, press escape, type :x and hit enter).
And that’s it! No more commits about forgetting to update a timestamp or adding that all important new script - we have just one commit and our git history is clean. Don’t believe me? Run git log and find out for yourself.
A Word of Warning
If you are using remotes with your repositories, you may encounter an error when pushing a branch to a remote repository. If you have already pushed the repo before you apply the amend, and then try to push again, you may get this error:
error: failed to push some refs to 'git@remoterepo.com:dir/repo'
To prevent you from losing history, non-fast-forward updates were rejected
Merge the remote changes (e.g. 'git pull') before pushing again. See the
'Note about fast-forwards' section of 'git push --help' for details.
This is because git can’t merge the changes between the two commits during a push. You have two options to resolve this problem. The first option is to do what the help message says, go a pull:
Now you may need to resolve any conflicts git has found. If there are conflicts, sort them out, commit the changes (without the –amend keyword this time), and push the result. If there are no commits, you are good to push straight away.
The second option is to force the commit. This is risky as you may loose changes to your repo, but is acceptable if you are sure noone else has access to the repo.
git push origin master --force
Sloppily typed by Nick Pyett
Posted in Link
tagged with
html5
Tue 16 Oct 2012 10:03 am
We’ve seen some great examples of HTML5 animation, but I’ve just come across a service that allows you to embed your own 3D models using HTML5, just like the one below (you’ll need to click it to begin).
Sketchfab is a service to publish your 3D content online. As well as being able to upload your models from tons of 3D formats, the site uses HTML5 to render the models in the brower, without the need of any proprietary plug-ins.
This is easily one of the best HTML5 services I’ve seen. Off the top of my head, it might actually be the first HTML5 based service I’ve seen at all…
Sloppily typed by Nick Pyett
Posted in News
tagged with
careers
Thu 11 Oct 2012 4:23 pm
It’s been a while! Almost a year since I’ve posted to my blog. But I’ve got excuses…
New Business
I am now the (co-)director of my very own start-up! Sixth Domain is working hard to create a pastoral management system for schools called Reward System. Reward System is a web based behavioural management system for schools, built on the LAMP technologies with which I’m familiar.
We already have a proven product and clients, and while there is still plenty of work to do (when isn’t there?), the future is bright for our little start-up. I’ll post more on Sixth Domain soon, and we hope to get a blog live there in the coming weeks.
Find out more about my business partner, John Roberts, on Twitter.
New Job
As we’re bootstraping our start-up, I started a new, part-time job working for edapt, the support & protection service for teachers, (it helped that I know the CEO, a certain John Roberts). edapt is a great young company, starting a business the like of which has never been seen in this county.
I’m the Web Developmenet Manager at edapt, so got to choose the great, open-source technologes with which the site is built and maintained - most notably PyroCMS and Git VCS.
New Place
I’m now based in London for my freelance web development work. Moving from Manchester was a big decision, but I’ve lived in London before and it is hard to beat for opportunity and vivacity.
New Site
My last site was build on a custom PHP framework I came up with (maybe more on this soon), but as some of you might know, while it’s tempting using something brand new for every project, more blogging is going to get done with something stable.
The site is powered by PyroCMS; the theme is based on my Normal theme, which utilises normalize.css and HTML5; the font is called Roboto and is being served by Google fonts; and the design is based on a colour I liked on the Kickstarter site. I designed most of the site in the browser by playing around in Google Chrome’s web inspector, and the images were created with GIMP.
I’m hoping to blog more frequently about web development, my tech start-up and the web in general, so please come back soon.
Sloppily typed by Nick Pyett
Posted in Tutorial
tagged with
jquery
Sun 30 Oct 2011 10:21 am
View the demo and fork on GitHub.
Fluid websites are a great method to create a responsive website. CSS can be used to create both fluid images and videos, but what about other web design elements? I was recently involved with a project that was using media queries to deliver the site over multiple platforms, and needed an image slider that was fluid. Google didn’t deliver, so I made one myself!
Create Your Own Image Gallery
The code is available on GitHub, as was created as a plugin for jQuery. Once you have jQuery in your page, create your HTML and CSS as described on the demo page, and then call Fluid Fader like so to create your image gallery.
$('#fluid-fader').fluidFader();
Browser Warfare
Fluid Fader work well across all browsers (yeah, including skanky old IE6), but because it needs quite a lot of CSS to make it work, I would suggest thorough testing.
Enjoy!
Sloppily typed by Nick Pyett
