Innholdsfortegnelse for No. 278 i Web Designer

“A fancy front for fancy fast food, this dynamic menu site tastefully mixes scrolling navigation with delicious transitions” Designers: BlueCheese www.bluecheese.studio Nicolas Riciotti @twodelab Colours Tools Amazon CloudFront, WebGL, Node.js, GLSL Fonts Rational TW by Rene Bieder is the typewriter variant of the Rational font family, and is used exclusively across the site in Text Medium style.…

1. Document template The first step is to define the HTML document template. This consists of the HTML document container used to store the head and body sections. While the head section is used to load external CSS and JavaScript resources, the body is a container for storing the visible page content defined in step 2. 2. Body content The visible HTML content consists of a 'header' section containing a 'h1' heading, along with a container for the main page content. The unique header section will be referenced by JavaScript and CSS to apply the image effect. The use of the main container allows the effect to avoid interfering with the main page content. 3. CSS document initiation Create a new file called 'styles.css'. This step initiates the default state…

As we rapidly grow, it is critically important that our values and vision remain intact. In March, we introduced the BASIC Culture Manual, an interactive digital guidebook that serves as a fresh approach to the employee onboarding process and builds alignment towards our collective future. The manual strengthens our company culture and attracts world-class talent, acting as an expression of our brand, a guide for our way of doing things, and as a tool for recruiting. The site includes an all-new visual language — typographic framework and adaptable identity — that showcases our history and work we’ve done for billion-dollar brands. It flips the script on the traditional PDF manual and features individual Q&As with BASIC team members, and a list of our favourite local spots in each city, all…

“The new asynchronous iterators work in a similar way, but instead of returning an object with the value and a ‘done’ flag, it returns a promise that resolves with those values” In January, the final list of features for ES2018 was confirmed. While this means they will form part of the latest standard, they will typically be implemented by browser vendors at different times. Here are some of the highlights of this year’s updates. Spreading objects ES2015 brought ‘rest’ parameters to JavaScript. By using the ‘…’ notation on the last parameter of a function it can capture any further arguments. This can be useful for open-ended functions that can combine any number of passed values. The same notation can be used to expand array values into other places with a…

The last sizeable update to the core Vue platform – 2.5 – was back in October last year. Being a minor release, it only brought with it slight changes to the platform. Improved error handling In previous versions, error handling was a problem whenever an unexpected error occurred. Developers could use the provided ‘Vue.config.errorHandler’ global method and apply it across the whole application, or ‘renderError’ inside a component. A more flexible solution was required: In 2.5 Vue introduces the ‘errorCaptured’ hook that can live inside a parent component. This hook captures any error that occurs inside a child, much like React’s error boundary concept. The ‘errorHandler’ global method can still be used with this new approach. It makes an ideal place to report errors to third-party loggers to keep an…

POGO bit.ly/2NXp5sQ Pogo is a long, sharp, good-looking font that looks superb in headings; it’s both curved and crisp, making it very versatile. FACON bit.ly/2OsMN10 A strong, capitalised font that looks dynamic and has strong movement. It’s cohesive as a group of characters. Great on posters. KOLIKO bit.ly/1Oyiofu Comes in three weights and has both upper and lower-case letters, making it good for paragraphs and text as well as headings. PEACE SANS bit.ly/21FlHST This bold font works both big and small for your projects and is versatile enough to use in a all kinds of work. LUCY ROSE bit.ly/2v3mZR1 With tons of great variations, this serif typeface is perfect for classy spreads and can be paired with strong sans serif fonts, too. KUNG FONT bit.ly/2M579fa Kung Font is one of…

“When choosing fonts for your projects, it’s important to ask yourself what kind of typeface you want to be looking at” The key to any type poster is to make it striking. When it comes to the web, it’s important to make it legible, too. Here, we’re going to be making a cool, sports-themed typography header in Photoshop that feels pretty and embellished while also standing out against its background. 01. Spell out your text Drag a Type box from one side to the other in your document, and write your title. We’ve supplied the font family, Tiki Taka, on FileSilo, so you’ll be able to use the regular font (Mediocentro) to spell out your text. 02. Alter characters Swap out some of the characters for some other characters in…

1. INSTALLATION It can take a bit of time to get Flutter set up correctly. Make sure you’ve installed: (Flutter works with other IDEs, but this is a good choice). Run all of these and install any additional components they prompt you to. Now you’re ready to download Flutter from https://flutter.io and unzip it wherever you’d like it installed. You’ll also want to add it to your path variable, instructions for which can be found on the Flutter website, to allow it to be invoked from anywhere. 2. CALLING THE DOCTOR Flutter ships with a handy ‘doctor’ tool which you can use to check it’s installed correctly. If you run: It will tell you what’s set up correctly and what isn’t. Take close note of the instructions, until it’s happy…

Those of a paranoid nature tend to reject the idea of connecting a camera to their workstation. Owners of Android smartphones can visit http://www.dev47apps.com/droidcam to download a temporary camera replacement. The product consists of a smartphone app and a desktop component that is available for both Windows and Linux systems. Once installed, start the DroidCam client on your workstation. We prefer the Wi-Fi webcam mode to direct USB connection due to the high power consumption of live video streaming. Either way, Firefox and other browsers should be able to detect the webcam once the connect button was clicked in the desktop client.…

Essential assets and resources Get textures, fonts, backgrounds and more Exclusive video tutorials Learn to code/create with HTML, CSS, JS & PHP 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 • Two more chapters from the Beginnerʼs JavaScript video series from Killersites (shop.killervideostore.com) • 21 Pixel Art Photoshop actions and 400+ Isometric Alphabet Tiles 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…

“While the later rounds of standards updates have not been as feature-rich as ES2015, they still hold lots of useful changes” Matt Crouch Matt is a frontend engineer at Vidsy in London. With the web changing rapidly, it’s always important to keep up with the latest updates and try stay ahead of the curve. In this issue, he takes a look at the best new features in JavaScript (ES2018) and its popular frameworks React, Vue, Angular and Node. Page 42 Simon Jones Simon leads full-stack software engineering teams. Like many, he’s found there to be major limitations to previous approaches to cross-platform mobile builds, and is hoping Flutter can set some of these right. Page 74 Mark Shufflebottom Mark is a professor of Interaction Design at Sheridan College. In this…

Accessibility for teams accessibility.digital.gov It’s always interesting to see which design practices the big corporations and governments are using. Are they doing it right? Take a peek at this US government ‘quick-start’ guide with sections on UX, Content, Product, Visual design and Frontend. Spectator netbasal.gitbook.io/spectator Need to test your Angular code? Spectator is written on top of the Angular Testing Framework and provides a cleaner API for testing. Term Sheets gpoitch.github.io/term-sheets Use this simple tool to create animated Terminal-style presentations. Choose colours, title, width, height and export as an SVG, animated GIF, or HTML & CSS. Popbox.js oncebot.github.io/popbox.js Popbox is a neat, tiny JavaScript plugin that enables you to create stackable modals. Include the supplied code and start making magic popups. CONTACT US AT: webdesigner@futurenet.com | @WebDesignerMag…

React Devtools bit.ly/2g5FyOk React Developer Tools is a DevTools extension for Chrome and Firefox. Users can get a look at a view of the component tree and the current state and props of each component selected. Check out this brief introduction to learn more: alligator.io/react/reactdevtools-intro Browsh brow.sh Browsh is a modern, text-based web browser. It can render most things that a contemporary browser can — HTML5, CSS3, JS, video and even WebGL. Vue-starter vue-starter.herokuapp.com A flexible, scalable boilerplate for production-ready PWAs. It has a focus on performance, development speed, and best practices. Sucrase sucrase.io Sucrase is an alternative to Babel that allows super-fast development builds. It assumes users are targeting a modern JS runtime, avoiding older ones. CONTACT US AT: webdesigner@futurenet.com | @WebDesignerMag…

1. HTML initiation Initiate the HTML template by creating the page template. This creates the document container, along with its head and body sections. The head’s primary purpose is to load the external CSS stylesheet resource, while the body section will be used to present the visible content elements in the next step. 2. Page content The visible page elements consist of the navigation container and its child links. Each child link has its own text to display, along with a page or element to navigate towards using the 'href' attribute. All required presentation settings will be applied to these elements in future steps via CSS. 3. Sort the CSS Create a new file called 'styles.css'. The first step for the stylesheet is to initiate the HTML document and body…

We launched the sophomore season of our Brandbeats podcast in March, which attracts a global audience of like-minded creatives, garnering 45,000 listeners per episode, and reaching as far as Ukraine, Japan, Spain and Brazil. Last year, we released a dozen 30-minute episodes combining music and candid industry discussions with thought leaders covering views on design, technology, art and, you guessed it, culture. Employees of BASIC sit down with creative minds to break down topics like comparing Nike versus Adidas as culture influencers, diversity in the workplace and the future of user experience with AR/VR, all while expanding into the micro trends and experiences that shift the way consumers think, work and live.…

With the introduction of ECMAScript modules in ES2015, Node has been trying to let the two work together despite their slight differences Import module The new promise-based methods can be imported from the ‘fs’ module itself. Async functions Node 8 brought support for ‘async’ functions – a new, cleaner way to work with promises more linearly. Optional catch binding Node already supports catch blocks without binding an error parameter. This is currently part of the ES2019 standard, which is coming shortly. Promise-based return ‘Async’ functions will always return a promise, regardless of the contents of the function. Be sure to resolve them at the first stage. The latest major update came in April this year and brought with it lots of small but very useful features to make the development…

Three.js supports a variety of material types: • MeshBasicMaterial: no lights required, great for baked-in lighting and backgrounds, low overhead. • MeshLambertMaterial: low overhead, light effects it, but no specular or shininess, no detail on surfaces. • MeshPhongMaterial: More reflective, shiny and supports specular colour and detail. • MeshPhysicalMaterial: Most computation heavy, but realistic and detailed. Used in engines like Unreal Engine. • ShaderMaterial: A custom shader for your textures. Build on existing ones or create your own. Properties include maps (files that affect colour values in various ways) such as bump maps, normal maps, specular maps and environment maps. You can also adjust metalness, shines, reflectivity, opacity and many other attributes.…

The triangles are created through code using a procedural process that takes the points of the triangle and turns them into a 3D model. Several iterations of the triangle are created. First in the background is just a flat triangle with a black surface colour to create the background. Then there is another flat version, but this time using the purple colour. In front of that is an extruded triangle with a bevelled edge and a reflection map or an environment map. Finally there are three line versions at the front including a dashed line. You can see the process by opening the ‘shapes.js’ file. The points to make the triangle were taken from the points of the triangle in Illustrator, taking the x and y location of each point.…

BRANDON GROTESQUE bit.ly/1dnxm70 A font that can be used for paragraphs on your website, Brandon Grotesque is a popular serif font that feels sleek and current. OBJECTIV adobe.ly/2Ke7ZV9 Objectiv has a modern feel to it, but it’s also appropriate in classic designs. It’s pretty in all weights, and doesn’t feel too quirky either. AUTHENTIA bit.ly/2NZOn9H A typeface that looks like it’s been sketched with a marker pen, Authentia is good for giving a more personal touch to posters. LUMIERE bit.ly/2LBUELY The Lumiere font family has a whopping 14 typefaces included for all occasions, and looks fantastic for vintage settings or stylish headings. Embedding Google Fonts Embedding typefaces via Google Fonts is often the simplest way to get a great typeface on your site. This is simpler to code and more…

We’ll need to wait for a stable release before it starts to become mainstream, but there are already a few apps (big and small) out there using Flutter. As well as Google themselves, Alibaba is one big name which is already using Flutter, and Groupon are beginning to work with it. A complete list of apps built with it can be found here: https://itsallwidgets.com Other cross-platform frameworks to check out REACT NATIVE https://facebook.github.io/react-native This has a lot of similarities with Flutter, and has been in use for a few years. If you like developing with JS, and React syntax in particular, you’ll feel at home with it. It uses native widgets controlled by JS code, so delivers superior performance and experience to hybrid apps. IONIC https://ionicframework.com Ionic is designed for…

WebRTC is a relatively new technology but has already managed to make great inroads into both mobile and desktop browsers. As can be seen in the figure accompanying this boxout, all major vendors support the API in recent editions. Interestingly, Microsoft provides a second implementation called ObjectRTC – Redmond-friendly developers prefer to call it WebRTC 1.1. The product “embraces and extends” WebRTC in a fashion eerily similar to Microsoft’s old Java runtimes. Even more information on the standard can be found at https://blogs.msdn.microsoft.com/ie/2014/10/27/bringing-interoperable-real-time-communications-to-the-web. Please keep in mind that ObjectRTC is limited to Windows only – using its advanced features limits the reach of your product.…

“More fireside chat than typical conference, this web flyer for Yosemite’s latest Epicurrence meetup features beautiful illustrations” Designers: Aristide Benoist aristidebenoist.com Zhenya Rynzhuk zhenyary.com Anastasia Rud dribbble.com/anastasiarud Colours Tools HTML5, SVG, JavaScript, ASP.NET Fonts The Suisse Int’l font, formerly known as Suisse BP International, appears first in Regular and Semi Bold varieties. Suisse Int’l is then also used in its 'Mono' form, with Regular and Bold typefaces found in the site’s stylesheet.…

“MY PREVIOUS PORTFOLIO WAS GETTING QUITE OLD, CONSIDERING I MADE IT WHEN I WAS STILL AT SCHOOL, AROUND THREE YEARS AGO” WHEN YOU THINK OF SOME OF THE MOST ICONIC and inspiring designs that mankind has conjured up, they usually strike an admirable balance between form and function. Sometimes such design aligns much more with artistry, transcending a beautiful surface aesthetic to still deliver a practical use. Web design as a contemporary concept really lends itself beautifully to this strain of design because the advancement in technology and browser standards continues to expand its possibilities. Where ‘pages’ were once purely passive, modern websites are far deeper and often so dynamic and engaging that they defy convention. This has seen their function change with an ambitious approach to form and presentation…

Version 6 targets an improved developer experience over code changes. In fact, projects can be updated to the latest version with no issues thanks to the improvements in tooling. Update in one go To update an existing project to version 6, the updated Angular CLI can help. When ran against a project, Angular checks the other dependencies. The package being updated is also aware of other updates that relate to it and will pull those in as well. Once those packages have installed, the update command will then go through their code looking for hints called ‘schematics’ that can help the migration process. For example, this command will install ‘rxjs-compat’ to make sure all RxJS code works with the latest version. If a third-party package includes the appropriate schematics, they…

Component life cycle changes React’s life cycle methods have been around for a long time. Specifically, ‘componentWillMount’, ‘componentWillReceive Props’, and ‘componentWillUpdate’ are often the easiest places to perform component-based tasks like adding events or updating state. Future updates to the framework open up ways to asynchronously render components. This makes applications perform better and provide a more enjoyable experience for users. Unfortunately, the work often performed in these life cycle methods makes this new type of rendering trickier. As a result, they are being deprecated and being replaced with more suitable methods – ‘getDerivedStateFromProps’ and ‘getSnapshotBeforeUpdate’ – which cover most of the same use-cases. Updated context API The context API allows information to be passed to deeply-nested child components without having to pass it through as props at every level.…

SVG clip path Using SVG’s ‘clipPath’, the shape of the SVG is used to clip the image that is sitting behind to give a really stand out effect with the large typography. Animated GIF As this website is for a movie, the image in the background is an animated GIF that plays forwards and backwards like Instagram’s Boomerang. Site help Help is given to the user to let them know that there is more content available with the arrow at the bottom of the screen. Main menu The menu is positioned at the top of the page and scrolls users down to the appropriate place on the page. Rollover text effect The SVG clipping path changes on rollover so that the text becomes italic, which means targeting a different clipping…

“There are certain rules on which fonts look good together, but ultimately, it’s all about what looks good to the naked eye” Type is something that can vary from project to project; sometimes you’re going to need to mask it, other times you’ll need to set it to bold or italic, and sometimes you can just leave it all together. Use this guide, though, almost as a checklist for what you need to do to get the best from your text project. All steps are optional! 01. Align your text You may be used to selecting the Type tool in Photoshop and simply clicking on the page wherever you’d like to create text. If you drag the tool however, you’ll have more control for where you’d like to place that…

COMPILING TO NATIVE The ability to generate native apps is very powerful. By going fully native, you ensure you can take advantage of the full range of device features, and give your users a better experience than with a WebView solution (or a mobile webpage). The downside though is Flutter will build widgets which look consistent on both platforms, but come out of the box styled more suitably for Android, so the native widgets Flutter builds don’t quite look like iOS. You’ll also get faster app startup times and improved in-app performance compared to a JavaScript-based framework, since there’s no need to load hefty runtime framework code, nor pass back and forth across a JavaScript ‘bridge’ (which the likes of Ionic and React Native use to allow JS to interface…

WebRTC – short for Web Real-Time Communication – is a by-product of Google’s acquisition of GIPS. Google open-sourced most of the intellectual property held by the video conferencing vendor, thereby motivating standardisation committees to accept the technology. WebRTC is a bit of a beast due to the breadth of issues handled by the specification. The standard does not limit itself to the provisioning of a high-speed low-latency connection system, but also provides methods to access camera and microphone hardware in a convenient fashion. The difficulties involved in the real-time processing of audio and video data led to the creation of RTCPeerConnection – a class dedicated to combining the two above-mentioned APIs. Due to the complexity of real-time communication, creating one from scratch is infeasible for all but the most experienced…

The CSS Grid layout module is a groundbreaking new way to lay out blocks of content on a web page. Elements can be placed anywhere on a page, and their position can be changed using CSS media queries to create completely different layouts for different-sized devices. A content block can, for example, be placed at the top of a mobile layout, on the left-hand side for tablets, and in the middle of desktop layouts — all without changing the HTML markup or resorting to absolute positioning. This enables elements to be ordered in the markup based on importance as opposed to visual position, a practice particularly useful for users relying on screen readers, thereby leading to improved accessibility. As CSS Grid is now supported by the latest two versions of…