Jump to content
Slate Blackcurrant Watermelon Strawberry Orange Banana Apple Emerald Chocolate Marble
Slate Blackcurrant Watermelon Strawberry Orange Banana Apple Emerald Chocolate Marble

Rss Bot

Members
  • Content Count

    18,088
  • Joined

  • Last visited

    Never
  • Feedback

    N/A

Everything posted by Rss Bot

  1. Every experienced video editor knows how to use Adobe Premiere Pro. If you want to play in the big leagues of video production, you'll want to learn as well. For just $18, you can become a Premiere whiz, with Complete Adobe Premiere Pro Video Editing Course: Be a Pro! In this course, you'll learn how to manipulate audio, add interesting visual effects, and incorporate colour correction and grading. You'll also discover how to add text and titles to your videos and utilise interesting transitions to create truly professional-looking videos. You'll learn under the guidance of Phil Ebiner, a video production expert who has taught thousands of students online since 2012. No matter your experience level, you can become a better video editor with Complete Adobe Premiere Pro Video Editing Course: Be a Pro! It's only $18. Related articles: The best video editing software 2018 The best computers for video editing in 2018 The best video editing laptops in 2018 View the full article
  2. Once upon a time, the word ‘automation’ conjured mainly negative connotations in the mind of the professional web designer. It made you think of programmatic web design tools that generated cheap but badly coded sites for those who couldn’t afford the services of a professional designer. Or perhaps the sort of basic service you yourself would offer a cash-poor client, using a pre-built WordPress theme or Drupal template. Main illustration: Marcus Faint But all that is changing. The automation of web design is not just important to clients at the lower end of the food chain. It’s increasingly relevant to those at the upper end too. That’s because in a world where the biggest companies are increasingly design-driven – think Airbnb, Uber or Deliveroo – the digital services needed to keep today’s global consumers happy now far outstrip the capabilities of a single designer or small team crafting individual, bespoke pages. And as clients demand bigger and more complex solutions, there’s been a rise in the popularity of component libraries and design systems, bringing an element of automation into the design process and helping it scale. If you’re a small web shop working mainly for small businesses, this may not have impacted on you… yet. But with no way of knowing where your clients, your career or indeed society as a whole is going next, it’s still a trend we all need to know about. So we’re examining where the automation train is heading and when might be a good time to jump on board. Pattern libraries The simplest form of automation in web design is the pattern library. Also known as the component library or pattern language, it’s essentially a collection of reusable UI elements that make up a website. These may include, for example, form inputs, buttons, spans, navigation bars, image sliders, related links and social-media features. Lonely Planet’s pattern library defines a wide range UI components A pattern library defines what all these elements look like, along with how they function and also how they are coded. Some good examples to examine include those of MailChimp, Lonely Planet and also A List Apart. But just because pattern libraries are trendy doesn’t mean you should necessarily use them. “I’d say that if you only have one website and one set of components, a pattern library might be overkill,” says Andy Budd, co-founder and CEO of Brighton-based UX consultancy Clearleft. “If you’ve only got two or three designers, they talk to each other well and you keep all your documents in a nicely structured Sketch or Photoshop file, really you don’t need to have one.” If you only have one website and one set of components, a pattern library might be overkill Andy Budd, Clearleft Cellyn Tan, digital product designer at London digital consultancy Red Badger, concurs. “We make use of both pattern libraries and design systems to varying degrees,” she says. “However, how far we’ll go in systemising and maintaining a user experience is really based on what the project’s priorities are. In a relatively small product team, maintaining a set of design principles, consistent typographic hierarchy and colour schemes is manageable purely with well-organised files and conversations.” For Daniel Smith, CEO of Bournemouth-based digital marketing agency Fireworx, striking this balance is about meeting the needs and expectations of clients. “With some companies we work for, everything is bespoke on their platforms and so automation doesn’t play a massive part; it’s very much a tailored solution,” he says. “I’ve always looked at it that you’ve got a suite of tools as an agency and what we want above all is to deliver the best outcome for a client.” React Sketch.app from Airbnb bridges the gap between designers and engineers For some projects, though, creating a pattern library can provide powerful benefits. Removing the need to create elements from scratch, over and over again, means that the more your operations scale, the more consistency you can provide to users, the less repetitive your design work gets and the more productive – in theory, at least – your operation becomes. That’s certainly what digital agency Masters Allen has found since shifting to a more automated approach, says senior developer Tim Jarram. “We now keep a familiar code base across all our websites, one we can work with quickly and efficiently,” he says. “And as a result of this, we’ve found that we have been able to work smarter and provide a clearer, more effective design and build process for our customers.” Design systems Although the term ‘pattern library’ is often used interchangeably with the terms ‘design system’ and ‘style guide’, there are important differences between them. In a nutshell, a style guide defines the basics of a user interface, such as colours and typography; the pattern library is a storage system for its components; and the design system explains how these two parts connect up and work together. There’s no hard and fast rule, though, as to what a design system must contain or do. “A design system is a bit like a brand,” explains Craig Frost, design lead at Pusher, a specialist in real-time technologies based in London. “A brand isn’t just a logo: it’s a broader, more squishy thing. And I think a design system is a broad, squishy thing too. Whether you’re designing a piece of software, an API, an interface, a piece of content or whatever, a design system allows you to figure out how you communicate your ideas and then solidify them in a way that makes them easy to teach to others.” Tooling up However, creating your design system is only one step on the road to automating your web designs. The next is to find a tool to help you manage, curate and centralise these systems. Many teams create their own but you may just want to use an off-the-peg solution, such as Fractal. This is a tool that Clearleft created for its own internal purposes, which it has since made available to the community as a free and open-source download. It not only enables you to build component libraries for your web projects but it also gives you the ability to create integrated documentation, plus a full-featured API to assist devs to then integrate these libraries into their tools and production builds. Clearleft's Fractal enables you to build component libraries for your web projects “Fractal is that central source of truth that everyone around the organisation goes to; it’s where all your documentation is,” explains Budd. “It’s where you’d say, for instance: ‘Here’s what a button looks like, here are five button styles and here is the code for each. And these are our three layouts.’ It’s that central storage space. For anyone who’s got a design system, you want something like that.” How exactly you go about integrating your design system into your workflow will depend on the scale of the project and the technologies you’re using. But one thing’s for sure: there’s a great deal of innovation in this space right now and it certainly pays to look around for the best tool for the job. There’s a lot of buzz, for example, about the React Sketch app released by Airbnb’s design team: an open-source library that enables you to write React components that render to Sketch documents. Designed for teams working at large scale, you can learn more about the app in this blog post. Browser-based design tool Figma now provides a Read API, and a Write API is on its way Meanwhile, Frost is excited that browser-based design tool Figma has opened up a Read API, with a Write API in the works. “You can build some cool things with the Read API,” he says. “For example, if you have a set of icons in Figma, you can edit them there, build them out and then have them version controlled in GitHub. What we’re really excited about, though, is doing things the other way round, using the forthcoming Write API.” It’s easy for things to change during the build process and for that not to loop back to the design tool... For that reason, we’re thrilled about the prospect of having our source of truth not being a design tool Craig Frost, Pusher Given how this will enable designers to update their design systems as things evolve during the development process, Frost’s enthusiasm is easy to understand. “In my experience, while design tools are useful for exploring loose ideas and getting where you need to go, they’re not that good at maintaining that position,” he says. “It’s really easy for things to become out of date, change during the build process and for that not to loop back round to the design tool. So what grows over time is inconsistency and a breakdown in communication: all the things that eventually lead you to look back in a couple of years and wonder what went wrong. “For that reason, we’re thrilled about the prospect of having our source of truth not being a design tool. To use the latter for what it’s best at – being a whiteboard for throwing around ideas – but to keep those solid ideas about that system and all the things that it embodies out there in code, in a place we can version-control, look at and build on.” DesignOps Component libraries, design systems and the tools aimed at implementing them into your workflow are all helping web designers to automate their processes. But when you reach the scale of a global giant, you need something more. Step forward, DesignOps. “In the last two or three years in the UK and in the last five or six in the US, a lot of design teams have gone from being relatively small and under-resourced into quite big, powerful units,” says Budd. “Five or six years ago when Jeff Veen and Doug Bowman were the first designers at Google, there was no need to worry about how to be effective and optimise performance. But jump forward to now and such companies have hundreds, even thousands of designers. So you need to think about how you utilise these skills.” DesignOps Summit showed design leaders how to create design capacity that keeps pace with change That thinking is cohering around a new movement called DesignOps, put forward by the likes of Kristin Skinner, executive design management champion at Chase, and design coach Dave Malouf. Well, kind of new, that is. “DesignOps is the evolution of what we previously called design management,” says Stu Collett, founder of Super User Studio, a digital product and service design consultancy based in London and Bath. “In a nutshell, it’s about bringing optimisation or design thinking to an operational level. It facilitates cross-functional collaboration within an organisation and establishes a framework for working with efficiency and at pace.” You might say, then, that DesignOps is like a design system on steroids. Or as Collett puts it: “In the same way that UX bleeds into service design, design systems start to bleed holistically into design operations.” In the same way that UX bleeds into service design, design systems start to bleed holistically into design operations Stu Collett, Super User Studio That starts to happen, Budd says, when you reach a certain size. “If you’re a six-person team, you don’t need DesignOps,” he explains. “If you’re a 40, 50 or 60-person team, that’s probably when DesignOps starts being important. And if you’ve got a design team of about 250, I wouldn’t be surprised if you wanted six, eight or 10 people in your DesignOps team, doing loads of different tasks.” In practice, he’s found that DesignOps often comes into play when an organisation has got lots of junior and mid-level designers and they’re all overwhelmed with work. “That’s what we’ve seen happen with some tech companies in San Francisco,” he explains. “And whatever happens in the States always happens in the UK three, four or five years later. So while DesignOps is still new to us Brits, it’s definitely coming to our shores soon.” How soon it will be relevant to the company you work at or consult for depends largely on how ambitious they are, says Collett. “It’s most relevant to large enterprises but we’ve also worked with startups who are focused on this kind of thinking from the onset,” he says. “This is often due to aggressive growth plans and the relative uncertainty of their futures. Working with this kind of rigor mitigates against creating a monster (from an ongoing maintenance perspective) and enables them to be responsive and scale consistently as they grow. For smaller teams, it’s generally not so important; you can probably get away with creating a simple design repository and not overcooking it. But if your plan is to be a 200-person company in year three, it’s very relevant.” By building a DesignOps team, Airbnb has been able to streamline, as Adrian Cleave explains So what does DesignOps consist of exactly? Firstly, like its namesake cousin, DevOps, there is a technical element to it. “It’s partly about figuring out the tools and technologies you need to get designs from designers’ minds into the hands of the user as quickly as possible,” says Budd. “One way to do that is through these design systems, pattern languages and code libraries – and I think that’s the thing that people get initially fixated on and fetishise. But that’s not all that DesignOps is.” Where DesignOps differs from DevOps, he explains, is that it’s also focused on the human, ‘soft skills’ you need to grow a design team. “It’s about making sure you’re promoting your design teams externally so people know what you’re doing – so there’s an element of comms. There’s also an element of HR because you’ve got to make sure you’ve got a really good recruitment process. A lot of design leaders are having to hire very large numbers of people very quickly, so having a DesignOps person working with HR to ensure that both hiring and onboarding is smooth is very important.” DesignOps is about making sure you’re promoting your design teams externally so people know what you’re doing DesignOps also looks at internal processes, he adds. “It asks: when do you have meetings, what kind of meetings do you have? How do you structure your organisation, where do designers fit? Are designers part of the design team or are they part of product teams? Who looks after their growth? Who judges them on their abilities? How do you decide when you give that person a raise? How do you manage other people in the organisation and make sure that when new product ideas are created, there’s a good, robust system for managing new products? And that obviously touches into product management as well.” Spelled out in this way, DesignOps might sound like a major commitment of time, effort and money that you might find a little overwhelming. And in truth, you wouldn’t be far wrong. “Many larger organisations struggle to establish effective DesignOps,” admits Collett. “It’s tough getting disparate functions or teams to share new ways of working, to establish its importance against BAU tasks of the time and converging this in a way that works for the core business.” Tough or not, DesignOps is here to stay and as digital companies become bigger and more complex, only those who take it seriously will survive. “Larger organisations or ambitious startups ignore DesignOps at the risk of facing problems with resourcing, workflows and systems, all of which impact their ability to scale, [respond] to market demands and remain competitive,” he concludes. This article was originally published in net, the world's best-selling magazine for web designers and developers. Buy issue 307 or subscribe. Web design event Generate London returns on 19-21 September 2018, offering a packed schedule of industry-leading speakers, a full day of workshops and valuable networking opportunities – don’t miss it. Get your Generate ticket now. Read more: 20 cutting-edge web tools to try now How to multitask like a pro CSS tricks to revolutionise your web layouts View the full article
  3. Recently, we’ve seen a resurgence of brands adopting a crafty, handmade aesthetic, and an increased focus on tactile and analogue elements. However it's not enough to just stick a script font on your packaging design. When Kyle Wilkinson was asked to rebrand RedLeg rum to put more emphasis on the brand’s provenance, he hand-painted a script-style brush type and combined it with metallic inks to create a laid-back, Caribbean vibe. Sign up to Computer Arts' newsletter to get the latest design news This kind of attention to detail can make or break this aesthetic. Here are our top tips for embracing bespoke lettering in your branding work. 01. Use it wisely If hand lettering works with the overall brand – its origins, its ethos and its audience – great. If not, avoid; people will see straight through a tech giant trying to look personable using nothing but a script-y typeface. “It’s got its uses, but I feel it’s a lazy approach sometimes,” says Wilkinson. 02. Work with the printers Specialist typography often requires special finishes: embossing, foils, and spot colours, for instance. So it’s best, where possible, to work as closely as you can when it comes to printing the project (preferably, be physically present). That way, you can see the colours, finishes and other elements as they’re done. For more on this, take a look at our tips for getting more from print projects. 03. Keep it beautiful Jessica Hische created these labels, including a custom drawn MV monogram for Mahonia Vineyard "For a logotype to be ‘great’ it has to be beautiful – in whatever style or font it’s in,” says Jessica Hische. It must also be legible. “The logo is the first visual insight a lot of people get into the company – it’s an opportunity to set the tone for how they want to be perceived and what they want people to think of them and what they do,” she adds. 04. Mix techniques Hische works ‘by hand’ on an iPad Pro using Procreate. “I work the same in that programme as I do using pen and pencil, but with the added ability to colourise my sketches when colour is a big factor,” she says. “If I’m tweaking an existing logotype, I use my sketches as a quick ideation and iteration platform, but don’t push my sketches beyond the loose idea stage. If I’m working from scratch, I’ll take my sketches further before vectorizing.” 05. Do your research Competition is tough, especially in retail. “To make a difference you’ve really got to know your stuff,” says Stranger & Stranger founder and CEO Kevin Shaw. “You’ve got to know what works with consumers and what doesn’t, what others are doing and how to stand out; how retailers think and stock products. You also need to know about logistics and costs, so you can get the most out of budgets.” This article was originally published in Computer Arts, the world's best-selling design magazine. Buy issue 278 or subscribe. Read more: Adobe and Erik Spiekermann revive lost type sets How to design a handwriting font that isn't boring 23 great places to download fonts for free View the full article
  4. Top tier penetration testers are a breed of their own. Here is how to make sure your pentester is topnotch. View the full article
  5. A Pinterest browser button leaks malformed code into any browser-based text editor. View the full article
  6. Intel patches three flaws that could allow a local attacker to execute arbitrary code on impacted systems. View the full article
  7. Rebranding by going back to a brand’s roots has been high on the agenda in recent years, with widespread talk of the ‘retro design’ trend. But trying to reawaken a brand's heritage isn't just a case of digging around in the archives looking for a suitable retro font or reviving the brand's best logo. According to Spencer Buck – co-founder and creative partner at Bristol’s Taxi Studio – talk of trends is irrelevant. “Quite simply, you do it when it’s the right thing to do,” he shrugs. “I hate the reference to a ‘trend’ as that implies transience, whereas the point is to design the brand into a place where it’s more timeless and robust. But the sad reality is that some brands were the best versions of themselves many years ago.” Sign up to the Computer Arts newsletter to get the latest design news Brand equity can be eroded over time, Buck explains: “It washes away critical points of difference – brand USP, in old money – until the brand becomes normalised in the marketplace. “Our job is to identify the point it all went wrong, then seek to bring the brand back to being the best version of itself. Digging in the archives is not a ‘fix all’ for all branding briefs, but it’s also not a bad place to start if the brand has drastically lost its way over time.” Here's how to do it... 01. Find the enduring benefit The Clearing's rebrand of Royal Ascot tapped into the brand's heritage Richard Buchanan, MD at The Clearing, draws attention to several brands in the FMCG and automotive sectors that have been resurrected for modern times, including Arctic Roll, Monster Munch, Fiat 500, Beetle and Mini. “They were built on sentimentality, but also a reservoir of goodwill that exists in consumers’ minds,” he explains. “But those consumers alone aren’t enough to ensure that brand is successful in future. They have to appeal to new audiences.” Ultimately, Buchanan adds, for a rebrand to tap into some long-lost heritage it needs to have something substantial in its DNA that’s worth reawakening in the first place. “Heritage just for heritage’s sake won’t work,” he argues. “There has to be something at the core of the brand to give you that connection. Mini reflected popular culture in the 1960s; the ‘Mini Adventure’ campaign repackaged that in a more urban way. It’s not just graphic or verbal veneer: there must be an intrinsic benefit. "There needs to be a benefit that’s as relevant today as it was then,” he says. “Some essence, or attitude, that can be reimagined for a new audience. You need to identify those golden nuggets, those little gems that make that brand special.” 02. Don't push it if it's not working Design Bridge delved into the archives to rebrand Guinness According to Chloe Templeman, creative director at Design Bridge, the agency often works with long-standing brands whose rich heritage may have been forgotten or somehow ‘lost’ over time. “It’s our job to find those hidden gems, and tell those stories through design in a way that is relevant today,” she says, giving the agency’s rebrand of Guinness, as an example. “But this approach can only really work when the brand has a past, and an interesting one at that,” she goes on, echoing Buchanan’s thoughts. “Sometimes you search for the hook and it’s just not there, so you have to choose another route. There’s no science to it: sometimes it’s a gut feel.” 03. Look to the future “Brewdog has taken everything we knew about beer branding, and remixed it to its very core," says Moody Chris Moody, chief creative officer at Wolff Olins, believes in looking to the future, rather than the past, wherever possible. “On a personal level, I feel nervous about building on heritage alone,” he admits. “It’s a valuable component, but in no other industry would people be so self-indulgent and self-referential to their industry over that of the client’s. “All brands should aim to carry with them a core, forward-thinking DNA that is true to what they stand for. Picking a fixed point in history as the only anchor can hold you back,” Moody argues. “Authenticity shouldn’t be confused with heritage: it’s something that’s earned over time. “The only thing that really matters is what’s relevant to today’s audience,” insists Moody. “Brewdog has taken everything we knew about beer branding, and remixed it to its very core. They are as authentic as hell, but they do it by constantly innovating and challenging what was done yesterday. Heritage brands like Tetley should be learning from Brewdog’s modernity, rather than rummaging through their archives for old logos.” 04. Don't pastiche the past North's rebrand of Co-op reinvigorated its 1960s heydey “Limited editions can be a good way to stir nostalgia in people, and remind them of why they fell in love with a brand in the first place,” says Templeman, giving the example of a ‘retro’ Irn-Bru edition that was reminiscent of her childhood. “But brands have to continually move forwards. It’s about taking inspiration from past brand stories, and then putting a modern lens on it.” 05. Find the compelling story Lyle's Golden Syrup features a dead lion surrounded by flies “Heritage is only really effective if you have a purist past and a compelling relevant story,” says Buck. “For some brands, it would be impossible to look back to move forward. Robertson’s Jam is an extreme example [look it up to find out why], whereas the rotting lion carcass found on a certain brand of syrup remains perfectly relevant and as acceptable today as it was then,” he adds. “Heritage can be a loaded gun, and authenticity is a bandwagon word. Consumers can’t be fooled or entertained into buying stuff like they used to,” Buck continues. “They demand more from brands, and rightly so. Being authentic is fundamental. Without it you’re fake, and fakers soon get found out.” This article originally appeared in Computer Arts, the world's leading graphic design magazine. Buy issue 279 or subscribe here. Read more: Define a brand with homemade type 21 outstanding uses of colour in branding How to discover a brand's USP View the full article
  8. Web development is more complicated now than a few years ago. Web design tools, browser features, frontend frameworks and best practices change almost monthly and there is always something to update. And with this comes risk. How can we be sure these changes won't have unintended side effects? Testing is all about mitigating risk. If a user has trouble using a site, they are less likely to come back and more likely to jump over to a competitor. By checking every decision that gets made when developing a site, it reduces the chance that users will have a sub-par experience. Clearly there is more to user testing than just making sure a codebase is free of errors. There are steps to test right the way through the design process that can make sure everything that gets created is guided by a real user need. 01. Write lots of unit tests Have many unit tests but fewer integration and end-to-end tests to strike a balance between speed and effectiveness Unstructured code is a precursor to bugs and issues further down the road. It not only makes it hard to understand and impossible to upgrade, it also makes it difficult to test. With so many pieces all directly relying on each other, tests must run on all of the code at once. This makes it difficult to see exactly what doesn't work when the time comes. Each part of the application should be broken up into its own concern. For example, a login form can comprise database queries, authentication and routing in addition to styled inputs and buttons. Each one of these is a great candidate for having its own class, function or component. The foundation of a solid codebase is a good set of unit tests. These should cover all code and be quick to run. Most unit tests and their frameworks share the same structure: A "describe" block denotes what piece of code is under test. Inside that are a number of tests that set up a scenario and compare our expected result with the actual result. If they don't match, the test fails and we can investigate further. By creating and running unit tests as we change files, we can be sure that nothing has accidentally broken the expected functionality of each piece of code. These pieces can also be dropped into other projects where needed. As tests are already written for it, we can be sure that this particular unit is free of any issues right from the start. There are plenty of tools to help write unit tests, such as Jest, Jasmine and AVA. The best fit will depend on the needs of each project, any frameworks involved and ultimately developer preference. 02. Use test doubles when required Sinon has ready-to-use methods for faking common browser APIs such as setInterval and XMLHttpRequest While it may seem counter-productive, it can be easy to test more than originally intended. If a function depends on an external library, for example, any bugs that come from that library will fail other tests even if the code we have written is sound. The solution to this is to add placeholders – or 'test doubles' – for this functionality that behave in the same way but will always give us an expected result. The three main test doubles are 'mocks', 'stubs' and 'spies'. A mock is a class or object that simply holds the place of a real one. They have the same interface but will not provide any practical functionality. A stub is similar to a mock but will respond with pre-programmed behaviour. These will be used as needed to simulate specific parts of an application while it's being tested. A spy is more focused on how the methods in that interface were called. These are often used to check when a function is running, how many times it ran and also what arguments were supplied when it did. This is so we know the right things are being controlled at the right time. Libraries such as Sinon, Testdouble and Nock provide great, ready-made test doubles. Some suites such as Jasmine also provide their own doubles built-in. 03. Check how the components work together Once code is broken out into separate components, we then need to test that they can work together. If the authentication layer doesn't understand what gets returned from the database, for example, nobody would be able to log in. These are known as 'integration tests'. They check how one part of the application works with another. While unit tests are deliberately isolated from one another, integration tests encourage communication between these two parties. As with unit tests, the goal of an integration test is to check the end result was the intended one. In our login example, that may be a check to see if the "last logged in" timestamp was updated in the database. Since more is being dealt with at one time, integration tests are typically slower than unit tests. As such there should be fewer of them and they should run less often. Ideally, these would run only after a feature has been completed to be sure nothing has changed. The same suites used for unit tests can be used to write integration tests, but they should be able to execute separately to keep things running quickly. 04. Follow the path of each user Puppeteer can control a headless version of Chrome as if it were a user. It can generate screenshots to visualise issues The top level of automated technical testing is known as 'end-to-end' or 'functional' testing. As the names suggest, this level covers all actions a user can take from start to finish. They simulate real scenarios and how a user is likely to interact with the finished product. The structure of these tests often mirrors user stories created as part of the development process. To extend an example from earlier, there may be a test to make sure a user can enter their username and password on a login form. As they rely on the UI to run, they need to be updated as the interface changes. Long load times can also cause issues. If any action cannot be completed quickly enough, the test will fail, which will result in false positives. These tests will also run slowly. The bottleneck tends to come from running the browser, which is not as fast as the command line but is necessary to emulate the right environment. As such these will run less frequently than integration tests – usually before pushing a set of changes into production. Tools such as Selenium and Puppeteer can help with writing end-to-end tests. They enable browsers to be controlled through code to automate what would otherwise be a repetitive manual process. 05. Set performance budgets Pingdom can also help monitor user flows throughout their visit, which can help to quantify how successful a change was Modern front-end development often involves creating bundles for each project with lots of heavy assets. Without being careful, these can have a damaging impact on performance. Webpack comes with a way to keep track of performance issues such as bundle and asset size. By tweaking the 'performance' object in webpack.config.js, it can emit warnings when files grow too large and how best to tackle it. These can even throw errors that can stop a build succeeding to be sure end users aren't negatively affected. It is also important to test on a range of devices similar to those used by the visitors to the site. A mobile-first approach to design and development makes sure users on low-end devices aren't left waiting for a page to render. WebPagetest provides a comprehensive overview of the performance of a website alongside hints as to how it can be improved. Live services such as Pingdom can track the performance of a site with live users for real-world data. 06. Develop for accessibility As part of its auditing process, Lighthouse tests a site on common accessibility practices and highlights what to improve Every website should be readily accessible to everyone. While accessibility testing commonly refers to those with disabilities, changes made as a whole will benefit everybody by creating a more approachable, easy-to-navigate site. There are tools that can automatically detect the most common issues, such as poor semantic markup or missing alt text on images. Lighthouse, for example, runs inside the Chrome developer tools and gives instant feedback on the accessibility of the page it analysed. Automated tooling cannot detect everything – for example, it isn't possible for a machine to know if the alternative text for an image is appropriate. There is no substitute for manual testing alongside users with various disabilities. Devices will be set up for that user's unique needs and we will need to make sure they are catered for. 07. Work to the extremes Edge cases are a common cause of issues – particularly the length and content of strings. By default, long words will stretch the container and cause flow issues on a page. But what happens if someone decides to use characters from a different alphabet or makes use of emoji? Issues become more permanent when storing these strings in a database. Long strings may be truncated and encoding issues can end up distorting the message. All test data should include these checks. Fuzz testing is an automated technique that bombards an interface with random input as a form of stress test. The aim of the test is to make sure no unexpected issues arise from an unexpected – but possible – set of user actions. These extremes aren't just limited to content. Those on slow connections, low-end devices and smaller screens shouldn't be made to wait. Always aim for faster performance metrics, such as time to first paint, to cater for these users. In short, almost all aspects of development are more varied than anticipated. Use real-world data as early in the process as possible to be sure the site can cope with every eventuality. 08. Keep an eye on regressions As features are added or changed, tests will need to be re-run. It is important to prioritise those that are likely to be affected by that change. The test suite Jest is able to determine what has changed based on Git commits. It can then determine which tests to run first to give the fastest feedback. Visual regression tools like PhantomCSS can detect when styles have changed. A similar concept exists in Jest for objects or UI components called snapshot tests. These capture the initial state of each test. When anything changes, the test will fail until the change has been confirmed. 09. Test early, test often When tight schedules determine releases, it is easy to let the developers create a product and have testers test the execution. In reality, this can lead to a lot of wasted development time. Getting in the habit of testing each new feature early means an idea can be checked to make sure it's heading in the right direction. By using paper prototypes and mockups, it is easy to test an idea with no code at all. By regularly testing a feature as it gets developed, we can be sure it's hitting the needs of the user. If any small tweaks are required, they are easier to implement in smaller stages. It's also important to get ideas tested on real users. Rounds of alpha and beta testing can highlight issues early enough to correct them with little overhead. Later rounds should involve targeted demographics that are related to the eventual end user. Finally, keep these rounds as small as possible. A study by Neilsen found that five users is enough to get an idea of what works and what doesn't. If the element under test is kept small, the range of feedback gained will be enough to fuel the next round of testing. 10. Encourage a test culture Tests can only be of benefit when used regularly. Everybody involved on a project has to be on board to help them be most effective. Continuous integration (CI) tools automate as many checks as possible before any update lands in a codebase. These can run unit tests, check for coverage and identify common issues automatically and flag them if any issues arise. Code with any issues whatsoever cannot be added to the project. People separate from the development of a feature can perform quality assurance (QA) tests, which can act as a final check to make sure all the required functionality is present and working. If bugs do make it through the various checks, make sure there is a process in place to report them both internally and externally. These reports can form the basis of new tests in the future to make sure this issue never resurfaces. This article was originally published in issue 307 of net, the world's best-selling magazine for web designers and developers. Buy issue 307 here or subscribe here. Related articles: 5 cross-browser testing tools to try today An introduction to frontend testing 9 responsive typography tips View the full article
  9. Generate London 2018 is now less than two months away and things are really ramping up. Not only are tickets getting snapped up but preparations behind the scenes are continuing in earnest. While we still have some exciting announcements to come, we couldn’t sit on this one any longer, so we’ve decided to share some of our latest speakers. Hosted at the Royal Institution, the home of the Christmas Lectures, from the 19-21 September 2018, Generate London 2018 offers a day of workshops and a single-track, two-day conference featuring first-class web devs and designers. On top of high-calibre keynote speakers such as Sarah Parmenter, Sara Soueidan, Bruce Lawson and Richard Rutter, we’re pleased to announce some more veritable web-design celebs have been added to the lineup: Ricardo Cabello Ricardo Cabello – commonly known by his Twitter moniker @mrdoob – is a self-taught computer graphics programmer best known for developing open source libraries and tools, such as three.js and frame.js. With such extensive experience in JavaScript and 3D technologies, it’s no surprise Ricardo is training his sights on online VR. Aiming to give attendees a grounding in build-once-deploy-everywhere technologies like the WebVR and WebXR APIs, his talk WebVR with Three.js will explore how you can start building your first VR and AR experiences using Three.js. Cassidy Williams Having earned computer science degree from Iowa State University and worked for leading tech brands like Microsoft, Cassidy Williams now works as head of developer voice programs at Amazon. She’s been recognised in LinkedIn's Top Professionals 35 & Under and Glamour Magazine's 35 Women Under 35 Changing the Tech Industry. As Cassidy explores in her talk Creating Art with CSS, graphics in CSS exist at a nexus between designers’ and front-end developers’ skill sets. Exploring how to create art can improve your CSS skills, enhance your workflow and help you get a better a handle on how design is structured. In her talk, Cassidy will explore graphics from the point of view of a developer and how to build them in CSS, not only covering technique but also live-coding some CSS art. With such stellar speakers already confirmed and yet more on the way, tickets are selling fast. So make sure you pick up a ticket for Generate London now. Related articles: New speakers announced for Generate London The best VR headsets for 2018 Everything you need to know about WebGL View the full article
  10. Adobe has created some amazing photo-editing software in Photoshop, and you can learn how to use it with Ultimate Adobe Photo Editing Bundle. This bundle teaches you how to edit photos from scratch, so even if you're a total beginner, you'll be editing like a pro in no time. Join Adobe Creative Cloud and save 15% on your first year You'll learn all about high-end beauty retouching techniques, and you'll find out how to market yourself in the freelance world. And just in case you've ever been curious to learn Lightroom too, this bundle throws that in for good measure. By the bundle's end, you'll be a whizz at using both Photoshop and Lightroom to create truly professional-looking photos. And the entire bundle is yours for only $29. Related articles: The 10 commandments of Photoshop etiquette 5 best laptops for Photoshop Colourise greyscale work in Photoshop View the full article
  11. VR and AR headsets are becoming increasingly powerful, and if you work in 3D they're a brilliant way of getting a really good, close look at your 3D art. 10 tips for sculpting in VR If you've ever worn a headset for any length of time, though, you'll know they're a bit of a faff and not hugely comfortable; especially in hot weather, right? If only there was a holographic display that you could just put on your desktop and see your work in 3D without the need for a headset. But look; now there is! The Looking Glass is billed as a holographic display for 3D creators, and it looks amazing. Developed over four years by a team of holographers, engineers, Unity developers and 3D graphic artists, it uses a combination of lightfield and volumetric technologies to create a holographic display that you can put on your desktop to view and interact with your 3D work. It supports 3D models and animations in OBJ, FBX, STL and gLTF format, and there's also an app in development to enable exports direct from Maya; you'll also be able to get live viewports from Maya, Zbrush, Blender, Tinkercad, and Solidworks. There are dozens of of holographic apps available through the Looking Glass's app library, and with Looking Glass's HoloPlay Unity SDK you'll even be able to develop your own apps. For added immersive fun you can add a Leap Motion controller to your Looking Glass setup, enabling you to manipulate your work directly with your hands; you can also hook up a Nintendo Switch joycon or an Ultrahaptics development kit. Basically this looks like a dream come true for anyone working with 3D, whether you're a game developer, 3D artist, product designer, architect or just someone who enjoys messing about in 3D. The project has been on Kickstarter for less than 24 hours and it's already smashed its target several times over; if you want to be one of the first people to get their hands on a Looking Glass when they ship in December then you'd better move fast, because we can see it swiftly becoming vastly oversubscribed. If you really get a move on you could snag yourself a sweet bargain, too; Looking Glass is running some great day one offers that could save you $201 on the price of a standard-size model, or $1,001 on the large model that normally costs $3,000. Seriously, though, you'll have to be quick: the offer ends at 10AM EST (that's 3PM UTC), so get your skates on. Related articles: The best VR headsets for 2018 How to sculpt a character in VR 5 tips to improve your VR creations View the full article
  12. Maybe you're craving the flexibility and freedom of being your own boss, or you've just had enough of office politics. Perhaps you're realising you can't progress the way you want to in your current role, despite having all the top tools for graphic designers at your fingertips. Whatever your motivations, the lure of freelancing is a powerful one. This is a job where, it seems, you can choose how, when and where you work – all while getting paid to do something you really love. Freelancing can indeed offer immense creative and professional satisfaction, but there are plenty of challenges too. From the stress of working from home, juggling multiple projects and knowing you're 100 per cent responsible for them, learning how to network to win new clients to clearing your schedule for work that never materialises, freelancing can be as distressing and infuriating as it can be brilliant. Here, we explain the three main stages of your freelance career, from seeking your first commission through to working on exhibitions, agency commissions and more. To take the stress out of freelancing, we navigate some common pitfalls and challenges, with plenty of tips to help you improve your freelance career right away. Read on for level one: getting started – or skip straight to level two: build your freelance career, or level three: become a freelance star Level one: Get started as a freelancer Illustration: Emmanuel Pajon Make the decision to go freelance and you'll probably feel excited, daunted and more than a little bit terrified. That's totally normal, confirms designer and illustrator MJ Jackson, who freelances under the name I Am Cheapskate. As a freelancer, you're likely to become very familiar with that sense of nagging worry, like when you find yourself fretting that turning down one commission means you'll never work again (we promise it doesn't). Jackson now regrets saying yes to absolutely everything that came his way during the onset of his career. "I wish I had been able to worry less about turning work down, rather than accepting everything on offer," he reflects. "I took some jobs that I perhaps didn't fancy and therefore didn't enjoy, which just isn't conducive to producing your best work. Now I know exactly what my skills are, my interests and areas of expertise. It's okay to have your own rules about how and where you work and what types of clients you want to work for." Learn to sell your skills Art director and designer Pol Solsona started freelancing alongside his day job while working in advertising in Helsinki. "I started off with some small projects, so I was doing them at nights and weekends," says Solsona, who is now planning a move to New York City. His advice for finding great opportunities on your own? "Freelancing is not just about having good ideas and good skills. The most important thing is how you sell yourself and talk to clients." Pol Solsona for Cinemaissí 2015, Helsinki's Latin American Film festival Becoming a freelancer doesn't have to mean opting out of studio life entirely. "There are two basic categories of freelance work for graphic designers," explains Jackson. "You can be a gun-for-hire in a studio, or you can be a one-man/woman band at home." The former option may be lucrative, he says, "as you can get cosy if contracts are extended for months at a time." Going it alone from home, on the other hand, offers far more in the way of freedom and versatility. "It can be more fun, although getting paid is often a struggle." Jackson suggests trying to mix it up if possible. "Do a few stints in studios to line the coffers and buy yourself some breathing room – and then build up your own clients in the meantime." Admin counts as work Like it or not, being freelance means you're running a business, so it's a good idea to treat it as such right from the start. That includes getting to grips with the joys of paperwork, as well as making yourself known to the tax man. "There are two important things to remember," says Jackson. "Firstly, doing admin is work. Don't be afraid to put aside time to keep on top of it, and don't feel guilty that you seemingly aren't working when you're doing it." 'It’s always best to let someone else pull your cracker' by MJ Jackson It can be tempting to leave any paperwork to pile up on your desk, but this isn't wise. "Don't go thinking it will look after itself," Jackson warns. "It won't. Either learn to make a simple spreadsheet or ask someone who can. It's essential to have a clear record of expenses and invoices with due dates. "And the best tip I can give anyone is: don't be afraid to invoice. Get your invoice in the moment you finish a project. If you're dealing with clients directly, rather than through a commissioning studio, make sure you have written terms and conditions. I bought mine from RIBA and adjusted them to suit, but there are plenty of online resources." For more options, try the Association of Illustrators (AOI) and American Institute of Graphic Arts (AIGA). Next page: Level two: build your freelance career Level two: Build your freelance career Freelancing is a constant process of hustle and flow, which means the need for self-promotion and reinvention never stops. For Stina Jones, a freelance graphic designer and illustrator based in Manchester, UK, this meant working out how to promote both skillsets in one coherent way. "The challenge for me was striking the right balance and showcasing a little bit of everything without spreading myself too thinly," she says. "There's a degree of crossover between the disciplines, though. In more recent years, I've found using a mix of skills has become second nature on a lot of the projects I undertake, which in turn has made it easier to bring these different skillsets together in one portfolio." Jones says one of the most important lessons she has learned during her time as a freelancer is the importance of simply being herself. "When I started out as a freelancer, I spent a lot of time trying to present myself as being all things to all people, which made it take longer than it could have to find my niche and create a sustainable and enjoyable work environment for myself," she reflects. Don't neglect personal projects "I also wish I'd known the value of spending time on personal projects, over doing free work for others in the hope of a bit of exposure," adds Jones. Suite of comic and creature themed illustrations for BBC Ten Pieces: Superconductor Mixital App, by Stina Jones "Personal projects help you to expand your vision and skills, and you also find yourself doing work that you wouldn't usually do as a commission," agrees Pol Solsona. "Besides that, I try to add something new to any project because I think it's not fun to repeat the same pattern over and over. I also keep myself culturally updated by visiting local art exhibitions and events." Start networking Jones points out that networking is also hugely valuable for freelancers, which includes strengthening links with each other. "Don't disregard building relationships with other freelancers – they're not necessarily your competition. Collaborate on projects, share tips and advice, pass leads to each other and just generally be supportive of your fellow freelancers, as more often than not it's mutually beneficial." Building relationships with other freelance creatives, whether it's online through blogs and social media, or in person via meet-ups and events, is also a good way to stave off potential loneliness. Free Range Cider campaign for Addlestones, by Alex Fowkes Graphic designer Alex Fowkes agrees that freelancing can be isolating – something he didn't fully anticipate before he embarked on a solo career. "I didn't realise how difficult it would be to work alone when I first started," he says. "I craved working alone and wanted to do everything myself, whereas now I want to collaborate and work with other people." "Now that I've established my own style and a portfolio, I crave collaboration with people who have different skills who can push me. Trying to do that in the real world is difficult because client projects don't allow for it and you don't necessarily have the time to do it off your own back," he says. Choose the right hours Fowkes says that learning when he functions best has boosted his productivity. "I come up with ideas in the morning," he says. "If I need to fulfil them during the afternoon then that's okay, but I can't think of new ideas or finish something to a high level." He sits down to work around 7am. "I love looking at the clock at 10am, knowing that I've got rid of my worries for the day," he says. "I think working 9–5 is going to be used less and less," he adds. He is about to take a working holiday to the French Alps, where he plans to divide his time between freelance work and leisure pursuits. "Freelancers sometimes think they have to sit at their desks from 9am, but before or after that is when they actually get their best work done – either before the client is in, or after they leave. What matters is that you're on top of it." MJ Jackson illustrated Mallorca Dreaming This flexibility to work whenever and wherever you want is one of the great draws of freelancing, yet you can easily forget to make the most of it. "You need to embrace the fact that you are your own boss," says MJ Jackson. "If you want to take advantage of the sunshine, then get out there. Just remember that you might have to make yourself work late to catch up," he advises. "Don't be afraid of leaving your bedroom desk to work in libraries or coffee shops. You need to interact with the outside world and get inspired, and if you're working from home then you can miss out on that." Don't put too much pressure on yourself The pressure of taking full responsibility for your own business and livelihood can feel relentless at times. "Trusting my own ability as a pen and an imagination for hire seems to put a lot more pressure on me than being a permanent member of a studio," Jackson says. "Perhaps it's the feeling that you have to deliver to justify the fee, but there's no need to put that amount of pressure on yourself." After all, he explains, design is usually a collaborative process, "and you've been commissioned because they like you and your work." It's important to remember that existing clients can be one of your best sources of future work. Repeat business will potentially arise from successful projects, says Jackson, "so keep your standards high and do your best work. Make yourself invaluable. If you're choosing the right clients and enjoying the work, then you're more likely to be producing good stuff." Next page: Level three: become a freelance star Level three: Become a freelance star It's hard to predict what will win future work, new clients or positive media coverage, as there's no tried-and-tested formula. Solsona has exhibited his work at events in Barcelona, Helsinki and London. He says the exhibitions helped him personally, but didn't win him new clients directly. That wasn't the aim, however. "All the pieces I exhibited at the shows were already produced beforehand and were then selected to be part of an exhibition," he explains. It's also worth remembering that it's virtually impossible to measure the cumulative effect of social media, blogs and other profile-boosting activity in terms of commissions won or money earned. "What really helps me to keep developing creatively is to have personal projects going on permanently and to be open to any sort of project, even though it may seem a bit out of my comfort zone, since there's always a professional challenge on offer," says Solsona. Fowkes' freelance career snowballed after he created the Sony Music Timeline – a graphic installation documenting the company's 125-year history. Since then he's created a typographic installation in the home of singer Olly Murs, worked on an array of commissions for Urban Outfitters, created a London Underground poster campaign for a dating website, and published a book titled Drawing Type: An Introduction to Illustrating Letterforms. "I've been really fortunate because the design blogs have picked up a lot of these projects," he says. "I work on a lot of special projects and one-offs, and because of that the brand will really get behind the idea and push it. That means I get to play around with it, and then the blogs catch on because it's often something unique. That's great because I like to have fun and play." Keep it fresh What's problematic is when new clients expect him to repeat or reproduce a one-off project for them. "I get lots of people saying they want me to do something similar to the Sony piece," he explains. This is an example of why it's so important to have a sense of the person behind the portfolio. For Fowkes, this means creating a clear impression of his style and unique offering. Many of Fowkes' projects have come through commissioning agencies. For these collaborations to work, it helps if you have a good understanding of where the agency sits in the overall process – and, he says, if you appreciate that the agency may approach the schedule and priorities differently. "Don't be afraid to keep in contact with them," he advises. "They're very hectic and are doing so many things at once." "The fact that you're a freelancer means they see you as someone who's doing them a favour, and they won't mind if you email and say, 'Hey, I'd like to know what's going on with this project.' Don't assume you would have heard there was an update – they're doing 10 million things at once and the project that could be everything to you isn't necessarily everything to them at that time." Be versatile He gives the example of a two-week wait for news on whether a project is actually going ahead. "You might be sitting there thinking it must have fallen through because it's been two weeks, then all of a sudden it's on and they need it by the end of the week. It can be quite a rollercoaster and you need to be versatile." Of course, the same could be said about almost any aspect of freelancing, but it's particularly important to keep in mind if you're working in-house. "If you're freelancing at a studio, it's important to fit in and be part of the team," says MJ Jackson. "You'll get more out of it yourself – and the permanent members of the team will be more comfortable with you being parachuted in." "I never liked it when a freelancer came into my studio and had the loudest voice," he admits, "but by the same token, a timid hermit who never stands the tea round is the very worst type of freelancer." This article first appeared inside Computer Arts, the world's leading design magazine. Subscribe here. Read more: 11 of the best creative resumes 25 tips for staying sane as a freelancer 6 ways to save money as a freelancer View the full article
  13. There's nothing quite like seeing a tired old brand get a new lease of life. Whether that be a small identity refresh or a complete overhaul, a little bit of tender loving care can go a very long way. Students at Shillington were recently tasked with their own branding challenges, designing fresh new looks and breathing new life into various brands to change perceptions. Below is a selection of the hypothetical projects they came up with, which are sure to inspire you. To see the full list of work, visit the Shillington blog. 01. Fabricate by Ray Wong Wong's concept includes this cool 'Clean up your act' laundry bag Shillington graduate Ray Wong created this cool identity for an imaginary laundrette that doubles as an art cafe. “Fabricate is designed to reach and inspire a young, trendy audience in the edgy east side of London,” Wong comments. “The idea behind Fabricate is the interconnectivity of fabric and how it’s reflected in storytelling, like a tapestry. We create ideas from the acquisition of personal events, history and culture." 02. Verdant by Emma Clay We love the sophisticated feel to this branding project Emma Clay, a Shillington graduate in Melbourne, created this beautiful identity for a local floristry delivery company. “My concept was to appeal to the corporate and hospitality industry rather than the public,” Clay says. Oozing floral sophistication, the green and navy colour palette fits perfectly, as does her choice of keywords; dependable, intriguing and succinct. 03. News Network by Lily Fielding Lily Fielding's edgy branding features a monochrome palette, with flashes of orange Shillington Brisbane graduate Lily Fielding is responsible for this edgy branding project for a news network. Featuring a monochrome palette, with flashes of bright orange, Fielding aimed to envoke credibility and respect with her design. It is, indeed, time for a different view. 04. Urban Garden by Michaela Early Michaela Early's concept is centred around community The brief for Shillington graduate Michaela Early was to design an identity for an urban garden startup company in London. The idea behind it being to centre it around a community and entice young people away from their digital devices and into urban gardening. “I drew on the language of, and obsession with, technology and artificial intelligence to shine a light on a form of impressive intelligence we tend of overlook these days: nature,” Early says. “I wanted to connect young professionals through a concept they can understand (technology) to plants by personifying them as an alternate form of intelligence to get to know.” See the rest of the branding projects from Shillington students over on the blog. View the full article
  14. Instagram templates are increasingly popular, particularly for brands and businesses keen to achieve a stylish, consistent look and feel quickly and easily. Instagram Stories in particular have rocketed in popularity in 2018. As Mark Zuckerberg put it in Facebook's Q1 earnings report: "Stories are on track to overtake posts in feeds as the most common way people share across all social apps." Over a third of Instagram's billion-plus active monthly users make regular use of Instagram Stories. Considering more than 70 per cent of Instagram users watch them with the sound on (compared with the sound being off for around 85 per cent of Facebook users), the potential is clear. The best Instagram Stories templates come in sets, and are often animated. So whether you're looking for a template yourself, or just want some inspiration to create your own, read on for five must-have Instagram Stories templates... 01. Rose Gold This distinctive pack of Instagram Stories templates by SilverStag features 30 fully editable Photoshop files, 200 hand-drawn elements – including hearts, stars, lines, triangle, popular words and more – plus 20-hand drawn patterns and three 'foil' backgrounds in Rose Gold, Gold and Silver. Rose Gold Stories was created with photographers and bloggers in mind, but is versatile enough to be applied to different creative disciplines. It costs $19 for a standard license, and the theme is also available in animated form, or as a matching standard Instagram template. 02. Marble A more entry-level Instagram Stories template by Pande, this clean, geometric pack includes 10 designs in both light and dark versions, and has the font and sample images bundled with it, as well as a subtle marble texture – on a separate layer, should you want to turn it off. Each template is supplied as a Photoshop file with clearly labelled layers for ease of editing, and at just $10 for a standard license, you can't really go wrong. 03. Playful If animation isn't your forte, check out the Playful Collection, a pack of animated Instagram Stories templates by Ruby&Heart Studio designed to "present your content in a fresh and cheeky way." A standard licence is $26. All the animations are already set up, so you simply need to update the text, images and colours in Photoshop. The pack includes 20 colourful animated templates, a collection of handmade vector doodles in EPS and AI formats, and a video tutorial to explain the process, should you need it. 04. Minimalist This clean, minimalist pack of animated Instagram Stories templates by Sparrow & Snow includes 16 fully customisable animated PSD templates that are ideal for promoting events, products, announcements and more. A standard license is $24, and includes the templates, JPG and video previews, links to download free Google Fonts, a selection of free photos, and a video tutorial. Templates work equally well static or animated, depending on your preference, and the neutral layouts are versatile for different types of business. 05. Copper Another offering from Ruby&Heart Studio, the Copper Collection also comes with 20 pre-animated Instagram Stories templates – all held together with a sophisticated, understated copper colour palette. For $26 for a standard licence – currently reduced to $18 – you get 20 animated PSD files, plus video files for reference; a video tutorial; links to access to the relevant free fonts and images from Unsplash; and two vector Mandalas to use as you see fit. Related articles: 5 clever Instagram layouts you must see How to make money on Instagram Inspiring examples of the hand-lettering trend View the full article
  15. The flaw opened a hole in IBM's serverless Cloud Functions platform, potentially exposing confidential customer data. View the full article
  16. A high-severity flaw could result in attackers intercepting information, elevation of privilege and/or denial of service. View the full article
  17. Oracle tackles a Solaris 10 and 11.3 vulnerability tied to 2009 patched bug. View the full article
  18. In this article we'll explore five new properties coming to CSS, take a look at what they do and how to put them to practical use in your projects. We're going to be creating a website layout for a page that includes a newsfeed and a little chat box in the corner. For more CSS tricks, take a look at our article exploring different CSS animation examples. For this tutorial you'll need Chrome 65+ or Firefox 59+. Take a look at the accompanying GitHub repo for the the step-by-step code. We'll leverage the following features to create a better experience and work around some issues. CSS Display Module (Level 3) display: contents; W3C status – Working Draft Browser support CSS Conditional Rules Module (Level 3) @support(...) {...} W3C status - Candidate Recommendation Further reading: MDN web docs CSS Overscroll Behavior Module (Level 1) overscroll-behavior: contain; W3C status – Unofficial Browser support Further reading: Take control of your scroll CSS Selectors Module (Level 4) :focus-within W3C status – Working Draft Browser support Further reading: MDN web docs :focus-within, :placeholder-shown The CSS Containment Module (Level 1) contain: paint; W3C status - Candidate Recommendation Browser support Further reading: CSS Containment in Chrome 52 01. Set up the HTML for the newsfeed First we need to set up some super simple, repeating markup for our newsfeed. Let's create a .container div with an unordered list inside. Give the <ul> the class of .feed, then create 10 list-items each containing a div with the .card class and the text Card 1, Card 2 etc. Finally create another list-item in-between 5 and 6 with a class of .nested – this will be helpful later – and add a <ul> inside with three list items using the text Card A, Card B etc. 02. Style the newsfeed Now we need to add some quick styles so that this starts to look more like a newsfeed. First we can give <body> a subtle grey background colour. Then give .container a max-width of 800px and use margin: 0 auto; to centre align it. Let's also give .card a white background, 10px of padding and margin and finally a min-height of 300px – this should give us enough to make the page scrollable. Lastly we'll sprinkle some Flexbox magic on the .feed to make the items flow nicely, with two cards per row. 03. Fix layout problems If you scroll down the list you'll notice that our cards in the nested list, Card A - C, are causing some layout problems. Ideally we'd like them to flow in with the rest of the cards but they are all stuck together in one block. The reason for this is that a flex container – which is created using display: flex – only makes its immediate children (i.e. the list items) into flex items. Now, normally the only way of fixing this is to change the markup, but let's pretend that you don't have that luxury. Perhaps the newsfeed markup is generated by a third-party script or it's legacy code that you're only trying to reskin. So how can we fix this? Meet display: contents. This little one-liner essentially makes an element behave as if it isn't there. You still see the descendants of the element but the element itself doesn't affect the layout. Because we're pretending we can't change the markup (just for this step) we can be a bit smart about this and make the .card elements the flex items and almost entirely ignore the list markup. First remove the existing .feed li class and then use display: contents for both <ul> and <li> elements: Now you should see the cards flowing in order, but we've lost the sizing. Fix that by adding the flex property to the .card instead: Ta-da! Our cards are now using the wonders of Flexbox as if their structural unordered list markup doesn't exist. As a side note you might be wondering why the flex-basis value is set to 40%. This is because the .card class has a margin, which isn't included in the width calculation as you would expect when using box-sizing: border-box. To work around this we just need to set the flex-basis high enough to trigger the wrapping at the necessary point and Flexbox will fill the remaining space automatically. 04. Explore feature queries Although display: contents does exactly what we need, it is still only at Working Draft status with W3C. And in Chrome support only arrived in version 65 released in March 2018. Incredibly Firefox has had support since April 2015! If you disable the style in DevTools you'll see that our changes have made a bit of a mess with the layout when display: contents isn't applied. So what can we do about this? Time for our next new feature – feature queries. These work just like media queries but they allow you to ask the browser – using CSS alone – if a property and value expression is supported. If they are, the styles contained inside the query will be applied. Now, let's move our display: contents styles into a feature query. 05. Use 'not' for a cleaner outcome Normally in this kind of progressive enhancement scenario we'd use the query to add the new styles, but it would also have to disable some of the original styles necessary for the fallback layout. However you might decide that because support for feature queries is pretty good (if you ignore IE) you actually want to use the feature query not operator. It works just like you'd expect, so we can re-apply our original flex property to the list-items when display: contents is not supported: Inside the not query we can add some styles so that the .nested items basically re-apply what was being inherited by using display: contents. 06. Taking it one step further You can already see the potential of feature queries, but the really cool thing is that you can combine expressions using the three available operators: and, or and not. Perhaps we could also check for display: flex support and then add a float-based fallback. We're not going to do that here, but if we were we'd first modify the two feature queries like so: As a bonus you can also test for custom properties support like this: 07. Add a chat box Now we have a beautiful newsfeed in place, let's add a little chat box that is fixed to the bottom right of the screen. We'll need a list of messages and a text field for the user to enter their message. Add this block just after the opening <body> tag: 08. Style the chat box Time to quickly add some styling so it looks half decent. 09. Scroll chaining Hopefully now you'll have a little chat box with a scrollable list of messages sitting on top of your newsfeed. Great. But have you noticed what happens when you scroll inside a nested area and you reach the end of its scrollable range? Try it. Scroll all the way to the end of the messages and you'll see the page itself will start scrolling instead. This is called scroll chaining. It's not a big deal in our example but in some cases it might be. We've had to work around this feature before when creating scrollable areas inside modals or context menus. The dirty fix is to set the <body> to overflow: hidden, but there is a nice, shiny new CSS property that fixes all of this and it's a simple one-liner. Say hello to overscroll-behavior. There are three possible values: auto – The default, which allows scroll chaining contain – Disables scroll chaining none – Disables scroll chaining and other overscroll effects (e.g. rubberbanding) We can use the shorthand overscroll-behavior or we can target a specific direction with overscroll-behavior-x (or -y). Let's add it to our .messages class: Now try the scrolling again and you'll see that it no longer affects the page's scroll when you reach the end of the content. This property is also pretty handy if you wanted to implement a pull-to-refresh feature in your PWA, say to refresh the newsfeed. Some browsers, such as Chrome for Android, automatically add their own and until now there has been no easy way to disable it without using JS to cancel events using performance-impacting non-passive handlers. Now you just need to add overscroll-behavior: contain to the viewport-containing element, probably <body> or <html>. It's worth noting that this property is not a W3C Standard, rather a proposal by the Web Incubator Community Group (WICG). Popular, stable and mature WICG proposals are considered for migration to a W3C Working Group at a later stage. 10. Collapse the chat box when not in use At the moment the chat box takes up quite a bit of space, which unless we're interacting with it is a bit distracting. Fortunately we can do something about this with a little CSS magic. But first of all we need to modify our existing styles slightly. By default we want the chat box to be collapsed, so we need to reduce the max-height value in the .messages class. While we're there we can also add a transition to the max-height property: Next page: Continue exploring new CSS features in steps 11-20 11. Expand the chat box when it receives focus So our chat box is currently collapsed and unusable. How can we expand it using only CSS? Time for a new feature – the Focus Container pseudo-class :focus-within. This is just like the old faithful :focus pseudo-class selector, but it matches if any of the element's descendants have focus. This is interesting because it is the reverse of how CSS usually works, where you can only select elements based on their ancestors. It opens up some interesting potential. Adding this class will set the max-height of the .messages element to 300px, when anything inside the .chat area receives focus. Remember that an element must accept keyboard or mouse events, or other forms of input, in order to receive focus. Clicking in the <input> will do the job. 12. Take focus further This is nice, but what else can we do? How about blurring the newsfeed when the chat box has focus? Well with the help of the subsequent-sibling combinator (~) we can do this really easily because the markup for the chat box is before the newsfeed markup: That's all it takes! We can soften the effect slightly by adding a transition on the filter property to the original .container class. Now we're not suggesting this is a good idea, but we think it's pretty cool that we can do this with CSS alone. 13. Explore placeholder-shown There are a number of new pseudo-classes described in CSS Selectors Module Level 4. Another interesting one is :placeholder-shown, which matches any input that is showing placeholder text. At the moment our text field doesn't have any placeholder text, so let's add some. And then immediately after the text field add a helper message to show the user. Now add some styling for the helper message, so that by default it is collapsed. 14. Make the prompt visible At the moment the prompt is hidden, so how can we use :placeholder-shown here? Well (most) browsers will display the placeholder text until the field has a value. Just setting focus won't hide the placeholder. This is helpful because we don't want the user to send a blank message anyway, so we can hook into this behaviour to show the prompt only when the user has entered a value. Of course in the real world we'd need some validation too. We can use the negation pseudo-class :not to flip the meaning of :placeholder-shown and show the prompt when the placeholder text is not shown (i.e. the field has a value). Setting the max-height to double the 10px font-size, using 2em, will expand the block and the text becomes visible. Neat. Expect to see some clever uses for this seemingly mundane pseudo-class if it makes it through to the final spec. 15. Bring it all to life We've built the bare bones of a newsfeed with a chat feature using some of the new properties coming to CSS, but at the moment it is lifeless – you can't actually do anything with it. One particularly interesting new feature is CSS Containment, but it is difficult to demo without modifying the DOM. Let's add some super-simple JS to allow us to add messages to our chat box. First of all we need to add an ID to the <input> and the messages <ul>. We can also add a required attribute to the input too. Then create an empty JS file called script.js and add it to the page just before the closing </body> tag so we don't have to wait for DOM ready. 16. Add a sprinkle of JavaScript We need to add an event handler to the <input>, which listens for an Enter keypress, validates the field, takes the value (if valid) and adds it to the end of the messages list, clears the field and scrolls to the bottom of the messages. Something like this will do the job for our demo but don't use this in production! Now when you type in the field and press Enter you'll see your message added to the bottom of the element's list. 17. Add some additional info In order to demonstrate one of the benefits of the final new CSS property contain we need to do something a little contrived. We're going to implement a feature that displays the time a new message was sent in a box at the top of the messages list. This will appear when you hover your mouse over a message. First up we need to add this information to our new messages. We can modify the return line of the createMessage function to add the current time to an attribute. You might have noticed that new messages have an additional class message--mine. Let's add a quick class so they stand out and align to the right of the list. 18. Display the timestamp So our goal is to make the message's timestamp appear at the top of the list of messages, but we need to do it so it is always visible even when the list is scrolled. First off let's try and render the value using a pseudo-element. We only want to do this for our messages. See below. That should display the timestamp inside the message. Let's modify it slightly so it only appears on :hover, has a bit of styling and is fixed to the top of the messages area so it is visible even when scrolled. Hmm, it sort of works but it is appearing at the top of the page rather than the scrollable area. Let's add position: relative to the .messages pane to try and contain it. Ah, it doesn't work either because fixed positioning is anchored to the viewport, not its relative ancestor. Time for our final new property – contain. 19. Explore Containment CSS Containment is an exciting new proposition. It has a number of options that give you the ability to limit the browser's styling, layout and paint work to a particular element. This is of particular benefit when modifying the DOM. Some changes – even small ones – require the browser to relayout or repaint the entire page, which obviously can be an expensive operation even though browsers work hard to optimise this for us. Using CSS Containment we can essentially ring-fence parts of the page and say 'what happens in here, stays in here'. This also works the other way around and the ring-fenced element can be protected from changes made outside. There are four values for contain each with a different purpose. You can combine them as you require. layout – Containing element is totally opaque for layout purposes; nothing outside can affect its internal layout, and vice versa paint – Descendants of the containing element don't display outside its bounds style – Certain properties don't escape the containing element (sounds like the encapsulation you get with the Shadow DOM, but isn't) size – Containing element can be laid out without using the size of its descendants Alternatively you can use one of two keywords as a kind of shorthand: strict is an alias for ‘layout paint style size' content is an alias for ‘layout paint style' Each of these values are a little opaque so I would recommend reading the spec and playing around with them in DevTools to see what actually happens. The two important values are layout and paint as they offer performance optimisation opportunities when used within complex web apps that require a lot of DOM manipulation. In our rudimentary demo however we can leverage one of the consequences of using contain: paint to help us with the timestamp positioning. According to the spec, when using paint the "element acts as a containing block for absolutely positioned and fixed positioned descendants". This means we can set contain: paint on the .chat class and the fixed positioning will be based on the card rather than the viewport. You'd get the same effect by using transform: translateZ(0) but containment feels less hacky. 20. Wrap it up That concludes our whistle-stop tour of some new CSS features. Most of them are pretty straightforward, although we'd definitely recommend delving into CSS Containment in more detail. We've only really touched on a small part of it here and it is the kind of feature that sounds like it does something that it actually doesn't – the encapsulation of styling. That said it could prove very helpful, and it is already at the Candidate Recommendation stage, so it's well worth a look. This article was originally published in creative web design magazine Web Designer. Buy issue 274 or subscribe. Read more: CSS tricks to revolutionise your web layouts Explore the new frontier of CSS animation CSS Grid Layout secrets revealed View the full article
  19. At some point in our lives we've all thought 'if only I knew then what I know now...'. With any luck this is because we've gained experience over the years and developed as people. For College of Art and Design at RIT professor Mitch Goldstein, looking back on life as a design student revealed shortcomings in work ethics and how to network. Now, we're not knocking design schools for a second. However we're aware that they're not necessarily suited to everyone. And even if you thrive in structured education, this doesn't mean you're on the fast lane to success as a graduate. So, to help up and coming designers get the most out of art college, Goldstein took to Twitter to hear from his followers who have already come out the other side. To get the ball rolling, Goldstein chips in with a common problem among undergraduates: not knowing when to stop talking. Goldstein's followers, which number in the tens of thousands, didn't disappoint when it came to sharing their thoughts. Touching on everything from self-esteem to portfolio advice, there was no shortage of advice to learn from. So, if you're about to head into design school, or perhaps you're already there and finding it a bit overwhelming, we've rounded up some of the top responses. Check them out below, and if you've got any wisdom of your own that you think could help undergraduates, be sure to head over to Goldstein's thread and post a reply. Related articles: Are you a true 'Twitter original'? 49 design agencies to follow on Twitter 7 must-read books for design students View the full article
  20. Creating digital art isn't only about picking the best drawing tablet or finding the right digital art software in which you create. It's also about finding inspiration, learning new drawing techniques, and finding ways to deal with the issues many professional artists face. In this month's tools round-up for digital artists, we take a look at a variety of tools you can use to help improve your work. 01. Tayasui Sketches Price: Free (with IAP) While there are plenty of great drawing apps for the iPad (or other tablets), fewer good apps exist for those that want to draw on smaller devices, like the iPhone. Luckily, for those of us who like to create on the go, there's Tayasui Sketches. Tayasui Sketches – available for iOS, Android and macOS – gives you everything you need to create professional sketches and drawings: unlimited layers, acrylic brushes, gradients and patterns, and even a watercolour brush. Best of all, it works great on smaller devices! Apple fans can also take a look at our roundup of more great iPhone apps for designers. 02. 01ArtSchool Price: From free In 2013, K. Michael Russell started his YouTube channel, where he offers free digital art tutorials. In May 2014, he launched his first online course. Since then, more than 3,000 students in 137 countries have taken his online courses. Russell offers full courses and tutorials on Photoshop and Procreate – find a full list of learning resources on his website, 01ArtSchool. His most recent tutorial, Comic Coloring (above), includes a complete walkthrough of how he coloured the cover for Loathsome Tales #2. For more tips on this, take a look at our guide to how to colour comics. 03. Tips for overcoming artistic burnout Aaron Rutten is a digital art instructor offering digital art courses and tutorials. In addition to video instruction, Rutten also includes information about digital art tools and tips for creative professionals. In one recent video, he offers advice on overcoming artistic burnout. 04. Procreate update Price: $9.99 Recently updated to 4.1, Procreate is quickly becoming the de facto standard for creating digital art on your iPad. This latest update – the biggest so far – makes it possible to do Live Symmetry, Warp Transforms, Automatic, Layer Select, and more. 05. Procreate Pocket Price: $4.99 If you're a fan of Procreate, and you're looking for a similar tool for your iPhone, take a look at Procreate Pocket. Procreate Pocket is the iPhone version of the widely popular Procreate, and it's just as powerful. Powered by Silica-M, the same industry-leading Metal engine that powers Procreate for iPad, Procreate Pocket comes stuffed with features such as a full layering system, over 135 brushes and haptic integration. 06. Creating Stylized Characters Buy on Amazon: US / UK Whether you're a concept artist responsible for creating fresh, new character designs for film, or a video game artist putting together your next platformer game, Creating Stylized Characters will help you out. This book, published by 3dtotal Publishing, has everything you need to help you create and draw all sorts of characters. The book covers both digital and traditional media. You'll learn about the character development process, including real-world research, and sketching gestures and poses. You'll even get to explore different genres, personalities and styles. 07. Shading Techniques Buy on Amazon: US / UK Here's another book to add to your collection: Drawing Dimension's Shading Techniques by Catherine V. Holmes. Shading is one of the easiest ways of adding depth, contrast, character and movement to your drawings. And just because you're working digitally doesn't mean you can skip learning shading techniques. The more you understand how pencil pressure and stroke work in traditional media, the better you’ll be able to master it in the digital world. This book also covers lighting and blending techniques to help enhance your work. 08. 100 Tuesday Tips Buy the book: US / UK Quite possibly the most used art technique book in my collection is this one by Griz & Norm, aka Griselda Sastrawinata-Lemay and Normand Lemay. This husband and wife duo from Walt Disney Animation Studios put together a collection of art techniques for drawing, painting, animation and illustration. This book includes 100 tips that every artist needs to know about. 09. Affinity Designer for iPad Price: $13.99 (limited time) This month's list ends with something exciting: Affinity Designer for iPad. When Affinity Photo for iPad was released last year, many of us wondered when its vector-based Designer companion was coming. Thankfully, the wait is over. Affinity Designer has everything you'd expect in a professional graphics designer app: vector tools, raster tools for texturing, Artboards, symbols, constraints, stored assets, and more. So what are you waiting for? Read more: The 10 best YouTube art channels Get more from custom Photoshop brushes Get started with ArtRage View the full article
  21. Earth’s great cities are hubs of growth and innovation, but many are also beset with crumbling infrastructure, environmental pollution and growing social inequality. Around the world, governments are struggling to manage the rapid pace of change, while at the same time corporations seek to play a far greater role in civic life. With two-thirds of humanity predicted to be living in urban environments by 2050, according to the UN, cities need to be able to sustain the growing demands on their infrastructure. But if governments don’t have the resources to do this, will the role of city-maker fall entirely to private corporations? And if so, will the metropolis of the future become a branded utopia or a commercial dystopia? 17 mesmerising projection mapping demos These are the questions that lie at the heart of The Future Laboratory’s new Smart Cities project, which the strategic foresight consultancy debuted at the inaugural SXSW Cities Summit earlier this year. Exploring three future scenarios of branded cities – preferable, probable and potential – it also commissioned Inferstudio to create original animations to bring the scenarios to life, from which you can see exclusive stills here. For any branded metropolitan project to work, The Future Laboratory predicts the correct balance needs to be struck between communities and corporations Smart cities will be at the core of any major branded metropolitan evolution, with networks of embedded sensors accumulating unprecedented amounts of data on the daily activities of its citizens. It’s already happening, with our digital selves existing on platforms owned by corporate giants, and our personal data being exchanged for enriched social, cultural and economic lives. But in the next phase of hyper-connectivity, integrated branded platforms will act as much more than this – they will define the very fabric of the city experience. Many urban dwellers already feel the benefits of living in such cities, even if they do not yet register the mechanisms by which they operate. The South Korean capital Seoul is one of the most networked cities in the world, using technology to streamline a city with twice the population density of New York. Its metro system handles 7m passengers daily, but few would notice the sensors that provide Seoul’s Transport Operation and Information Service (TOPIS) with real-time data. San Diego in California has a streetlight system that can detect parking spaces and notify the 30 per cent of downtown traffic driving around trying to find them. On the opposite coast, Miami has lights that can detect gunshots and notify the police to respond. Although citizens will notice little outward visible change from upgrading the existing urban fabric, the tacit benefits to their standard of living will be significant. But as we look to the future we must also learn from the past. History is littered with images of grandiose utopias that failed to function in the real world, of moribund company towns slowly being reclaimed by nature. And the interests of corporate entities will need to be balanced with the rights and interests of the population too. Anthony Engi-Meacock, co-founder of Turner Prize-winning design studio Assemble, believes that the built environment will be better when it follows a more heterarchical and less corporate structure: "Cities are always an outward manifestation of the economics that create them," he explains. "We need to be mindful in the future that they are run like communities rather than corporations." This article was originally published in issue 282 of Computer Arts, which is out today – buy it here. Read more from The Future Laboratory here and subscribe to Computer Arts here. Read more: 10 inspirational design cities 30 world-famous buildings to inspire you How to future-proof yourself as a designer View the full article
  22. Want to become a frontend developer? You'll have to master some essential skills first. And instead of throwing down tens of thousands of dollars for college tuition, you can spend just $39 on The Ultimate Front End Development Bundle. You'll learn all about how web developers code with JavaScript, and you'll get crash courses in HTML, jQuery and CSS. Even if you're a total beginner, this bundle will get you up to speed on some of the most versatile, widely used programming languages. By the end of the bundle, you'll be ready to take your first steps on a new and lucrative career path, and tackle the world of front end development. Thought the savings couldn't get any better? Get an additional 50 per cent off with the code DIGITALWEEK50 – but act fast, as the deal ends July 27th. Related articles: The future of web design How to make it in the web design industry 5 articles to improve your web design career View the full article
  23. It's that time of the month again: the latest issue of Computer Arts magazine is on sale now. Inside issue 282 we celebrate new talent on the rise in the creative industries as we discover the finest design and illustration graduates across the UK. This includes recent graduate David Sum, who is also the proud winner of our cover competition. Check out his amazing work above. Buy Computer Arts issue 282 now This issue also see the launch of our new Trends feature, a new section that explores the culture, places, events and more that you need to know about. In this month's article our futurists-in-residence, The Future Laboratory, look ahead to the urban environments of tomorrow and ask: is it possible to build a branded city that works for everyone? The Future Laboratory explores whether the cities of tomorrow will be a commercial dystopia Save up to 60% on a Computer Arts subscription Elsewhere in issue 282, we look at a virtual reality project that aims to bring back memories to Alzheimer's patients, and delve into the melted plastic work of Nadine Kolodziey. This issue also finds the time to ask: where is the line between design jargon and BS, as well as hearing expert viewpoints on the new identity for the East London charity, City Gateway. Topped off with a look at designer Elizabeth Olwen's Instagram world and an essay on how brand campaigns can stay personable, this promises to be an issue you won't want to miss. Take a look at the lead features inside Computer Arts issue 282 by scrolling left to right through the gallery below with the arrow icons. Computer Arts is the world's best-selling design magazine, bursting at the seams with insights, inspiration, interviews and all the best new design projects. For all this delivered direct to your door each month, subscribe to Computer Arts. Right now you can save up to 60 per cent, and receive a free Computer Arts tote bag when you subscribe. Related articles: 30 books every graphic designer should read 10 great examples of graphic design portfolios The best laptops for graphic design in 2018 View the full article
  24. Have you ever felt like you're speaking in a foreign language when dealing with non-designers? If you're trying to explain kerning on a new logo design or responsive web design and being met with a puzzled expression, this helpful infographic from Pagemodo can help. Click the image to enlarge The team from the social marketing suite sat down with professional designers to figure out where non-designers trip up when describing their ideas – and this was the outcome. While you may look at this and think it's child's play, remember that even the most basic of design terms can confuse a client who's not familiar with the ways of the creative world. So the next time someone asks, send them this infographic and save yourself some time and stress! Read more: 13 incredible tools for creating infographics What designers say vs what they really mean 70 best free fonts for designers View the full article
  25. You're reading Introducing Postcards 2, Build Email Newsletter Online! ⚡, originally posted on Designmodo. If you've enjoyed this post, be sure to follow on Twitter, Facebook, Google+! Create and edit email templates online without any coding skills. Includes more than 70 components to help you create custom emails faster than ever before. Dozens of modules offer thousands of fully-responsive design options. View the full article
×