Innholdsfortegnelse for No. 290 i Web Designer

CoderCruise 2019 www.codercruise.com Take a 5-day, 4-night cruise out of Port Canaveral, FL. Talk technology with fellow cruisers and see some great speakers. Abstractions II https://abstractions.io This is a 3-day conference for those involved in modern software development. Check out its diverse selection of subjects. The Conference http://2019.theconference.se Two days and 40 speakers make up this conference. Stay for longer with workshops, seminars, food, culture and music as well. An Event Apart https://aneventapart.com/event/chicago-2019 The well-known and popular An Event Apart conference lands in Chicago for three days of design, code, and content. JSConf US https://2019.jsconf.us This conference is all about JavaScript, but with a focus on expanding its capabilities into robots and video games.…

1. HTML document template The document is defined as a HTML container that stores two sections — head and body. While the head section is used to load the external CSS and JavaScript files, the main content elements of the page are stored in the body section. The visible content is defined in step 2. 2. HTML: link list The page content consists of a list of links. Each link has an attribute applied called “data-icon”. This attribute will be used by JavaScript and CSS in the following steps to decide how the cursor icon should be presented. Other than this, the HTML is set as a collection of list items and anchor links. 3. CSS: link hover Create a file called “styles.css”. This step sets the…

“Trading in custom stationery and office supplies, Bookblock serves up an elegant eCommerce shop front with innovative features.” https://business.bookblock.com Colours Tools WordPress, WooCommerce, jQuery Fonts Nadia font, which was designed by Alex Kaczun and published by Type Innovations, is featured across the site’s headings. Larsseit font, designed by Nico Inosanto for Type Dynamic, is used in Medium and Light varieties to style the subheadings and paragraphs.…

We’ve worked with Aperian Global for over two years. In that time, we’ve worked to modernise their GlobeSmart products, which help individuals, teams, and organisations work effectively across cultural boundaries. To do this, we prioritised working iteratively with Aperian, ensuring that our team had tight feedback loops and many opportunities to discover new information and improve the product. Our team sought feedback from users by testing new navigation and pages in a prototype. This helped us create an exceptional app that was easy to use and intuitive for Aperian’s users. Aperian Global also wanted help creating an internal product development team that could continue to carry out the vision we created together beyond the Phase 1 MVP. To accomplish this, we helped them to draft a job description for internal…

If you’ve use a preprocessor like Sass, or indeed a programming language like JavaScript, you’ll no doubt be familiar with the concept of variables — values that are defined for reuse throughout your code. Custom properties enable us to do this in our CSS, without the need for preprocessors. Variables can be set at the `:root level (creating global variables) or scoped within a selector. They can then be called using the syntax var(--myVariableName) . For example, we might set a variable called --primaryColor like this: Custom properties are inherited, which has some very useful implications. One of those is theming. Take the above example: We can define a global variable ( #f45942 – a bright orangey red) for `--primaryColor at the root level, so every instance where we use…

WITH FALLBACK To test for support of a single property value, we can provide the fallback first. In this example, we’re providing a flexbox fallback for browsers that don’t support Grid layout. THE ‘NOT’ OPERATOR We can test whether a browser doesn’t support a feature by using the “not” operator in our query. Be mindful of browsers that don’t support feature queries, but do support the feature you’re querying for! MULTIPLE CONDITIONS The `and and `or operators allow us to query for multiple features, and only execute the code inside the query if the result is true.…

BLEND MODES If you’re familiar with design tools like Photoshop and Illustrator, you might be aware of blend modes and how they can be used to produce different effects on images. The way blend modes work is to blend two or more layers together using mathematical formulae to calculate a resulting value for each pixel. The layers could be anything — images, gradients or flat colours. Some blend modes produce a darken result (e.g. multiply, which multiplies the pixel values of the layers), some a lighter one (e.g. screen and overlay). We don’t need to understand the maths in order to use them, however. Playing around with different blend modes can give us a good feel for which of them produce the desired results when combined with different layers. With…

Front-end developers have hacked layout with whatever tools were available to use at the time — most recently flexbox, which a lot of modern grid systems use. But flexbox was never designed for building strict grids — its purpose is flexibility! CSS Grid is the first specification that’s designed for two-dimensional layout, allowing us complete control over building a layout and placing items on both the row and the column axis. Building a responsive layout with Grid doesn’t require calc() or hacking around with negative margins. The secret weapon is the fr unit — a new unit exclusive to grid. The fr unit sizes grid tracks (rows and columns) as a proportion of the available space. It takes into account any fixed tracks, gutters and content, then distributes the remaining…

In order to get the Vivus library to animate your own SVG, the path needs to have a starting point and an ending point. If you have a shape that is a complete path, ie the end point joins up with the first point, Vivus can’t animate this. This will be the case if you are converting text to outlines or drawing a shape such as a rectangle or circle. It’s really easy to get around this niggling problem though. Grab the scissor tool in Illustrator and make a click anywhere on the outside path of a graphic. There will be no visible difference, but you now have a starting point and an ending point to the shape so the animation will now work! All you have to do is…

Websites have come a long way since their early days when they were only used to display information. Nowadays, modern websites incorporate high-quality designs and mind-blowing animations. Animations in particular play a fundamental role in keeping site visitors longer and lowering bounce rates. In effect, this leads to better conversions. It is important, as a designer, to keep a handful of animation techniques to stand out. 2D physics animation is a unique technique that involves simulating physical features of different document objects such as collisions, gravity and friction. For many years, Box2D was the choice library for 2D physics projects. It was initially written in C++, and later ported to Java and JavaScript among others. Matter.js is a second 2D physics engine written in JavaScript that offers diverse features, such…

The Mine by Jamie Coulter codepen.io/jcoulterdesign/pen/NOMeEb A fully realised 8-bit styled game constructed in pure CSS and HTML — no scripts! Alex the Husky by David Khourshid codepen.io/davidkpiano/pen/wMqXea An animated CSS-only pup using SVG filters for an organic, hand-drawn feel. Droppy Woppy Input by Steve Gardner codepen.io/ste-vg/details/VEJwzb WebGL letters are dropped like packages from an angry postal employee as you type. Pure CSS 4 Designers by Julia Muzafarova codepen.io/miocene/full/WJRXVg A delightful animated character compilation shockingly built sans SVG or JS.…

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 • 50 Light and airy presets from Sparklestock (worth $19) • 19 Android phone mockup assets from Sparklestock (worth $9) • 43 Night Magic presets from Sparklestock (worth $24) www.sparklestock.com 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…

Michelle Barker Michelle is a front end developer at Ordoo, author of the front end blog CSS {In Real Life}, and a Mozilla Tech speaker. In this issue she takes a look at the newest must-use CSS features and how to implement them. You can see her speak at our conference, generateCSS www.generateconf.com Page 46 “Variables can be set at the `:root level (creating global variables) or scoped within a selector. They can then be called using the syntax `var(--myVariableName)” Adam Kuhn Adam is a front end web developer at Kong Inc by day, and creative code enthusiast by night. He is a CodePen Pro (codepen.io/ cobra_winfrey) and this issue he offers top tips to get the best from the code playground. Page 84 Mark Shufflebottom Mark is a professor…

Basic Animation Effects https://codepen.io/rafaelcastrocouto/pen/dEyvoy A collection of seven animations. Find all the CSS that you need in order to recreate the preferred example. No JS here. Countdown Timer https://codepen.io/juliepark/pen/pKybKa A simple countdown timer for the 4th of July. Modify it to include a new date, and change the colours to suit your needs. Grid Experiment No.7 https://codepen.io/julesforrest/full/VqXvgQ This example demonstrates how a grid can be manipulated and styled. A menu that you can easily envisage in print and on screen. Pokemon Card Holo Effect https://codepen.io/simeydotme/pen/PrQKgo Pick a Pokemon card and add two types of effect to create a shiny Charizard. Don’t like Pokemon? A great effect to use elsewhere. The Cat God https://codepen.io/chenxinnn/pen/VJyNmB Animated snorting and blazing eyebrows give this cute cat a touch of style and interest. Manipulate the…

“Heavyweight WebGL skills collide with Japanese inspirations to deliver French developer Renaud’s dynamic new resume.” https://renaudrohlinger.com https://renaudrohlinger.com Colours Tools Nuxt.js, Anime.js, Blender Fonts M PLUS 1p font by Coji Morishita, and available via Google Fonts, has been used to render the Japanese Kana characters. Movement is a variable font designed by Noel Pretorius and Maria Ramos, and is used here on the headings and subheadings.…

1. HTML document setup The first step defines the web page document. This consists of the HTML container representing the full web page. This element has two child elements — head and body. The head section is used to link the external CSS and Javascript files to the web page. The body section is used to store the main content of the page. 2. HTML: content The page content consists of a nav container that stores a series of links. Take note of how the first link has the text “logo”. This first item will be hidden at first, but will become visible when the page is scrolled. You may want to place an image within this link. 3. CSS: body scrolling Create a new file called…

kub.org We worked with Knoxville Utilities Board for the redesign of their website, kub.org. During this process, we engaged in a Discovery Phase. The goal of Discovery work is to uncover the right problems to solve and develop a plan to resolve them. The Discovery Phase ensures we start with a shared vision and clear, prioritised plans for how to approach the project. In the case of KUB, we discovered that usability would be a key outcome for their project’s success. By working through a content audit and discussions with subject matter experts, we found areas where the content was repeated, and we streamlined ways to provide customers ease in accessing the information they needed. We were able to reduce the number of pages on the KUB site from 403…

Feature queries are a way to test whether a browser supports a particular CSS property-value combination within your CSS file. They virtually remove the need for feature-detection libraries like Modernizr for CSS. The syntax is similar to a media query: You use the at-rule `@supports , followed by your property-value pair, wrapping the code to be executed if the browser meets the specified conditions. Feature queries are well-supported in modern browsers, but they are relatively new, and one “gotcha” is that some browsers you might want to test for support might not support feature queries themselves. Often the best way to handle this is to provide fallback styles first (outside of the feature query), then wrap your enhancements for supporting browsers inside the `@supports rule. Be aware, feature queries need…

You’ll likely be accustomed to using media queries to detect the width and height of the viewport, and the type of media (most commonly screen or print). The level 5 Media Queries specification brings us some newer media features to (optionally) test for, which are already supported in some browsers. These offer some great benefits for accessibility. Prefers-reduced-motion Users with vestibular disorders, and those who suffer from motion sickness, may not appreciate web pages with a lot of motion, such as animations and parallax scrolling effects. Using the prefers-reduced-motion media query, we can provide users who opt out with a reduced-motion alternative. Prefers-color-scheme It’s becoming increasingly popular for websites to provide an alternative dark theme. Prefers-colors-scheme allows us to query whether the user has set a system-wide preference (using the…

The CSS Shapes specification allows us to wrap text around floated geometric shapes, creating some interesting, magazine-like layouts. This is made possible using the `shape-outside property. Similar to `clip-path , we can give this property a basic shape function ( circle() , `ellipse() , `inset() `polygon() ), or a URL to an SVG path, and in fact the two work in harmony very well! shape-outside will wrap our text effectively, but it won’t affect the floated element. If we want the text to look like it’s wrapping around the image or floated object, we can use the same value for `clip-path. Use `shape-margin to add whitespace between the shape path and the content wrapping it. Firefox has a shape-path editor within the dev tools panel, which is especially useful for…

Last issue, the CSS Framework Bulma was in the spotlight, and we built a basic website using the built-in CSS classes, colours and fonts. Most projects will require you to work to brand guidelines, or at the very least break free from the standard Bulma colours. Fortunately, Bulma is built with a broad scope for customisation, and with 415 Sass variables, an entire website can be re-themed with just a few lines of code. It is also modular, and customisation can mean importing only part of the framework, so if a project only requires the column classes and grid system, that’s possible. But it’s not quite as simple as changing a few lines in a CSS file like you might be used to. Bulma is based on Sass, one of…

Once you learn the basics of working with matter.js library, navigating through demos and real-world applications created using the library will ensure you hone your skills in developing using the library. First, explore a wide range of examples that are already using the library. The resource is maintained here: https://github.com/liabru/matter-js/wiki/Gallery. Notable examples that should motivate you towards investing time to learn the library include; Game of the Year by Google: https://gameoftheyear.withgoogle.com and Pablo the flamingo: https://pablotheflamingo.com. A second resource is http://brm.io/matter-js/demo/#mixed, with numerous demos and links to the source code employed in developing them. Assess the different demos, and try to understand how the library is utilized in creating them.…

Service workers act as a proxy between a page and the network. They are capable of many things, but are often used to allow applications to work offline. They can provide fine-grained control over what gets sent to the browser and when. By prefetching and caching assets, we can skip the network, and are able to respond instantly to requests. At build time, Sapper provides a list of static and generated assets for the service worker to handle. These are supplied to us through the imported “@sapper/ service-worker” package. This also includes a timestamp, so a fresh cache can be created each time the site rebuilds. To find out more about what’s possible with service workers in Sapper, head to https://sapper.svelte.dev/docs/#src_service-worker_js…

Angular’s immense popularity makes the framework attractive for tutorial authors — thanks to Google’s support, the ngconf can be considered the go-to point for all things Angular. The latest issue of the conference hosted lots of talks looking at advanced aspects of the framework — think about things such as the Ivy compiler or the new build system. Nitay Neeman’s blog has converted videos and slides into an easy-to-consume format for you. Visit https://nitayneeman.com/posts/all-talksfrom-ng-conf-2019/#keynote if you have a crate of your favourite beverage and a lot of spare time on hand.…

“No matter what your background, you can fast-track your career and become a web or software developer in 12 weeks” Featured: Northcoders northcoders.comTwitter : @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 12 weeks• Part-time:…

It’s hardly a rare occasion when Web Designer mentions that the web is ever evolving, but it is. All our favourite technologies and tools are constantly pushing forward and it is always good to see/know what’s happening. This issue it is CSS — more specifically, the State of CSS survey that has caught our eye. It seems that CSS is a little late to the teenage rebellion party, being over 20 years old, but it ‘is finally dyeing its hair pink and getting a tattoo just like it’s always secretly wanted’. Better late than never, you crazy CSS. To help finance the 2019 State of CSS survey, its logo has made its way onto a t-shirt (with annotated code snippets). Read the survey, buy a t-shirt, look good, and help…

GitHub Desktop https://desktop.github.com No need for GitHub users to be restricted to just the browser. Designers and developers can add their GitHub workflow to the desktop. This offers a unified cross-platform experience that’s open source and easy to customise. Users can quickly add coauthors to a commit, get syntax highlighting support when viewing diffs and much more. ContentBuilder.js https://innovastudio.com/content-builder.aspx This jQuery plugin is a content editor and layout builder. Team it up with one of the popular CSS frameworks (Bootstrap, Foundation, Materialize) to start creating your custom build. Reactive Search https://opensource.appbase.io/reactivesearch Search is a critical part of any build. A host of prebuilt UI components with customisable queries and configurable styles are here to help. Lebab https://lebab.unibtc.me/readme Still coding your JavaScript the old fashioned way, but want it to work…

“Promoting the Italian music festival of 3XL proportions, this event site blends artist biographies with ticket purchasing capabilities.” www.fatfatfatfestival.it www.niccolomiranda.com Colours Tools  jQuery, GSAP, Typekit Fonts The Adieu font family from Good Type Foundry is used in Regular, Bold and Black typefaces. NB International by Neubau is applied in both Regular and Mono forms for styling sub headings and text blocks.…

1. HTML document framework The first step is to define the framework of the HTML document. This consists of the HTML container that describes the document as having sections for head and body. While the head section links the external JavaScript and CSS files, the body section is used to define the page content elements in step 2. 2. HTML content The body content consists of display text and a div container using the “data-parallax” attribute. It is this container element that will be used for the parallax background, with each of its child elements to be styled with the required background images. In this example, the container has three image layers to be created from the child div elements. 3. CSS: parallax container Create a new…

There comes a point in every designer’s life, to create that defining portfolio most indicative of his or her creative personality. For some, a portfolio becomes a personal landmark, an introspective exercise in expression that hopefully doubles as an outwardly enticing calling card. That balance seems to be typified by chalovak.tv, the new home of BBDO Moscow Art Director Anton Chalov — a man not shy of standing out from the crowd. When the opportunity arose, the Russian wanted to forge an online portfolio that wouldn’t just passively demonstrate work but also entertain. “It was clear from the beginning that this collection of commercial works should be something more than just merely a list of stuff,” Chalov begins. “During this age of overexposure, content needs to stand out to become…

WHO WHAT Sparkbox helps their clients build a better web presence through web and product design and build, custom web application development, design systems, UX and UI design, mobile commerce, and CMS integration and extensions WHERE 123 Webster Street, Studio 2, Dayton, OH 45402, USA WEB seesparkbox.com KEY CLIENTS CodePen Gap Inc. (Gap, Old Navy, Banana Republic, Athleta, et al) Shoes for Crews Oklahoma City Thunder (National Basketball Association Team) Sparkbox, as it stands today, is the production of four separate companies merging. Ben Callahan (President) ran a small web design studio for several years. Moving into the same space as several other businesses, the studio combined with other agencies to develop a new identity and name. FORGE attempted to offer every kind of digital design service, but quickly realised…

ohiocertifiedsites.com After many years of working with Dayton Power & Light, they trusted us to provide a very unique user experience that would ‘win awards’ on Ohio Certified Sites. The challenge included building a site that attracts industrial businesses from all over the world to build within the Dayton Power & Light service area. Our team collaborated with Dayton Power & Light to build the content strategy, design, and development of the Ohio Certified Sites page. Part of this project included a stand-out design different from their other sites. In working with Dayton Power & Light previously, we knew the bold design would be outside of their comfort zone but was what they needed. We showed the Dayton Power & Light team how this new design would strategically yield their…

THEMING 1 We can theme a collection of cards more easily with custom properties. In this demo, each card uses two variables — a primary colour and a highlight colour — for different elements within it. For a different theme (illustrated by the third card), all we need to do is change the values of our two variables, and they’ll apply everywhere within the card. https://codepen.io/michellebarker/pen/MdNXyQ COMPLEMENTARY COLOURS 2 The HSL (hue, saturation, lightness) colour format lends itself well to custom properties. We can combine HSL with `calc() to calculate the complementary hue (from the opposite side of the colour wheel to our primary hue), and have that apply whenever we change our primary hue, with no extra effort. https://codepen.io/michellebarker/pen/vqgaLL DRY STATE SWITCHING 3 Ana Tudor developed a technique she…

In general, if we want to include a number of different fonts faces of the same family on our webpage, we would need to load the same number of font files. The more font files you load, the more weight you add to your page, with an impact on performance — so it’s usually wise to load a maximum of three or four font files (depending on your performance budget). Variable fonts change all that. They enable us to load a single font file for an entire font family. Although this file will usually be larger than a single font would, if you want to take advantage of different weights and styles, then a variable font is the more performant solution. VARIATION AXIS Not only that, but with variable fonts,…

Many websites take advantage of JavaScript libraries to provide a slick, native app-like scroll experience, where content “snaps” to points as the user scrolls. Now, with the Scroll Snap specification, we can do this right within our CSS file — there’s little need to import in heavy JS modules to bloat your page! To implement scroll-snapping we need an element to act as our scroll container. The direct children of the container dictate the points that will be snapped to, and can be aligned in various ways within the snap area. POSITION: STICKY Tip: Scroll snapping can be even more effective when combined with another new CSS property value — position: sticky . This position value “sticks” an element to a specified position while scrolling within its container — another…

We already have npm waiting for us to save the tutorialstyles. scss files and compile it down to CSS. Because Bulma covers so much, the tutorialstyles.css is likely quite large. A solution to this would be to minify the file. Minification is the process of stripping out all the line breaks and formatting of a CSS file to make it smaller and quicker to load. This will make the file unreadable, but working in scss eliminates the need to read the compiled CSS. Node-sass includes an option for compressing the CSS, which will achieve this result. To enable this, open package. json and edit the “CSS-build” line of the script. After css/ tutorialstyles.css and inside the quote add --output-style compressed. It should look like the following “css-build”: “node-sass --omit-source-mapurl sass/tutorialstyles.scss…

Sapper has the added ability of being able to generate a static site without any extra development effort. This means it can be hosted anywhere that hosts static files, such as GitHub Pages, Netlify or Amazon S3. It can be cheaper and faster if the site’s content rarely changes as it can be cached on servers around the world. Running “sapper export” will build the site. Once complete, it then hosts it on its own server and starts to crawl the site, clicking on any links it finds. Every page it visits it will save and create its own HTML file. Of course, not every site is a candidate for static rendering. If it requires authentication, or has lots of content that frequently changes, a server-backed approach will still achieve…

“CodePen is an unbeatable tool for hassle-free iteration of creative code, eliminating the headaches of generating fresh development environments, allowing users to easily tackle myriad front-end concepts ranging from the whimsical and ridiculous to the practical and deploy-ready”Adam Kuhn codepen.io/cobra_winfrey // konghq.com SPIN IT UP FASTER WITH A TEMPLATE RAPID PROTOTYPING GETS TURBOCHARGED WITH DIALED-IN DEV ENVIRONMENTS Every developer at some point has likely felt real pain when setting up a local development environment, no matter the stack; even a boilerplate setup can require far more time than one is looking to invest to create and test something like a few submit button prototypes. With CodePen, you’re already there — an IDE standing ready for you to easily dump the contents of your creative mind. But by using CodePen’s template feature,…