7 Online Web Development Tools I Use

10th August 2018

Seven of my favorite online tools for web development.

Screenshot of the Coolors tool.

Coolors

I do not think that the Coolors app helps me enough when it comes to selecting a palette for my next project, but hey, we can’t expect that. With its great user experience and useful sharing options it’s my go to tool for creating or sharing color palettes.

Screenshot of the RegExr tool.

RegExr

RegExr does not only have great UI for writing and testing Regular Expressions but it also provides a library of others solutions and a cheatsheet.

Real Favicon Generator

Safari, Chrome, Edge, they all got their own type of special icons and manifests these days. The Real Favicon Generator allows me to upload a SVG and specify some settings to generate these and icons for all common devices and environments.

JSON Editor Online

Whenever I need a non developer to edit a JSON document I send them to JSON Editor Online, It’s GUI allows for easy editing and sharing.

GeoJSON.io

It’s not uncommon that I need some static GeoJSON. GeoJSON.io allows me to draw geometries and add properties as I wish.

Keycode.info

Need a key code? Just head over to keycode.info and click the key you need the code for, especially useful when you work with custom keyboards such as remote controls.

gitignore.io

No need to patch your .gitignore files as you go. Make sure that you ignore what you need from the beginning. Nowadays I use this through an VS Code extension.

Cache Busting Wikidata SparQL Queries

26th January 2018

UPDATE: By setting a cache-control: no-cache header you can disable this query caching.

The problem

Whenever you write a Wikidata query form which you do not expect the result to be the same each time, you will run into the issue of caching. Lets take the following example, returning a random cat:

SELECT ?item ?itemLabel (MD5(CONCAT(STR(?item), STR(RAND()))) as ?random)
WHERE 
{
  ?item wdt:P31 wd:Q146.
  SERVICE wikibase:label { bd:serviceParam wikibase:language "[AUTO_LANGUAGE], en". }
} ORDER BY ?random 
LIMIT 1

Run in the Wikidata Query Editor

If you run this once you will get a random cat if you run this twice you will get the same random cat.

This is because Wikidata has saved the result, to serve you faster the second time.

The Solution

A solution some people uses is to “just add a space somewhere”, this is possible because Wikidata cache queries based on the SparQL string, not the actual parsed and preformed query.

When used in implementations keeping track of spaces is not an option so I decided to use random comments that could be generated from hashing functions etc:

#01e8c03a6bdfe392431d8189130fcfc0
SELECT ?item ?itemLabel (MD5(CONCAT(STR(?item), STR(RAND()))) as ?random)
WHERE 
{
  ?item wdt:P31 wd:Q146.
  SERVICE wikibase:label { bd:serviceParam wikibase:language "[AUTO_LANGUAGE], en". }
} ORDER BY ?random 
LIMIT 1

Changing the comment string and rerunning the query will result in an new random cat.

When actually used in real world implementations where you might minify your queries I suggest appending the comment just before preforming it.

Final Notes

Build Something with K-Samsök and Python

25th July 2017

Last week I took a day to do a bit of open source maintenance, fixing bugs, writing documentation, tests etc and definitive no new features.

One of the things I did was to write documentation for my K-Samsök Python library KSamsok-PY. It’s a port of KSamsok-PHP which I have written a lot about. Nowadays I have a local setup of kulturarvsdata.se (the repository behind K-Samsök), so the libraries is mainly used in production and to maintain my local instance. KSasmok-PY is actually powering Kyrksök.

pip install ksamsok and head over to the documentation.

Kyrksok.se gets a VR Viewer

18th June 2017

The Kyrksok logo

Kyrksok.se is a directory for churches in Sweden that was originally created last autumn over a weekend. Last week I took the opportunity to add a VR Viewer for 360 degrees photos to the site.

It’s primarily built on top of three.js and WebVR-UI and you can try it out here.

It’s using the WebVR API behind the scenes if you have a headset or Cardboard if not there is a fall-back for mouse and mobile devices.

One thing I would like to do with WebVR in the future is to play around with Mozillas A-Frame library together with OpenStreetMap 3D data, but for now I’m awaiting someone to put a VR-headset in my mailbox :-)

Older Newer