Table of contents for No. 283 in Web Designer

Celebrate good times The web is always moving forward. There isn’t a day that goes by without some code genius somewhere tweaking, creating or simply making a codebase better, and JavaScript is no different from the rest. “While the concept of a web component has been around since 2011, the specifications have constantly changed. In 2018 things settled down” There is always an update to a library, a new tool to make your coding life better, a new API ready to change the way you code your projects. With 2019 here, we thought it would be a good time to check out what JavaScript has to offer for the year ahead. In our lead feature (page 40) Matt Crouch looks at 25 of the best APIs, frameworks and tools that…

01. Climate thisisclimate.com A centrally placed fixed header remains the focus as the rest of the site slowly scrolls by. 02. Hamada Tea chiran-omoiire.com/en Subtle transitions bring the page into focus, and a neat animation adds panache. 03. Les aventures experience.eau.veolia.fr A simple 3D game where the user guides a bubble down the river. Try it. 04. iFly KLM 360° 360.iflymagazine.com/en Travel around and visit beautiful global locations in this 360-degree site Graphics Mixtape 2: Mutatis bit.ly/2E4hKpA Daniel Castrillón brings together different elements to create his unusual characters. Colour picker Classical Grass bit.ly/2UfIfhs Typesetter Flomic bit.ly/2SyTv76 Flomic is a geometric sans built from folded lines. Use it for headlines to add a unique twist and impact. WordPress Olvi bit.ly/2QzVsTw Big-image slider, neat animations and multiple options makes this ideal for…

aholddelhaize.com AHOLD DELHAIZE is one of the world’s largest retail store groups, with over 3,500 grocery store operations across Europe, Asia and North America. This Place was commissioned to lead user experience and design for creating a best-in-class responsive web platform; one that at its core is built to ‘white label’ principles, providing a consistent shopping experience while catering for each supermarket brand’s individual functional and stylistic needs. The design process started with a discovery phase that included competitor analysis as well as a creative exploration of what an outstanding experience could look like. This Place created a variety of designs that were tested with stakeholders as well as customers, before converging on the approach that would inform the rest of the design process. Due to the enormity of the…

Web thisplace.com Founders Dusan Hamlin, Ben Aldred Year Founded 2012 Current Employees 45 Location London, Seattle, Tokyo, Hong Kong Services [1] Design – We help maximise revenue and reduce cost through better design. [2] Strategy – We craft strategies to address today’s business challenges and define tomorrow’s vision. [3] Development – We deliver production-ready software across platforms and devices. [4] Experiments – We build intellectual property by exploring how new ideas and technologies create value. [5] Studios – We offer a fully managed digital product studio for clients.…

The CSS specification is ever-evolving. The process for implementing new features in CSS is complicated, but the simplified version is that the CSS Working Group decides on the new elements to be added to the specification. It is then up to the browsers to implement these new elements, and the browsers choose in which order to implement them, which is why we now have a mismatch of support for new features. While this may be annoying at times, it’s a much better way to do it than the browsers implementing the full specification, as we saw in the early days of the web. The CSS Working Group is made up of members from all major browser vendors and other technology companies like Apple and Adobe. Apple, having recently launched its…

1 IT’S EASIER THAN IT LOOKS New things can be daunting, but Gutenberg is surprisingly easy to pick up. Within a few minutes of using the new content editor, you’ll be creating content quicker than ever. 2 CREATE SOMETHING NEW With all-new block types and support for things you never knew you needed, Gutenberg will encourage editors to create content that breaks out of the mould and discover new ways to display content and engage with viewers. 3 PROMOTE DEVELOPER AND USER SYNERGY Because blocks standardise the way content is crafted, developers can get a better handle on what editors might be creating and predict how their themes and styles might be utilised to avoid disastrous user code clashes. 4 WYSIWYG IS REALLY WYSIWYG Going forward, with a little dedication…

1 The heading block formats headings from H1 through to H6. Inserting a heading block into the content will by default select H2, which is ideal for steering content editors into maintaining the content’s waterfall heading structure and avoiding multiple H1s on a page. Twenty Nineteen’s default settings enables editors to change heading alignment (left, centre or right-aligned) and add a HTML anchor for linking directly to a section on the page. 2 The paragraph block will make up most of your content, it is the ‘building block of all narrative’. Each paragraph has its own block, and Twenty Nineteen comes with the default text settings for text size, drop caps, background and text colour. It can be transformed easily into a quote, heading, list or verse. As you’re writing,…

“Premier provider of data centre colocation, cloud hosting, dedicated servers and managed web hosting services in the UK” Featured host: Netcetera netcetera.co.uk 03330 439780 About us Formed in 1996, Netcetera is one of Europe’s leading web hosting service providers, with customers in over 75 countries worldwide. As the premier provider of data centre colocation, cloud hosting, dedicated servers and managed web hosting services in the UK, Netcetera offers an array of services designed to more effectively manage IT infrastructures. A state-of-the-art data centre environment enables Netcetera to offer your business enterprise-level colocation and hosted solutions. Providing an unmatched value for your budget is the driving force behind our customer and managed infrastructure services. From single server to fully customised data centre suites, we focus on the IT solutions you need.…

OPTIMISE YOUR KEYWORDS Get the most from meta titles, meta descriptions, headers, image alts and URLs DESIGN WITH CSS SHAPES Recreate print style layouts and designs with the power of CSS USE IMMUTABLE.JS WITH REDUX Working with Redux means updates must not edit the state directly – Immutable.js makes it easier Visit the WEB DESIGNER online shop at myfavouritemagazines.co.uk for the latest issue, back issues and specials ALL IN YOUR NEXT WEB DESIGNER Issue 284 on sale Tuesday 5 February 2019 SUBSCRIBE TODAY Go to page 28 to learn more…

In every boardroom across the world, feverish discussions about artificial intelligence, virtual/augmented reality, blockchain, Internet of Things, wearable technology or some other form of ‘disruptive tech’ are taking place right now. Organisations are clamouring to find new and innovative ways to engage with customers and sell more stuff. It’s the natural order of things – to attempt to keep up with the competitors and avoid getting left behind. The pressure to be first to market and remain a step ahead of their competitors is huge and inevitably leads many to follow the rest of the market. This filters down through the ranks, and several projects kick off with a goal to implement something new and shiny to appease the board. A minute percentage of these projects will be successful, but…

1. Document setup The first step is to initiate the webpage document. This is the description of the webpage structure, consisting of the HTML container, which stores the head and body sections. While the head section is used to load the external CSS stylesheet, the body section is used to store the webpage content created in steps 2 and 3. 2. HTML: navigation This example will use a simple navigation that enables users to switch between the different content. The navigation links are stored within a nav container, providing advantages for SEO to indicate that the links are for navigation purposes. Each link references an article container that is to be created in step 3. 3. Article containers The available content areas are managed using article containers that can be…

“Web apps are now first-class citizens. It’s great to see browsers gain the tools they need for developers to make quality, native-like experiences accessible to all”Matt Crouch, Software Engineer at Vidsy @mattcrouchuk • mattcrouch.net 1 WEB COMPONENTS The concept of a component is used heavily in JavaScript frameworks. They are used to break apart a project into several reusable chunks that can be moved about independently of one another. But what happens when it’s time to change framework? Previously written components will no longer work. Either there is added workload to convert the components, or the project stays tied to that framework. Web components are a solution to that issue. They are written using native web technologies, are self-contained and expose values and behaviours through attributes like any other…

JavaScript is unique due to the breadth of the ecosystem. While new standards add syntactic sugar, getting them supported on browsers takes time. Babel works around this problem via automatic transpilation. The idea behind the product is simple: Babel takes in ES6 or ES7 code and replaces new syntactical elements with emulation code. Its output confirms to classic JavaScript syntax and runs on older browsers like Internet Explorer. Babel’s initial release took the world by storm. Soon after it first appeared, various frameworks like React, Vue and Ember embraced it. Developers often use the product without knowing that it works in the background – more than one popular npm project has a dependency on Babel. These dependencies transformed the release process of the predecessor into a conflict-fraught affair. Version 7,…

Custom properties have the same scope and specificity rules as everything else in CSS, enabling you to override any custom property by simply using a more specific selector. Using custom properties to implement our theme enables us to keep adding variables, and to change those values under different circumstances. We could use this technique to change the font, for example, if the font we’re using doesn’t work well on a dark background. We can change the colours of icons using SVG, enabling us to restyle an entire interface by simply changing a few custom property values. We can also use this paired with JavaScript to read and write the values of our variables, and use this to enable users to create their own themes.…

Perhaps one of the most powerful new blocks for content layout is the column block type, enabling users to create up to six columns and insert paragraphs, lists, images and more in a responsive format. With the option to make the column block full width, the page’s space is well-utilised and content can flow as the user likes. There’s a bit of a knack to find the column settings again once you’ve created and edited the block, but using Tab and Shift+Tab will help if it’s proving difficult to bring up the options menu with the mouse hover. Beware, reducing the number of columns after filling them up will delete the content in the removed columns, so make sure to move your blocks out of the column structure before editing…

“No matter what your background, you can fast-track your career and become a web or software developer in 12 weeks .” Featured: Northcoders northcoders.com Twitter : @northcoders Facebook: Northcoders About us Northcoders is the coding bootcamp for the north, based in the heart of Manchester and built upon northern values of grit, determination and community spirit. No matter what your background, you can fast-track your career and become a web or software developer in 12 weeks at their full-time bootcamp, or fit their course around your life with their 24-week part-time bootcamp. Their internal career support team will help find you work as a developer, setting up interviews with your choices of Northcoders Hiring Partners across the north of England. What we offer • Full-time: Fast-track your career in just…

Browsers – everyone is using them, but as we all know some are more popular than others. Chrome is way out in front in the popularity stakes. According to stats from StatCounter, Chrome has a market share of around 60 per cent worldwide. Microsoft’s reign in such a position happened a very long time ago (in browser years). As Internet Explorer’s popularity waned, Microsoft looked to its new Edge option, but it was all too late. Google had conquered the browser market, and there was very little hope of the software giant ever getting back to the glory days. A quick glance at the stats to the right will show you exactly how popular the IE/Edge browser is in today’s market. Has the popularity of Chrome finally persuaded Microsoft to…

SSVG has been around since the early 2000s, and yet there are still interesting ways that designers are finding to use it. In this tutorial the focus will be on the filters that are applied through SVG, but instead of applying them to an SVG image they will instead be applied to any regular page content. The way the filter is applied to the SVG is actually through CSS, by telling it what ID the filter has. Using that same idea, the filter can be applied to regular text, for example. The good part about this is that you can add some great graphical looks to your text, which would have only been previously possible by applying a number of Photoshop filters and saving as an image. Using the SVG…

State is a big part of a React application, which is why Redux is commonly paired with it. That data often comes from a database, which requires a request and a response. For some applications, this communication can be constant. It can be tricky trying to manage solely within React components. This also introduces some new problems – what happens if it loads slowly, or doesn’t load at all? Every component dealing with asynchronous data would have to contain logic to handle these scenarios. A ‘thunk’ is a concept that can help with this situation. Each thunk is a function that returns another function. That function can then be called at a later point, much like a callback. If we could dispatch a thunk instead of an action object, we…

When Java hit the market, decompilers caused a moral panic. Alarmist newspaper reports claimed coding to be at the neigh of the apocalypse, with IP theft posed to become popular sport number one. While the world obviously did not end, protecting algorithms and cryptographic secrets is a sensible approach. If your programming processes are more than one click away, attackers will prefer to clone a competitor’s software. Bots and other miscreants combing the internet for AWS or Azure credentials usually do not bother with obfuscated code – the next website’s login information can also be used to mine bitcoin and can be harvested with less effort. Obfuscating JavaScript used to be complex. However, the process has become significantly easier during the last few years. Today, even small companies can and…

“Gutenberg is going to reinvent the way we write and display content on the web, bringing powerful tools to the hands of all WordPress users, from editor to developer”Sarah Maynard, Freelance WordPress Developer www.sarahmaynard.net WordPress 5.0 is slated to bring the biggest change to the CMS in a long time. With the rollout of Gutenberg, a block-based content editor, WordPress is taking a huge step towards bringing easy, responsive layouts into content editing. It’s the first step in a three-stage plan to revolutionise content, templates and eventually WordPress site-building as a whole. Gutenberg enables users to form their content out of responsive blocks – similar to site-builder tools like Squarespace – to create posts and pages that mould easily with their theme to any screen size. Theme editors can style…

Reusable blocks are a new integral function that enables you to save a block and reuse it in any content. When a reusable block is edited, it updates automatically wherever it has been used, without the need to manually edit every page where it appears. Reusable blocks can be updated inline or from their own administration panel by clicking the ‘Options’ button in the top right of any content editor and going to ‘Manage All Reusable Blocks’. Creating a reusable block can be done from there, or by clicking the ‘Options’ button on any block menu and clicking ‘Add to Reusable Blocks’. You can also save multiple blocks into one reusable block by highlighting content, clicking the ‘Options’ button that appears in the top left of your selection and selecting…

TinyMCE – the current tool for editing rich text in WordPress – is not being replaced. Instead blocks will use TinyMCE for editing their rich text with boundaries, such as limiting formatting to bold, italics and links. Most of the TinyMCE options will be extracted into their own unique block types. Formatting like paragraphs, lists, media, blockquotes, code and headings etc. will be split up into block types and inserted into content as self-contained sections. The original editing experience will still exist, however. The ‘Classic’ block will be very familiar to WordPress users, acting exactly like the current WordPress editor and adding a fallback for users who are not sure where to find the format type they are looking for within the myriad of new blocks. If Gutenberg or blocks…

Essential assets and resources Get textures, fonts, backgrounds and more Exclusive video tutorials Learn to code/create with HTML, CSS & JS Tutorial project files All the assets you’ll need to follow our tutorials Plus, all of this is yours too… • All-new tutorial files to help you master this issue’s HTML, CSS and JavaScript techniques • 200 Vibrant Overlays, 16 minimalist business card mockups, 61 actions, hi-res textures and double exposure gradients, 50 glossy blood splatter brushes from Sparklestock (www.sparklestock.com) Log in to www.filesilo.co.uk/webdesigner Register to get instant access to this pack of must-have creative resources, how-to videos and tutorial assets The home of great downloads – exclusive to your favourite magazines from Future! Secure and safe online access, from anywhere Free access for every reader, print and digital Download…