Innholdsfortegnelse for No. 292 i Web Designer

Agile Cambridge https://2019.agilecambridge.net A practical agile development conference where participants can connect and learn from their peers and leaders in the industry. Fronteers https://fronteers.nl/congres/2019 A host of stimulating, thought-provoking talks from leading expert speakers across two days in Amsterdam. FrenchKit https://frenchkit.fr Head to this conference to meet, discuss, and learn from the most prominent developers involved with Apple technologies. Canvas https://canvasconference.co.uk A single-day conference with a focus on digital products, you’ll hear insider stories from people solving real customer problems. Full Stack Europe https://fullstackeurope.com A conference for developers who want to learn across the stack. A host of speakers and workshops will help boost your current skills.…

1. Initiate HTML document The first step is to define the structure of the HTML document. This consists of the HTML container representing the full document. This element stores the head and body sections. While the head section loads the external CSS stylesheet, the body section stores the page content elements created in step 2. 2. SVG: text elements Text elements are defined as an SVG image to benefit from extended styling features of SVG. This requires the text elements to be placed inside an SVG container. Without the regular content flow of HTML, each text element requires x,y positioning to be defined. Percentages are used for these positions in relation to the the parent SVG container. 3. CSS: SVG container Create a new file called “styles.css”.…

“Making things that matter, Clique Studios’ “content experience” approach is evidenced across this bright new portfolio.” https://cliquestudios.com https://cliquestudios.com Colours Tools WordPress, jQuery, GSAP Fonts Young Serif by Bastien Sozeau is the playfully distinctive serif typeface that styles the main headings and menu links. Celebri Sans designed by Alfredo Marco Pradil and published by Hanken Design Co. is used in Light, Regular and Medium.…

REQUEST AN EMAIL Make sure only valid email addresses are entered. Emails have a specific structure, but by using the “pattern” attribute we can restrict the type of address, such as “.com” only. REQUIRE A NUMBER Depending on whether the user would use a mouse or a finger, the browser can show an appropriate interface. For example, touchscreens would receive a numeric keypad. WORKING IN RANGES Ranges are great when a specific value is not required. This could be used for a volume or zoom control where the user can change a value between two values. INSTANT DATE PICKER Users choosing from a calendar means they are less likely to add an invalid date or format. Adding a upper and lower date limit updates the interface to match. WHOLE COLOUR…

Modern websites require lots of HTML. Complex layouts with multiple different views and states can be difficult to create with just a text editor. There are many HTML generation tools out there, but here are a couple of popular ones to try today. Generating on the fly When writing large amounts of HTML in one go, it can get tedious writing each tag out by hand. When writing out a list of links for example, we need to make sure the <ul>, <li> and <a> tags are all open and closed in the right place otherwise the links may not work. Emmet is a tool that can save lots of typing in scenarios such as this. It allows us to create elements by typing out a CSS-like selector. It can…

Cloudflare is a content delivery network that sits between a website and its users to serve assets faster and from a location close to them. It is especially useful for websites with high traffic as the page is served from a cache instead of requiring the server to load it for each visit. To set up Cloudflare, create a free account and add the website address. Cloudflare will give two new nameservers – login to the domain registrar to replace the current nameservers with these new ones. Cloudflare will automatically populate the current DNS records. When the new nameservers are active the website will be protected by Cloudflare, causing a sharp decrease in server load and bandwidth used.…

Technique 1. Interface content To make the video navigation, we’ll need to place an image and a video on the screen and make the video hidden until it’s time to display it. Add the HTML code to the body (see FileSilo). 2. Format it up In your CSS file or style tags, add the following code to remove the spacing edges of the browser and change the background colour. The container is made to fill the screen so the image can be placed in the middle. 3. Hold the image The holder class just sits in the middle of the container, and it hides any overflow so that the image can scale up and down on rollover. The image is set to fill the holder div object. 4. Rollover effect…

Ionic components (built as Angular web components) can make direct use of the powerful RxJS library which enables much cleaner code for asynchronous event handling, essential for building robust apps. The use of RxJS Observables can be seen in the example app with the async pipe, which enables an RxJS Observable to be embedded directly in the html, and they are automatically subscribed to and unsubscribed from when the page is displayed and hidden. With minimal code, this achieves a design where while there is no data, nothing is displayed (you can easily substitute a loading message), and subsequently the page will update if the underlying data changes for any reason, whether the result of a user action or some other event, such as losing connectivity.…

Even though Tabulator has powerful formatters, a developer sometimes needs more. The formatting API was designed so that third-party widget generators are embeddable. Your code then receives a callback whenever a new row is to be displayed. Your code’s job is the creation of a DOM snippet, which is then embedded into the table. The process for setting this up is somewhat involved. The figure accompanying this boxout shows a table using a variety of charts generated using the well known sparklines. js charting library as custom formatter. Its full source code is available at the website http://tabulator.info/examples/4.3#sparklines…

Matt Crouch Matt is a front-end developer in London. This issue, he covers the often-overlooked role of HTML in 2019. Discover how to use markup properly, the semantics of HTML page structure, how to use <input> correctly, tags to know and tags to avoid, how to make your own elements, write HTML faster and future features. Page 46 “ Incorrect HTML can cause more harm than good. By ensuring we get the right structure in place we can be sure the content we create is set for the future.” Adam Kuhn Adam Kuhn is a senior web developer at Kong Inc, creative coder and frequent CodePen contributor. In this issue he’ll be sharing CSS animation techniques to help you offer users a fluid, engaging and emotive experience. Page 84 Mark…

Hummingbird https://codepen.io/AndreusCafe/pen/dybXJZe An animated hummingbird that interacts with the user’s actions. It’d make a great dynamic logo to grab a visitor’s attention. Fake Hacking Program https://codepen.io/chasekaiser/pen/ogXmOK A collection of animated hacker elements. Minimal HTML, a little CSS and plenty of JavaScript make the magic happen. Palette https://codepen.io/ksyunnnn/pen/WNermXW Pick a colour from the palette and the background changes accordingly. You can add your own colours to customise. C letter animation https://codepen.io/juanbrujo/pen/RwbrYxz An undulating and mesmerising multi-lined letter C. Just HTML and CSS transforms help create the effect. No JavaScript here. Minesweeper https://codepen.io/creme/pen/EqeXNJ For those of you who like computer nostalgia, this retro Codepen will take you back and keep you occupied for far too long!…

“Reflektor Digital provides a showcase of web experiments its developers produced for the 36 Days of Type Challenge.” https://36days.reflektor.digital https://reflektor.digital Colours Tools TweenMax, Pixi.js, Vue.js Fonts Glence by Paul Chen for Nine Font is used exclusively across the site text in Regular and Black varieties.…

1. HTML document initiation The first step is to define the HTML document structure. This consists of the HTML document container that stores the head and body sections. Firstly, the head section is used to load the external CSS and JavaScript resources. Secondly, the body is used to store the content elements defined in steps 2 and 3. 2. Feature container button The feature is placed inside a container using the “textFeature” class. This example places a button element that has two child spans — start and pause. These span elements will be used to show the status that the animation of the SVG element will be changed to if the button is clicked. 3. Feature SVG The feature text is made from an SVG element that…

HTML is the foundation of every website on the web. It defines where the visuals should be placed, what they look like and what behaviour they should have. It is the first thing a browser receives, making it a crucial piece to get right even before the CSS and JavaScript. It is the main driver of the Document Object Model that allows the browser to read the structure of the page and render its contents. Elements are created by parsing the tags we write in the markup. Because of this, it’s important to make sure the HTML is correct. The language itself has been improved upon over the years to make sure the syntax used can describe the content within it accurately, and allow consumers to make sense of it.…

While there are over 100 HTML elements available, they can’t cover every situation. It may be necessary to use JavaScript to achieve the required effect. To account for this, browsers have implemented a set of specifications known collectively as “web components”. One of these, custom elements, allows us to create our own elements using JavaScript. There are two types of custom elements available – “autonomous” and “customised built-in”. Autonomous custom elements create a brand-new element and are semantically equivalent to a <div> or <span>. A customised built-in element extends the behaviour of an existing one. This allows us to keep the related semantics and accessibility behaviours expected from that element without needing to replicate it. A basic custom element Inside a JavaScript file, we create a class to keep all…

What makes this effect work so well is the timing of all animated elements working together. They are all working at slightly different speeds to bring the effect into a cohesive whole. If you had all animations just trigger at the same time, it would look very mechanical, but a slight delay here and one element moving faster elsewhere makes the effect work. Part of this is allowing one element to start transitioning out, but bring in the new element before it’s quite finished — that way, there is overlap, and much more continuity. Having multiple elements animate helps this. The cog graphic plays no role except to bind the visual experience together, which cannot be underestimated in making it feel right.…

“Delivering thoughtful, fluid animations that contribute meaningful depth to your site doesn’t have to be difficult – modern CSS properties now hand you nearly all of the tools you’ll need to create memorable experiences for your users.”Adam Kuhn Senior web developer and creative code enthusiast twitter.com/cobra_winfrey IT’S ALL IN THE TIMING GETTING YOUR TIMING RIGHT WILL GIVE YOU NATURAL MOVEMENT No matter what library or stack you choose to leverage, the timing and easing of your animations are crucial to providing a fluid experience that feels natural and intuitive for your users. Fortunately, we have many excellent options baked right in to CSS to help deliver a more organic feel. Any decent article on creating animations would be remiss to not make mention of Disney’s twelve basic principles of animation,…

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 Hypebeast presets from Sparklestock (worth $19) • 16 Minimalist business card mockups from Sparklestock (worth $16) • 50 Seamless textures from Sparklestock (worth $5) 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 only the files…

As we all know, Google Chrome is by far the most popular browser across the globe. Will its global dominance one day be challenged? It seems very unlikely in the near future. Is its popularity waning? According to StatCounter its popularity is on the rise worldwide. July 2018 saw the browser with just under 60% of the market share, while in July 2019 the market share had risen to over 63%. “Chrome’s latest version allows for easier installation of a PWA” Looking a little more closely at the different continents, the picture is very much the same. In Africa market share has risen by nearly 2%, while in Asia the rise has been more significant, reaching over 7%. Europe has seen a small rise of 1%, North America has effectively…

Eva Design System https://colors.eva.design The Eva Design System tags itself as a “deep learning colour generator”. The beauty of the system is its simplicity. The first step is to add the hex code for your brand colour. Once this has been entered, the design system creates a selection of palettes under the titles Success, Info, Warning and Danger. Hit the Export button to save. JustGage https://github.com/toorshia/justgage This is a JavaScript plugin for generating and animating nice and clean dashboard gauges. It’s based on the Raphaël library for vector drawing. Card Validator https://cards-dev.twitter.com/validator Check out this quick and simple tool that allows users to enter the URL of a Twitter card along with meta tags to see how it previews. a11y-css-reset https://github.com/mike-engel/a11y-css-reset On offer here is a trio of style sheets,…

“Red Collar agency delivers a lovingly crafted ecological message for the protection of five endangered whale species” https://save-whales.com https://redcollar.digital Colours Tools WebGL, SVG, Google Fonts API Fonts Archivo font by Omnibus-Type and available via Google Fonts is used here in Regular and Bold typefaces. Tenor Sans, designed by Denis Masharov and also provided by Google Fonts, is employed across paragraph text. FIND OUT HOW SAVE WHALES WAS BUILT SEE PAGE 30…

1. HTML document The first step is to define the HTML document, which contains two sections — head and body. While the head section is used to load the external JavaScript and CSS resources, the body is used to store the page content element defined in step 2. Storing the JavaScript and CSS externally allows them to be reused across many pages, while also keeping the web page search engine friendly. 2. HTML content The effect relies on having a HTML container element to store the letters to be used for the animation effect. This allows the same CSS and JavaScript to be reused for different text and on different pages. This example uses the “letters” class to identify the h2 element as the container of the animation…

PROJECT DETAILS PROJECT NAME Save Whales PROJECT URL save-whales.com Agency Red Collar Agency URL redcollar.digital Follow @redcollars PROJECT STATS PROJECT DURATION 14 days NO. OF PEOPLE INVOLVED 7 TEAM Denis Lomov Art director Vladimir Lukashov Creative frontend developer Anton Ustinov Creative frontend developer Alexander Prigorodov Designer Margarita Galygina 3D designer Valentina Volkova Designer Daria Konovkina Content manager The agency at the heart of our story this month is actually a returning friend of Design Diary. You may recall that we last caught up with the Red Collar crew back in issue 271, when we featured their work for Inculerate. This was a unique project that successfully epitomised Red Collar’s ingenuity, creating a memorable presence for an angel investment firm operating out of Silicon Valley. In many ways you could say…

Who  Wildlife What Interactive, experiential 360 campaigns; design and animation; live-action; development and strategy Where 3621 Hayden Ave., Culver City, CA 90232, USA Web  www.wildlife.la Key clients U.S. Air Force // Old Spice // Toyota // Amazon // T-Mobile/Netflix Wildlife was formed with a vision of bringing the storytelling and production values of film into the interactive space. Founders Scott and Jake Friedman are brothers and have been long-time collaborators, but as the tide was changing circa 2011, they took that partnership to the next level. Bedroom offices were traded for Wildlife’s first Culver City, California, office space in 2012, before expanding in 2016 to its current 5000-square-foot studio. Scott Friedman has a deep background in motion graphics and VFX, while Jake comes more from the interactive side. Both have…

You may well know these already but using them the right way is critical to good design A semantic element is one that provides meaning to its contents. A non-semantic element is typically used to apply styling and does not carry any meaning. Before HTML5 introduced a new set of semantic elements, developers would use <div> to achieve the same effect. Adding a descriptive class to that element makes it clear to the developer what that element contains, but a computer would not be able to understand it. We now have several semantic elements such as <nav> or <header> to help structure a page. We should be able to follow the structure by only looking at the tags being used. This would not be possible with only non-semantic elements such…

The HTML specifications are being revised and improved upon constantly. Browser vendors are always busy implementing the latest features to release into the wider world, which means we always get new things to try out. The WHATWG is the standards body driving changes to the HTML specification. After working towards HTML5, they now implement a “living document” approach to standardisation. This means we are unlikely to see a large “HTML6” update in the future as smaller changes to the specification now happen more frequently. Native modals One change making its way into browsers is the <dialog> element. This acts as a native equivalent to JavaScript-powered modal windows, which are a common design pattern on many sites. It can be opened and closed by toggling the “open” attribute. By default, it…

Panolens.js maintains a rich resource of examples to help you pick up the pace when using the library. The resource is maintained here: https://pchen66.github.io/Panolens/#Example. Observe that there are more complicated applications that use Panolens.js such as the Pano Theatre (https://pchen66.github.io/PanoTheater) and the interactive panorama with a 3D model (https://bit.ly/2Md1GGY). A second resource is CodePen (https://codepen.io/pchen66). Assess the different demos and try to understand how the library is utilised in creating them. Additionally, the library has a rich documentation and wiki resource available to make references whenever you are developing.…

It’s possible to create responsive websites that look great on a mobile, but you can also create native apps using the same skills. This is Ionic’s goal! But what is Ionic? Like all good development tools, Ionic is constantly refining its role in the development ecosphere, but this article will concentrate on the three key aspects: • Ionic provides HTML-based UI components that mimic native controls for Android and iOS. • It provides tools that simplify build, test and deployment processes. • Provides a standard for building apps based on Angular, with a CLI for creating components and services. So why use Ionic? Ionic is great for putting together quick, working prototypes. It is the speed of development that really stands out. That takes nothing away from Ionic as a…