Web Designer No. 244의 목차

“‘Full VR’ experiences, designed from the ground up for virtual reality. Not 2D sites, but 3D worlds.” THE WEB DESIGNER MISSION To be the most accessible and inspiring voice for the industry, offering cutting-edge features and techniques vital to building future-proof online content Buckle up for 2016, it’s gonna be out of this world It’s not like technology ever stands still and we have nothing to look forward to. There is always something to look forward to and 2016 is going to be no different. In fact, Web Designer thinks there is more than ever to look forward to. Mention virtual reality, or VR, and you will already have the attention of almost every designer and developer out there. With Oculus Rift and co hitting the shelves there is a…

Web Font Plugin bit.ly/1Rt0xqA Need to use Google Fonts in your design mockups but you don’t want to download and install every single mockup? Then get your hands on this plugin to do just that. LoremPicsum lorempicsum.com Negate the need to find a placeholder image. Just get this nifty little plugin; use it in just two steps and you will have a placeholder image of your choice. Free Lorem Ipsum Generator bit.ly/1lW1ESY Do you want to write 200 words of body text for a mockup? You won’t have to when you download and install this plugin. Social Kit socialkit.madebysource.com Who doesn’t include social media elements in designs? This plugin provides a collection of customisable templates for Facebook, Twitter, Google and YouTube.…

“Some of the new domain options don’t inspire” I don’t think I could have launched my new domain company in a better city. We’re part of a global, creative revolution in the domain space, and here at our co-working office in Portland, Oregon we work alongside one of the USA’s most noted creative classes. I’m surrounded by elite craft brewers and trendy coffee roasters, where it’s not uncommon to make a living as an artisan or as a small business owner. Granted, we are a technology company with global reach and ambitions; Top Level Design is the registry behind the new .design top-level domain (TLD), as well as .wiki and .ink. We are competing against what we call old-school, or even vintage, TLDs like .com and .org, and we are…

Set the body When applying page backgrounds, you will most likely start from some basic body and HTML styling. Here some basics are setting 100 per cent width and height, resetting margins and padding, plus hiding overflow. In this instance, the background colour is set to the same blue as the canvas/WebGL scene. Apply radial gradient From the background being a solid colour, this site first applies a semitransparent, radial gradient with an elliptical centre using the background image property. This could add to the body class or in this case is applied to the .snowball container <div> for the canvas: Apply box shadow To heighten the snow globe effect and make the page appear like curved glass, a box shadow is then added. By insetting this using the inset…

“Fruit Punch Tea and goat’s cheese. They complement each other on the palette.” LOUIS POLLARD COPYWRITER “English Breakfast with a mint Aero and flapjack. Just because they’re both great.” MR TIMMS MARKETING/ACCOUNT HANDLER “English Breakfast, and maybe just a humble digestive. I’m a classic kind of a guy. A man of simple tastes.” JON SYRETT STORYTELLER/PHOTOGRAPHER “A loose leaf Earl Grey. In a pot. Served in bone china. Near an almond croissant. Definitely no tea bags.” TOM WITTLIN CREATIVE DIRECTOR…

Year 2005 No. of employees 2 Launches in a shed in parent’s back garden. Year 2006 No. of employees 4 Olives Et Al commission Strawberrysoup to build a bespoke eCRM system for them. Year 2007 No. of employees 7 BUPA choose Strawberrysoup to lead paid search for armed forces division. Year 2008 No. of employees 9 US confectionary brand Mike and Ike choose us as lead UK agency for European rollout. Year 2011 No. of employees 14 Iron Fist UK eCommerce website is launched. Year 2011 No. of employees 15 UK Cycling Events and Wiggle event logos designed. Year 2012 No. of employees 16 We win a Gold Lovie for social and community! Year 2013 No. of employees 32 We merge with Sideshow Group. Year 2013 No. of employees 35…

USE LET TO DECLARE LIMITED VARIABLES ES6 introduces a lot of exciting features and new syntaxes and in lists of those it’s likely that let won’t be mentioned due to its very functional and dull role, however it is useful to know how and when to use it. Let is essentially like var, but it has one minor difference. Var is scoped to the nearest function block (or globally, if it isn’t within one). Let is simply scoped to the nearest block. So while a variable declared with var inside a for loop is available outside said loop, let can’t be accessed. A practical example: This example demonstrates that the variable i is only available within the for loop block and nowhere else. If var had been used to declare…

AVOID OVERWRITTEN VARIABLES Along with let, ES6 introduced another common way of declaring variables in other languages – const. Constants can be used to create read-only references to values; essentially this means that they are protected. Constants are also block scoped, just like lets. There is a school of thought that traditional variable declarations can be done away and replaced with the straightforward rules of const and let. The following shows how to declare constants and how overriding them will fail. There is a common misnomer with const that says constants in JavaScript are immutable. For the most part, they are, however there are some behaviours that can be useful to know about. In our previous examples it was clear that the FRUIT constant couldn’t be reassigned, but it’s possible…

CSS4 MATCHES ANY AND EXPRESSION The matches-any pseudo-class allows for the selection and styling of elements which are parented by any of the selectors passed in an argument list. As this doesn’t make much sense, here’s a code example that will make it much easier for you to understand: This is a very powerful selector, and signifies CSS is taking steps to becoming a more expressive language to work with. It can be used to create complex selectors easily: This is more powerful than it looks, as selectors can easily be added to both matches statements, which would have previously been a very long selector – imagine doing headings 1 through 6. Matches any can be used wherever lists of very similar comma separated selectors are currently present in your…

DETERMINE THE PROGRESS EASIER Another addition to the HTML feature set that came as part of HTML5 is the progress element, which can be rather unimaginatively described as one that displays the completion progress of a task. In reality it’s an easy, semantic way to implement loading bars, as just a little JavaScript is needed to manipulate the value attribute. The progress element has a value attribute, which marks how much of the task is complete between 0 and max, where max is the other attribute that defines the top-end of the scale.…

Get array collections UTILISE ARRAY.FROM String and Number prototypes aren’t the only thing that has been looked at as part of the new ES6 specification. Arrays have not been left out, with three particularly good additions. The first is Array.from(), which can be used to create a real array from a collection that is array-like. For those who might be unaware, there are lots of collections in JavaScript that developers want to treat like arrays because the Array. prototype has some powerful tools (map, filter, reduce). In ES5, developers had to steal the Array.prototype with ‘call()’, but now it’s very much possible to convert any iterable to an array by making use of Array.from(). Return indexes INSTEAD OF VALUES Array.findIndex will return an index in the array that matches a…

THE :NOT SELECTOR HAS BEEN POWERED UP Another wonderful part of CSS4 is the introduction of a negation pseudo-class. This sounds particularly confusing, but is essentially a beefed-up :not selector. Previously it was possible to select elements that did not match one particular other selector. This meant producing a series of :not selectors, some which may conflict with each other. In this example it looks like a font-weight bold is applied to all links that aren’t external and aren’t nofollow. In practice, external links will be made bold because the selectors conflict with each other. This is particularly unintuitive and makes it easy to make comprehension mistakes. The new negation selector (or beefed-up :not) allows for lists of selectors to be negated. It’s now possible to write CSS like this:…

HANDLE DATA WITH SOCKET.IO Socket.IO is a server-side JavaScript framework running on Node that aims to deliver real-time data handling between client and server. WebSockets are particularly useful for connecting many devices and users together at once to have collective experiences with the web. Like most WebSocketbased technologies, this is particularly useful for scenarios like document collaboration, multiuser messaging/chat, real-time analytics, and data streaming (think audio and video).…

IT’S MUCH EASIER THAN YOU THINK 1. Produce a Node package Producing a node package is relatively straight forward for anyone who has used Node.js before. The obvious first step is to produce some code that needs to be packaged. The next step is producing a package. json, which can be done with the init command. 2. Create a user The next step is to create a user on the npm registry. This can be done through the website or the command line. The command ‘npm config ls’ can be used to determine whether there are any credentials on the machine. If an account exists use the command ‘npm login’, otherwise use ‘npm add user’. 3. Publish the package The next step is very easy. Simply enter the command ‘npm…

The amount of space available for websites can often be limited, especially where the website is being used on a small screen. With the different information components in your design competing for screen space, it is important to make sure that you give each element the most appropriate placement in the design of the page or the screen. A more recent addition to the CSS specification is the use of 3D elements. We are all familiar with the default 2D presentation of webpage elements, in which we can position them on the page by using their horizontal and vertical coordinates; the 3D presentation features takes this one step further by allowing elements to be presented with depth perspective, which can then be used for rotation and making the elements appear…

The most important consideration in a design is not whether it looks cool, it’s whether it meets the requirements of the customer. One tip is to take after Dieter Rams, the industrial designer who designed products that resulted in ‘as little design as possible’. Let’s take a look at that message with Empire’s online site. Developed for mobile The old Empire website had many flaws, not least its lack of mobile site when you need it most: stood outside the cinema wondering what to watch. Empire has long been the last word in film reviews yet their web presence really failed them. Clear information The reviews overview page is simple too, with just the information you need: film title and its score. The review page itself continues the trend of…

Ionic Framework ionicframework.com Ionic offers mobile-optimised components, gestures and tools for building graphically rich apps and comes with its own prototyping tool and desktop app for building interfaces. Sencha Touch sencha.com/products/touch/#overview Sencha Touch is an MVC-based framework that is built on Sencha’s web app technology ExtJS, and it enables the creation of native-looking HTML5 apps. It has UI widgets, layouts, animations, back-end data packages and charting packages. ExtJS has a steeper learning curve than some of the other frameworks that we have featured here. Foundation for apps foundation.zurb.com/apps.html Foundation is probably best known for its responsive web framework. Now they’ve created a version specifically for apps built on top of AngularJS with UI components and motion. They claim a designer can build the UI for Angular apps, without knowing any…

The cloud-based service PhoneGap Build can easily build your app in a variety of different formats to submit to either Apple or Andriod app stores, you will need to first become a registered developer. For iOS you must create a provisioning profile for the app. This is uploaded to PhoneGap Build so that it can successfully build your app. Then you can submit for approval, once approved the app will be able to go live. It’s a good idea to read the developer’s guides for Android (bit. ly/1MA7bZ7) and iOS (apple.co/21S0hoD) before starting any design ideas so that you stay within their guidelines.…

Web Designer’s latest digital addition to our burgeoning collection is Advanced Angular. The AngularJS library has quickly become a fundamental part of a developer’s arsenal and on offer from us here is a host of must-know tips and techniques to get the most out of it. Don’t forget The Art of Responsive Design and The Web Apps Handbook. You’ll be able to get an insight into how to build apps with HTML, CSS and JavaScript as well as learn about how to create using the most popular libraries out there, including PhoneGap. Plus, check out Web Design Superstars, 225 Best Web Tools and Resources and Amazing Websites and How to Build them Vol 02. But how can you get your hands on a Web Designer digital edition, you ask? Simply…

Protractor bit.ly/1Rm1Mrn An end-to-end test framework that runs tests against your application and runs them in a real browser. bit.ly/1O2nhHg Angular-trix bit.ly/1O2nhHg Trix is a rich WYSIWYG text editor. This is a lightweight AngularJS directive for the Trix editor. AngularUI angular-ui.github.io This is a companion suite for Angular JS. AngularUI boasts a host of modules for improving an interface. Videogular videogular.com Videogular is a HTML5 video player app framework for desktop and is also mobile powered by AngularJS. angular-gettext bit.ly/1TMUr21 Need to translate from English to your chosen language? Angular-gettext library makes the change easy.…

1. Write the HTML First we need to write the HTML for our postcard. Each postcard is composed of a postcard-front and postcard-back <div>, which contain the front and back images. These are wrapped in an outer div with the class “postcard”. This lets us target each face individually, as well as the entire postcard. Make sure your front and back images are the same size for the effect to work properly. 2. Set the CSS Next, we absolutely position the front and back postcard divs and relatively position the postcard container. This allows the front and back faces to overlay each other instead of following the flow of the document. Note the width and height of the container is being set to the size of the images here: 3.…

BEAT THE BROWSERS, GET GENERATORS NOW Generators are a part of the ES6 specification, the first update to JavaScript since ES5 was made a standard back in 2009. The ES6 feature set is currently being implemented by JavaScript engines, and a lot of it is currently unavailable in browsers today. For a thorough overview of browser support, a table produced by kangax and webbedspace can be found here: kangax. github.io/compat-table/es6. It is possible to use parts of ES6 today however, with handy compiler projects such as BabelJS (babeljs.io) and Traceur (github.com/google/traceur-compiler). Babel and Traceur allow for compiling ES6 code to ES5, which is more supported and allows for future features to be used today. Not only do we get shiny things to explore, but code being written today can be…

HOW TO USE LET, CONST, ARROWS AND TEMPLATE STRINGS TOGETHER 1. Declare an array Let’s declare an array of items, in this case fruits, using let rather than the old way of using var. This will be block scoped, though this example won’t make use of that particular feature. A constant could be used, though this array will be modified. 2. Map that array In this step, the code uses const to declare a variable that should not change and it also won’t be overwritten in the scope of this block. This step will also implement an arrow function that transforms the fruit names into uppercase. 3. Template strings in the console The console will display an array of loud fruits. This example that is shown above is taking advantage…

Add style to default values SELECT AND STYLE WITH :DEFAULT This default option pseudo-class provides the ability to select and style the default element among a collection of the same elements. For example, it can be used to select the default item in a select list, menu or context menu. Its syntax is :default, and is currently supported by desktop Chrome and Firefox. Attribute case sensitivity CASE-SENSITIVE SELECTION The CSS2 attribute selector has never been case sensitive, however CSS4 introduces a case-sensitivity selector for attributes. The syntax is like an add-on, or a flag for the attribute selector: [attribute=“value” i] – note it’s the lowercase i that is the case-sensitivity selector. This can be useful for selecting certain filetypes. Which reading direction? STYLING FOR DOCUMENT LANGUAGE The dir pseudo-class, standing…

GET CONCISE LOOPING WITH THE FOR-OF LOOP ES5 introduced different methods for iterating through arrays, allowing developers to forgo the old ‘for(var i = 0; i < array.length; i++){}’ routine in favour of a more expressive syntax: ‘array.forEach()’. ES6 introduces a new way to iterate over arrays (and a few other things) with for-of. It has a familiar syntax and is now the most concise way of looping through an array. Another plus is that ‘[].forEach()’ wasn’t a loop, but a way of iterating over a collection, whereas for-of is a loop so it works with break, continue, as well as return statements. For-of is a loop, not just a part of the array prototype, which means it can be used with strings, NodeLists, sets and maps – the last…

FOR ART-DIRECTED IMAGES Ever since responsive web design became a thing, designers and developers have wanted better tools to enable the management of imagery across many different clients and viewports. The picture element introduced as part of HTML5 now makes organisation possible. The best part is it’s possible to use <picture> right now, thanks to an amazing polyfill called pictureFill by Scott Jehl. The fantastic thing about using HTML5 <picture> is that it gives creative teams control of how images will be presented when using the browser at varying screen widths. This level ofcontrol will mean that creative teams are finally able to deliver effective art direction on a per-viewport basis. This process can be as simple as serving different aspect ratios to mobile devices, to serving entirely different image…

SAY HELLO TO THIS WIDGET The details interactive widget is new to HTML5, being a part of the HTML5.1 working draft specification. This means that it isn’t finalised, though some functionality may already be in some browsers. Accordions across the web are frequent and implemented in many different ways. The details element seeks to replace accordions with native HTML5 functionality – no JavaScript required. Inside the details element is a summary element, which becomes the clickable area of the accordion. Everything else inside becomes the content of the accordion. A Boolean attribute called ‘open’ can be used to determine the default state of the accordion on page load.…

DEPENDENCY MANAGEMENT IS IMMINENT One of the most exciting parts of the ES6 specification is the introduction of modules. Similarly to other languages, this allows for the definition of functions being exported in one file and imported into another. A lot of ES6 compilers support this feature, as does Node so import statements are common ground for most front-end developers as most modern front-end workflows are Node-powered. Currently this feature is not supported by any browser vendors, and this item is still being drafted in the ECMAScript 2016 specification, but it eventually will be supported. The benefits of this should be immediately obvious to anyone who has tried any sort of JavaScript dependency management system. Import coming to the browser promises proper dependency management once and for all, rather than…

Reading time indicator BIT.LY/1IUCJTG A new feature on blogs is the concept of reading time. The basic premise is to display next to the article how long it will take to read a passage of text or the entire article. NgReadingtime is a handy directive for this. Simplified file uploading BIT.LY/1P8IUZW File uploading on the web has never been a simple process, always requiring multiple moving parts to get things working. This handy directive – ngFileUpload – should be a large time-saver. Not only is it straightforward to implement, it is fairly feature-rich: providing upload progress, cancelling, aborting and image cropping. Google Maps directives BIT.LY/1QQEBGD Angular Google Maps is a set of directives for the Google Maps JavaScript API. Angular Google Maps makes handling multiple markers, infoWindows and polygons very…

USE THE NATIVE WEB AND GETUSERMEDIA HTML5’s getUserMedia API allows developers to capture media streams from the device – video, audio, and both – at the same time. This capability isn’t that exciting on its own, but the getUserMedia API gets interesting when paired with other HTML5 technologies. For example, the video stream returned by getUserMedia can be applied locally to a video element. That video element can be drawn to HTML5 Canvas, which in turn can be turned into a dataURL and then into a blob, ready to be sent across a WebSocket to connected clients. Being able to bring the video stream into HTML5 Canvas means you can manipulate the image before it gets sent to the server. It would be easy to scale the frames down, run…

HIGH-PERFORMANCE WITH EXPRESSJS Express.JS is a fast, barebones server-side web framework running on Node.js. Express helps developers implement and deliver high-performance Web APIs with minimum fuss and makes them more efficient than ever. Express boasts a lot of flexibility, with a bunch of middleware and methods that do most of the heavy lifting for you. This enables developers to get right to the root of their problems and for them to start authoring more robust APIs and working with data almost immediately. With Express, a developer’s first basic API might only be five source lines of code long.…

PLAYCANVAS MAKES WEB 3D REALISTIC HTML5 Canvas has been a fantastic addition to the web’s feature set for 2D experiences, allowing for easy adoption with straightforward APIs, documentation, and generally quick development times. Despite 3D experiences with native web technologies being a reality for the same amount of time as 2D ones, there hasn’t been the same level of progress in the area. Until recently there wasn’t much community, discussion, or publicity over 3D web experiences. Most publications on 3D web experiences are very esoteric in nature, making it hard for even experienced programmers to get to grips with the technology. Even drawing something as simple as a triangle in WebGL means learning about things called shaders and understanding what a buffer is. PlayCanvas is a bleeding edge web platform…

Snippets In the left-hand panel of the Sources tab is another tab called Snippets. This area is a sort of scratch pad that allows for authoring/execution of arbitrary JavaScript. Watching variables The right-hand side of the Sources tab is a panel called Watch. It’s possible to add variables and expressions here and see what they’re evaluated to during run-time and debugging. Call stack Below Watch is Call Stack. During debugging this will list in reverse chronological order the function calls it took to get to the piece of code currently being executed. Scopes and closures The Scope pane holds all variables and closures and their values during debugging. This can be used to visualise the number of different closures the code is using. Network panel and TTFB Inspecting an item…

The art of getting good at design is similar to the art of getting good at anything, it’s all about practice much like football, cake making, DIY or languages. Except for one major thing: doing creative work is not only about the physical output that people see, there’s lots more that needs to go on behind the scenes; you have to keep putting in, which effectively means there’s a requirement to remain constantly curious. It’s important to be interested in everything. Absorb as much as you can, from everywhere. You can’t expect your mind to create ideas from thin air, that’s like expecting a car to drive without petrol. The more you’re able to absorb, the more you begin to notice, and when you begin noticing things then you will…

1. KEEP A SCRAPBOOK Go traditional and put ideas into a physical book, then keep a tab on it digitally with Pinterest In the age of bookmarks and favourites, we all have digital designs, websites and campaigns that we have loved over the years, but it’s as important to suck up what’s going on offline as well as on. If you’re out and about and see a flyer for a bar or restaurant, why not bring it home and keep it in a book? The mind works in strange ways, and sometimes you don’t need to see that flyer again in order to remember it. The fact you brought it home will act as an anchor for the thing itself. For example; you see a beautifully illustrated image in a…

The PhoneGap Desktop app provides an easy way for you to create and sync the app you are working on, from the desktop to your phone. The PhoneGap app must be installed on your phone for this first though, and once this is done you can then easily pair it up with your devices. 1. Desktop app Download the latest version of the PhoneGap Desktop app from docs.phonegap.com/getting-started/1-install-phonegap/desktop. The Desktop app is an alternative to using PhoneGap CLI (command line interface) and contains various packages such as Node.js within it. Once it downloads, simply double-click to start installing it on your computer. 2. Install on your computer Follow the on-screen prompts to install the software for your operating system. The Windows installer requires you to select a location to install…

PhoneGap gives Sworkit the competitive advantage to build and deploy quickly with just a small team of developers. Thanks to cross-platform development, they’ve been able to create nine apps that provide specific workouts to a wide audience. Sworkit has had over ten million downloads and still continues to grow. The Sworkit apps are now a complete fitness platform that was built by just three full-time engineers. As mobile devices and mobile operating systems become even more performant, and with frameworks like Ionic providing the UI, the team no longer see hybrid development as a lesser alternative to native development. Instead, they look to make use of advantages such as their single codebase, incredible web stacks and APIs, to immediately deploy new updates to app stores without new submissions. What’s more…

For the last few years, the web platform has been introducing ever more powerful APIs to compete with the large array of powerful features native apps offer. This pseudo-arms race of platforms has been going for quite some time now, and despite a great number of impressive Web APIs, native platforms have the higher ground when it comes to designing and implementing new features. After all, they control what the browsers can do, right? Well, what if, instead of trying to catch up with the latest and greatest of native features, we tried to create functionality that only the web can offer? What if we embraced the web’s ability to become anything in as short a space of time as it takes to type a URL? This is the idea…

In a world of code, frameworks and libraries, the web’s favourite image editor rarely gets a mention when it gets an update. Many of us are still using the last version of Photoshop that came out on a physical medium. Out in the wild there will even be those who are clinging on to even older versions from yesteryear. Photoshop is a stalwart of the industry and the fact that there are still thousands of designers using older versions is testament to how good the software is. But, as in the life cycle of any software, there comes a time when inevitably you have to say goodbye to the old (maybe reluctantly) and embrace the new. We know you might be asking why, thinking ‘There is nothing wrong with the…

01. Lawrence Boone booneselections.com Subtle line drawings spring into life as the page scrolls and content makes an unexpected appearance. 02. Because Recollection because-recollection.com An intense visual experience taking the visitor through a host of music artists. 03. The Forest is Real theforestisreal.com Full-screen video and ambient noise. 04. Survive the Holidays survivetheholiday.com Pretty illustrations and cute animations. Graphics Drew Millward drewmillward.com There’s a lot of talent on show here. Check out Drew’s site for some truly brilliant and gorgeous illustrations. Colour picker Kung Fu Hustle bit.ly/1Qljage Typesetter TT Slabs Condensed bit.ly/1I6nXyY A strong font for strong headlines and design presentations. Matchpoint bit.ly/1YhnJan A sports-inspired typeface that is sleek and unique looking. Themematic Outdoor bit.ly/1Utw2PM A clean and contemporary photography theme with multiple variations on the front-page design.…

“PHP has a bad reputation, but it isn’t a dead language” At the start of the millennium, programming libraries for many languages were being set up and populated by developers to share and reuse code. PHP communities came together slightly later so they missed their opportunity to set up similar shared libraries at that time. As a result, each team of developers has had to create their own proprietary libraries when working with PHP. This has affected the quality of PHP projects as PHP developers cannot draw upon shared code and then use it as a template to cut corners like other users of some of the programming languages that are out there. The history of PHP has given it a reputation for bugs, and applications written in the language…

1. Loading optimisation For this project, Stinkdigital developed a custom cascading loading method to ensure a seamless experience. First the UI elements are loaded and then the feathers will appear during the loading animation, before finally each model picture loads up. At this point, the user is free to enter the experience while the frames that are used in the character animations are loaded. For devices with more limited performance, only one frame is used for each character. 2.3 D environment The 3D environment is generated using WebGL (khronos.org/webgl) during the loading and rendered into a renderer <canvas> element. Each model within the scene itself is positioned so they look like they are interacting. The feathers are randomly added to the sphere and in order to add depth to the…

With a new design in the bag it’s time to bring the project to life. Digital design was key, but bringing the right photography into the experience would help raise the site to new levels. Designer Dan Jones gives Web Designer the inside story. “The visual design duties were mainly undertaken by myself and Jon [Syrett], with most of our time dedicated to photography and editing. We were briefed by Tom (creative director) around potential themes, photography style and most importantly, how the website should make you feel, what makes Brew Tea Co different. “The first challenge was finding the theme that suited our needs, [it needed to be] something that looked great and was responsive, with the flexibility to style every element individually to avoid run-of-the-mill theme looks. “Next…

bit.ly/1Niwtrj We recently worked on another great project with The Body Shop to help launch their new fragrance whilst at the same time engaging their social media community. Have you ever struggled to decide which scent is right for you when choosing a fragrance? Well, along with The Body Shop team, we design, built and launched a Facebook app designed to do just that! We created a Facebook app to showcase the full summer range of fragrances and invited users to take part in a quiz to find their perfect fragrance. The quiz gave users multiple choice questions about themselves, their favourite scents and environments in order to match them with their perfect scent. The result page then linked to the product page on the eCommerce site to activate the…

Prettify local links STYLING WITH :LOCAL-LINK CSS4 selectors introduces the :local-link pseudo-class, which can select and style internally facing links. A positive integer can also be passed to :local-link to target links by depth, eg http://example.com/my-page would be targeted by :local-link(1). Soon to be gone are the days where JavaScript had to be used to do this. Validity status of code DETERMINE VALID AND INVALID INPUTS The range pseudo-class can be used to select and style elements based on their validation status as determined by HTML5. There are both :valid and :invalid states. This can be used to give instant visual feedback to users as they complete forms, without the use of JavaScript. This is in most modern browsers today. Making code unalterable SELECT AND STYLE WITH :READ-ONLY With HTML5…

SIMPLIFY YOUR EXPRESSIONS Arrow functions, or arrow function expressions, are a lovely new piece of syntax from ES6 to make declaring anonymous function expressions shorter and less verbose. Arrow functions can be used to pass multiple arguments with a slightly modified syntax, should they be required. Along with the nice new syntax, arrow functions also lexically bind the ‘this’ value and this is where things begin to get a bit more interesting. In most ES5 applications, Function.prototype.bind is used to take the ‘this’ value from another scope and apply it to the current function’s context – usually when dealing with callbacks or other asynchronous code. In practice, this means .bind(this) can be eradicated all together, thanks to ES6 arrow functions. There are examples of this use of arrow functions available…

USE THE LATEST STRING FEATURES String manipulation in JavaScript has always been notoriously poor. ES6 brings template strings to the table, which have some advanced features including: multiline strings, string formatting, embedded expressions, and something called string tagging. Normal strings in JavaScript can be declared with double quotes (“ “) and single quotes (‘ ‘). Template strings are declared with backticks (` `). They’re able to contain placeholders which are declared with a dollar sign and curly braces (${expression}). The entire template string is always passed to a function for processing. A tag can be prefixed to a template string which will cause it to be processed by the tagged function. There is a default if this tag is undeclared, which covers all basic behaviours. Multiline strings could be achieved…

LAZY ITERATION WITH FOR-OF AND GENERATORS While for-of provides a nicer syntax for iterating over types like strings and NodeLists, it can also be used with ES6 generators, providing a tidy syntax without calls to next(). This is particularly useful for lazily iterating over large a sequences of numbers. In our snippet on FileSilo, a generator called squares is declared. This generator will run infinitely using a while loop. Each iteration will yield a square of the current number (starting from one) and it will then increment that value ready for the next iteration. Generator functions usually return an object with a next() function which, when called, returns an object that looks like this: {value: 1, done: false}. For-of is being really smart here – it understands it is iterating…

HTML5 DATALIST CAN DO IT BOTH The datalist element was introduced as part of HTML5 and is underused, perhaps due to it being overshadowed by the likes of header, footer, article, as well as nav elements at the time of HTML5’s publication. Datalist is a weird mix of a select and an input element. A datalist is referenced by a normal input, turning it into a select element with autocomplete-like functionality – no JavaScript involved. Though very basic and lacking the styling that comes with the select element as standard, it is a useful element – especially when building prototypes in-browser.…

Power up IsNan NAN ISSUES ARE A THING OF THE PAST New to ES6 is Number.isNaN, which is a more robust implementation of the global isNaN() function. IsNaN() was particularly difficult to use, as it converted the passed parameter to a number to determine whether an item was a number or not. In practice, this meant passing values that convert to NaN but aren’t actually the same value as NaN would present issues. This meant isNaN(“NaN”) would have returned true, which meant developers usually had to write a lot of type checking. Number.isNaN removes that coercion issue – so hopefully there will be less bugs around these areas in future. Determine integers FOR PASSED VALUES Number.isInteger is another extension to the Number. protoype. Most developers have had to write their…

STYLE ELEMENTS THAT HAVE OTHER ELEMENTS IN THEM As part of the CSS4 optionality example on page 38, the proposed usage to style labels of required inputs actually used a new feature in CSS4 called relational pseudo-classes. This allows for selection and styling of elements that have a particular subelement within them. This is a significant innovation however is currently unsupported in every browser. For years, developers have longed for the ability to select the parent of particular elements and there have been many proposed syntaxes for this, ranging from a back arrow (a < span) to a pseudo parent class (span:parent). Unfortunately, these suggestions have usually run contrary to how CSS works, falling down when implementation is actually attempted. The relational pseudo-class looks to be the first proposal that…

DO ANIMATIONS JUSTICE AND MAKE THEM PERFORM AT 60FPS One of the most important aspects in the emerging web is the use of motion in the design and the build of new web artefacts. Google has a page on designing authentic motion in their Material Design guidelines; so let’s take a look at an excerpt (bit. ly/1O6nSHO): “Just as the shape of an object indicates how it might behave, watching an object move demonstrates whether it’s light, heavy, flexible, rigid, small or large. In the world of material design, motion describes spatial relationships, functionality, and intention with beauty and fluidity.” In summary the use of motion is becoming pretty important. One of the crucial ways in which front-end developers are needed to help realise these qualities in animation on the…

MAINTAIN WITH THE METEOR FRAMEWORK Sometime recently, someone somewhere coined the term ‘Isomorphic JavaScript’ and then pointed their finger at frameworks like MeteorJS. MeteorJS is a fullstack JavaScript framework, allowing developers to write and maintain two-halves of one codebase in the same language, borrowing the same concepts, and the same assets. In short, codebases using MeteorJS means running the same code on the client and the server. Oh, and it means writing less code too.…

Better cookies As of Angular 1.4, the $cookies service was changed and got a whole bunch of new features, including a new API allowing for getting, updating, and removing cookies. NgMessage directives Also new to Angular 1.4 is ngMessages directives, which are designed to hide/show messages based on the state of the object they listen to. Model updates Version 1.4 allowed developers to tune how a particular model updates, adding options like debouncing, updateOn events, and allowInvalid for crafting efficient, large applications. Merge subobjects Angular.merge is similar to angular.extend. Unlike extend, angular.merge will recursively descend into an object, performing a deep copy, merging all subobjects and properties together. One-time binding One of Angular’s innovations was a good implementation of two-way data binding. A much requested feature was also one-way data…

Every developer out there will set off with good intentions or they will stick to a consistent code style and try to avoid common pitfalls or mistakes. But even the best of us can stumble here and there. Linting your code can help you avoid a lot of simple issues and even some that are more complex. For JavaScript, there is a fantastic selection of tools available to check the quality of your code, but it’s worth keeping in mind that the tools can only do so much. Static analysis is a form of linting that will inspect the files you have created, and look at the code contained for bugs, typos, bad practice and potential pitfalls. You’ll then be provided with a report that will state the file, line…

“What you make is what counts, not all the ideas you had but never acted on. So spend your time doing. It’s only by doing that you get really good at what you do.” Stuart Semple – Artist “Stay curious, talk to strangers, take risks and don’t be afraid about ‘looking stupid’ now and again, because often these are the ideas that are the most surprising.” Mark Sephton – Creative director “Don’t always stick with your first idea and present it – produce version one, give it a day or two then go back to that version and review it before showing it to the client. Nine times out of ten, you’ll always think of a better way to approach something.” Tom Wittlin – Creative director “Make sure that you…

Since it’s grown to become a serious contender to hotels and BnBs around the world Airbnb has always focused on user experience first and ‘fluff’ second. From the first page when you’re greeted by a wonderful looping film bringing your journey to life already, you get the impression that the design of the site has been geared entirely around achieving what you want to achieve, not what the company want you to do. There are no frustrating promotions, adverts or popups asking you to buy extra travel insurance, or book a flight and save and so on. It’s all about finding a property in the location you want to visit. Conduct a search on desktop or larger and you’re returned with one of the most intuitive and well-designed interfaces yet…

Part of Spotify’s ongoing campaign is connecting directly with their existing listeners without being patronising, yet retaining their reputation as a cool digital brand at the forefront of new music. This year they released a clever single-page website that, once you connected to via your regular Spotify account, gave you a breakdown of musical artists that you discovered before they became big. A really simple concept but hugely successful and immediately gives their customers a giant ego boost by celebrating how cool they are. In a similar way to Airbnb, this site demonstrates how thoroughly Spotify understand not only its customer’s needs but also their emotions and desires. While it doesn’t actually provide any major function per se, it creates a real sense of competition so people can say to…

Like all good design solutions, PhoneGap solves a very real problem for developers. If you need to make an app and you need to release it across different mobile platforms, then you have to set aside a huge amount of time, to understand those platforms and to take full advantage of what they have to offer. If only there could be an easy way for you to use well-known development skills to publish your app across many different platforms! PhoneGap was first conceived at Nitobi Software, a small web consultancy studio in Vancouver, Canada, in 2008. One of their core beliefs was that the web had solved cross-platform development. Yes it has its quirks with different browser implementations, but generally a webpage looks and operates pretty consistently across all platforms…

Mallzee mallzee.com Mallzee is a personal stylist in your pocket. It helps to pull in over 200 million products for people who love fashion but are too busy to spend time shopping. The style feed enables its users to get specific content that they maybe interested in. The app was featured on the iOS store, giving them great exposure. ViceVersa app.viceversa.io This app is to help people make tricky decisions. For example, if you were thinking of spending a holiday in New York or San Francisco but are not sure which, then the app lets you poll other people to get a general consensus about which is the best option. You can set up some categories to follow such as technology. Untappd untappd.com Untappd is a social drinking experience. It…

Devgirl’s Weblog devgirl.org Holly Schinsky is a developer evangelist for Adobe who is currently focused on mobile development using PhoneGap, HTML/CSS and JavaScript. She has over 16 years experience in software development and her blog is filled with tutorials and announcements. Shazron’s Cordova Blog shazronatadobe.wordpress.com Shazron is a developer working on Apache Cordova and has an incredible amount of resources for the more development-minded reader. There are a number of posts on why certain things don’t work, and it’s interesting to read how these solutions are added to PhoneGap. Brian LeRoux on Twitter twitter.com/brianleroux Brian LeRoux is a member of the PhoneGap team and he actually wrote the first DOM UI library for mobile JavaScript, called XUI. He doesn’t have time to work on that now as he is too…

Traditional web development took place on a LAMP or WAMP stack: the acronym refers to a combination of Linux/ Windows, Apache, MySQL and PHP. Ever-improving JavaScript performance and the XHR request object paved the way to a new style of webpage. As Web 2.0 rose, a host of innovative database concepts initially researched in the Seventies and Eighties returned to the limelight in order to help developers and administrators cope with ever-increasing system sizes and the accompanying scaling demands. At the same time, PHP’s importance started to diminish. One day, a MongoDB engineer called Valeri Karpov found out that MongoDB commonly is used in combination with three other products so he coined the term in a blog post. While Node.js and AngularJS should need little explanation, Express.js currently does not…

Featured host: Cyber Host Pro www.cyberhostpro.com / 0845 5279 345 About us Cyber Host Pro are committed to provide the best cloud server hosting in the UK, they are obsessed with automation and have been since their doors opened 15 years ago! They’ve grown year on year and love their solid growing customer base who trust them to keep their business’s cloud online! If you’re looking for a hosting provider who will provide you with the quality you need to help your business grow then contact them to see how they can help you and your business! They’ve got a vast range of hosting solutions including reseller hosting and server products for all business sizes. What we offer • Cloud VPS Servers – Scalable cloud servers with optional Cpanel or…

To get access to FileSilo, please visit www.filesilo.co.uk/webdesigner 01 Follow the instructions on-screen to create an account with our secure FileSilo system, or log in and unlock the issue by answering a simple question about the magazine. You can access the content for free with your issue. 02 If you’re a print subscriber, you can easily unlock all the content by entering your unique Subscriber ID. You can find this on all correspondence from Imagine Publishing, including the clear plastic envelopes your magazine gets delivered to your door in every month. 03 You can access FileSilo on any desktop, tablet or smartphone device using any popular browser (such as Safari, Firefox or Google Chrome). However, we recommend that you use a desktop to download content, as you may not be…