Sebastian Lenton https://www.sebastianlenton.com Freelance web development & design, Birmingham UK Wed, 21 Jun 2017 15:27:06 +0000 en-GB hourly 1 https://wordpress.org/?v=5.2.4 Creating CSS Animations With animation-delay https://www.sebastianlenton.com/2017/06/creating-css-animations-animation-delay/ https://www.sebastianlenton.com/2017/06/creating-css-animations-animation-delay/#respond Wed, 21 Jun 2017 15:27:06 +0000 https://www.sebastianlenton.com/?p=457 The CSS animation-delay property is obviously used to delay the commencement of a CSS animation for a specified amount of time. But, like many CSS properties, there’s more than meets the eye… Using animation-delay you can create a variety of complex and beautiful pure CSS animations with ease, by applying it to a set of... Read more »

The post Creating CSS Animations With animation-delay appeared first on Sebastian Lenton.

]]>
The CSS animation-delay property is obviously used to delay the commencement of a CSS animation for a specified amount of time. But, like many CSS properties, there’s more than meets the eye… Using animation-delay you can create a variety of complex and beautiful pure CSS animations with ease, by applying it to a set of otherwise identical elements at varying time values.

All of the following examples follow the same basic setup: a number of looping animated elements are created, all of which are identical save for a unique numeric class which allows each element to be selected individually via CSS. Using this, a different animation-delay time can applied to each element, causing each animation to run asynchronously with the others to create various effects. I’ll go into more detail in the examples, below.

Basic Example: Loading Dots

See the Pen CSS animation-delay Basic Example: Loading Dots by Sebastian Lenton (@sebastianlenton) on CodePen.

This example demonstrates how to use this technique to make a simple CSS loading animation. The steps to create this are as follows:

  • Create a number of  elements all of the same class, in this case “loadingDot”. Position them however you like.
  • Create a CSS keyframe animation, and assign it to the .loadingDot class. Animate this however you like- in this instance I’m animating transform: scale.
  • Add a unique class to each element: in this case, I’ve assigned .loadingDot‑‑1, .loadingDot‑‑2 etc. (Remember that a class name cannot start with a number).
  • Finally, add the animation-delay property to each unique class, with a different delay time for each one. Ensure that the delay times are incrementing with a set interval for a cleaner looking animation (eg .10s, .20s, .30s etc), although you can choose whichever interval you like.

We can use the same technique to make more complex animations- find more examples below. Note, going forwards I will be using Sass and Haml to automate creating some of the HTML & CSS. Don’t worry if you’re unfamiliar with either of these- you can view the compiled HTML & CSS in all the following examples, which shows how it would look had it been written by hand.

Negative animation-delays: Falling Rain

See the Pen Negative animation-delay Example: Falling Rain by Sebastian Lenton (@sebastianlenton) on CodePen.

This next example uses negative animation-delay values, which has a subtly different effect to using a positive value. Using a negative animation-delay value makes an animation commence at that point during its keyframe sequence. This is essential for something like the falling rain effect above, which wouldn’t work if we had to wait for some of the elements to start animating.

The steps to create this are as follows:

  • Set html and body to 100% height.
  • Create a number of  elements all of the same class, in this case “raindrop”. The .raindrop class should use position: absolute, with top and left set to 0. Aside from that they can be styled however you like, although don’t make them too big.
  • Add a unique class to each element: in this case, .raindrop‑‑1, .raindrop‑‑2, etc). In this example I’ve used HAML to automate the above two steps, to avoid writing out large amounts of HTML manually.
  • Create a CSS keyframe animation, animating transform: translate to make an element fall from the top of the screen to the bottom.
  • Assign the keyframe animation to the .raindrop class. Ensure that a linear timing function is being used, and that the animation is set to loop infinitely.
  • Create the unique CSS class selectors (.raindrop‑‑1, etc) and add a random negative animation-delay to each one. The value doesn’t matter so much, so long as the random values are evenly spread and are lower than or equal to the animation’s duration.
  • Add a random position: left value to each unique raindrop class, in order to space the raindrops along the X-axis. Each value should be between 0% and 100%. Note, I’ve used Sass to automate the above two steps, to avoid writing out large amounts of CSS manually.

You should now be seeing a shower of raindrops falling down on your screen. This effect perhaps looks a little boring in its raw state, but with a few changes you can make more interesting effects such as a starfield or falling snow.

If you’re still confused about how negative animation-delay affects things, try flipping the animation-delay values from negative to positive and notice how the animation changes.

Fixed animation-delay Intervals: 8Bit 3D Road

See the Pen Fixed animation-delay Intervals: 8Bit 3D Road by Sebastian Lenton (@sebastianlenton) on CodePen.

This final example increments animation-delay values on a fixed interval in order to create a perfectly looping animation. The interval is calculated via (number of elements / animation duration), then each animation-delay value is set to ( interval * element number ).

Don’t worry if this sounds confusing. The following steps outline the process of constructing this animation, although we’ll be moving more quickly than before:

  • Set the body to be a 3D projection, so we can transform child elements on the Z-axis (to simulate 3D movement into the screen).
  • As previously, create a number of elements of the same class, each with an additional unique class (in this case, “roadStrip” and “roadStrip‑‑1”, etc). The roadStrip class should be positioned at the bottom of the viewport, but otherwise style it however you like.
  • Create a keyframe animation which animates a transform along the Z-axis. In this example I’m also animating opacity, to fade the roadStrips in and out at the beginning and end of the animation, although this isn’t essential. Assign this to the roadStrip class.
  • Work out your interval value by calculating animation duration / total quantity of roadStrips.
  • Apply animation-delay to each unique roadStrip class. Each animation-delay value should be calculated as interval * roadStrip ID number.

By now you should have a 3D road, moving into or out of the screen. Again, if you think the effect’s a little plain then it can be made much more exciting with just a few tweaks.

In Conclusion…

I hope you’ve enjoyed this tutorial, and learned that it’s pretty easy to create a huge amount of different animations using this technique. Drop me a line if you have any questions, and have a look through my Codepen for some more examples.

See the Pen Time Tunnel by Sebastian Lenton (@sebastianlenton) on CodePen.

The post Creating CSS Animations With animation-delay appeared first on Sebastian Lenton.

]]>
https://www.sebastianlenton.com/2017/06/creating-css-animations-animation-delay/feed/ 0
Why your website needs to use HTTPS https://www.sebastianlenton.com/2015/10/why-your-website-needs-https/ https://www.sebastianlenton.com/2015/10/why-your-website-needs-https/#respond Thu, 29 Oct 2015 02:35:49 +0000 https://www.sebastianlenton.com/?p=426 I recently did something I've been meaning to do for a while: I set up my website to use HTTPS. In my opinion, HTTPS is now essential for all types of website- not just banking, retail or big business. In this post I explain the benefits of enabling HTTPS, including better security for your customers and organisation, SEO benefits and more.

The post Why your website needs to use HTTPS appeared first on Sebastian Lenton.

]]>
I recently did something I’ve been meaning to do for a while: I set up my website to use HTTPS. Whilst previously HTTPS was often considered a “nice to have” by web developers working outside of sectors such as banking and retail, we’ve now reached a point where it’s essential for all types of website to use it.

HTTPS is the secure version of the HTTP protocol, used by web browsers and devices to communicate with the servers on which websites are hosted. If you visit a website with an address starting with “http://”, that website is using the standard version of the HTTP protocol. Any interactions you have with that website will be transmitted across the internet as plain text, readable by anyone who might be monitoring the connection.

If you visit a website which has an address beginning with “https://” (or, you can see a padlock symbol in your browser’s address bar) then that site is using HTTPS, the secure version of HTTP. This means that all data sent between the web browser and the server is encrypted. Anyone monitoring your connection would see a random stream of letters and numbers, practically impossible to decode.

But what are the implications of this, and why is it so important that your website uses HTTPS today?

HTTPS is essential for the security of your website, business and customers

Any of the following can happen when visiting a website that doesn’t use HTTPS:

  • Any interactions taking place on that website can be eavesdropped as plain text, and stolen. This includes usernames and passwords (not just those belonging to customers, but also the login details for your company’s Content Management System), enquiries sent via a contact form, the URLs and content of pages currently being looked at by individual visitors, and more. Businesses that still use HTTP for their websites not only risk the security of their customers, they risk their own security too.
  • HTTP Websites can be modified during transmission over the network. This enables hackers to redirect visitors to other places, commit phishing attacks, inject malware into the page and more, plus there have also been cases of hotel wi-fi networks and unscrupulous ISPs injecting ads into websites accessed via their networks. Do you really want to risk grubby, invasive adverts being plastered across your shiny new company website?

Both of the above issues, and more besides, can be mitigated by asking your web developer or agency to set up your website to use HTTPS.

HTTPS is now used as a ranking signal by search engines

Google announced more than a year ago that it had started using HTTPS as a ranking signal. This means that websites that use HTTPS will have an SEO advantage over those that don’t. While Google currently states that HTTPS on its own doesn’t have a large impact, it’s practically certain that over time the influence of HTTPS on search rankings will increase. Because…

The internet as a whole is moving towards “HTTPS everywhere”

As well as using HTTPS as a search engine ranking signal, Google stated it wants “HTTPS Everywhere” during the Google I/O conference in 2014. Mozilla has said that it intends to phase out support for HTTP in their Firefox browser. Cutting-edge features appearing in the latest browsers are increasingly only available to HTTPS sites. And, the internet as a whole is moving towards the new ultra-fast HTTP/2 protocol, but HTTP/2 is currently only available to websites that use HTTPS.

Without HTTPS, you may lose the trust of your customers

In a post-Snowden world, computer security and privacy issues are mainstream news, and consequently internet users are becoming increasingly savvy about their own privacy. When visiting a website that uses HTTPS, a padlock symbol (often green) is displayed in the browser address bar. This indicates (rather more prominently than the “https” in the URL itself) that the website is using HTTPS.

And as time goes by, more and more people will look for this symbol in order to assure themselves that your business is serious about the integrity and security of their data. And if they don’t see it, they may not trust you with their custom. If you’ve asked yourself the question “Does my website need https?” then the answer is now yes.

Enable HTTPS on your website now

Hopefully you now understand how important HTTPS is to your website, and by extension your business. And it’s important to get this set up now, as the reasons to do so will only become more pressing as time goes by. More and more websites are now adopting HTTPS – perhaps including your competitors’ – so don’t get left behind.

Enabling HTTPS on your website isn’t a straightforward process: it involves purchasing an SSL/TLS cert from a certificate authority, which then has to be installed on your website’s server. There are also sometimes configuration and technical changes, which may need to be made by a web developer, depending on circumstances.

If you would like to enable HTTPS on your website and are looking for a freelance web developer to implement it, then please drop me a line and I’ll get back to you with a quote.

The post Why your website needs to use HTTPS appeared first on Sebastian Lenton.

]]>
https://www.sebastianlenton.com/2015/10/why-your-website-needs-https/feed/ 0
Fun With Local Storage: Multi-Window JavaScript Apps & Canvas Streaming https://www.sebastianlenton.com/2015/07/local-storage-multi-window-javascript-apps/ https://www.sebastianlenton.com/2015/07/local-storage-multi-window-javascript-apps/#respond Fri, 10 Jul 2015 23:50:00 +0000 https://www.sebastianlenton.com/?p=382 A short while ago I was invited to participate in µChip3, an arts event curated by Antonio Roberts & Sam Wray which involved chiptune, digital art, hacking, modified hardware and much more. My role was to perform live visuals to accompany performances by some notable chiptune artists, so I set about building a custom browser-based visualiser based on the piece... Read more »

The post Fun With Local Storage: Multi-Window JavaScript Apps & Canvas Streaming appeared first on Sebastian Lenton.

]]>
A short while ago I was invited to participate in µChip3, an arts event curated by Antonio Roberts & Sam Wray which involved chiptune, digital art, hacking, modified hardware and much more. My role was to perform live visuals to accompany performances by some notable chiptune artists, so I set about building a custom browser-based visualiser based on the piece I produced for the BYOB 2013 exhibition.

Visualiser applications need to work across two windows (a control window with which you create and modify visuals, which appear in a display window), so working out how to produce an application able to function reliably in this way was my first concern. I worried it would involve some fiddly work with a local server, but after some research the solution proved straightforward: simply store commands in local storage via the command window, which are then be detected by the display window using the storage event listener.

As well as multi-window web applications, local storage can also be used to keep web apps open in multiple tabs in sync with each other, or even to stream the output of a HTML5 canvas from one window to another. Read on for some demos…

Below: a screenshot of the visualiser. The control window is on the left, the display on the right.

Multi-window visualiser using local storage

What Is Local Storage?

The clue is in the name: it’s a capability of modern browsers which allows websites and applications to store persistent data locally. Conceptually, it’s similar to cookies but without the drawbacks: up to 5MB per domain can usually be stored (with some exceptions). Plus, unlike cookies nothing needs to be sent with HTTP requests. If you’re looking to learn more about local storage then read more about it here and here.

Communicating Between Windows

Local storage can be used to communicate between windows using the “storage” Javascript event listener. Whenever data is stored in one window an event can be triggered in another on the same domain, at which point in the second window you can get whatever has been stored and act upon it appropriately. This is key to creating a visualiser app that allows control of a display window (projected to an audience) via a GUI visible only from the VJ’s laptop. “Commands” made with the GUI window can be stored as a JSON object, which will then be read and acted upon by the display window. Find a very simple demo here (only tested in Chrome 43 at time of writing).

Sending the Same Command Repeatedly

One caveat of the storage JavaScript event listener is, it will only be triggered when new or unique data is stored. This means that you can’t send the same command repeatedly. For example, you can’t create an application where a button can repeatedly be pressed in one window, triggering a repeating action in another. However, there is a very simple way around this: just add some un-used random data into the stored JSON object. By doing this you can send the same command as many times as you like.

Using Local Storage to Stream a HTML5 Canvas from One Window to Another

It’s possible to (ab)use local storage to stream the output from a HTML5 canvas from one window to another, in realtime. While this isn’t a technique I used when building my visualiser, it’s kind of interesting all the same and could have a use somewhere- perhaps for if one needed to stream the output of their display window back to their control window.

To do this is fairly simple: when the canvas renders a frame, encode it as a base64 data URI. Store this in local storage, and then decode and draw it into a canvas in the other window. Find a demo of this right here.

Conclusion

Find the code for the above demos on GitHub. If you’ve any feedback or questions regarding this post then please drop me a line via twitter or email. I’m particularly curious to know if there might be a better method of streaming a canvas between two windows?

The post Fun With Local Storage: Multi-Window JavaScript Apps & Canvas Streaming appeared first on Sebastian Lenton.

]]>
https://www.sebastianlenton.com/2015/07/local-storage-multi-window-javascript-apps/feed/ 0
BYOB Birmingham 2013: Art, Projectors & Box2D https://www.sebastianlenton.com/2013/12/byob-birmingham-2013-art-projectors-box2d/ https://www.sebastianlenton.com/2013/12/byob-birmingham-2013-art-projectors-box2d/#respond Mon, 30 Dec 2013 16:09:48 +0000 https://www.sebastianlenton.com/?p=338 On Friday November 29th I found myself exhibiting an artwork at Vivid Projects as part of their Bring Your Own Beamer (BYOB) exhibition. BYOB is a global series of exhibitions which see artists using projectors to display their work, with Birmingham’s event organised by notable local artists Antonio Roberts and Pete Ashton. The night was... Read more »

The post BYOB Birmingham 2013: Art, Projectors & Box2D appeared first on Sebastian Lenton.

]]>
On Friday November 29th I found myself exhibiting an artwork at Vivid Projects as part of their Bring Your Own Beamer (BYOB) exhibition. BYOB is a global series of exhibitions which see artists using projectors to display their work, with Birmingham’s event organised by notable local artists Antonio Roberts and Pete Ashton.

The night was a great success, with a diverse range of pieces being exhibited by more than twenty artists. My piece was a physics-y controllable visualiser, using Box2DJS as its foundation.

Box2D?

Whether you’ve heard of it or not, you’ve probably already experienced the Box2D physics engine first-hand – developed by Erin Catto, the engine is best known for powering the physics behind the Angry Birds series of games. It provides a framework with which developers can easily create 2D physics simulations, without having to deal with much in the way of complex maths. I’d been eyeing it for a while anyway, so this seemed like the perfect time to give it a try.

Still from my BYOB piece

My initial idea involved using a JavaScript implementation of Box2D to make some simple, browser-based multiplayer games, in which you can draw in custom shapes which map to real-world environmental features. For example: if there was a window in the centre of the wall being projected onto, then this could be mapped into becoming a pit in which cars racing around it could fall down.

However, due to time constraints I ended up with a visualiser of sorts, within which a flow of small shapes can be manipulated and directed by drawing in – or removing – larger shapes, with various parameters being controllable via keyboard (colour, feedback, shape spawn rate and so on). You can download the code and try it yourself via GitHub, or check out a live demo here if you like (please note, I’ve only tested the demo in Chrome for Mac at this point).

Development

Considering my lack of prior experience with Box2D, development wasn’t too bad. One thing I found confusing at first was that there’s various different JavaScript Box2D ports, but certain tutorials won’t work fully with certain versions as they’re all slightly different to each other. If following a Box2DJS tutorial then make sure to use the same version the author is using, or you might run into problems.

By far the most useful learning resource for me was Jeremy Hubble’s Box2DJS page, which provides code as well as an example working in situ. There’s also a pretty comprehensive tutorial series by Seth Ladd, as well as a series by iforce2d which is worth reading (code examples in C++).

Release

The reaction to the final piece was excellent, and it worked brilliantly on the night with no crashes or glitches. We controlled it live throughout the event, adjusting the settings to create a piece which changed and evolved all night long. A few people even had a go on the night, braving the not exactly user-friendly controls to play with it themselves. You can see a few Vine videos of it in action here, here and here, although it looked a bit more interesting in person!

The post BYOB Birmingham 2013: Art, Projectors & Box2D appeared first on Sebastian Lenton.

]]>
https://www.sebastianlenton.com/2013/12/byob-birmingham-2013-art-projectors-box2d/feed/ 0
The Responsive Future https://www.sebastianlenton.com/2013/11/responsive-future/ https://www.sebastianlenton.com/2013/11/responsive-future/#respond Mon, 04 Nov 2013 15:35:36 +0000 https://www.sebastianlenton.com/?p=302 I recently attended Canvas Conference 2013, an event for developers, designers and digital marketers which took place here in Birmingham. The event featured a wide variety of speakers covering a huge range of topics: everything from physical product development to new and emerging tools, as well as your slightly more “traditional” subjects related to web... Read more »

The post The Responsive Future appeared first on Sebastian Lenton.

]]>
I recently attended Canvas Conference 2013, an event for developers, designers and digital marketers which took place here in Birmingham. The event featured a wide variety of speakers covering a huge range of topics: everything from physical product development to new and emerging tools, as well as your slightly more “traditional” subjects related to web development and marketing.

After a few days spent absorbing the huge amount of information I was exposed to, I noticed a common thread running through quite a few of the talks: that of the future of the responsive web.

Beyond the Breakpoint

My takeaway was that what we refer to as “responsive” is quickly moving beyond things like creating layouts that reflow over different breakpoints, providing support for touch vs non-touch, or designing for mobile/tablet/desktop.

Websites and apps are increasingly becoming responsive towards all sorts of additional factors: connection speed and availability, location, characteristics of the user’s environment (lighting, ambient audio and so on) – as well as responding, content-wise, to the tastes and personality of the user. New methods of input are becoming more common: speech recognition, motion control and video input. Perhaps the next advance will be thought control.

These factors are becoming increasingly important as we march towards a future of wearable devices, smart cities and the oft-foreseen Internet of Things. Your next project could be running on a wristwatch, smart television or a car dashboard, and each of these environments mandate different requirements.

Inspiration

Quite a few talks touched upon this responsive future:

  • The Guardian‘s Matt Andrews led the audience through the development of their new responsive website, which uses feature and connection sniffing in addition to other techniques in order to deliver content to more than 300 browsers across 6000+ devices. This is the current state of responsive taken to the extreme: almost any visitor is able to access its content quickly and easily – important in certain parts of the world, where people may not have the luxury of fast connections and expensive devices. (Matt has a written version of his talk here – a recommend read).
  • Alice Bartlett of BERG described in great detail the development process behind Little Printer, a tiny web-connected printer which pulls a variety of user-sourced content via BERG Cloud, their custom-built data platform. This cute product is a lovely example of an Internet Thing: a connected, independent data-driven device which delivers content personalised to its user.
  • Microsoft’s Martin Beeby gave a whistle-stop tour of present and future methods of interaction between humans and devices, highlighting topics such as touch, motion control and speech recognition. He showed refinements to current technologies – such as altering the sizes of touch targets depending on how likely they’ll be touched next – as well as talking about more offbeat ideas, such as a motion control system which can detect your hands by the sound they make moving through the air. Most importantly, he introduced me to the Google Web Speech API – more on this in just a minute…
  • Harry Hirst of Qubit talked about personalisation: enabling websites  – in this case, retailers – to track and build detailed profiles about their visitors. It lets them analyse and predict the tastes and movements of individuals, to display particular content, products or pop-ups which might be more likely to lead to a conversion. So sophisticated is their technology that apparently it can predict exit patterns, throwing up a special offer or other such distraction in order to prevent a potential customer from bouncing away.

It was Harry’s talk in particular which planted the seed of an idea in my mind.

Swearing at Modal Boxes

I agree with the idea of personalisation – there are many good use cases, such as a reference site being able to suggest links which might be most useful to look at next. However, when it comes to retail I find personalisation intrusive and irritating.

I understand that a lot of people probably appreciate retail personalisation, whether they’re aware it’s happening or not. But, surely it’s possible to detect the behavioural patterns of people who don’t want to be personalised? The retailer could make more money, due to the experience for that group of people being cleaner and easier than that of a competitor. It might be that someone does this already – I just haven’t realised.

My pet hate is sites which display an overlaid modal box presenting an offer, advert or otherwise – particularly halfway through reading – and I often find myself swearing at them in frustration. To this end, I’ve produced a simple demo which uses the Google Web Speech API to detect when you’re swearing at a modal box, which closes should that be the case. Find it here (and, find the code here on GitHub).

There are some caveats to the current implementation:

  • It only works in Chrome 25+, at time of writing.
  • At the beginning of every session, you have to enable the microphone – though this also ensures websites aren’t silently recording everything you’re saying. Maybe at some point people might have whitelists of sites which are trusted to respond via voice (note, according to this article, pages served via HTTPS only have to request the use of a microphone once).
  • Each session only lasts for 60 seconds in total, and if no speech is detected within 8 – 10 seconds then the session terminates.
  • The speech recognition is currently a bit poor.

Though this demo is neither practical nor usable in a real-world sense, it does give a glimpse into a future where a website or app could respond to a user’s ambient behaviour, tailoring both content as well as UX to the tastes of that user in an entirely transparent manner.

Also, messing about with new technologies like the Web Speech API is awesome fun. If you’d like to have a play yourself then I’d recommend this and this as good starting points.

The post The Responsive Future appeared first on Sebastian Lenton.

]]>
https://www.sebastianlenton.com/2013/11/responsive-future/feed/ 0
The ZTE Open Firefox OS Phone https://www.sebastianlenton.com/2013/09/the-zte-open-firefox-os-phone/ https://www.sebastianlenton.com/2013/09/the-zte-open-firefox-os-phone/#respond Wed, 11 Sep 2013 11:47:58 +0000 https://www.sebastianlenton.com/?p=276 A short while ago I was lucky enough to bag a ZTE Open smartphone, during it's initial, limited release on ebay. To the uninitiated, it's one of the first phones available running on Mozilla's Firefox OS platform - a new community-based mobile OS primarily aimed at low-end handsets and developing markets. What makes Firefox OS different to other mobile operating systems is that everything - right down the the UI of the OS itself - is written in HTML5 & JavaScript, running inside Mozilla's Gecko rendering engine.

The post The ZTE Open Firefox OS Phone appeared first on Sebastian Lenton.

]]>
A short while ago I was lucky enough to bag a ZTE Open smartphone, during it’s initial, limited release on ebay. To the uninitiated, it’s one of the first phones available running on Mozilla’s Firefox OS platform – a new community-based mobile OS primarily aimed at low-end handsets and developing markets. What makes Firefox OS different to other mobile operating systems is that everything – right down the the UI of the OS itself – is written in HTML5 & JavaScript, running inside Mozilla’s Gecko rendering engine.

I’m not going to talk about the handset or operating system too much in this post, as fairly detailed accounts can be found elsewhere – I’m more interested in the opportunities that devices like this present.

Unboxing

The first thing one notices upon unboxing and powering up a phone like this, is that the hardware is cheap. But then again, we are talking about a phone which retails for £60 including accessories, delivery and a 4GB micro SD card. The handset feels very plastic-y in the hand, the screen appears to be at least 1mm below the touchable surface – which doesn’t do much for accuracy, particularly when typing – the camera is awful, and it’s not compatible with TRRS headphones (if you’re not sure what this means, then most modern headphones – including Apple’s trademark white earbuds – are TRRS).

As a young OS, Firefox OS has it’s share of problems too – slightly laggy UI, browser windows locking up, poorly implemented momentum scrolling, the odd random crash or two and a seeming inability to run more than two applications at once (on this device at least, with its meagre 256MB of RAM). However, since Firefox OS is an open source, community-based OS then at least there’s opportunities for users to contribute towards fixing these problems, unlike most other OSes.

Taken as a whole, I don’t want to be too harsh on it though: overall it’s quite decent to use once you get used to it, and considering its low price it’s good value for money.

Firefox OS ZTE Open

Application Development

One of Firefox OS’s strengths is that making simple applications is extremely easy: it’s literally a matter of building a hosted responsive web application, with an added manifest file containing a few details. This is then submitted to the Firefox Marketplace, and you can submit them as Firefox desktop & Android apps too. So far I’ve built two small applications, the first of which is called Band Name Generator and can be found here (or here on Firefox Marketplace, if you want to install it to your device).

Band Name GeneratorIt’s but a step away from a Hello World in terms of complexity, but it was pleasing to get it up and running so quickly. Submission was an easy process (note, it currently states on submission that apps will take two days to be approved, but both of mine were approved within 8 hours), and for someone who’s never submitted anything to anyone’s app store before, it’s pretty exciting stuff. I’ve had great feedback too: 300+ unique users so far, some great reactions from acquaintances plus it was suggested that I hook it up to the MusicBrainz database in order to see if anyone actually uses any of the names generated. I’ve had around 10 Firefox OS installs too – small numbers perhaps, but not bad in my opinion for a “pointless” first app by some unknown guy. By the way, it’s on Github for anyone who wants to look over the code or fork their own version.

Join FourI have a pretty keen interest in games, and one problem I noticed with the ZTE Open was that every game I’ve tried on the device is absolutely hideous – jerky, broken, borderline unplayable crap, and that’s just the stuff which worked! Hence, my second app – approved very recently – is Join Four, a simple, mobile-optimised Connect Four game for one or two players (play it here, or grab it from Firefox marketplace here). I picked a very simple game for a reason, as I wanted to test if it were possible to build games for the device which run smoothly and fluidly. For the most part, Join Four seems to run at 60FPS (if you make moves unrealistically quickly in two player mode it seems to “jam up” a bit though, but being pretty rough in terms of code there’s possibly scope to optimise things a bit). So long as you use CSS3 animation, you’ll reap the benefits of hardware acceleration and produce something nice and smooth, not just on the ZTE Open but on other devices too! (You can find the Join Four code on GitHub, if you want to experience the horror for yourself).

Further Opportunities

I’ve recently been thinking a little about mobile games which aren’t merely played on & within a device’s screen in the same way that traditional console/handheld games have always been played, but which could also involve interaction with their surroundings or the individuals present in some way. A couple of very basic examples of what I mean could be a game where a device is tossed around a group of people (when caught, you have to press a button to stop it from “exploding” before chucking it to the next person, causing a mad scramble when it inevitably gets dropped), or a Hide & Seek variant where someone has to find a hidden device which emits a noise if not found in time.

A great real-world example of a game like this is the recent Send Me To Heaven, which involves players throwing their phones as high into the air as they possibly can. This has allegedly led to people smashing their phones when they fail to catch it on the way down (in fact, it’s claimed that Apple banned the game from their app store due to it “encouraging behaviour that could result in damage to the user’s device”). It’s safe to say that most sane people would never play a game like this, yet I don’t think many would want their personal, precious device to be used for tamer examples of these games either. I certainly wouldn’t: I’d worry someone might accidentally see messages intended for my eyes only, whilst I’m also terrified of my phone being lost, stolen or damaged.

This is where super-cheap yet fully functional devices like the ZTE Open could come into their own. Since they’re cheap enough to not require a second mortgage to replace, they’re a much better candidate for use in games such as those mentioned above. They’re also less likely to be someone’s primary, personal phone (in these parts of the world, anyway) – I haven’t even got a SIM in mine, and neither do I use it for email as the keyboard is such a fiddle to type on. Like the game-changing Raspberry Pi – which last year was used to take photos from the edge of space – there’s probably lots of games, experiments and hacks which suddenly become feasible when the device required to carry them out is cheap enough to warrant the risk of breakage. Maybe I might come up with a few weird ideas of my own over the coming weeks and months…

The post The ZTE Open Firefox OS Phone appeared first on Sebastian Lenton.

]]>
https://www.sebastianlenton.com/2013/09/the-zte-open-firefox-os-phone/feed/ 0
Behind the Scenes https://www.sebastianlenton.com/2013/05/behind-the-scenes/ https://www.sebastianlenton.com/2013/05/behind-the-scenes/#comments Wed, 22 May 2013 19:53:56 +0000 https://www.sebastianlenton.com/?p=1 I've been working with the web professionally now for coming up to five years, however I've never had a personal site before. I've built sites for personal projects I've been involved in (as well as many client sites, of course), but never anything which is 100% my own, and nothing else.

The post Behind the Scenes appeared first on Sebastian Lenton.

]]>
Hello, and welcome to my new site. I’ve been a web developer and designer for some five years now, both as a freelancer as well as having worked with agencies. If you’d like to read a bit more about me then you can do so here, and do please let me know if you encounter any bugs or want to give me any feedback.

With this first post I want to talk about my workflow whilst creating this site, and some of the processes and tools I used. My initial objective was simply to create a site which conveys my skills whilst being nice and easy to use across a range of devices, so I decided that a simple design and content structure — with an emphasis on responsive design and performance — would help me meet this objective.

Begin, Don’t End, With Content and Structure

Sometimes designers dive into the aesthetics of websites, without considering the content or required page structure until towards the end of the project — often with Lorem Ipsum text in place of final copy, and menus listing “page 1”, “page 2”, “page 3” and so on.

Where possible, web projects should begin — not end — with their content and structure, simply because a website’s content is overwhelmingly its most important component. By organising the page structure early you can get a better sense of whether the information is organised in a way which is easy to navigate, while working with prior knowledge of the required content and page structure means costly mistakes can be avoided at the design stage. Aesthetics and layout should compliment the content, rather than merely enclosing it.

In this case, I began by fleshing out a site structure diagram on paper which broadly stipulated which content and elements would go where, and how many pages would be required. I then quickly wrote some draft copy for each page — even if you’ve only got rough notes to work with, it’s still better than nothing!

Sketched wireframeFollowing this I produced wireframes for each proposed page. This helped me visualise how the result would look in terms of layout, and is also pretty essential for designing responsively (the process of creating websites which are easy to read, regardless of whether you’re using a phone, desktop computer or whatever). This gave me an opportunity to refine my layout, menus and content structure before even beginning any “serious”, time-consuming work on a computer.

Development Commences

At this point I had a fairly comprehensive plan of where I was going, so I began developing. My next stage was to produce what I refer to as a functional wireframe: a live, working version of the website which is accurate to my plan. This version of the site is reasonably complete with regard to layout and JavaScript interactions (not that I’ve used much JavaScript for this particular project) but doesn’t include any aesthetic design work with regard to colours, textures or typography.

These don’t take too long to develop, and give a good indication of how the site will work in situ. The first step of this was to take a fresh WordPress install and simply add my draft content and page structure, before working on the markup and CSS required to build the page layout. The result is a prototype version of the website which conveys fairly accurately how it will work to the end user, how easy it is to navigate and how well it communicates its objectives. Again, potential problems which may not have been apparent at the planning stage can often be nipped in the bud, without wasting time polishing and completing elements which ultimately prove to not work well.

With my prototype complete, only now do I fire up Photoshop. Since I’ve already wireframed the pages on paper and put together the basic layout in HTML and CSS using an IDE and my web browser, there’s simply no point in producing traditional static comps (and besides which, some argue that responsive design has mostly rendered the traditional Photoshop comp obsolete). These days I use Photoshop more to explore ideas, create textures, experiment with colour schemes and generally define an aesthetic which complements each project, similar to a mood board or style tile. Given that one of my aims with this project was fast loading and performance, I kept visual embellishments to a minimum.

By this stage I was coming fairly close to a finished product. I continued to polish and refine, squashed a bug or two, tested across a variety of browsers and devices and reworked my original draft copy. And finally, after minifying my JS and CSS and polishing a little more, I deployed the finished product to my live web server.

Technologies Used

Find below a list of tools, frameworks and technologies used to develop this site. If you’ve any experience with developing or designing websites then you will probably be familiar with most of these.

  • A Mac: my platform of choice for development, as some of the tools I use aren’t available on PC or Linux. That said, the platform (and indeed, software) you use is irrelevant if the end results are no good!
  • Coda 2: I’ve been using Panic’s Coda IDEs for some time now. I’ve tried a few alternatives, but I tend to find myself drifting back to Coda simply because I’m used to it.
  • Adobe Photoshop: an image editor, which probably needs no introduction. I do also use Adobe Fireworks sometimes, but didn’t on this project.
  • XAMPP: all of my sites are developed locally on my own machine, which speeds up development compared to having to upload and edit files on a remote web server. XAMPP enables a local LAMP (Linux, Apache, MySQL, PHP) server stack to be setup on a computer with a minimum of fuss.
  • Browserstack: allows testing of websites across a variety of browsers, platforms and devices, within a web browser.
  • WordPress: no longer “just” a blogging platform, WordPress has become a customisable and extensible CMS which is good for building websites quickly and easily. I also used a few plugins to add required functionality.
  • Bones: a WordPress foundation theme, upon which I built my own custom theme for this site. Based around the popular HTML5 Boilerplate.
  • jQuery: the world’s most popular JavaScript library. I used a custom build available from here.
  • Modernizr: a JavaScript library used for feature sniffing. This enables fallbacks to be provided for older browsers (particularly, older versions of Internet Explorer) which lack key features provided by modern browsers.
  • SASS: a CSS preprocessor. this allows the use of variables, mixins and other features within regular CSS. An essential part of my workflow, especially when using media queries to build responsive layouts.
  • ImageOptim: a tool which losslessly compresses web images further than Photoshop’s “save for web” feature is able to. Useful for shaving a few kilobytes from a page’s weight.
  • IcoMoon: A custom icon font generator, which I used for my social media icons.
  • Git: like most people these days I use Git for version control, although I have used SVN in the past. I use Bitbucket to host the Git repository for this site, as unlike GitHub they provide free private repositories.
  • Linode: my sites are hosted in London on a Linode VPS. If you’re looking for good quality Linux-based VPS hosting then I would thoroughly recommend them — please use my referral code!
  • Pens and paper: hopefully, this needs no introduction.

Anyway, I hope you enjoyed this post. I’m looking forwards to writing more, so please follow me on Twitter or subscribe via RSS if you’d like to be kept informed of future posts.

The post Behind the Scenes appeared first on Sebastian Lenton.

]]>
https://www.sebastianlenton.com/2013/05/behind-the-scenes/feed/ 1