Rss Bot

Last month ImagineFX celebrated its 150th issue, but it's showing no signs of slowing down. Issue 151 is on sale now, and it's packed with all the awesome advice, interviews and insights you'd expect from the world's leading digital art magazine. Buy ImagineFX issue 151 now On the cover this month is an astral-themed portrait by Tran Nguyen. Flip to the Workshop section to find out how she combined ink, pencils and paint to pull together this mesmerising design. Read on to find out what other treats you'll find inside the issue... Find out how this English artist brought Terry Pratchett's world to lifeEnglish artist Paul Kidby’s work is synonymous with the world of Terry Pratchett. The ImagineFX team caught up with him to learn how he went from honing his illustration skills under the watchful eye of a mysterious neighbour to hashing out book cover ideas with one of the world’s finest fantasy authors. Take a closer look at this award-winning artist's portfolioAaron Miller’s work has attracted clients such as Magic: The Gather, Star Wars and Dungeons & Dragons. This month, the team chatted to the award-winning artist about the importance of learning traditional techniques, and why classical religious art paved the way for the fantasy genre. Spare a second thought for your mental wellbeingArtists have a reputation as free-spirited beings, but look closer and there's a tendency towards perfectionism and the unnatural pressure of being creative to a deadline. Suddenly burnout doesn’t seems like a real risk. This month, the ImagineFX team asked leading artists about their experiences of stress, and for some advice on how they deal with it. Top tutorials How to harness the unpredictability of watercolourIf you’re looking to expand your skills (and who isn’t?), there are plenty of practical tutorials to be found in the pages of the new issue, too. Emily Hare shares the thinking behind her delicate creature illustrations, and explains how to embrace the unpredictability of working in watercolour. Improve your worldbuilding skillsCreating an effective environment can be a careful balancing act, but Anna Hollinrake has it down pat. This issue, she shares her worldbuilding tips in an in-depth guide to creating a scene filled with colour and life. And there’s a video to follow, too. Make your first strides in a new mediumIf you really want to push yourself, how about turning your hand to a new medium altogether? This issue marks the start of a four-part series exploring how to get going with gouache. Learn all about the gear you need, how to get set up, and the techniques for mixing the colours you need. Subscribe to Imagine FX and save up to 47% View the full article

Earlier this week, Google unveiled the launch of its long-teased Backup and Sync feature. The tool gives everyone the opportunity to protect a whole computer's worth of system files via its cloud storage, and all for the princely sum of absolutely nothing. Promising to be a 'simpler, speedier and more reliable way to protect the files and photos that mean the most to you,' the Backup and Sync app is sure to be a godsend for creatives with images and assets spread over a multitude of devices. The app replaces old Google uploader toolsThe tool works like a turbo-charged Google Drive in that it automatically stores files that are saved onto a computer's internal hard drive or other devices such as memory cards. If you've ever been thankful to Google Drive for saving a document all by itself, imagine that joy and relief but for your images. Backup and Sync replaces the Google Photos desktop uploader and Drive for both Windows and Mac computers, and if it delivers on its promised ease of functionality, we could see the app rivalling the likes of Dropbox. If there's one catch, it's that Backup and Sync has a 15GB cap due to the ceiling imposed by free Drive accounts. This leaves users with two options: pay for some more storage or be selective with what you backup to Drive. Related articles: Send large files: 11 free tools 20 top tools for freelancers There’s more to Sir Elton John’s new logo than meets the eye View the full article

Like any design element, we all have our favourite fonts to fall back on. But you don’t want your work to get stale. So it’s good once in a while to check out the latest new fonts to hit the market. And while we all loving getting free fonts, if that’s all you look at, you’re certainly restricting your scope. So in this post, we gather together the best new fonts (paid-for and free) to grab our attention this year so far. We're sure you'll find a font that inspires you among them. 01. Inkwell Jonathan Hoefler’s Inkwell is based on handwritten designsIf there’s one font that regularly attracts bad press from the design community, it's Comic Sans – even the artist whose work inspired it hates it. So it’s great news that type designer Jonathan Hoefler has come up with a more professional alternative, in the form of Inkwell, a font family based on handwritten designs. Suitable for both print and digital, Inkwell comes in a variety of styles: serif, sans, script, Blackletter, Tuscan and Open. It has a soft and friendly look, while retaining the character set, weight range and high technical quality of a professional typeface. It costs $399 (around £309) for the full package of 48 styles, each in six weights. 02. FS Irwin FS Irwin is inspired by New York City’s subway fontReleased in March this year by boutique font foundry Fontsmith, FS Irwin is a humanist sans-serif font that’s clean and highly legible. It was created by Fontsmith’s senior designer Fernando Mello, who says he was inspired by the cosmopolitan nature of New York, and more specifically the city’s subway font. FS Irwin is characterised by a sense of pureness and simplicity, while details in the lower case letters, such as the angled, chiselled spurs and their open terminals, add extra touches of visual interest to prevent it becoming too bland. Extensively tested and precisely drawn, this text-oriented font is extremely versatile, and Fontsmith suggests it could be used for both playful and serious designs. It's priced at £180 for the family of 12 fonts. 03. Gilbert Gilbert is a tribute to the late Gilbert Baker, creator of the rainbow flagIn March this year Gilbert Baker – the artist and activist who designed the rainbow flag, a universal symbol of gay pride – sadly passed away. To honour him, Ogilvy teamed up with type foundry Fontself and LGBTQI organisations NewFest and NYC Pride to create a cool new font in tribute. Baker designed the iconic flag in 1978, and so the font takes its palette choices from both the flag itself and the hues of that era. Its creators hope that it will be used for rally and protest banners. Currently in preview in two versions (a standard vector font and a colour font in OpenType-SVG format), Gilbert is free to download from the Type with Pride site, along with accompanying artwork. The aim is to eventually develop it into a full font family, and you can keep an eye on progress towards this goal on this blog. 04. Masqualero Masqualero is inspired by the music of Miles DavisAnother font inspired by a legendary creative, Masqualero takes its name from a classic track by Miles Davis on the 1967 Sorcerer album. Designed by Jim Ford of Monotype’s in-house studio, the serif font offers an enticing mixture of sharp and rounded shapes that nicely mirror the contradictions within the jazz great’s music. With potential uses including publishing, mastheads, headlines, logos, packaging, signage, book covers and annual reports, this colourful and evocative typeface offers a great way to add a vibrant feel to your designs for £170/$199 for 14 fonts. 05. Ricardo Created by Dutch designer Jasper de Waard, Ricardo combines the clarity and visual simplicity of geometric type design with the friendliness and readability of a humanist approach. Ricardo is provided in three subfamilies: Ricardo, Ricardo Alt, and Ricardo Ita. The first is the most conventional, and thus the most suitable for longform body copy. The second has a more geometric feel, with simplified shapes for the a, j, u, and t. The third offers a slightly more off-kilter, cursive alternative to the standard italics. This lovely font is suitable for both body type and display text, such as in branding and marketing. It comes with 812 glyphs, supports more than 100 languages, and includes arrows and case-sensitive punctuation. The complete family package costs £142.99(around $185). 06. Zilla Slab Mozilla’s new branding came with a new font, which has since been released to the community as a free downloadBack in January, Mozilla released a striking new logo and branding for 2017. And more recently, it’s made the font used in its creation a free download for everyone to use. It was designed by Typotheque, which drew on its own slab serif font, Tesla, as the basis for its development. With smooth curves and true italics, Zilla Slab provides a business-like look and feel, as well as a high level of readability at all weights. The first free font to be provided by the Mozilla Foundation, Zilla Slab is also open source so you can contribute to its development on Github. 07. Noto Serif CJK The shape of particular characters in Noto Serif CJK adjust depending whether the text is vertical or horizontalIf you’re creating designs that need to be translated into both Eastern and Western languages (or which combine different alphabets within the same design), you’ll be pleased to discover Noto Serif CJK, which was released in April. The result of a partnership between Google and Adobe, this font is designed to look consistent across Chinese, Japanese and and Korean (CJK) characters as well as the English, Cyrillic and Greek alphabets. It’s free to download from Google Fonts, Github or Adobe Typekit, where it’s titled Source Hans. Noto Serif CJK serves as a companion font to Noto Sans CJK (aka Source Han Sans), a sans serif released in 2014 that also maintains its style across CJK scripts. View the full article

Data collected from the freely available scanner called EternalBlues shows that tens of thousands of computers remain vulnerable to the SMBv1 vulnerability that spawned WannaCry and ExPetr. View the full article

https://nakedsecurity.sophos.com/2017/07/13/who-gets-gold-stars-for-looking-after-your-privacy/ … View the full article

Engaging characters are at the heart of almost all 3D projects, and in issue 224 of 3D World, you’ll find out how to get the best out of them. Learn how the magazine's cover star was created step by step, take a look at how Spider-Man was made, and don’t forget to take advantage of your free Pluralsight course on Maya animation. Buy your copy of 3D World 224 As much as character creation is a big deal, working on environments and building on those core skills is vital to success as a visual effects artist, so you'll also find a packed training section. You'll learn how to composite explosions in Nuke using particle data, and there's 3D World's usual wide variety of Q&As, helping you with the task-specific problems you hit in your daily work. New Unreal Engine and other kit reviewed If you're at the point of investing in some new gear then it's worth taking a look at 3D World's reviews of the latest and greatest kit: this month, the team looks at the newly released version of Unreal Engine and a high-end workstation from MSI. Stunning new animations Finally, for those fans of short animations you can read about Eye Candy; a selection of the best from around the globe and we take a look at the beautiful Sur Ecoute. Click here to subscribe to 3D World View the full article

As a graphic designer, when a Google search tells you that you’re one in about thirty million results (calculated in 0.37 seconds), suddenly you can feel a little insignificant. Your website is your space to set out your stall and display your wares in the bizarre bazaar of the internet. But is your website helping to sell your work, or is it giving off mixed signals? To find out more, we spoke to Rik Lomas, the founder of SuperHi, a code school that he says, “shows you how to make sites you’ll actually want to make.” We spoke to Lomas about how to make a site that stands out and what pushed him to start SuperHi, and got his advice on the best ways pitch yourself online. Lomas made his first website in 2001. “It was an underground online magazine for the other students in my sixth form, which kind of took the piss out of the teachers. The idea was originally from a friend’s magazine, but we found it took forever to get it printed and distributed, so we put it on the web instead.” Lomas quickly got frustrated with the limitations of drag-and-drop web design packages like Dreamweaver, so just started playing around with the code. “I self-taught myself over a long, long period of four years with lots of getting stuck with no one to talk to – it took me way longer than it should have!” Make your website design unique New York designer Dani Balenson, who works at Vox media, built her portfolio site from scratch with help from SuperHiToday, there’s a plethora of platforms where you can quickly get a website up and running, but we asked Lomas if there’s a subtext that designers should be aware of. “Some designers talk about ‘creatively breaking the rules,’ then use a standard template that another designer has made on a generic hosting platform. Is a designer being creative if they can only use templates? Do they even know how to break the rules? They’re called templates for a reason – they’re example guides for the average person to use. You set yourself apart by knowing how to get out of those templates,” he says. Lomas started SuperHi to help users break away from templates. “We wanted to not only teach better, more practical material, but make tools for beginners to learn to code. Many of our students have tried services like Codecademy. But because they get stuck and find it really dull, they assume learning to code is dull too. "Think about your worst teacher at school and how you probably hated going to those lessons. Now think of the best teachers and how sometimes they would blow your mind with what they teach. We teach the same thing [as Codecademy], but we teach completely differently,” says Lomas. Market yourself in different places online One page of the Rik Lomas’ SuperHi website, which highlights a free email guide on how to start codingWhen you learn to make websites in a different way to most people, it stands to reason that your website will immediately start to feel distinctive, and more you. “A lot of the best designers really get their personality and their politics into their work” says Lomas. “The authenticity of it is something you can really feel. You can see it in their social media as well as their work.” Beyond the bubble of your personal site, it’s useful to be anywhere online where you can show off your work. “Sites like Ello, The Dots, and Dribbble are good places to start. Some people feel awkward about self promotion, but it’s part of the job of being a designer,” advises Lomas. But bear in mind that when you hit ‘publish’ at home in your bedroom, you’re also on view to the rest of the world. Lomas is a self-confessed internet stalker. “Not in a creepy way,” he’s quick to add. But when he was recently hiring and someone applied with a decent CV, he Googled them. “I found their Twitter, where they were being racist and offensive to pretty much everyone they were interacting with. It was shocking how different their application was to their online persona,” he states, adding that he chose not to take the application any further. Inject websites with your personality London-based childrenswear company Wonderers has a website designed by a SuperHi graduateWhenever we check out a designer’s personal site, we always make a beeline to the About page. We're less interested in what someone says, than the way they say it and what this one page reveals about them. Do they reel off a list of awards and educational achievements? Or tell a joke? Or bitch about their old workplaces? Lomas does the same, and he wants to know: “Does the person take themselves seriously or are they fun? Do they write well on top of designing well? The biggest two things I’d be looking for are willingness to learn and excitability. “Nothing is ever perfect, and there will always be things you want to change." Rik Lomas "I want to work with other people who love to learn about as many things as possible, and I want to work with people who are excited and don’t just see designing as a job. The way you do this is showing a variety of personal and collaborative projects,” he advises. If you have projects cluttering up your desktop that have never made it onto the web because you’ve been too preoccupied with tweaking the design of the site itself (or because you find uploading too laborious), Lomas has two words of advice: “Do it!” “Nothing is ever perfect, and there will always be things you want to change. There’s parts of the SuperHi website I’m not happy with; I’m not unhappy with them but they could always be better, but people compliment us on them. They say, ‘Oh I really like this part,’ and I go, ‘Thanks,’ but secretly I think, ‘Ugh, that bit sucks, it could be so much better.’ "Being closer to your work means it’s harder to let go. There’s no right or wrong time to make things public, but the sooner the better.” This article was originally published in Computer Arts magazine issue 266. Buy it here. Related articles: 10 innovative agency websites to inspire you 8 great examples of graphic design portfolios How to design websites that stand out View the full article

Studios across the country might be down to skeleton staff as the summer holidays kick in, but we’ve got a slew of handy new graphic design tools to boost your creativity this month. From Astute Graphic’s game-changing Illustrator plugin DynamicSketch v2 to the new hardback release of Elliot Jay Stocks’ stunning typography magazine, 8 Faces, there’s plenty to get stuck into this July. So if the boss is away, we give you permission to play… 01. DynamicSketch v2 Astute Graphics has updated its popular Illustrator plugin, DynamicSketch – and it’s packed with innovative new features to dramatically speed up your sketching workflow. These include Preview Stroke Widths, which lets you see the width of the sketch path while you’re drawing, and a Pulled Cursor feature, which simulates the tip of the brush, letting you create smoother curves and reducing stylus error. Imagine the very best elements of the Pencil tool, Shaper tool, Join tool, Paintbrush tool, Width tool and Blob Brush tool, all in one intuitive drawing toolbox: that’s DynamicSketch. If you’re a regular Illustrator user, we can’t recommend it enough. It's priced at £39/$50.40. 02. The Designer’s Vintage Treasure Chest Vintage fonts, textures, brushes and more!Design Cuts' latest bundle brings you one of its biggest-ever vintage collections of design goods. It includes 42 vintage fonts, rare vintage letterforms, textures, old papers, decorative elements, vintage brushes, old illustrations and some handy vintage actions, too. The team reckons it would cost you $2,663 to buy each asset individually, so at $29 it’s a steal. 03. 8 Faces: Collected 8 Faces features new and archive contentLast year, Elliot Jay Stocks launched a Kickstarter to redesign and re-edit all eight issues of slick, sold-out typography magazine 8 Faces, adding brand new content to make a huge, hardcover book. Some 64 graphic designers, web designers, illustrators and artists were interviewed over the series, which boasted beautiful type specimens, plus forewords and essays from thought-leaders across the design industry. This new, 500-page edition features new interviews and a reference of every typeface chosen by interviewees – and it’s available to pre-order, now, for £29 (around $37.50). 04. Matchbook Print Machine Matchbook Print Machine replicates the textures and inks of matchbook print effect of the 1950sCreate retro matchbook print effects with a few clicks with this high-res Smart PSD. Priced at $19, it’s easy to use, letting you adjust textures, halftone patterns and registration errors for an authentic look – plus it comes with a video guide and bonus brushes. 05. Making and Breaking the Grid, Second Edition Learn about different types of grids in this book by Timothy SamaraTimothy Samara’s comprehensive layout design workshop explains the rules of grid-based design, covering the basics from composing typographic space and format determination, to sequencing and systemisation. Various types of grids – manuscript, column, modular, hierarchical – are also covered, as is a summary of the development of both grid-based and non-grid-based layout concepts in modern design. The paperback edition is priced at £19.99/$29.99. 06. Chunky Markers – Illustrator Brushes Brushes mimic messy markers, thin markers, slanted markers and standard markersCreate convincing marker pen-mimicking artwork in Illustrator with this set of 34 vector brushes from The Artifex Forge (aka Jeremy Child). He created over 300 brushstrokes before selecting the best for this pack, which also comes with a bonus marker pattern and example files for $15. 07. Design Thinking for Visual Communication Get the popular book on Kindle for easeHow do you start a design project? How can you generate ideas and concepts in response to a design brief? How do other designers do it? Bloomsbury has released a new Kindle edition of Gavin Ambrose’s popular book Design Thinking for Visual Communication, which addresses these questions by walking through different methods and thought processes used by designers. Costing £15.59/$25.75, each stage is illustrated with case studies, providing an in-depth exploration of design thinking. 08. Corel Painter 2018 Painter 2018 blurs the line between traditional and digital art As we reported earlier, Corel Painter has dropped the latest release of its digital painting software, with a number of new tools added to its arsenal. Of particular note are its new Thick Paint brushes, which replicate real-world tools when used with thickly layered paint, enabling you to pull, push and scrape paint around your canvas. You can grab the full package for £359.99/$429, or upgrade for £179.99/$229. 09. Glossy Rave Styles for Photoshop The layer styles come in different resolutions ready for print or digital projectsEveryone needs a bit of old-school neon styling sometimes. This pack of 10 handmade Photoshop layer styles will add a rave vibe to your work in seconds. According to maker One-Click Slick (aka Tara Garmon), they work best at large sizes, and are perfect for posters, flyers and more. They cost $15 for a pack of high res 300dpi and lower res versions. 10. House Industries: The Process is the Inspiration Type foundry and design studio House explores where it finds inspirationWe showed you the preview to this back in February, but House Industries' highly anticipated title, The Process is the Inspiration, is now available in hardback on Amazon. Providing an illustrated journey through the renowned design studio’s creative process, the 400-page book features deluxe materials as well as hundreds of photographs of early work, work in progress and finished projects. Plus it offers helpful lessons, stories and case studies showing how to transform obsessive curiosity into personally satisfying and successful work. It's available to buy now for £35/$50. Related articles: Have designers become lazy? 20 fonts every graphic designer should own 14 great places to sell your design work online View the full article

When creating a web application with React – a JavaScript library for building user interfaces – component creation is a significant bonus when updating the page over something like jQuery. The ability to create self-contained, reusable components means you can keep code smaller and more organised. If components are set up well enough, they can be dropped in where necessary with no additional setup required at all. In this tutorial, we will be making a dashboard application that keeps an eye on important support metrics. The screen is split up into a grid, which can be customised to show different visuals depending on the data it needs to show. By making a generic widget component we can chop and change the display without affecting any of the underlying code. Wrapping these in a container component allows us to control the source of that data separate from its display. We will be making use of CSS Grids to display content in defined blocks. Browsers that do not support it will display in a single column, much like when using a smaller screen. Download the files for this tutorial here. Build a simple music player with React01. Download the dependencies After getting the project files, we need to pull down all the required packages we need for the project. These include files from 'create-react-app', which deals with the build process for us. We also need to run two servers – one that provides hot reloading for the page and another that provides some fake data to test with. Enter the following on the command line while inside the project directory: /* in one window */ > yarn install > yarn start /* in another window */ > yarn serve 02. Add the first widget Start off with a simple componentTo start things off, we will render a simple component on the page. With Babel set up, we can write components using ES2015 classes. All we need to do is import them when we need to and Babel with Webpack will do the rest. Open up /src/components/App.js and add the import to the top of the page. Then, inside the render function, place the component inside the container <div>. 03. Style a widget box When importing CSS with Webpack, styles can be scoped to just the component in question to avoid them leaking to other parts of the pageOn this project, Webpack is set up to pick up CSS imports. This means we can import CSS files like we did with JavaScript in the previous step, which allows us to create separate files for each component. Add the following import to the top of Widget.js. This will link up with the 'Widget' className and will scope the styles to that component. 04. Add heading and content Each widget will need a short description of what data it is showing. To keep things customisable, we will pass this in as a property – or "prop" – to the component when we use it. As for the content, React supplies a special 'children' prop, which will contain the content entered between a component's opening and closing tags. Replace the placeholder <p> in the render function with the following. The Loading component will come into play later on. 05. Let the widget span the grid With the CSS Grid specification, layout elements such as gutters will be applied regardless of any styling applied to child elements In addition to the stylesheets we import, we can also create React styles dynamically based on the props passed through. To span columns and rows with CSS Grid use the grid-column and grid-row properties. We can pass through 'colspan' and 'rowspan' props to alter this per component in a similar way to how table cells work in HTML. Apply styles in the Widget constructor and link them to the container <div>. 06. Supply default props Right now our Widget is blank as we do not supply any props as yet. In these cases, we can supply default props to use instead. Unless told otherwise, CSS Grids will default to taking up the smallest unit it can, which in this case is a 1x1 square. Just before we export the Widget, supply some default props to that effect. 07. Enforce specific props The NumberDisplay component is a 'presentational' component, as it has no internal state and relies wholly on the props passed to itComponents can provide hints as to what type of values should be sent as props. While developing an application, any incorrectly passed props will show up in the console as warnings to help avoid bugs further down the line. Just underneath the default props, define what props should or need to be passed in, and what type they should be. 08. Add props to the app By defining the 'children' prop as required, you may notice the browser complaining it's currently undefined. While this will not break the app, it will keep bugging us until it's sorted. Head back over to App.js and add a heading prop to the widget we created earlier. Instead of making the tag self-closing, open it up and add some placeholder content to show it's working. 09. Display some data We can use the @supports syntax in CSS to detect whether or not the browser supports grid layouts. If not, we default to the single-column viewThe NumberDisplay component works much like the widget we just created – it renders some text based purely on the props we pass into it. We can drop it in where we need to and have a consistent display of numerical data. Import the NumberDisplay component at the top and use it to replace the placeholder content you just added within Widget. 10. Convert to NumberWidget At the moment, there is quite a lot of code used to show something that will not change across widgets. We can make a special component to encapsulate all of it. That way we only need to import NumberWidget. Replace the Widget and NumberDisplay imports at the top of App.js with NumberWidget. Make sure to also replace them in the render method. Next page: Further steps 11. Show a progress bar Inside NumberWidget.js there are a couple of methods that help us to render things under certain conditions. We can call these in the render method and they can return what we need to output. Inside showProgress() add some code that works out if we should render a progress bar. We need a minimum, maximum and a value at the very least. 12. Add a Container component Manually adding data isn't going to be much help to us. We can add a container around NumberWidget that will supply it with fresh data from our server. Inside App.js, replace what we added in step 10 with the NumberWidgetContainer and pass it a URL to load data from. 13. Fetch data on load Over its lifetime, a React component will call many different methods depending on what point it's at. The componentDidMount method will be called when a component first renders, which makes it an ideal place to fetch data. Add the following to componentDidMount in NumberWidgetContainer.js. This will call the fetchData method now and every minute after that. We will fix the TypeError in the next step. 14. Update the state Each component can have its own internal state, which holds information about itself at any given moment. We can pass this state as props for other components to use. Make the request to the supplied 'href' prop URL using the AJAX module Axios and update the state with the values supplied. These will automatically be passed to NumberWidget, which will then update itself. 15. Add in a List widget The groundwork we have done for NumberWidget can be applied to other types of widgets, too. ListWidgetContainer can be passed the same props as NumberWidgetContainer, but will render a list of values instead. Import ListWidgetContainer alongside the rest, and place the component just above NumberWidgetContainer in the render method. 16. Display list items With the data supplied in the sortedItems variable as an array, we can iterate over the results and render a separate component for each. To do this we can use the 'map' method on the array prototype. This creates a new array of components that React will render. Inside the ListDisplay component in showWidget, add the map function to create new ListItems. 17. Sort data by value Use a sorting function to provide useful information to the userWe should avoid relying on data being sorted at the source to ensure we provide useful information to the user. We can use a sorting function to do this inside the sortListItems method. Array sorting functions take two values and compare them. Apply this to sortedItems and return it to sort its content in descending order. 18. Add a Graph widget Graph widgets can display large sets of data clearer than the number or list widgets. It uses a library called Chart.js with a React wrapper that updates as props change. Switch back to App.js, import GraphWidgetContainer and add it to the render function under the existing widgets. 19. Prepare data for display Chart.js takes data in a specific format. In this case, the 'datasets' array is a collection of points used to draw a line. We will use state to hold all the configuration data for Chart.js and update it with the datasets fetched from the URL, which arrive in a different format. Open up GraphWidget.js and loop over the props in generateDatasets to update the state. 20. Regenerate when props change The React wrapper for Chart.js will update when its props change, but as the state holds the set up, we do not update those values directly. componentWillReceiveProps is another lifecycle method that will fire when a component's props will update. Sometimes this can fire when values have not changed, but a quick check for that can protect against unnecessary updates. 21. Add remaining widgets Finally, all that is left to do is add in some more data. With the flexibility we have created from the various widgets, we can add in whichever widgets are necessary. Fill in the remaining gaps on the page. Play around with the types, row and column spans, and positions of widgets to suit the data best. This article originally appeared in Web Designer issue 262; buy it here! Related articles: 21 top examples of JavaScript 5 tips for super-fast CSS Build a simple music player with React View the full article

Mobile platforms are a great place to see incredible new and innovative design developments. Get in on the excitement by learning to build mobile apps and games with the Comprehensive App and Game Design Bundle. It’s on sale now for 98% off the retail price! You can build apps and games that will climb the charts of the app store once you know how to make the most of the tools of mobile development. The Comprehensive App and Game Design Bundle will let you acquire the necessary skills to build for mobile platforms by teaching you the fundamental coding languages and important programs you need to know. These five courses cover Unity3D, Flash, HTML, and more. The Comprehensive App and Game Design Bundle is valued at over $3,100, but you can save 98% off the retail price. That means you'll pay just $39 (approx £30) for a bundle of courses that can put you on the path to your next career! View the full article

Despite some strong competition, the iPhone continues to be the main smartphone of choice for the design world. Apple's pocket-sized marvel can be a pretty handy design tool. Combined with the best iPhone apps it can pack some real punch in the studio – and more importantly, out of it. 23 best iPad art apps for painting and sketchingSo whether you plan to do some sketching on the move, are after a particular tool to aid your daily design work, or prefer to take things more seriously with something to help you manage your projects, time and money, there's a great selection of must-have apps right here. 01. Assembly Developer: Pixite Price: Free with IAP Coming off like a grown-up take on Fuzzy Felt, Assembly earns its place in the best iPhone apps list by enabling user to easily create beautiful vector imagery without having to master Illustrator's tricksy ways. Rather than painstakingly creating your own vector shapes, you can dive into Assembly's library of over 180 basic shapes that you can then fit together to make larger designs, either over a plain backdrop or on top of a background image. It's a building-block approach to design that might sound a little simplistic, but it's been put together intelligently and with just enough tools to enable you to craft detailed images in minutes – perfect for creating designs when you're on the move. 02. PANTONE Studio Use this to match hues from photos, generate harmonious colour palettes and then share them Developer: Pantone Price: Free This official app from the undisputed kings of colour acts as a digital swatch book, including over 13,000 colours from the Pantone Plus Series and beyond. You can use it to match hues from photos, generate harmonious colour palettes and then share them, or sync them with your design software programs of choice. 03. Paper Developer: FiftyThree Price: Free Capable of capturing and connecting your notes, photos and sketches, Paper is one the best iPhone apps out there for designers – acting like a digital wall of sticky notes for your phone. Thanks to unique swipe-to-style formatting, Paper lets users quickly create checklists and notes, as well as clarifying details in photos. With the original iPad app crowned Apple's App of the Year, this new version for iPhone is a completely free must-have for designers. 04. Adobe Illustrator Draw This app lets you create illustrations easily with intuitive touch controls Developer: Adobe Price: Free Packed with all the power that designers have come to expect from Adobe, this app also includes all the popular drawing tools and features from Adobe Ideas. Filled with everything illustrators need to send layered and flat artwork, Adobe Illustrator Draw lets users draw with vectors, access high-res, royalty-free images, and sync assets to appear in your workflow wherever you need them. 05. Font Candy Step up your photo game with this text masking app Developer: Easy Tiger Apps Price: Free Create captions and overlay them onto photos with the typography app Font Candy. Choose from an array of hand-picked fonts to liven up your pictures and shoot snaps with a built-in camera with timer, perfect for taking selfies. One of the most creative and best iPhone apps around for typography, Font Candy also lets you share your work over Facebook, Twitter, Tumblr and Instagram. 06. Exify If this image gets your pulse racing, you need Exify Developer: Iconfactory Price: $1.99/£1.99 One of the best iPhone apps for pro photographers, Exify is a bunch of tools rather than a camera or editor. Fire it up and you can quickly delve into the fine details behind your pics: lens info; image size; colour space; exposure. There are graphs for histograms, location and time details, and also a magnifier for getting up close and personal with every little detail of your iPhone snaps. 07. Fuzel Developer: Not A Basement Studio Price: Free Create cool photo collages for free with iPhone photography app Fuzel. With a wide variety of features and smooth UI, you can combine photos, add effects and write captions. The app imports images and cleverly places them so they fit within the chosen frame. You can then tap on any photo and realign, pinch to resize, add various filters as well as chose from different frames and borders. 08. Draw Pad Pro An intuitive way to take notes Developer: Fishington Studios Price: £2.99 Nearly 3 million people use Draw Pad Pro for their note-taking. Created by Fishington Studios, the iPhone app offers a new way to get down your thoughts. Users can create sketches and scribbles, customise them, and then organise them to refer to later. 09. Layers Layers for iPhone has everything you need to be creative on the go Developer: Gotow.net Price: $8.52/£5.99 Built on the feedback of mobile artists, Layers is a natural media painting application for the iPhone and iPod Touch. Featuring Photoshop compatibility, a selection of brushes, full colour, paint, erase and smudge tools and the ability to add five layers to your drawings, this nifty little app has everything you need to be creative on the go. 10. PicLab Studio Create inspiring images for the internet Developer: MuseWorks Price: $2.99/£2.29 PicLab Studio is a nifty app for creating those inspiring images that you get all over the internet these days. You know, the ones featuring a photo – probably with at least one retro filter applied – with a helpful aphorism layered over the top in an attractive, friendly typeface. PicLab HD makes them an absolute doddle, enabling you to either snap a photo or grab one from your photo library, then go to town on it. Next page: 6 more of the best iPhone apps for designers 11. Filmic Pro Packed with features, is this the ultimate iPhone video camera? Developer: FiLMiC Price: $14.99 FiLMiC Pro is, quite simply, the answer to the frustrations filmmakers have with Apple's default camera app. The most obvious and immediately useful features are the ability to set the focus and exposure separately, to lock them individually, and to lock the white balance. They're all vital for getting the tone and mood of what you're filming right, and FiLMiC knows that. Video nuts will find wide-eyed glee in the ability to specify not only what resolution it films at, but also the framerate and, best of all, the bitrate, so you can record at quality far beyond the Apple defaults – great if you're filming lots of motion. 12. Path On Path On lets you add funky text to photos in unique ways Developer: Peta Vision Price: $1.99/£1.49 Path On lets you add funky text to photos in unique ways. You draw the path you'd like the words to take, then type in your message – the text then flows along the path. The custom options are the real killer feature here, with you being able to adjust the font, the letter spacing, the alignment and much, much more. There's a good range of fonts, and playing around is fast and easy. The photo filters are best avoided, but sharing your photo is easy. 13. Repix Repix allows you to 'paint' filter effects onto images to create brilliant effects Developer: Sumoing Price: Free The problem with filters in many photo editors is that you're required to apply them to the whole image, or spend an age creating precise selections. Repix lets you 'paint' filter effects onto your images to create brilliant effects. A choice of nine brushes run along the bottom of the screen; they range from artistic effects such as Posterize and Charcoal to more creative effects such as Halftone patterns and Ink splats. There's also an eraser and an 'undoer' brush. 14. Behance Behance's app is as slick as its online offering Developer: Behance Price: Free We're huge fans of online portfolio platform Behance at Creative Bloq, especially its super-slick iPhone app. It offers many of the perks enjoyed by users of the online version, including the ability to search millions of projects and follow top creatives. Users can also access their personal profile and collections and view stats about their work, all on the go. 15. Autodesk SketchBook SketchBook Pro is one of the most popular iPad art apps Developer: Autodesk Price: Free SketchBook Pro by Autodesk is one of the most popular iPad art apps with digital artists. The smaller-screen version is a brilliant addition to any designer's iPhone app collection. There's a wide range of digital pencils, pens, markers and airbrushes to choose from (over 170 customisable brushes in total), all accessed via a simple but intuitive UI that lets you pin toolbars to the screen for easy access. You can work with layers, transparency options, annotations, and advanced blend modes. What more could you want? 16. Geló Geló is a great way to apply gradients to your iPhone photos Developer: James Moore Price: Free Gradients have become a lost art in iPhone photography, but Geló fills that gap in the market well. Once you've taken or imported an image, you see a carousel of 'gels'. Cycle through to choose a colour, tap it, and then it's applied to your shot. You can then use the sliders to tweak how the filter affects your shot, and it's this high level of control that makes Geló a winner. You can adjust individual colours and the position of the effect until it gives you a realistic graduation (usually for a horizon), or you can get a bit arty and create vintage looks or use different shapes to add a 'gel collage' effect. You can also choose how the gel effect is applied, either a tint, a solid gel (Over) or mixed into the colour palette (Add). Coupled with contrast tweaks, you can create impressive images. 17. Evernote Evernote allows you to store your inspiration Developer: Evernote Price: Free Evernote allows you to save your ideas, things you like, things you hear and things you see. You can access your inspiration anywhere as it works with nearly every computer, phone and mobile device out there. And to make things easier, you can search by keyword, tag, or even printed and handwritten text inside images. 18. Instagram Users can now share video and images to their Instagram 'story' Developer: Instagram Price: Free Chances are, you don't need an introduction to this app. Instagram is a wildly popular photo-sharing app that enables its community (currently over 500 million-strong) to take pictures, apply digital filters to them, and share them on a variety of social networking services. Most recently, Instagram has introduced 'stories' that disappear after 24 hours. Used right, it can be a great source of design inspiration. 19. OmniFocus OmniFocus has continued to develop and packs plenty of features Developer: The Omni Group Price: $39.99/£29.99 Having scooped the Apple Design Award for best productivity app when the iPhone App Store first launched, OmniFocus has continued to develop and packs plenty of features into its simple, intuitive interface. There's a high price tag, but it's invaluable for organising all your daily tasks in one place. 20. Palettes Pro Palettes Pro lets you create colour palettes anywhere Developer: Rick Maddy Price: $3.99 This is a great way to create and manage colour palettes to use in your design work, whenever and wherever inspiration strikes. You can sample colours from images, websites or whatever you can find, as well as adding them manually. 21. Todo Cloud Organise your projects into various related checklists Developer: Appigo Price: From free The king of to-do apps, Todo enables you to add and schedule tasks, organise them into various related checklists, map deadlines onto your calendar and keep on top of every aspect of your working life. The basic version of this app is free, with the option to upgrade for the premium service. 22. Mill Colour Mill colour manipulates your source image to help you replicate the look of a high-end digital suite Developer: The Mill Price: Free This photo-grading tool feeds years of experience from colourists at leading Soho-based visual effects house The Mill into one free app. Rather than applying a grading filter, it manipulates your source image to help you replicate the kind of look and feel that might be achieved in a high-end digital suite. 23. Hipstamatic A beautifully designed photography app that enables you to switch lenses, film and flash settings Developer: Hipstamatic Price: $2.99/£2.49 The winner of Apple's very first App of the Year, Hipstamatic enables you to switch lenses, film and flash settings to create and share highly stylised images. It's also highly expandable, with a broad range of special packs available for in-app purchase. 24. Adobe Photoshop Express Photoshop Express has some useful tools for photo manipulation Developer: Adobe Price: Free While many of the Touch suite are arguably best suited to iPad, Photoshop Express has some useful tools for photo manipulation on the go that can be just as valuable on iPhone – including filters, effects and basic editing tools. You can also upload files from your device, Creative Cloud, Dropbox, Facebook or Google Photos. 25. Over One of the best iPhone apps for Instagram users, Over allows you to add type to your photos Developer: Over Price: Free While a picture is worth a thousand words, sometimes you need some words as well to let people know what they're looking at. Over is one of the best iPhone apps for Instagram addicts, Over enables you to add typography to your images quickly and easily. There's also a feature that lets you find the perfect canvas dimensions for Facebook, Pinterest, Twitter, Instagram, iPhone and even Apple Watch. 26. Fontli Use Fontli to discover inspirational photography of type around the world Developer: Pramati Technologies Price: Free Fontli is a social network of type lovers, enabling the community to collect and share inspiring examples of typography from everyday life. Using integration with MyFonts database, its iPhone app also features type tagging on pictures. Related articles: The 33 best photo apps 10 apps for endless design inspiration The 28 best typography apps View the full article

Ahead of his Generate London presentation on designing conversational interfaces, we caught up with Giles Colborne, co-founder and CEO of cxpartners. One of the world’s leading independent experience design consultancies, Colborne is the author of Simple and Usable, a book on the topic of simplicity aimed specifically at interaction designers. What will be left after the chatbot hype? Who/what will survive? Giles Colborne: The problem with hype is that it leads people to put stuff out there without discriminating whether it’s good or not, and it encourages people to assume that anything is possible, so they wildly overreach. It’s the same story with any new or emerging technology. So after the hype, I expect a few good, solid, simple, robust examples and patterns to emerge on which we slowly build more complex experiences. It’s wonderful to listen to the hype and to dream, but if you’re building a system for people to rely on, you shouldn’t be afraid of doing something simple and functional. I think that with any system that relies on machine learning (and a lot of natural language interfaces do rely on machine learning), the people with the big data sets will have an advantage. I’d like to hope that doesn’t turn into platform lock-in. Back in the early days of the consumer internet, we avoided platform lock-in thanks to the web, which had an open specification that anyone could use. It’s hard to see something like that happening this time around – legislation may need to come into play. But all that is probably still years away. How to design a chatbot experience Giles Colborne's presentation at Generate London will look beyond the hype of conversational interfaces What are the benefits of chatbots and conversational UIs? GC: First, I should draw a distinction between chatbots and conversational UIs and full Natural Language Interfaces (NLIs). Chatbots sometimes ask the user to select from a number of possible answers – rather like the horrible IVR systems that sort voice calls on telephone lines ("press 1 for balance enquires, 2 for customer service, etc."). NLIs allow you to type a response in your language and then respond based on that. I’m more interested in NLIs and that’s my focus. What I like about NLIs is that there’s almost no user interface to learn. Apps like Facebook Messenger are among the most commonly used apps on smartphones today. The user interface is simple, and the idea behind them is easy to understand. So building services on top of that familiar, widely used interface looks like a good idea – so long as the services themselves are easy to use. What’s more, if you can build an interface that works on something really basic like SMS, then it’ll work on Facebook Messenger, or WhatsApp, or some other chat platform – so there’s the promise that you can extend your reach. The preference for chat type services grows as you look at younger audiences. They’ve grown up with social media and they seem to prefer to interact with those types of services rather than phone or email. But, of course, this is an interface that’s inherently accessible to people with visual or hearing impairments and is easy for users of all ages to understand. A lot of the best chatbots keep the conversation short and don’t try to do too much, says ColborneWhat fascinates me, though, is that Natural Language Interfaces mean we can design systems that feel more human. Human conversation has a lot of interesting qualities that graphical user interfaces struggle with. For instance, if you’re asking a person for help finding something, like an airline ticket, you often start out with quite a vague description and slowly zero in on a couple of good choices. We can do that in faceted search interfaces at the moment, but people struggle to use them effectively – especially on small screens. What you tend to get on small screens is a series of menus that you drill into. That can feel clunky or confusing. Natural Language Interfaces can bypass that. Finally, the next wave of computing isn’t about laptops or mobile phones – it's about environments full of smart devices that know you and that interact with you. You don’t want a touchscreen on every device or an app for each device on your smartphone. You want a common interface that knows you and that you can communicate with easily. That’s why I think NLIs and artificial intelligence technologies have such an important role to play in the next generation of user experience. And what are some of the pitfalls in conversational interfaces and how can we avoid them? GC: I think the biggest pitfall is in creating conversations that look like flowcharts – ones where the dialogue is mapped out in minute detail. In reality, conversations are rather vague and squidgy. If you try to map them out in detail, you end up missing the complexity – or you just create another one of those IVR systems. For instance, if you ask someone their name, one person might give you their full name including title, while another might just give you their first name. You have to let them do that, and then circle back for the missing details. That’s not an error, it’s just a different way of answering the question. Chatbots need to be able to interact with humans in a natural wayHow can we improve bots to enhance the user experience? GC: When you listen to people using voice systems especially, a great deal of the conversation is about the user figuring out how to ask questions and learning what the system can and cannot do. I think most NLIs do a terrible job at handling those situations. For instance, say you ask your voice assistant to play a song, like 'Bohemian Rhapsody', but you get the name wrong and you call it ‘Mama, just killed a man’. From the point of view of the user, and a human listening in, the user has given a valid and useful request. But most voice assistants fail to match the title and give up and the user is back to square one. This kind of thing happens all the time with voice assistants, but a human would try to use the information given and ask a sensible follow-up question like ‘Can you remember who it was by?’ or ‘Is that the title or a line from the song?'. If we’re going to make these systems tolerable, we need to spend more time thinking about how the system should respond when it doesn’t understand. What are some of the characteristics of chatbots or conversational UIs that get things right? GC: A lot of the best conversational UIs and chatbots don’t try to do too much. For instance, when you’re driving and you ask your smartphone to give you directions home, there’s not much of a ‘conversation’ going on – in fact, the shorter the better. But you get a lot of output (an hour’s worth of driving instructions) for minimal input (‘get me directions home’). And the input is kept minimal because the smartphone uses a lot of contextual data to fill in the blanks – it assumes you mean driving directions, it gets your current location from GPS, and it finds your home address from your smartphone settings. I’d say those are pretty good design maxims: keep the conversation short, make use of contextual data, offer maximum output for minimum input. Chatbots need to learn to understand humans, rather than us learning how to use them, for the best user experienceWhere is conversational design going next? GC: There are lots of interesting things happening right now. There are voice assistants that distinguish between different people in the room, and voice assistants that manage the emotional undercurrent of conversation, not just the exchange of information. There are also tools that make complex features easier for designers to access, and interfaces that mix voice and visuals (so you can see a travel itinerary build up as you speak to a virtual travel agent, for instance). It’s an exciting time. What can people expect to take away from your talk at Generate London? GC: I want to help people to understand what it takes to get started, have a few good reasons to convince colleagues to let them try, to know where to find some easy-to-use tools, and to tune them in to what’s really happening in human to human conversation so they can use that to design something satisfying. Generate London, on 21 and 22 September, will feature 16 great presentations for web and UX designers and is preceded by a full day of workshops on 20 September. Don't miss the opportunity to learn from the likes of Steve Fisher, Leonie Watson, Anton & Irene, Zell Liew, Aaron Gustafson and many more. Reserve your spot today! View the full article

You're reading How To Apply Consistency in Web Design, originally posted on Designmodo. If you've enjoyed this post, be sure to follow on Twitter, Facebook, Google+! There’s tremendous value in consistency of digital interfaces. People browsing the web encounter dozens of websites that all have different styles, yet most feature very similar page elements. Most designers don’t even think about these features. Page headers, navigation menus, body copy, CTA buttons, the list seems endless. By designing with consistency you’ll learn how […] View the full article

UXPin has spoken to over 3,000 designers to get an in-depth picture of UX for business products today. The design renaissance in the business product sector has been well documented, with startups like Slack and Gusto raising the bar in the industry, and major players such as IBM and Salesforce publicly embracing design culture. UXPin’s 2017-18 Enterprise UX Industry Report delves into the trillion-dollar sector to find out what enterprise UX looks like today. It found: UX in business is still in its infancy: Only 26% of respondents report that a full-time UX role has existed for more than five years Agile rules: 93% of respondents report they follow either an Agile or ‘Agile-fall’ product development process Design consistency is the greatest challenge: With user testing and inter-team collaboration also causing headaches Earning potential is strong: In the US, 72% of enterprise designers earn at least $75k a year It looks like the renewed appreciation of design in enterprise products is set to continue. To find out more, download the report at UXPin. Read more: How to automate your Sketch handoffs 3 ways to create website mockups 40 web design freebies to make your life easier View the full article

Botnets distributing FlokiBot point-of-sale malware are back in business spewing a new malware dubbed LockPoS. View the full article

Uber patched an authentication bypass vulnerability in its homegrown SSO solution that allowed attackers to take over subdomains and steal session cookies. View the full article

SAP fixed 23 vulnerabilities across roughly a dozen products on Tuesday, including a series of high-risk flaws in SAP POS and SAP Host Agent. View the full article

Draw a bag of groceries – paper or plastic, you choose. Now draw a plastic grocery bag containing five oranges, a bag of chips and a jar of peanut butter. Much easier, right? Why? Because by knowing what’s inside, we better our understanding of our subject. Same goes for horses: if you understand horse anatomy, then sketching a horse becomes much easier; when you understand the mechanics of a horse, your horse drawing will naturally look more mechanically sound and real. Knowing about the anatomy of your subject makes the business of learning how to draw easier. You'll find my video above, and I've listed 10 steps to drawing horses below. If this inspires you to educate yourself further, why not head over to Schoolism.com to discover courses, workshops and more? 01. The anatomy of a horse’s legs A horse’s hoof is analogous to our middle finger or toeContrary to popular belief, horses do not have 'backward knees'; their knees are just not as obvious as those of a human. Same with a horse’s shoulders: it’s not immediately obvious that the shoulders of a horse are actually more front-facing than positioned at the top of the horse’s back. Once you understand these two key points, horses will start to make a lot more sense to you. 02. The spine of a horse A horse’s spine is not where you assume it isThe curve of a horse’s back is not made by a curved spine, but by the spinous processes, which are projections on each vertebra that muscles connect to. In actuality, the spine is quite straight. Above the shoulders, it runs closer to the middle of the neck than the back. By knowing where a horse’s neck bends from, you will be able to draw a horse’s neck better in different positions. 03. Understanding the main skeletal structures The structures under the skin should guide your drawingA horse’s rib cage has a similar shape to a human’s, but remember ribs don’t extend to the bottom of the belly. Also, muscle, fat, and skin can make the rib cage look bigger than it really is. A horse’s skull is triangular with a large jaw that has a wide area for muscles to attach to. A horse’s pelvis is flatter than a human’s because a horse doesn’t stand upright so its pelvis doesn’t bear weight. 04. The main shapes of a horse Start with macro shapes and build upLet’s start with the front half of the torso, which is kind of bean-shaped. Then we have the front and back sides of the horse, which feel like padding around the bean. The neck has to be thick because of the muscles required to hold the head up. For the head, we can follow what we did previously with the skull and add some big muscle indications towards the back of the jaw. 05. Gesture Simple and loose but communicates clearlyNow that we understand the most important parts of a horse, we can gesture a loose sketch. It's almost like a cave drawing here but you can see indications of the directions of the legs, the angle of the pelvis, the rib cage and midsection. The head and neck are strongly indicated and the position of the tail shows that the horse is in motion. The gesture sketch communicates the most vital information about your subject. 06. Sketch language Good sketch language unifies your work over multiple sessionsSketch language lets us take visual notes so that we can bring our work to finish later effectively. In this case, we want to indicate landmarks of where the bones influence the surface the most, such as the joints because this is where the indications of bones are clearest and lead into the muscular areas. We can use these indications to suggest the directions of the bones as well. 07. Redrawing the horse in detail Add stretch and compression to refine and show dynamicsAccurate landmarks in the sketch makes this job much easier. Look at every simplified line and see how more anatomical information can be added. Use straight lines for muscles that are stretched or taut with tension, and curved lines for parts that are softer or being compressed. Add subtleties to the muscles and detail to the horse’s features to give anatomy to the horse while still maintaining the original essence of the sketch. 08. Subtle angles Subtleties give drawings lifePerfect profile or head-on drawings can feel graphic and staged. Think about subtle angles: for example, the horse’s eyes and the position of its head is almost profile, but a hint of the other eye is visible adding more life as a result. Also, the positions of the front legs are subtly different from one another because otherwise they would feel very robotic. We vary the view of each back leg for this same reason. 09. Line weight Much subtle information can be communicated through line weightLine weight can communicate many things. We can use it to emphasize the size of the horse’s torso. Line weight can also separate one element from the other, like in the front legs. Areas where bones are indicated are harder, which gives them sharper shadows, which can be represented with stronger line weight. For more subtle lines such as muscle definition, draw a few thin lines side by side to indicate a softer line. 10. Secondary action Secondary actions provide context; our horse isn’t in a vacuumSecondary actions such as hair blowing blowing wind add dynamics to our drawings. For action poses, these are even more important for showing motion. When showing secondary action, we must keep in mind things such as emphasizing shadow or separating different groups of hair with the appropriate line weight. Secondary action can also refer to different elements that are affected by the horse, like a cloud of dust that the horse kicks up as it gallops. Related articles: How to draw a bear How to draw a dragon Illustrator tutorials: amazing ideas to try today! View the full article

Illustration: Alexandra Bruel WordPress is one of the world's most popular publishing platforms. It's highly customisable, very easy to use and it's completely free, making it an obvious choice for anything from a simple blog to an online design portfolio. Because of its enormous popularity, there's a wealth of WordPress portfolio themes available, plus plenty of WordPress tutorials online to help you get to grips with the CMS. But with so much choice, things can often get confusing. To save you time, we've picked 25 brilliant WordPress tutorials from around the web. To help you find the right ones for you, we've grouped them according to skill level: beginner (this page), intermediate and advanced. You can use the drop-down above to find the ones you want. 01. How to install WordPress Perhaps the most frightening part of getting started with WordPress is the business of actually installing it. Thankfully this comprehensive WordPress tutorial from WPBeginner covers all the bases, with detailed instructions to help you get up and running with ease. 02. A beginner's guide to creating a WordPress website This complete guide to creating your first WordPress site is a great place to start if you're a total beginner, or someone with a bit of experience looking to fill holes in their knowledge. There are sections on everything from domain names, to how to choose a theme, and tips for keeping your WordPress site secure. 03. WordPress cheat sheet Cheat sheets are ideal when you're starting out, and can still prove useful to refer back to when you're more experienced. This one lays it all out for you and provides a brilliant go-to for any WordPress woes. 04. How to learn WordPress in one week (for free!) This step-by-step WordPress tutorial is aimed at beginners who are trying to become competent with the platform in their spare time. It assumes some familiarity with the WordPress, as well as a basic understanding of HTML, CSS and PHP. If you have all that, and 2-3 hours free each day, this course will turn you into a WordPress whizz in just a week. 05. How to make the WordPress editor look like your website Use this WordPress tutorial to transform your editing environmentUsing the Preview button is OK, but it's much better to be able to write your posts and see how they're going to look on the site without having to switch back and forth between view modes. This great tutorial shows you how to do just that. Next page: Intermediate WordPress tutorials 06. How to prepare your WordPress site for a surge in traffic A sudden traffic spike on your site can be a lovely surprise... until the spike gets out of hand and your site can't deal with the sudden influx of visitors. This tutorial explains how to anticipate spikes and prepare your site in advance. It also shows you what to do if your site slows down or crashes after a surge. Handy stuff. 07. How to Disable Trackbacks and Pings on Existing WordPress Posts Trackbacks and pingbacks used to be a handy way for blogs to notify each other that they'd linked to a post, but today they're mostly used by spammers to flood your comments with links to their sites. WordPress makes it easy to prevent link notifications on new posts, but disabling them on older posts is a little more involved; here's how to do it. 08. How to Install Google Analytics in WordPress If you're serious about your site then you'll want to get to know your audience, and the best way to do this is through your traffic stats. That's where Google Analytics comes in. It's free and it can tell you who visits your site, where they come from, when they visit, what they look at while they're there, and how they interact with your content. Follow this guide to get up and running. 09. Using the Psychology of Color to Boost Your WordPress Website Conversions Use the principles of colour psychology to pick a scheme that suits your siteChoosing the right colours for your website can have a big impact on its effectiveness (and on an ecommerce site, that means more sales). This WordPress tutorial shows you how to convert colours to customers. 10. Add icons to WordPress custom menus without plugins Adding icons to custom menus can be a nice way to add personality to your site, as well as improving usability. It's a relatively simple, two-step process that doesn't involve any PHP coding whatsoever. And this WordPress tutorial will show you just how to do it. 11. How to create and customise a WordPress child theme When looking to customise a website, a lot of people edit the theme directly. This creates a number of problems, not least that you can't update the theme without losing your changes! The smart way to modify your site design is with a child theme. This tutorial walks though how to create one. 12. The ultimate guide to A/B split testing with WordPress Even tiny changes to the phrasing of copy or the position of a button on your site can have a big impact on how people use it. There's no need to guess what will work and what won't – you can prove it using A/B testing. This WordPress tutorial shows you how to test out different options before you commit to them. 13. Beginners guide to adding Twitter cards in WordPress Drive traffic to your site with Twitter CardsSocial media is a great way to get the word out about your site or blog. Twitter Cards make it possible for you to attach media experiences to your tweets that link to your content. This WordPress tutorial shows you how to use them. 14. 5 free essential plugins for your first WordPress blog There are a massive number of plugins available for the WordPress users. So how do you pick out the ones that will actually be useful? In this tutorial, the guys at WPMU DEV pick their five must-have plugins for your first blog. They cover everything from monitoring pageload speed to protection against spam. 15. How to create your very first WordPress plugin If you can't find what you need in the vast library of WordPress plugins, the next step is to think about making your own. It's not as difficult as it sounds. Find out how in this simple walkthrough. 16. How to make your WordPress site multilingual Businesses that want to expand internationally might want to consider making their WordPress site multilingual. This tutorial from net magazine explains how to do so, with the help of some tools, plugins and translation services. Next page: Advanced WordPress tutorials 17. Methods for Overriding Styles in WordPress Conflicting plugins can turn your WordPress site into an ugly messWordPress makes it delightfully simple to add advanced features to your site using plugins, but occasionally you might find that a new plugin conflicts with your installed theme or with another plugin, and the results can ruin your site's looks. Fixing such conflicts can be quite a challenge; this tutorial talks you through some techniques for overriding conflicting CSS so you can take back control of the styling for any part of your site. 18. Responsive images in WordPress with art direction Support for responsive images has been in WordPress for a while, in the form of viewport-based image selection, but there's another, more versatile way to do responsive images on WordPress: using art direction. This method enables you to design with images whose crop or composition changes at certain breakpoints. Follow this tutorial to discover how to set up a WordPress site for art direction using three progressive examples. 19. Free SSL for any WordPress website Even if you don't process sensitive information, serving your site via SSL makes you look more credible, protects passwords and improves SEO. And if you have an ecommerce site and want to process credit cards, it's mandatory. Here's how to set up your site to serve via HTTPS, for free. 20. How to hide your WordPress login page from hackers and brute force Even WordPress sites that don't get much traffic attract huge numbers of malicious login attempts. There are a number of different strategies you can use to help protect your site. This WordPress tutorial runs through one simple way to make yourself less visible to hackers. 21. How To Make WordPress Hard For Clients To Mess Up Remove unnecessary features to make things simpler for clientsIn some situations, WordPress has too much functionality. This can confuse your clients and put them at risk of breaking their site, so it's a good idea to turn off anything that isn't needed. In this article, seasoned developer Emerson Loustau outlines which features can do the most damage and explains how to remove them to create a simpler, safer interface for your clients. 22. Leverage WordPress functions to reduce HTML in your posts Keeping HTML classes out of your content is a good idea, because they can make a real mess when it's time to redesign the site. It's possible to generate the HTML you need and insert it into the right place in the post, and then update this function when you redesign the site, thus removing the need to update posts manually. This tutorial shows you how. 23. A look at the modern WordPress server stack Troubleshooting is always easier when you've got a sound mental picture of how something works. This fascinating article demystifies the WordPress stack, so you can make wise choices about your site and keep it performing well. 24. The ultimate guide to WordPress caching If your website doesn't load quickly, a good proportion of your visitors won't hang around to use it. This article explains how to use caching plugins to help you get your site into people's screens as fast as possible. 25. Timber and Twig reignited my love for WordPress Once you get properly stuck in with WordPress, the intermingling of PHP and HTML can become confusing. Twig is a template that keeps them separate, making your codebase easier to work with. Related articles: 10 top WordPress resources 18 great examples of WordPress websites View the full article

My favourite part of working on a comic book is thinking through the script in my mind and possible alternate versions. In this tutorial, I'll explain how I use Clip Studio Paint to develop a page for a book or web comic, from start to finish. I'll use an example from my current project: a Torchwood book that follows Captains Jack and John adventuring on a techno-jungle planet. It's a strong action page that shows a variety of shots and some good texture rendering. In this walkthrough I'll take you through how I go from initial thumbnails, reference and my technique when working on a page (and all the mistakes I make). I work on a Cintiq Companion 2 to create the prelims, and then for the actual page I'll use a 27-inch Cintiq hooked up to a 21-inch iMac with 4GB RAM. Every page is always challenging and hard work, but thoroughly rewarding, so always try to push yourself and above all have fun with it. Download a set of custom brushes for this tutorial. 01. Read the script Work through the script, marking up key momentsOnce the panic attack from the scary white page has subsided, it's time to read the script. I identify moments that stand out in the text for each panel, looking for dynamic and clear storytelling events to move the story forward effectively. I make thumbnails as I read, and jot down any references that I might need. 02. Produce prelims Rough out your prelim and then work over it [click the icon in the top right to enlarge the image] At this stage it's vital not to be precious over what you put down, because nothing's set in stone. I initially rough out the prelim very quickly, ignoring anatomy and rendering, then work over it – bearing in mind where the speech bubbles are going to be placed. I usually work the prelim stage up on the Cintiq Companion 2. 03. Bring together references Pencil up your references early on [click the icon in the top right to enlarge the image] The script calls for lots of vegetation, so I start researching vines, jungles, mushrooms and fungi. I usually pencil up some references during this early stage, to give me an understanding of how to make the environments fit and feel right within the page. I've now moved on to working on my big 27-inch Cintiq. 04. Block in your characters Use the Frame tool to draw borders before blocking in characters [click the icon in the top right to enlarge the image] With the prelims approved and some storytelling elements refined, it's time to start on the under-concept drawings. I draw the panel borders with the Frame tool, and then block the figures in as silhouettes using the default basic Darker Pencil brush. This gives me the correct mass of the characters to work with. 05. Add detail to the under-drawing Add a new layer and then start roughing elements [click the icon in the top right to enlarge the image] Once I'm happy with the placement of the figure, I create a new layer and knock back the silhouette, working on fixing my centre lines and anatomy. I'm using the basic Darker Pencil brush again. After all the elements are roughed in, I can start refining them. 06. Develop the line art With everything in place, it's time to start the real drawing [click the icon in the top right to enlarge the image] I'm happy with the proportions and placement of elements on the page, so it's time to create a new layer and work on the proper drawing. I start by using my custom Ink Pencil line brush and put down the line work that I want to eventually work over. During this stage I think it's important to work lightly, but include some basic rendering and lighting wherever possible. 07. Identify errors Flip the page to see if any mistakes stand out out [click the icon in the top right to enlarge the image] Once I've wrapped up the line art I cast my eye over the page, looking for elements that need amending. I flip the page to see what mistakes jump out and take a couple of notes before correcting them. Remember that even at this stage, nothing is set in stone. 08. Add weight to the lines Use Neil's custom Ink Pencil brush to increase the line weight [click the icon in the top right to enlarge the image] The next stage is to increase the line weight and introduce flow to the drawing using my custom Ink Pencil brush (I really should come up with a better name!). The line should define the light source and weight of the character, so be careful that the linework doesn't end up looking flat and characterless. Next page: How to refine your design and add texture and density 09. Add some detail to the scene A little detail can go a long way; don't overdo it! [click the icon in the top right to enlarge the image] Still using the Ink Pencil brush (I know, I know) I start adding selective line weight and shadow to the detail elements. Aim to be suggestive with your lines rather than over-rendering things, and avoid filling the page with too much detail. Remember that the absence of something can be just as effective as its inclusion. 10. Make corrections If you're not entirely happy with something, refine it before it's too late [click the icon in the top right to enlarge the image] After looking over the page, I decide I'm not happy with Captain John's head. I sketch out a replacement on a new layer and then refine the expression. References may be useful at this stage, so consider using a mirror or taking a photo with your phone to help capture the look you want. 11. Take care with minor elements Define your smaller characters with silhouettes and strong shadow [click the icon in the top right to enlarge the image] As with the debris elements in step 09, I'm careful not to over-render the minor figures on the page. In particular, I watch my line weight as the scene recedes into the background. Using silhouettes and strong shadow can help define smaller characters, too. However, it's a bit of a balancing act – smaller characters might get lost in amongst background elements if they're drawn too subtly. 12. Make the anatomy look natural Try to make your characters look dynamic and natural [click the icon in the top right to enlarge the image] I'm also not happy with Captain John's legs: they came across as a bit odd in my initial layout, so I recreate them in a more balanced stance. Always aim to make your characters look dynamic and natural, rather that stiff. I also alter the stance of the smaller characters so that they better suit the background's perspective. 13. Bring in texture elements Clip Studio Paint's texture brushes help give a page density [click the icon in the top right to enlarge the image] Using Clip Studio Paint's powerful texture and crosshatching brushes, I add smoke and air debris elements to give greater density to the page. I also add freehand crosshatching to introduce a more organic and traditional feel to the scene. Finally, I introduce some more vegetation detail to the background, and bring in a couple of light sources in panel one. 14. Nearly done… Make some final refinements before outputting your finished page [click the icon in the top right to enlarge the image] With the page almost finished I refine Captain John's face on the bottom panel and add some more freehand crosshatching in the background. I then move on to the top right panel and draw the energy waves. Once I'm happy with the page I output it as a greyscale TIF at 500dpi, then collapse back in my chair. Phew! This article originally appeared in ImagineFX issue 149; buy it here! Related articles: Tips for achieving bold comics colours Combine traditional and digital skills to create a comic cover Tips for guiding a reader through comic art View the full article

Jonathan Ford, the founding creative partner and CEO of brand design agency Pearlfisher, recently claimed that “designers have become lazy”. It might sound shocking, but with the huge influence of technology, social media and viral trends on designers today, does he have a point? Earlier this year, a bar in Bridgnorth, England, caught the internet’s attention thanks to an 'efficiently designed' poster for its music nights. Looking for all the world like a text exchange between a client and a designer, it went viral as it left viewers wondering if the designer really did simply take a screenshot of his smartphone, send it to the printers and call it a day. Is this poster as lazy as it seems? It’s a piece of design so simple and effective that some designers might be left kicking themselves. It didn't showcase stunning photography or deft illustration; rather, on the surface it appears to be laughably, arrogantly lazy. The beauty of the poster is that there’s more to it than meets the eye. Clever design disguised as lazy design? On closer inspection you can tease out where Dave Blackhurst, the man behind the poster, has played the realism card perfectly. There’s the 85 per cent battery life, the page indicator and the time of day that isn’t rounded to the nearest five minutes, let alone the hour. Everything about it is so deliberately imperfect, it’s no wonder so many people were temporarily fooled. Creating a viral poster that makes headlines for a day is the dream of plenty of graphic designers, so it’s comes as a shock that Blackhurst is actually a copywriter. In fact, the inspiration behind the poster came from humorous internet memes, a notoriously crude area of design that has already been accused of heralding the era of bad graphic design. All of this could be enough to leave graphic designers bereft. Did we waste our time studying? Is it time to throw away our Moleskines and retrain as a plumber? Of course not. However, pieces of meme-influenced anti-design like Blackhurst’s poster do tie into Ford’s accusation that “designers have become lazy". Predictable thinking Ford speaking at TYPO Berlin 2017 © Gerhard Kassner / MonotypeSpeaking at TYPO Berlin 2017, Ford made the bold statement as part of his talk on how a high-tech/low-tech fusion leads to creative thinking that can transform lives. In particular, Ford took issue with how powerful tools such as your everyday Google search and Pinterest board have led to a predictable style of creative thinking that leads to unchallenging design work. Unsurprisingly, Ford’s opinion struck a chord with an audience of aspiring designers and seasoned professionals. Johnson Banks' Michael Johnson says that when it comes to the beginning of a design project, there is a tendency among junior designers to be over-reliant on Google images and endless Pinterest boards. Michael Johnson thinks certain creative directors need a kick up the backside © Gerhard Kassner / Monotype“We’re always at pains to NOT design by mood board, or by what’s gone before and to genuinely search for something new – however hard that might be,” Johnson reveals. “Conversely, senior designers – and yes, creative directors – can sometimes need a gentle kick up the bum because they’re coasting or only doing ‘just enough’." New technology designed to automate things we once did manually is also a factor. "If we interpret ‘laziness’ in terms of technology, yes, the machinery and some programs do take a lot of the grind out of projects. And, yes, sometimes what the computer can do makes you think in a way that you didn’t before," he continues. "But – the machines never have an idea, and they definitely can’t hold a pencil.” Making an effort As we’ve seen from Blackhurst’s poster, which was created using a basic online text message generator, sophisticated tools have levelled the industry playing field, and opened it up to many who simply wouldn’t have had the chance to get involved before. It’s up to you whether or not this is a good or bad thing, but as far as high-end signmaker Luke Stockdale is concerned, the best designers still need to know their craft to succeed. The owner and creative director of Sideshow Sign co argues that while his area of the design industry has become lazy, sign fabricators still need to understand the essentials of construction and the materials involved. Signmaker Luke Stockdale defends designer tools © Gerhard Kassner / Monotype“When any new technology comes in, it has made someone’s life a lot easier and they’ve become lazy. But there are always those people who use it properly, and also make sure they’re learning the fundamentals and respecting it for what it is,” Stockdale explains. “You take photography, for example. You can go and buy a really nice camera and take a beautiful photo, just point and shoot, which you could never have dreamed of doing 30 years ago. But there’s still the cream of the crop who are pushing it, and are still taking better photos than anyone else, and they still could take those photos with a film camera. Technology makes people lazy. Isn’t that the point? So you don’t have to do anything; so you don’t have to do the work.” An honest representation Freeing up creatives from the more tedious aspects of design puts more of an emphasis on perspective, according to Rough Trade magazine’s print designer Bruce Usher. Taking Ford’s comment that designers have become lazy at face value, Usher dismisses the claim for being as lazy as the designers he’s putting down. “If technology makes it easier for anyone to communicate through design, then surely what we encounter day-to-day can only become more of an honest and exciting representation of what it is to be alive today? That's far more important to me than designers having to work hard to find the right font,” Usher reasons. “To really have an impact on the visual culture around us now, and be heard, I'd argue that we can afford to be less lazy than ever before – technology provides a platform for us to encounter so many different, incredible voices every day. Thankfully, it's now not enough to simply own the tools of production to have a monopoly on communication – and I find this a far more inspiring culture to be a part of.” Rough Trade print designer Bruce Usher finds design culture more inspiring than everBlackurst’s text conversation poster – shared via Imgur – is definitely a new voice that would never have reached a global audience if it wasn’t for new technologies. Yet the design is also a great example of Michael Johnson’s view that designers should be endlessly searching for verbal and visual solutions that push at the outer edges. “There are some companies who don’t do this,” Johnson explains. “In fact, there are quite a lot, because ‘pushing at the edge’ takes balls and tenacity and often involves debating ideas that don’t fit neatly into any mould or pre-ordained category. Our ‘Dear World… Yours Cambridge’ idea breaks all the conventions of the education sector, and yes it took some careful explaining to get it through. But it was worth it, both creatively for us, and financially, for them.” Pushing at the edge takes balls and tenacity, and often involves debating ideas that don’t fit neatly into any mould Michael Johnson This throws a spanner in the works, if we're using Blackhurst’s viral poster as an example of lazy design. He might have used tools that make the whole design process much easier, but his work found a unique way to get its message across – one that fooled and impressed hundreds of thousands of people around the world. In fact, given that the poster wasn’t a straightforward screenshot that trades purely off its laziness, you could argue that it’s a perfect example of sophisticated design created by an amateur who made clever use of the tools at their disposal. Not so lazy after all. A trade-off So where does this leave us when it comes to judging whether designers have become lazy? Just like television and publishing in the wake of the internet, it seems that the barriers surrounding design have been drastically lowered thanks to powerful tools, not in spite of them. You’re always going to have people that take shortcuts or produce work that doesn’t follow design fundamentals, but the trade-off is that you see plenty more work from people who previously wouldn't have had a chance of being found. As for the idea that professionals are resting on their laurels, we’ll leave you with Michael Johnson’s summary of his past year: “I’ve written and published a book, reconfigured our website, pushed through dozens of big global branding projects, written 60 speeches for the University of Cambridge, rebranded Mozilla entirely in the open, and am in the midst of countless speeches and conferences off the back of all this. Generally speaking I take Saturday morning off, if I can, then my week starts on Saturday afternoon and then doesn’t stop. So, not sure if that counts as laziness or not.” Read more: Are movie posters in a design crisis? Graphic design student creates the 27th letter of the alphabet New talent 2017: Best graduates outside London View the full article

Version 10g of Oracle Access Manager suffers from vulnerabilities that could allow an attacker to hijack sessions. View the full article

Adobe's apps are the tools experts turn to for their design work. Familiarise yourself with these powerful applications with the Adobe CC Essentials Training Bundle. It's on sale now for just $29 (approx. £22)! Whether you want to give your photos extra shine to make them stand out on social media or you'd like to launch a new career as a graphic designer, you'll want to know how to use Adobe's products. The Adobe CC Essentials Training Bundle comes with three courses teach you the ins and outs of Adobe Photoshop, Illustrator, and Premiere Pro. Go from novice to total pro with lessons from expert instructors. You can get the Adobe CC Essentials Training Bundle on sale now for 97% off the retail price. That means you'll pay just $29 (approx. £22) for a can't-miss bundle for any designer, so grab this deal today! View the full article

In March, the Angular team released version 4, and with it some exciting new features to explore. In this tutorial we’ll show you how to make an app using some of these new features, as well as demonstrating some of the powerful performance-enhancing, under- the-hood changes. What's new? The Angular team is calling it an ‘invisible makeover’, because most of the changes are in the background rather than with core coding functionality. An important change is the move to ahead-of-time compilation as standard, which has the potential to drastically improve performance when used correctly. TypeScript 2.1+ is also now supported, which gives us access to all the new features of ES2015. That’s not to say there aren’t also any notable changes to the basics – for example, there's a useful new template-binding syntax that enables us to simplify our code by adding an else option to ngIf, and the ability to assign local variables within an ngFor. Did I miss 3.0? Angular 4 is the first major version release of the framework adopted of semantic versioning. So don’t worry, you didn’t miss 3.0 – there were two major updates, and both were rolled into version 4.0. Note also that Angular 1.x is now known as AngularJS, and Angular 2+ is simply referred to as Angular. Be wary as some third-party tutorials and libraries may not have updated their use of these terms. Get the tutorial files In this tutorial, we'll be working with a Flower Shop app. To download the example app, go to FileSilo, select Free Stuff and Free Content next to the tutorial. Note: First time users will have to register to use FileSilo. Once you're logged in, you can download the example app here. Let's get started! 01. Start with Node Download and install Node.js by following the instructions in the wizard Let's starting from scratch, and use the Angular CLI to build a Hello World app. If you want to update an existing app, skip to step 4. If you haven’t already, download Node, which comes pre-packaged with npm. If you already have Node, check it's at least Node 6.9.x and npm 3.x.x from the command line. 02. Set up a new project Create a simple Hello World app in the Angular CLINow we have a package manager we can use it to install Angular and the Angular CLI. Amongst other things, the CLI enables you to easily generate new projects and components. 03. Check versioning If you’ve not seen an Angular project before, take time to familiarise yourself with the file structure generated by the CLI. For our new project, our package.json should list version 4.0.0 Angular packages. 04. Upgrade to Angular 4 If you have an existing Angular app with 2.x versions listed, it’s really easy to update to version 4 in most cases. We just need to install and update the relevant packages from the command line. Mac: Windows: 05. Download the tutorial app From now on we’ll be working with an Angular 2 example app that you can download from FileSilo (for full notes on how to do this, see intro above). Note that this app has been created purely for illustrative purposes. Once you’ve downloaded theFlower Shop app into your root directory, install dependencies and launch in the browser. 06. Upgrade Flower Shop to 4.0 Our custom modal module needs renaming [click the icon to enlarge) Within the flower-shop directory, upgrade to 4.0. We have some UNMET PEER DEPENDENCY errors after upgrading. 07. Fix peer dependencies Peer dependencies are for managing projects that have packages relying on different versions of the same dependencies. You have to add these manually to your package.json file. The peer dependencies that we need for Flower Shop include older versions of @angular/{core,http}, rxjs and zone.js. Review the errors in the terminal output and add each missing dependency to package.json. 08. Watch out for name changes Our Flower Shop app makes use of an open-source custom component called ng2-modal. However, the author has since updated their naming convention to ngx-modal. We need to modify our dependency name and ng-module imports accordingly. 09. Check versions Our custom modal component also needs updating to a more recent version, so be sure to update it with npm. 10. Check your work Now we’ve patched up our dependencies, it’s a good idea to clear node_modules and build it again from our package.json. If all goes well you should have a clean build! If you don’t, something may still be missing in your dependency versions. Take another look. Next page: Steps 11-20 11. View engine Let’s see what new features we can use in 4.0. The new view engine compiles to a much smaller bundle, meaning extra performance benefits from using AoT compilation with the Angular compiler ngc. This means that compilation happens at build time, once, rather than multiple times in the browser at runtime. Let’s give it a try with our app. 12. Create AoT config file We need to create a new config file to tell our ngc compiler what’s what. Create a new file in the project root and name it tsconfig-aot.json. Enter the following configuration: 13. Initiate AoT compiler We can now run our ngc compiler, and there’s an intentional bug in our code so we can see it working. 14. Fix the bug In our items.component.ts file, we’ve forgotten to assert the type of our ‘item’ parameter. This doesn’t show up as an error in the editor but might cause problems at runtime. Ngc enables us to catch these issues early. Correct buyItem and cancelItem. 15. Email validator Another handy new feature in 4.0 is the new email validator, which makes it much easier to validate an ngForm input type of email. Maybe our Flower Shop needs a newsletter. First, import the FormsModule to ngModule. 16. Form template Next, add an ngForm field in the item.component.html template. 17. Handle inputs Include handling for the email address input form field to item.component.ts. 18. Test in the browser Our email validator easily recognises only valid email addresses We should find that we can only use the Submit button when we’ve entered a string that meets the basic criteria for an email address. Well that was easy! 19. Update the structural directive syntax The final thing we’re going to update is our structural directive syntax. ngFor and ngIf both have extended syntax options. ngIf now allows an else conditional. Let’s modify our ngIf in items.component.html to include an else. The element selected by the else condition must be within an ng-template. 20. Update the ngFor syntax We have updated syntax in ngFor iterators to enable the as keyword to track an index. It’s trivial and doesn’t add much value to our Flower Shop app, but say we were receiving high volumes of item.json objects over HTTP and wanted to limit or count how many we are displaying on the page, this change makes that much easier. 21. New pipes Titlecase pipe applied to flower description text forces the first letter of each word to be capitalised Finally, we have a new pipe! Titlecase can be used to force capitalisation of the first letter of each word in a string. This can be useful for consuming data from name and address form fields, for example. Let’s test it out on the interpolated item descriptions. There’s lots more 
to explore with Angular 4, with the most significant improvements in larger apps, but hopefully this tutorial has made updating seem a little less daunting! This article first appeared inside Web Designer issue 262 – buy it now. Related articles: Design for offline How to build a full-page website in Angular Build a Material Design app with Angular 2 View the full article

Idea generation and the selling of the idea is not just something reserved for creative directors – all creative thinkers have the ability to do this well. Brooklyn-based design duo Anton & Irene will bring their popular workshop to Generate London on 20 September. In it, they'll show you how to quickly come up with a solution to a client brief, and create a convincing presentation that sells your idea either to your internal team or the client, within just a couple of hours. Where most digital agencies spend days or sometimes weeks crafting ideas and generating designs, Anton & Irene believe the pressure of time gets the creative juices flowing and will make you come up with concepts you would never have considered had you been given more time to reflect. Heavy emphasis will be placed on creating key designs that will communicate the project’s core features and user experience to the internal team, the client, and the users. You’ll learn how to sell your idea, make a convincing argument, tell a compelling story, and present effectively in front of a large group of stakeholders. This workshop is for anyone within any department in digital design – designers, UX designers, project managers, copywriters, content strategists, developers and programmers are all welcome! Irene will give hands-on advice at the Concept, Create, and Sell! workshopAnton & Irene will also present a talk at the conference, in which they will share their experience on how to establish a good work/life balance while producing creative work for both. Other Generate London workshops include Steve Fisher on running design and content sprints, Zell Liew on building scalable responsive components and Jaime Levy on UX strategy. The event will also cover adaptive interfaces, web animations, performance, accessibility, chatbots, better teamwork, and much more. Don't miss it! If you buy a combined workshop and conference pass for Generate London, you will save £95. View the full article