barnabycolby / barnabycolby.io Goto Github PK

The contact buttons in the footer each use almost identical blocks of html. An AngularJS directive should be used to encapsulate these similarities making future changes and additional buttons easier.

To prevent bugs, a grunt task to test the json data files against an expected schema should be implemented.

In particular, the phantomjs-alarm description needs to include a hyperlink. Although the implementation of this is trivial (add safe filter to nunjucks template), the webdriverio test is not so obvious.

The site is lacking colour at the moment.

Default variables in these files such as author should be added now that more is known about the project.

Now uses barnaby instead of barney.

Update github link to reflect username change.

Now that more is known about this project, a readme should be added and the description should be updated.

AngularJS E2E tests should be added and included in the grunt default pipeline.

grunt-uncss appears to have stopped working when URL's are given as sources. For now, this grunt task has been disabled, until it can be fixed.

The footer contains a copyright statement including the current year as a hardcoded string. To avoid having to update this string every year, code should be added to retrieve the current year on the fly.

For example, all of the CSS processing tasks could be aliased under a CSS task, allowing any css changes to be processed without performing any of the other redundant tasks (this isn't much of an issue because of the grunt-newer package). Will also help to keep the aliases.json file clean.

When running grunt, the following message is printed: "autoprefixer-core was deprecated. Use autoprefixer package."

This would require the github api endpoints to be mocked. Need to research how this can be done with webdriverio.

Dynamic DNS issues discovered in #14. Using dynamic DNS prevents the DNS zone file from pointing barnabycolby.io to barnabycolby.ddns.net, as the @ record must point to an IP address, not a hostname. Gandi.net offers a redirection service that forwards http://barnabycolby.io to http://www.barnabycolby.io, however this service does not work over HTTPS. The result is that https://barnabycolby.io results in an "Unable to connect" message. The only resolution I can see is to use a static IP instead of dynamic DNS.

Until this is resolved, the site will not be able to use HSTS.

As a user, if I see a project that looks interesting, I would want to find out more information. The project titles should have links to further pages (optional of course), and perhaps a link icon such as this one: http://fortawesome.github.io/Font-Awesome/icon/link/

Currently, every time the grunt pipeline is run, the 'last updated' dates are updated, even if the rest of the pages haven't been changed. This could be improved.

It would be good to add a grunt task to the start of the pipeline that throws an error (stopping the pipeline from proceeding) if the source files haven't changed. I had a quick google and didn't see a package like this so I may need to write one.

A user often wants to know whether the content on a website is current, when was the last time it was updated and is it still relevant? To facilitate this, a 'This page was last updated on...' message should be added to the footer of every page. The first thing to do is to look into how to do this, it is not as simple as the last update to the html, for example, the projects.html may have been updated via the projects.json file.

An npm package called uncss can be used to speed up the site. It removes any CSS rules that are unnecessary. A grunt package exists that wraps it: https://github.com/addyosmani/grunt-uncss

Currently, the font-awesome stylesheet is ignored by the grunt-uncss task as the icons do not get displayed correctly if it is included. Perhaps this is due to nginx not providing the right content type?

Documentation of the AngularJS code should be added to make the project easier to work with.

To enable easier debugging, source maps for the pre-processed, concatenated and minfied CSS, need to be generated as part of the grunt pipeline.

The source mapping for the CSS files results in two source maps, the first links back to the second which then contains the original source files. The browser displays the intermediate stylesheet.css file in the developer tools, which is not the end goal I was hoping for.

The resolution for this issue is to programmatically combine the two source map files into a single source map. Rich Harris' sorcery looks able to solve this issue but unfortunately it does not exist as a grunt task, nor does anything similar.

Add a grunt task to test the website using webpagetest.

To enable easier debugging, source maps need to be generated for the concatenated and minified JS.

It should be obvious which projects have been completed, which projects are currently being worked on and which are just ideas. This could be done by adding past, current, future h2 titles. As a user I want to see current projects first, although this makes the positioning of the other two groups a little more tricky than a purely chronologial layout.

Projects should be ordered chronologically, i.e. it should be obvious to a viewer which project is next on the list and what's after that etc.

The nginx files being used for some of the non-www subdomains are using the nginx files in the development repository, it would be better to copy them across as part of the 'git push production' workflow.

When running npm install, several warnings are displayed about deprecated packages, including wrench and minimatch.

I really like the design of the jetbrains website, in particular, the front page looks different to the rest of the pages. When you first visit the page, without scrolling, the background of the entire visible portion is a single colour, including the background of the header. The logo is slightly larger and more colourful, which highlights the fact that you're on the jetbrains website. I think my homepage would like nice with a similar design and perhaps a quote, in large text, telling the user to check out my projects page.

It should be possible to add a grunt task to the end of the pipeline that automatically pushes to production if all tests are successful. It should also be possible to automatically run the end to end tests against the real site once pushed.

The README should include a full set of instructions on how to set up the site on a new machine using only this github repository. For example, systemd services that need to be enabled, how to set up the 'git push production' feature and how to use it.

The target names of most of the grunt tasks do not relate to the actual target of the tasks, they could be improved.

Currently, deploying changes to production is as simple as running 'git push production' on the web server. However, nginx changes require a manual reload of the configuration. Ideally the post-receive script would do this automatically.

On iOS, the webpage can be scrolled further than the top and bottom of the page. This reveals the white background above the header and below the footer, which doesn't look great. It would be much better to make the header and footer colours extend past the top and bottom of the visible page.

The readme needs to have some instructions included to explain what needs to be done in order to build the website for yourself. For example, the first thing to do once you have the repository checked out is to install npm and the packages listed in the package.json file.