Bits, bytes & scribbles

A blog by Lorin Renodeyn, developer, web lurker and OSX user.

[lrnr-dev]

Geïnspireerd door Keltische cultuur en IJzertijd re-enactment, biedt Taranartos u een selectie heerlijke mede en de gepaste drinkhoorn aan. | Inspired by Iron Age history and Celtic culture, Taranartos aims to bring you a fine selection of mead and the appropriate drinking horn.

My first officially released website recently got a complete rebuild.

A website with a list of products that is hardcoded into the html and scripts, makes frequent changes and/or updates unnecessarily complicated. And way too exhausting. Since I am both the webdesigner and webmaster for the Taranartos site, all of that work fell to me.

In other words: the perfect motivation to change the whole thing to be more accessible and flexible toward adding/removing products and making changes. And Angular.JS had been glistening in the corner of my eye to learn and play with for a while.

So: Exit jQuery stage left, enter Angular.JS

Almost the entire site was rewritten from scratch, though usable parts were salvaged from the previous version. All jQuery was thrown out - part to see what I could do with Angular, part to prevent myself from taking the easy way out. 

The end result is a Single Page website in with 2 different languages and routing to dynamically load views for the different "pages". Tranlation strings, product list and store feature messages in separate files for easy access/maintenance and fully responsive layout from smartphone to desktop. Fancy fade animations were unfortunately left out, but a much speedier website and menu replaced them.

[lrnr-dev]

BitTorrent wants to change the way the web is built

BitTorrent's strong support for an open internet is a defining characteristic of the company. Its vision of a "distributed" internet where users retain more control over their data and personal...

Coolest article I've read in a while. I've not delved into these matters much yet, but from what I know so far, I'm really in favour of a decentralised approach to the net. Doesn't make any sense to go halfway around the world to get content that's actually coming from down the street, for example.

Of course, such a huge shift would take a long time to actually take hold in reality..if it ever broke through at all.

[lrnr-dev]

Ah, but that's the thing: You can't build a backdoor that only the good guys can walk through. Encryption protects against cybercriminals, industrial competitors, the Chinese secret police and the FBI. You're either vulnerable to eavesdropping by any of them, or you're secure from eavesdropping from all of them.

[lrnr-dev]

WYSIWYG, not WYWIWYG

WYSIWIG suite building applications. I doubt if I will ever get to like them.

They're all fun and games if you want simple things that do not go beyond any of the built-in – or official add-on – modules, components and templates. And if you don't have to maintain the code afterward.

Then: What you see is what you get.

Until you want it to do something that wasn't in the box. Depending on how accessible and/or robust the program, things might start to get tricky, messy or ugly at that point. Trying to find good documentation, figure out built-in supplied code without comments and figuring out how to bend things to your wishes.

Not always: What you want is what you get.

—

In other news: I got a job offer in August and have started working as a Junior Front-end Developer (in training) on 1 September. The company really takes care of its employees and everybody's friendly, so that's a great start to working life.

The only downside: the tool I've been learning, Adobe Experience Manager, is built as a wysiwyg environment for content managers and marketeers to create many or big sites. We do have dev access of course. So there's some struggling to let AEM do what we want it to. Then again, that's half the fun of development too.

[lrnr-dev]

I'm a visual oriented guy, which is why I like playing around with the front end of websites so much. But one of my favourite projects so far... imitates command line interfaces. Very strange, I know.

See, the thing is this: after having to use the windows command prompt in my Java training and then learning jQuery, I wondered if I could make something similar in website form. 

What came first

First came the html I needed for content, divided in nice sections set to {display:none} except for the main content area. For input an <input> box with some styling to make it fit in would do. I came up with some basic commands I wanted to use to summon the different content pieces. Using jQuery, the required hidden sections were copied and pasted between the "heading" content and the input box. An auto scrolling function made the whole thing scroll down as extra content was added. And it worked, huzzah!

The problem

But in a normal commandline you don't have to click into a different box than the text is in before typing, do you? So the <input> box had to go. And then it became interesting.

Capturing keyboard input on a website is pretty easy as long as the site's in focus: you just put a keydown/keyup/keypress listener on the body (or even the html) element.

However, those listeners register any key being pressed, including space, return, cmd, ctrl, ... Since those keys don't have any signs associated with them, the output at the cursor remained blank. At first I didn't notice this because my commands use simple words and there was already a catch in place for the return key. But the contact sequence kept breaking when the email had to pass through my simple validator.

Because there was no visible output, it took a while to find the problem until somebody over at stackoverflow pointed me to testing the length of the string. That wasn't always zero on a seemingly empty string.

Solving it

The solution I chose for the matter might not be the most elegant one. But in order to keep the code light and short, I think it works well enough for the job.

Step one: Figure out key codes for punctuation marks that will be allowed and for the backspace key. Redo all of that to find different key codes for same signs on windows keyboard. (I'm on a mac.) Return was already known.

Step two: make logic for what to do for 'input', 'backspace' and 'return' cases.

Step three: refine logic for 'input' part. First get all the allowed signs to show up. Done here with a switch case with fall-throughs for same-sign-different-key-code situations. Then use regex to filter out all other input and replace it by empty strings.

Voila! Zee site works again, without ugly input box.

Looking for all the key codes and figuring out how to solve the problem was really fun to do once I found out about the invisible input the code was getting.

[lrnr-dev]

[ Update ] Dark Matter Designs

Made some more little tweaks to the first version.

Tweaked moon-like logo

Changed black part to just starfield

[lrnr-dev]

DARK MATTER DESIGNS

Just an idea that popped into my head this afternoon. An idea for a professional site, perhaps. Have any feedback? let me know!

The 'samples' are from my own work of couse.

[lrnr-dev]

Rediscovered a personal site project I hadn't finished yet (one of two) and decided to play around with its looks today. A single-page html with navigation through jQuery. Changed looks from something dark with a bottom nav bar to a light and airy look with top nav.

As it's been a while since I did any real visual site design (apart from Taranartos), I'd love to get some feedback. Either trough repost with comments or the ask box in the menu.

[lrnr-dev]

The first website entirely developed by me is live.

A couple of months my acquaintance asked me if i could develop a site for his mead shop on a tight budget. Having just finished a JEE course that had included a rehash of the HTML I’d taught myself years ago and a basis in JavaScript, I agreed to his request with the warning that an added back end would be impossible to do under the circumstances.

Out-dated HTML knowledge and barely basic javascript are not the way to go for a brand new website, so I learned me some new HTML5 tags and a (more) proper way to write semantically. jQuery made coding loads faster, easier and took care of ugly cross-browser hindrances. Very handy stuff if you're figuring out how to make the ordering functionality of a webshop from scratch for the first time. Got me some new knowledge and skills, yay!

Playing around with new things is always fun, whether they be toys or coding (skills). My acquaintance never asked for it, but I adapted the site for different screen sizes (tablet & smartphone) using css and media queries just for fun and learning. And some searching on the web got me a nice working way to send mail directly through a JS api without an own back-end. 

Thanks to jQuery's built in animation functions I even managed to get some SPA like functionality: coding only 2 pages – one for Dutch and one for English – and getting the looks of a 4-page site. Scrolling back to top all the time is annoying, so a nice scroll-to-top showed up in there as well.

All of this may sound like peanuts to any experienced dev but for a first timer, it was great fun to explore, learn and puzzle. Especially the jQuery was so much fun I started another project to play around some  more while developing Taranartos. It's called CMD, but more on that later. You're welcome to have a look for yourself though.

[lrnr-dev]

Mannen in korte broek

Iedereen weet dat een volwassen man nog beter in zwembroek met snorkelset op kantoor kan verschijnen dan in korte broek. Shorts mogen alleen in zones die w...

Sorry to any readers who can not read Dutch, but the article is from the website of a Flemish newspaper.

A short summary:

Wearing short trousers to the office as a man is utterly prohibited. Why? No one really knows. Is it because they are childish? No. In the 17th century, the nobility wore short trousers. Is it because they are ugly, unfashionable? No. There are plenty of very stylish short trousers available from big names in fashion design. It is an injustice without reason. Women can show their legs. Sometimes it is even encouraged.

But the times are a-changing. Trousers are gradually becoming shorter. And short trousers are sure to follow.

Now, why do I link an article like this? Because even in IT positions where there is no direct contact with any customers, some companies enforce absurd clothing guidelines that limit employees without any good reason to do so. As someone who likes to dress in an "alternative" style, this impacts me on a very personal level. To a job interview, however, I will always try to dress in a neutral way – a neutral ground is the best one to start from, in my opinion.

The clothing you wear as a (back-office) coder has nothing to do with the work you do, except for the fact that wearing clothing that makes you feel comfortable (without offending any colleagues) might actually make your job more appealing and perhaps even help your productivity by making you feel better.

[lrnr-dev]

Oh Snap! The Government Just Got Put On Notice ... By An 8th-Grader.

Things that matter. Pass 'em on.

[lrnr-dev]

Coding Sucks: Why a Job in Programming Is Absolute Hell

"Remember that stuff about crazy people and bad code? The internet is that except it's literally a billion times worse. Websites that are glorified shopping carts with maybe three dynamic pages are maintained by teams of people around the clock, because the truth is everything is breaking all the time, everywhere, for everyone. Right now someone who works for Facebook is getting tens of thousands of error messages and frantically trying to find the problem before the whole charade collapses. There's a team at a Google office that hasn't slept in three days. Somewhere there's a database programmer surrounded by empty Mountain Dew bottles whose husband thinks she's dead. And if these people stop, the world burns. Most people don't even know what sysadmins do, but trust me, if they all took a lunch break at the same time they wouldn't make it to the deli before you ran out of bullets protecting your canned goods from roving bands of mutants."

Nobody can blame me for not being adventurous by pursuing a job in web(-oriented) development!

[lrnr-dev]

OSX visual overhaul coming?

Just stumbled across this. As most people who follow the developments on the apple front probably know, WWDC is almost upon us again. And although it is an event mostly geared towards developers, there is usually also a keynote address. In other words: sneak peeks at what Apple's got cooking for later this year and maybe even a launch date.

There has been much buzz about a larger iPhone 6 (and more variations?) so that is likely to be talked about. Now the Quartz reports that Apple might be drastically changing the looks of OSX after years of subtle updates (from aqua and brushed metal to the current looks). As a visual enthusiast I am really looking forward to see whether or not there will be an overhaul this year and what it will look like.

Apple's been bringing OSX and iOS closer together over the years and Jony Ive has taken over all design supervision, so maybe iOS 7 can be some hint: flatter, lighter, spacier and more minimal. Changing the interface of a much used platform or app is always a risky endeavour as it can turn some users away. On the other hand: Apple can't afford to look stale or out of date for fear of losing all credibility when using the word "revolutionary" or any other future-geared lingo in their announcements.

[lrnr-dev]

The right to be forgotten

The Verge reported today on a ruling by the European Union Court of Justice that forces Google to remove links to a person's personal information from their servers if that person requests it.

I find this, and any other ruling, law or decision that provides indiviuals more power over their data vis à vis large corporations and/or governmental agencies a good thing. 

While you should always be weary what you post on the internet — because the net remembers everything — major search engines and archive sites play an important role as well. As one of the commenters on the Verge article pointed out: data has a tendency to spread by itself and a user may not have any control over where the physical infrastructure containing their data resides. Because of this, as also pointed out by a commenter, search engines act as gatekeepers to the net. By indexing everything, they make it possible to look stuff up.

However, they do not just index. Most also cache (i.e. store) the information they encounter. Some have contracts with other companies to sell data acquired while crawling the net. And that is a problem. Say you perform an  function in an organisation and your contact details or personal info are listed on a page for that reason. At some point you move or change positions. The original page is amended: data deleted or updated. But, the cache remains. And, cached information is easier to retrieve than a new lookup. So now when somebody looks you up, the cached info appears at the top of the result list and is most likely to be seen. But that information is wrong. And there the problems begin: miscommunication, wrong information spreading through data deals or perhaps reputation damage because you were in a worse situation than now. Damage is easy to do, but often much more difficult to repair.

That's why I support any decision granting people more control over their own (sensitive) information.

[lrnr-dev]

Greetings, traveler

Although this place is still empty, I would like to welcome you to it. In time, this should become a place of various things. Musings, tales of encounters in development and various things having to do with bits, bytes or internets.

So, traveler, if this message is all you find here upon your first visit, I apologise for the minimal greeting and at the same time encourage you to return at a later time in the hopes that you might like what you will find here.