Rss Bot

Many logos cause controversy when first unleashed into the world, but that doesn't mean they won't be remembered fondly. But what is it about certain logos that mean they'll last forever? With this in mind, we asked five designers to share the logo design they most admire, and tell us what it is about that logo that inspires them. Some picked classic logos, while others went for more recent work. If this post gets you thinking, feel free to share your favourite logo with us on social media. 01. Mozilla Mozilla's rebrand was created by Johnson Banks, with the help of the internet "One recent logo design I really admire is the new Mozilla branding done by brand agency Johnson Banks," says Mimi Van Helfteren, designer at Coley Porter Bell. "Not only does it have a real smile-in-the-mind idea within the mark (the ‘ill’ of Mozilla is made out of URL characters), it was also created in a really forward-thinking way, asking the general public for input." Where to find logo design inspiration "The idea itself puts Mozilla at the heart of the internet, and is simple enough that it conveys their internet ethos of being open and free for everyone; while the typestyle is reminiscent of coding. Using the general public as a sounding board throughout the design process also ties into Mozilla’s values of transparency and participation that lets people all over the world have the creativity and freedom to publish opinions and ideas, and to collaborate without the restrictions of location. It feels well-rounded in both design and process, and true to the brand.” 02. CBBC CBBC's brand was refreshed by Red Bee agency "Like many social media users, I was initially a little skeptical when the BBC unveiled its new logo for the CBBC channel," says Matt Smith, art editor at Mac|Life magazine. "Its previous incumbent had become tired, dated and inappropriate for a modern digital age, so a refresh was definitely on the cards. However the new direction had strong overtones of corporate design and was admonished by the CBBC Controller herself for 'not screaming children's TV'. "While some of the criticisms had merit, I love the bold, colourful, playful approach, with the innovative placement of the 'B's. The abstract shapes also expanded the potential for fun idents and creative video transitions, which would appeal to a broader audience. "Do kids really care about logos? Possibly not, but I love this logo. Viewed as a whole I think the redesign was smart and classy, and will hopefully be fondly remembered. After all, time is a great healer; how many classic logos were universally loved when they were first conceived?" 03. Led Zeppelin The symbols here each represent one of Led Zeppelin's band members "The logo I admire the most is a combination of the original 1973 band logo for Led Zeppelin and the Led Zeppelin IV emblem with the four occult symbols, from the band’s nameless fourth album," says Ashley Milligan, art director of FINE. "The letterwork, wordmark and the system of four symbols are iconic: one symbol for each member of the band steeped in their own personal mythology. Both the band’s wordmark, as well as the Led Zeppelin IV logo, have a simple black and white colour scheme that has stood the test of time. Maybe the symbols you see and love in your formative years stay with you in a way no other marks do, but I scrolled and doodled this logo on countless notebooks in school, proud to wear the mark on merch while sharing the secret of the symbols with others. One instantly feels cool surrounded by these iconic marks, and no other logo does that.” For more music-related logos, see our post on beautiful band logos. 04. Empress Litho Print company Empress Litho's current identity was created by Supple Studio in early 2019 "Which logo design do I admire most? The energy of the Nike Swoosh? The iconic colouring of Coca-Cola? The simplicity of Apple? These are classics all worthy of the top spot, sure. I allow my number one, though, to be ever-changing as brands are created and identities refreshed. So what’s caught my eye lately? It’s the rebrand of Empress Litho," says Ross Middleham, content lead at the Met Office. "It does the basics right – it's legible, clear and versatile. The black and white use of negative space strikes a perfect balance between modern and traditional. The combination mark – with the two elements of graphic and type – allows for great flexibility. The crown, derived from a rotated ‘E’, gives the name importance and acts like a stamp of quality. "It looks gorgeous on vehicle wraps, stationery and clothing, but translates just as effortlessly into the digital world. The simple shapes and angles can be broken apart to create dynamic animations for social or used to reflect precision and accuracy in print. It’s a winner for me because those elements help unify its appearance across everything – from a huge banner right down to the tiniest social avatar." 05. I heart NY Milton Glaser's classic logo has a fantastic story behind it "For me it has to be the ‘I heart NY’ logo by Milton Glaser, which shows that the emoji phenomenon is not a new concept, and has a great story behind it," says Jade Trott, art director at OLIVER. "In 1976, the American graphic designer originally designed a different version of this logo. And just as the designs were being printed, he hailed a cab to go home. And then he noticed something: little graffiti love hearts everywhere. The graffiti in New York never said the actual word ‘love’. There was only ever a love heart and a couple of initials either side. And then it dawned on him: the essence of New York was shortening all words into symbols. The kids in New York didn’t have any time for words. "He drew ‘I heart NY’ on the back of an envelope, which is now on display in the MoMA, New York. And he raced back to the printers, stopped the press and changed it to the design we all know and love today. It’s timeless.” A shorter version of this article was originally published in issue 286 of Computer Arts, the world's leading graphic design magazine. Buy issue 286 or subscribe here. Read more: 6 huge logo trends for 2019 5 logo design terms you should know Discover the hidden flaws in 6 world-famous logos View the full article

In this tutorial, we'll show you how to create a glitch text effect. Special effects and animations can help websites stand out, creating an immediate impact on the user before they've had a chance to get into reading the main content. If your homepage needs to wow visitors, you can create tons of different effects using just CSS. Our process for creating glitch text here is actually pretty similar to working with animation software. We'll place keyframes at specific points, and use these to control the action. The difference with the keyframes in CSS is that they are written as percentages for the timeline of animation in the code. This isn't anywhere near as daunting as it sounds – once you try it, it's relatively straightforward to achieve good results. There will be a small amount of JavaScript used in the tutorial – to remove the loading screen once the images load onto the page – but the main focus here is on CSS animation. We'll also use CSS Grid to position elements on the screen. Download the tutorial files from FileSilo (free, login required) 01. Get set up To get started, open the start folder from the project files inside your code editor. Open the index.html page, which contains just a barebones skeleton HTML page. In the head section, the fonts need linking up so that the design displays correctly. Add the style link for the fonts. 02. Link the CSS The basic layout in CSS has been started in the site.css file, but all of the important parts relating to the glitch effect are going to be added later. In the head section of the document link up the CSS so that the basic design of the page is in place. 03. Set up a loading screen This screen will display while the page loads Now move to the body section of the page. This contains all the visible elements of the page that show up in the browser. Here add in a div that will hold the 'preloader screen' until everything on the page has loaded. This will display a logo in the centre of the page. 04. Add a header bar The basic elements of the design, before the glitch text effect is added Along the top of the screen will be a small header containing an SVG logo for the site on the left with a text heading. Then on the right-hand side of the screen, an inline menu will be in place for easy navigation. The structure of the code here adds those elements onto the page. 05. Add images Now the section that follows contains several versions of the same image in the glitchit class. What this will do is have different parts of these images turned on and off at different times in order to give a glitch effect. Following this is the text that will sit over the top of the images. 06. Trigger the glitch text effect At the end of the body content the JavaScript tags are placed. All this does is check that the page has loaded and then removes the loading screen, which in turn triggers the glitch effect animation to start by adding a class to the body to affect the relevant glitch sections. 07. Set up CSS Variables Save the page now and move over to the site.css file in the CSS folder. There is already code here, but right above any other code add in the variables shown below. These CSS Variables will hold colours and sizes that will be used later on in the design. 08. Experiment with Variable settings As you will see, these Variables are assigned to the body tag so they can be used by any tag on the page inside the body, which is essentially all the visible page. Here the transparency and blending modes are set up for the different images. There are five images and you can experiment with these settings to get different results. 09. Fill the screen with images To keep the code neatly together, scroll down to the comment that mark steps 9 to 13 in the CSS file, adding in this code. Here the glitch code positions the div containing all images to fill the full screen and be positioned absolutely in the top left of the screen. Note it gets its width and height from the CSS Variables. 10. Adjust image positioning The glitch effect uses repositioned copies of the same image As the glitch effect is made up out of copies of the same image, this code positions each div in the page and makes it slightly larger than the screen. It positions it off the top and left to account for it being bigger, and the image is then placed in the background to fill the image. 11. Select images The code here selects every image except the first image. This is because the first image stays on the page, while the others turn on and off over the top with the keyframe animation. These top images are hidden until they are needed with the opacity set to zero. 12. Adjust images two and three The second and third image are set to animate in this code. They are given the respective blend and colour modes so that they show up differently. The biggest difference here is that they are given different keyframe animations to follow to mix. 13. Adjust images four and five This time the next two images are set up quite close to the others, but again this time there is different blending modes and animations for these images to show up. The keyframes have not yet been created for some of these animations and that will come next. 14. Add the first set of keyframes The keyframes work by grabbing different sections of the image and clipping it down so only that will be visible. The opacity is turned on and off at different times so that parts of the image are visible at different times to the other animations and thus creates the glitch effect. The image is moved slightly on the x-axis. 15. Use the clip-path The clip path is taking a rectangle so the first two numbers are top left, then top right. This is followed by bottom right and bottom left. By moving these numbers different parts of the image become visible at different points. 16. Speed up the movement By moving the clip path so quickly over a number of the keyframes, the effect builds up and different parts of the image appear to flash around in an erratic fashion. Add that more layers of images are also doing this and the effect works very well at what it does. 17. Finish up the image glitches After 22% the image is turned off until the animation plays back again. This completes the glitch-1 effect with glitch-2 and glitch-3 already being supplied in the code. The next section will glitch the text that is over the top of the image as well. 18. How to create glitch text The text is only clipped briefly, to ensure it's still readable This code works extremely similarly to the previous code except that it flips the text upside down and then clips it, to give a jumping effect that is moved dramatically. Following that the clip path is revealing only smaller sections, with the fast movement through the keyframes. 19. More clipping The effect continues in this section of code by rapidly changing the shape of the clipping path. The clip-path also comes with the -webkit- prefix but for brevity this has not been shown in any of the code here. At time of writing, Clip Path is currently not supported in IE, Edge or Opera Mini, but is in all other browsers. 20. Flip the text back In the final text glitch animation the text flips back to its original position and waits for the keyframes to come around again. As you can see all of the animation takes place in 10 per cent while it stays dormant for 90 per cent of the time, giving the text the right amount of distress and allowing it to be readable. 21. Create a quick flash The glitch effect runs every few seconds to give a distressed look The final step is that one image is given the glitch-flash animation, and this series of keyframes just place the image on the screen with a 20 per cent opacity for a short period just to give an offset of the original. Save the CSS file now and the effect should start playing once the content loads in the browser. This article was originally published in creative web design magazine Web Designer. Buy issue 281 or subscribe. Read more: Add a glitch effect to your website 10 amazing new CSS techniques Create collage effects in the browser with CSS View the full article

Copywriting is an art form. It can make or break sales when it comes to marketing a product. So why not make sure you're at the top of your game with Modern Copywriting: Writing Copy That Sells in 2019? It's on sale for 94 per cent off the $199 MSRP at just $10.99 today. From crafting the perfect headline to learning exact formulas that will help prevent writer's block, Modern Copywriting: Writing Copy That Sell in 2019 will set you up as a copywriting pro. This online course includes seven hours of training that you can access at any time. That's right, you can improve your copywriting game from the comfort of your couch whenever you feel like it. Beginners are welcome, as this course covers copywriting basics, persuasion tactics and hitting the right tones among many other essential copywriting skills. Whether you're hoping to up your copywriting game for your website, email or social media, the intricacies and differences of every type of copywriting are also covered within these 66 lectures. Get lifetime access to this vital info for just $10.99 here. Want your products featured in The Creative Bloq Shop? Learn more about how to sell your products online! Related articles: How to write the perfect brief How to write engaging case studies for your portfolio How to write a great headline View the full article

DVD may seem a bit 'old school' these days, but sometimes it can be handy to have your work or design portfolio to hand - you never know who you might bump into, right? They can also be handy for storing files if that's your preferred method. For those of you born post DVD, it's an abbreviation for Digital Video Disc or Digital Versatile Disc, an optical storage disc that can store huge files sizes, like that of a movie, games and software install programs. A standard storage capacity of a DVD is 4.7 GB, while a rare double-sided and double layered one boasts of 17.08 GB, so it's easy to see why they have been, and still are, a popular choice among movie and video makers and musicians. How to burn files to DVD using Wondershare Wondershare DVD creator allows you to burn videos like MP4, MOV, FLV, ASF among others to DVD. It is available for both Mac and Windows operating systems as a free version and paid version. Simple, fast and efficient, Wondershare DVD Creator also allows you to personalise DVDs before burning them. Learn how to burn your files to DVD with this simple step-by-step guide. Step 01. First, you need to visit Wondershare website and download Wondershare DVD Creator for Windows or for Mac and install it. It is a lightweight software and therefore quick to download. From there, read the terms of the software and accept them to install. Step 02. Following installation, double-click on the program to open it. You will see a home window that let us you to choose disc or burn DVD by one click. If you opt for “One-click to Burn DVD” you will burn the videos without menu settings. Therefore, go for “Create a DVD Video Disc Step 03. You will then see a new window with source menu activated. Now, click on the add button at the centre of the window. This will enable you to upload the MP4 video/s that you want to upload and burn. The upload of files to the program is instant. Step 04. Next, the uploaded MP4 videos will appear at the left side of the new window. You can then add a title of your videos. Click on the pencil like button the video to get options to crop, trim, add effects as well as add watermarks. After making the changes click on OK and move to the next step. Step 05. From there, you have to customise the menu of your DVD. You can browse the template menus on the right side and then select one that fits your preference. You can then add texts, change menu structure and edit the background music. Step 06. After all the changes and adjustments, you can now preview the MP4 videos before burning them. Step 07. On this last step, you need to set the output settings. Define the folder path, Disc label and others on the list before clicking on the “Burn” button. The program will then burn all the MP4 to DVD within a few minutes. Other useful features of Wondershare DVD Creator You have seen how useful Wondershare DVD Creator is when it comes to burning of videos. This multilingual DVD burner also features other powerful functionalities that you might find useful. 01. Burn image to DVD burner This DVD creator does not just burn videos but it can also burn images to DVD. This option is useful when you have photos of an event and you want create photo slideshows. It supports different image formats and you can upload the images as a batch for burning. 02. DVD to video creator Wondershare DVD Creator can also convert the DVD to high-quality video formats like MP4, AVI, MOV, MKV, VOB, WMV and MTS among others. 03. Burns files to data disc burner In a situation that you have images, videos and audios that you want to burn them to a disc as a backup, then Wondershare DVD Creator has the data disc feature. The data disc option allows you to burn files within a simple click. 04. ISO to DVD burner With this software, you will be able to burn your ISO files to DVD easily. Wondershare DVD Creator is an all-in-one DVD burner that can burn audios, image, and audios to DVD and also convert DVD to video formats. Moreover, it also allows to customise DVD menus and edit videos before burning them. View the full article

Microsoft is offering rewards of up to $20,000 for flaws in its Azure DevOps online services and the latest release of the Azure DevOps server. View the full article

In this tutorial we're going to take you through the process of making your app accessible and user friendly for people around the world. Only about 20 per cent of the world speaks English, so providing other language options can improve your user experience and greatly increase your app's reach. We're going to take a look at Angular's built-in internationalisation tools and show you how to correctly use them. We've created a very simple demo app to demonstrate the process. Clone it from here and then follow the installation instructions. Start the app to familiarise yourself with it. It just displays and updates random numbers and values with different contexts, e.g. currencies, dates etc. We'll cover some of the pipes and features used during the tutorial. 17 really useful responsive design tutorials 01. Key terms for supporting languages If your site's just in English you're missing out on a big audience There are two words that are often used interchangeably when talking about translating an app – internationalisation and localisation – however, they actually mean slightly different things. Internationalisation refers to the process of preparing your app for supporting different languages. In contrast, localisation refers to the process of actually translating your app into your required languages. Essentially internationalisation is something you do once per app, and localisation happens once per locale – at least that's the plan. These terms might also be familiar in their shortened versions: i18n (where 18 is the number of letters between the first 'i' and the last 'n' of internationalisation) and l10n (where 10 is the number of letters between the 'i' and the 'n' of localisation). 02. What's localisation? There are over 6,000 languages used around the world today, most of which are only used by very small groups of people. Yet even if we only focus on the top three languages – Mandarin, Spanish and English – there will be significant differences in date formatting, grammatical structure, pluralisation and number formatting. If we include the fifth most widely used language – Arabic – we encounter another difference; Arabic is a right-to-left (RTL) script which means the UI will also have to be mirrored. So during localisation we have to consider grammar, layout and formatting differences, and of course, we also have to change the text itself. Angular can help with much of this but you'll still need to manually translate the text. 03. Locales in Angular We will need to localise for each locale we need to support. A locale refers to the general set of preferences for the considerations mentioned above that tend to be shared within a region of the world, typically a country. Each locale is represented by a Unicode locale identifier, which specifies the language code and the locale extension. Angular's default locale is 'en-US', which is the language code 'en' (English) as spoken in the region 'US' (United States of America). An app localised for 'en-US' will be subtly different from an app localised for 'en-GB' which is English as spoken in Great Britain. For example, in the US dates are (bafflingly) formatted mm/dd/yyyy, whereas here in the UK we use the more sensible dd/mm/yyyy approach. This minor difference can result in a major error in comprehension. To make things interesting let's localise our demo app for Arabic as spoken in Iraq, aka 'ar-IQ' and English as spoken in the UK, aka 'en-GB'. We'll use English as the default this time. 04. Build configuration Our demo project was created using Angular CLI, which includes some useful tooling. We're going to use the Ahead-of-Time (AOT) compiler for this project so we need to make some changes to the CLI's configuration file: 'angular.json'. If you want to use Just-in-Time (JIT) you need to configure things slightly differently. With an AOT build you get a small, faster rendering ready-to-go application which loads without the need for asynchronous requests to fetch things like templates and stylesheets. As a result you must create a build for each locale and serve the appropriate build using the URL or some kind of server-side language detection logic. The simplest approach is to create a directory for each locale, e.g. www.example.com/en-GB and www.example.com/ar-IQ. The trade off is that you can't switch language on-the-fly, but in reality that is unlikely to be something required by real users. First of all we need to add a build configuration for our Arabic locale. In the JSON file look for the 'architect.build.configurations' object. Add the following block to define a configuration for the locale: This configuration tells Angular where to output the compiled build and which translations file and format to use. It also sets the locale and tells Angular which directory the app will be deployed to. We also need to modify the default options in 'architect.build.options' to use the 'en-GB' locale. Set the following properties as shown. Note we're enabling AOT here across the board so it will be used for production and development builds: Angular supports a number of locales. Make sure you use the correct value for the 'i18nLocale' property. You can see the complete list here. Behind the scenes the above configurations simply load and read from one of these locale preference files. 05. Serve configuration In addition to configuring the build output we also need to set up the configuration for the 'ng serve' command for development. This is more straightforward as we can simply reference the build configuration we just added. In 'angular.json' add the following block to 'architect.serve.configurations': Here we are referring the build configuration options using the 'browserTarget' property, and we're also setting the 'servePath'. Before we can either serve or build the Arabic app we need to create the translations file referenced in the 'i18nFile' property above. Angular CLI includes a tool for extracting flagged text into an industry-standard translation source file. We'll cover these files in more detail later on in the tutorial but for now we just need to export the basic, empty file to allow us to compile. We'll use the 'ng xi18n' command with the following options. This is the only time we'll include the locale ID in the '--out-file' filename: This should create a file in a src/locale directory. From now on we'll always output the file named 'messages.xlf' and manually copy it over the version with the locale ID in the name. The reason for this is to prevent the extraction tool from overwriting any existing translations we've added to the file. 06. Switch configuration By switching configuration you can default to location-specific currencies At this point we can now compile the project and see what happens, but we need to tell the 'ng serve' command which configuration to use. First let's take a look at the English version. No changes here because English is the default: As you can see it looks much like the original version, which uses Angular's default locale of 'en-US'. The notable difference is the currency now specifies US$ instead of just $. Okay, now let's try the Arabic version. Stop the English version and run: As you'd expect there are more obvious differences in this version, in particular the date is now written in Arabic. Angular can do this because the names of some things, such as months and days, are from a set list and ultimately they relate to a known number. Everything else, however, is still in English. 07. Locale-aware pipes Take a closer look at the source code of 'app.component.html' and you'll see that we use a number of different pipes. The following Angular pipes are locale-aware, meaning that they adapt their output based on the current locale: 'DatePipe', 'CurrencyPipe', 'DecimalPipe' and 'PercentPipe'. If you use these pipes carefully Angular will handle a lot of the localisation legwork for you. By carefully we mean use the available predefined options wherever you can. A good example is the US vs UK date formatting we mentioned earlier. If you're in the UK and you want to display a date using the (sensible) day-month-year format, you might be frustrated to find that the predefined ''shortDate'' option renders as m/d/yy (eg. 10/9/18) and be tempted to hardcode your desired format like this: But we now know that we get the m/d/yy format because Angular uses the 'en-US' locale by default. So instead of hardcoding the format we should use the ''shortDate'' option and localise our app to use 'en-GB'. It takes a tiny bit more effort but then we can add locales to our heart's content and always have a user-friendly date format. 08. Overriding the predefined options Unfortunately it doesn't seem that there is an easy, built-in way to override a predefined format. For example you can't just decide that you'd prefer the ''shortDate'' format to be dd/mm/yyyy instead of dd/mm/y as there is no way to modify the format at runtime. Also you can't add your own predefined options. For these edge cases you could create a custom date pipe which wraps the Angular 'DatePipe' and handles any custom formats per-locale. Anything it doesn't recognise would be passed on to the built-in 'DatePipe'. 09. CurrencyPipe Off the shelf the 'CurrencyPipe' will format a number as US Dollars, trim to two decimal places and add groupings as defined in the locale's preferences. You'll notice that in both our locales the currency is always in US Dollars. It doesn't magically switch to Sterling (GBP) when you use the 'en-GB' locale. The reason for this is that £10 is not the same as $10, so you must explicitly specify the currency your number refers to. Let's update 'app.component.html' to use GBP throughout. When specifying the currency code you must use the correct value from the ISO 4217 standard (list available online). Modify the two currency pipes by adding ':'GBP'' like so: And you'll start seeing the £ symbol instead of US$. Remember, it doesn't do anything clever like automatically convert USD to the equivalent value in GBP if you change the currency – it just changes the symbol it uses. 10. Translation workflow Okay, so we've got our two locales configured and Angular is helpfully doing some of the work for us out of the box, but the text is all still in English. Angular can't translate this automatically, sadly, but it can help us with parts of the workflow. This is what has to happen: Flag static text in all components for translation Export translation file containing this static text Modify the translation file and add the relevant translations Merge translated translation file back into app Angular helps us with steps 2 and 4, but as developers we need do step 1 manually. Step 3 would typically be completed by a translation professional or agency, using special software to read and update the translation file. 11. Axis details To achieve this we have to add a special attribute to every element that contains fixed text to be translated. To be clear if the content arrives from an API then that isn't fixed text and you'd need to localise that in the API. You only need to add the attribute when the text is written directly in the HTML template in your source code. A key point here is that you should try to keep your TypeScript files locale-agnostic – in other words, avoid putting any text that needs to be translated in the component logic and keep it all in the templates. Otherwise the extraction tool won't be able to extract it. It's good practice anyway to separate your concerns – in life and in code. Let's open up 'app.component.html' and start with the 'Current value' title. Simply add the 'i18n' attribute to the element that directly contains the text. It's important to understand that this is just a 'dumb' custom attribute. It isn't an Angular directive that triggers anything at runtime, in fact ,the compiler removes it after translation. Anyway, let's see what happens when we run the extraction tool again to regenerate the translation file. Remember '--out-file' is just 'messages.xlf' now: Open up the output XLF file and you should see a new translation unit block that looks something like this with some additional context information: Great, that means the tool picked up the 'i18n' attribute. That long ID is generated by the tool and will stay the same unless the text changes. If you have multiple instances of exactly the same text they will all get the same ID. Don't edit this ID! If you prefer, you can specify a custom ID within the 'i18n' attribute. If you do this the ID will remain the same even if the text changes, so you need to be sure you don't have any ID collisions throughout your app. Use the '@@' prefix to set a custom ID. Here the ID will become 'title': 12. Add some context To ensure the translator is able to provide an accurate translation they will often need to know the context that the text is being used in. The 'i18n' attribute allows us to define a description and a meaning to help the translator. The format is as follows: Let's update our title with a meaning and description: That should give the translator enough context to provide an accurate translation. Regenerate the translation file and you should see these values have been output. It's worth noting that if you don't use a custom ID the generated ID takes the meaning and the text into account. So the same text, but with a different meaning, will get a different ID. The description, however, has no impact on the ID. 13. Text with variables Let's move on to the intro section. The first paragraph contains text and a variable which will be interpolated at runtime. How do we handle this? Well happily it is quite straightforward. Again we need to add a meaningful 'i18n' attribute to the containing element. Add it directly to the paragraph element: See how the variable interpolation has been detailed in the output. The nice thing about this is it allows the translator to modify the grammatical structure of the sentence if necessary, without breaking the binding. For example, there may be a language where the sentence would be best written: X value was yesterday's closing, ie with the variable at the start. 14. Pluralisation Moving on to the next paragraph you'll see some intimidating syntax. This is called ICU Message Format and it allows you to specify different chunks of text based on the value of a variable. You can use this to add the 's' to words in English when the value is zero or not one. For example, if 'seconds' is a variable containing the number of seconds we can use this ICU pluralisation expression: Which will output: 0 seconds 1 second 2 seconds It doesn't appear to be documented but you can also use the 'AsyncPipe' inside the pluralisation syntax to work with Observables. In that example 'one' and 'other' are pluralisation categories. There are a number of categories to choose from, but beware! Not all locales support all the categories, and Angular doesn't tell you if you try to use a category that isn't supported by the current locale. It is easy to end up thinking that you've done something wrong because the 'two' category isn't working in your 'en-GB' locale and instead you are seeing the 'other' text. Inexplicably 'en' (and many other common languages) only support 'one' and 'other', even though 'zero' and 'two' are explicit values. Check out this file to see what's actually supported. 15. The multiple radial bar charts We can work around this limitation by using numbers instead of categories. Just prefix the value with an '=': This is already set up in the demo app, we just need to add the 'i18n' attribute to the containing paragraph: Run the extraction tool again to see how this looks. You'll see that this is output slightly differently. It will create two translation units; one for the ICU expression itself and one which interpolates that expression into the original string. 16. Select expression If you want to display different text depending on the value of a variable you can use a 'select' ICU expression which is very similar to the 'plural' syntax demonstrated above. In our demo app we monitor the change applied to the value and create an Observable stream called 'trend$' which outputs 'up', 'down' or 'stable' depending on whether the change is positive, negative or zero. We then hook up our 'select' ICU expression to output a different string depending on the stream value. Here you can see the 'AsyncPipe' in use: This is a somewhat cleaner syntax than using 'ngIf' or 'ngSwitch' to manipulate the DOM, plus it also plays nicely with the extraction tool. Add the 'i18n' attribute to the containing element: Regenerate the translations file and you'll see the approach is similar to the plural output, with two translation units created. ICU expressions are pretty handy once you get used to them, plus you can nest them to create more complex outputs. 17. Add translations Once you've marked up all your text that needs translating you can generate a translation file One more 'i18n' attribute to add: Now we've marked up all the text that needs translating we can generate the translation file one last time. Once it is created rename it to 'messages.ar-IQ.xlf' and replace the previous incarnation. This is the file we'd be sending to the translation professional, but for the purposes of this tutorial, Google Translate will be standing in! Open up the XLF file and duplicate every '<source>' element, renaming it '<target>'. Unfortunately it can be quite untidy so it might help to beautify the contents. To check we've got them all, save the file and start the app with the Arabic locale: If you see any messages in the terminal like this that means you've missed one: Hopefully you won't have any errors and you'll be able to see the app in the browser. We've not added any actual Arabic yet so it won't look much different. 18. Google Translate Google Translate is an easy way to create translations for your site Let's start with something easy – the 'Current value' title. Google Translate tells me it should be (Arabic text here) so update the value in the '<target>' element: So far, so good. Now let's do one with interpolation. Here is "Yesterday's closing value was…" (hopefully!): Use a number when you translate so you can see where the interpolation should be. Notice that when you see the translated result in Google Translate it will appear reversed – ie the number at the start – but when you copy and paste it into the translation file it will return to the original order. This is happening because Arabic is an RTL language so the script is (almost) entirely mirrored. Google Translate does this by adding a 'dir="rtl"' attribute to the containing element. We'll learn how to do this in the next step. The rest of the translations are available in the demo repo, 'tutorial' branch. 19. Script direction We need to manage the script direction in our app because Angular won't do this automatically for us. There also doesn't appear to be any way to detect if the current locale is an LTR or RTL language, so we'll need to hardcode this. It'd be great if Angular offered a built-in directive for this. Open up 'app.component.ts'. Import 'Inject', 'LOCALE_ID' and 'HostBinding' from ''@angular/core''. Then set up the 'HostBinding' as follows. This will add a 'dir' attribute to the AppComponent and set the default language direction to 'ltr': Next add a constructor and inject the 'LOCALE_ID'. Remember this is set by our configuration because we're using AOT. And finally add the following snippet to the existing 'ngOnInit' method. Here we are checking if the 'LOCALE_ID', ie 'ar-IQ', starts with 'ar' and if it does change the direction to 'rtl' instead. If you plan to support more locales then you'll probably need to refactor this to make it more scalable, however, as there are only about ten RTL languages in use today this approach shouldn't be too unwieldy. Start the Arabic app and you should now see that the UI is mirrored – the £ sign should be on the right. 20. Production The final step is to generate and check our production builds. First, though, we need to make another quick modification to the 'angular.json' configuration. In 'architect.build.configurations' duplicate the existing production object and rename it '"production-ar-IQ"'. Then copy and paste the properties from the existing '"ar-IQ"' configuration into the object, so you have both the production options and the 'i18n' options. You also need to update 'architect.serve.configurations' too. This time duplicate the existing '"ar-IQ"' object and rename it '"production-ar-IQ"' and change the 'browserTarget' value to point to your new 'production-ar-IQ' configuration. Now you can build and serve your production Arabic locale with this command: Okay, we're done! We've successfully internationalised our app, and localised it for 'en-GB' and 'ar-IQ' audiences. Angular makes the process remarkably straightforward for the developer, in fact, the hardest bit is figuring out what the translations should be – apologies to any Arabic speakers if anything is wrong! This article was originally published in issue 281 of creative web design magazine Web Designer. Buy issue 281 here or subscribe to Web Designer here. Related articles: How to build a full-page website in Angular The best laptops for programming in 2019 How to build an app View the full article

Just when you thought the internet might go a day without having a meltdown over something seemingly innocent, Slack came along and revealed its new logo. The workplace chat app unveiled its redesign yesterday as part of a general refresh, but judging by the negative reaction of social media, it looks like the multicoloured hashtag logo is going to be missed by many. Created by the app's in-house design team in partnership with Michael Bierut and the team from Pentagram, the new logo design keeps the colourful palette we've come to associate with Slack, but it's traded the hashtag motif for a design that more closely resembles a pinwheel. Logo design: everything you need to know Sold by the Slack team in a blog post as an evolution rather than an overhaul, the new logo is designed to be easier to use and more cohesive across multiple platforms. Meanwhile the previous logo, which is either a hashtag or an octothorpe depending on your vocabulary, worked okay on a screen, but struggled to perform elsewhere. "It was also extremely easy to get wrong," the Slack team explain. "It was 11 different colors – and if placed on any color other than white, or at the wrong angle (instead of the precisely prescribed 18º rotation), or with the colors tweaked wrong, it looked terrible. It pained us." This clunkiness makes sense when you consider that Slack's original logo was created before the company was even launched. How many first draft logos could you imagine working seamlessly once they've hit the big time? And as for the updated identity, Slack wants it to look new but also reassuringly familiar. "It uses a simpler color palette and, we believe, is more refined, but still contains the spirit of the original," says Slack. "It’s an evolution, and one that can scale easily, and work better, in many more places." Makes sense, right? Well, try telling that to the legions of online commentators currently tearing strips off the redesign. Search for the Slack logo on social media or give it a quick Google, and you'll see articles saying it's 'simply awful', 'really wrong', and one even comparing the new icon to penis swastikas. You might be attached to the hashtag logo, but it had a lot of flaws This sort of kick-back isn't anything new, even the best logos can be met with a frosty reception. As Slack explains though, this isn't change for the sake of change. The old design, while recognisable and distinctive, simply wasn't fit for purpose. The Slack team put it perfectly when they said that "a good reason to change a logo is that it’s not doing the job you want it to do – and because a simpler, more distinctive evolution of it could do that job better." The new logo works better off screen, plus it lends itself to some creative interpretations while remaining distinctly 'Slack' Yes, a hashtag logo for an app that's all about hashtags makes sense, but isn't the whole point of logo design to try and find an imaginative, sophisticated and succinct way to represent a brand? The hashtag worked well enough for Slack's early days, but looking back on it, the design was perhaps too straightforward and weighed down by its colour palette. The new design, on the other hand, calls to mind a flurry of speech bubbles coming together to communicate. A pretty good summary of the app if you ask us. And by working in the core colour basics and they way they're laid out in the hashtag logo, the transition from the old look to the new is made as smooth as possible. Related articles: Where to find logo design inspiration 6 huge logo trends for 2019 The secrets of good logo craft revealed View the full article

The year is 2019, and it's about time you knew how to build your own website. The Complete Front-End Developer Bundle gives you all the knowledge you need to begin creating web pages from scratch. This bundle has a MSRP of $1419.97, so you're going to want to nab this deal at 97 per cent off and get it for $41 today. In order to build a website, there are some basic building blocks you need to master. Don't have any prior experience? No problem! These nine courses give you over 66 hours of training in these front end fundamentals, and the breadth of information means even a beginner can get into the swing of things while taking in the classes. Let this bundle of courses introduce you to the world of website building – schooling you in JavaScript, CSS, Adobe Design Tools and more. Whether you're interested in building a website for your very own business or starting a new career and building for others, all of the knowledge in this bundle will pay for itself in no time. Get all of the knowledge included in The Complete Front-End Developer Bundle today for just $41 here. Want your products featured in The Creative Bloq Shop? Learn more about how to sell your products online! Related articles: 5 cross-browser testing tools to try today 35 brilliant 404 error pages Get to grips with the theory of UX View the full article

If you're an artist or a recent graduate looking to kickstart your career, Adobe's Creative Residency could be the opportunity you've been waiting for. The year-long programme, which gives selected artists the chance to develop their career through a personal passion project, is now open for applications for creatives from Canada, Germany, the US, UK and Japan. Offering artists the support of a full salary, health benefits, mentorship and access to its software, Adobe's Creative Residency is a fantastic chance to build your dream career around your creative vision. On top of this, the course also includes valuable speaking opportunities and project-specific support to help make your work the best it can be. Get Adobe Creative Cloud now Applications for the 2019 Adobe Creative Residency run until 7 February. The programme welcomes a variety of ideas and projects, however Adobe has specified that they are keen to work with candidates who have a strong focus on UI/UK, short-form online video, illustration (digital drawing and painting), design (digital and print) and photography. Can't see your speciality on that list? Don't worry, Adobe will still welcome your portfolio. The company wants to see work that you believe in, and that you would still pursue even if you didn't get into the programme. It's that sort of work that stands out. The 2019 Adobe Creative Residency welcomes a broad range of styles How to apply If you're interested in applying, Adobe has put together a bunch of useful resources to help you out. The Creative Residency site is packed with useful information, including an FAQ page and a whole section dedicated to how to apply. When applying, be sure to ask yourself some questions about what your project wants to achieve, and what materials or support you will need. There isn't a one-size-fits-all approach when it comes to applying, so feel free to let your creativity loose and play up the strengths of your style. Adobe will also consider your previous work when judging your application. This includes your flexibility to try new things, previous work experience, and drive to take on new challenges. Three past projects will be taken into account, so it's a good idea to include links to your online portfolio. If it's in need of an update, be sure to take a look at our beautiful examples of design portfolios for inspiration. To help you get started with your application, previous resident Anna Daviscourt has put together a video (above) of 5 things to keep in mind before you submit your work. Meanwhile, previous Creative Resident Isabel Lea had this to say about her experience on the programme. "I run a creative studio called ATYPICAL and with day to day client work it can be hard to focus on more experimental work. The Adobe Residency gave me a year to really push the boundaries of what’s possible with design." "This year I’ve been exploring how we make language visible through typography in a more playful and experimental way. The programme doesn’t just accelerate your creativity in your field but your career as a whole. Not only have I made typefaces, design products and installations but I’ve also been given platforms to share my journey through conferences, workshops, talks and livestreams." "All of this combined has helped me push my work forward in unexpected ways and connect with opportunities I never thought possible." Related articles: 80 best Adobe Illustrator tutorials The 18 best Adobe Illustrator plugins Crack Adobe CC with this keyboard cheat sheet View the full article

The two were able to hack into the SEC's computer systems due to phishing attacks that stole credentials and spread malware. View the full article

Leaky Fortnite single sign-on mechanism could have allowed hackers to access game accounts. View the full article

Some serious users of Houdini might say that the software is more of a 3D operating system, because of its complexity and versatility. The newest release, 17 or Banshee, is the heaviest release in recent years. As usual, the dev team at SideFX have focused mostly on the effects modules, but have also touched on almost all other parts of Houdini, so just listing all of the new features and enhancements would take a while. As you may have noticed in previous releases, many new features are ‘by TDs, for TDs’ kind of tools and the low-level, hard-coded ones are throttled back. It’s the same with this version, and we’ve got quite a few new, ready-to-cook shelf tools that will help you create stunning 3D art. Get Houdini 17 Banshee from $269 per year Houdini 17: New tools This new release has a range of new tools and features added One of the best is the new Whitewater tool, which realistically simulates self collision, cohesion etc for all foam, spray and bubble effects emitted from any kind of FLIP simulations. In the previous versions it was a much simpler particle system. There was always the opportunity to enhance the simulation with custom modifications or even custom solvers, but usually the rush of a production doesn’t allow for such fidelity chasing, which ends up with 'looks good, but I feel that something is wrong' results. On top of this, clients are looking for rapid results, so features such as a one-click Perfect Storm tool can be a real advantage, at least as a high-level starting point. Houdini 17: Node-based architecture In Houdini the TD work, node network building and coding are friends, not enemies. Most of the simulation and procedural tools are put together by TDs at SideFX, with high-level node networks inside. These are based on deeper-level node networks, either with top-down operators and left-right VOPs. The coded nodes can be open source (VEX, the programming language of Houdini and OpenCL) or ‘baked’ ones. The solvers themselves work in this way, thus the nodes and tools that come with Vellum – the biggest new feature in this release – are fully transparent, like the Pyro and other solvers, and aren’t black boxes as is the case in other software. We can dive into them, even unlock and modify or rebuild these networks inside. For problem solving, the opportunity to rewire almost anything in Houdini feels for me much more natural and direct than writing code, as basically there are circuits connected to each other in the computer’s memory and processor. I think this is the most fundamental advantage of Houdini compared with many other 3D packages. The disadvantage of this node-based open architecture is that in simpler scenes it feels slower than a similar one in a hard-coded software. However, with heavy scenes the extra processing time consumed by the node-based architecture is relatively insignificant. Furthermore, the low-level VOP networks can perform as fast as a hard-coded module. Houdini 17: Vellum The fabric on this statue was added from Vellum, then rendered with Optix Vellum is a brand-new, GPU-accelerated multi-physics engine based on the new XPBD model, a particle-based dynamics system for a broad range of usage. There are Vellum shelf tools for cloth, inflated objects, hair, grains and a faster alternative for simulations where we used FEM before, like tissue and other soft bodies. Luckily, Vellum nodes are also available in the SOP context, so it’s convenient to use them for simulation-based modelling or to simplify the scene structure, without the need for a separate DOP network. Houdini 17: The downsides As a look dev/lighting artist, I have used software such as Maya, 3ds Max and Clarisse in production, but have often found myself in a situation where I felt them to be quite restrictive. However, the weakest area of Houdini is still the UI and user-software interaction in general. SideFX has enhanced them a lot during the last decade, but there are still annoying flaws with the viewports, the IPR and some other functions are quite laggy (the Esc key and Manual update are our friends), especially when comparing with Clarisse. Coming from Maya, many parts of the docs felt weak and unhelpful. It seems that VFX artists just can’t get away from software-related frustrations. That’s why I went back periodically to other software and did not transition fully to Houdini. The final decisive factor that made me put those other software aside though was stability issues. The most annoying thing is having to restart and reload the scene every few minutes. Of course Houdini isn’t bug-free – in H17 I ran into multiple crashes and broken features which work fine in H16.5 – but usually as time goes on the dev team at SideFX really consider the bug reports and release bug fixes on a daily basis, and a new production build every month. The customer support is great, and every time I received quick and helpful answers. The community and the resources on the internet are also bold and helpful – as it should be. Get Houdini 17 Banshee from $269 per year Read more: The 10 best 3D movies View the full article

It’s safe to say the simple days of web design are long gone. Designing for the internet used to be text and image working together to connect with the user. But with the growth of mobile and social media, as well as a younger generation of consumers, sites now have to suit new behaviours and expectations. The biggest drivers of this shift have undoubtedly been Facebook, Twitter and Instagram, as over the last decade they’ve essentially changed how web traffic is funnelled, building entirely new user journeys. That’s ultimately a path we’re still on – as it continues to evolve around us now – but there are already some clear lessons that we, as web designers, can learn and factor into builds. 29 web design tools to speed up your workflow 01. Tailor your content to fit your audience If you look at Instagram, the platform has typically attracted a younger audience, but today there’s an older demographic that’s getting involved. That has in turn had an impact on how we use it, as often now the image to copy ratio per post is tailored to each specific audience – younger versus older audiences. For example, Gatwick Airport’s Humans of Gatwick series on Instagram has a very long caption aimed at a more mature audience who will read all of it, whereas Adidas focused more on the visual and less on the copy when releasing the new Solar Boost range, aimed at younger consumers. The lesson here for web design is to tailor the image to text ratio of your design to each specific audience. Adapting and introducing this level of audience understanding helps smoothly transition a user from social media to when they arrive on the website, thus helping to set the site’s content hierarchy as a whole. 02. Keep your website's brand and social consistent On Twitter, my design team often use a large font in images, so users don’t need to click to expand to be able to consume the message. This font is something that, when designing for web, we will connect to the first line of the website, so a user can in turn connect the two and not get lost from the initial interaction from social. Continuity is key, so we would either follow on from or directly replicate it using the font and message so it has brand consistency across all channels, be it social or website. Font consistency builds brand awareness and helps to become an icon for the client or company. For a list of the best fonts to use online, see our post on web fonts. 03. Establish your online presence with a colour scheme There is a single flat colour trend on social media at the moment that sees influencers and celebrities build and stick to a specific colour scheme for their profiles or a specific colour grading for their YouTube or Instagram Stories footage. These seemingly subtle colour choices can connect with the target audience, and in turn make the overall theme synonymous with that content creator. It’s a brand guideline but not as we typically know it and there are lessons for web designers. Taking this trend of subtle colour changes or consistent background colour to the front end of a website helps connect to the specific audience that is coming from social media. This system is perfect for a campaign, for example, as the colour theme enables a campaign to stand out on its own while still not straying too far from the core branding. 04. Use patterns to get recognised Burberry recently had a huge brand design overhaul and used the same monogram pattern across all of its social media channels and on its website. As designers, it’s common to hide such patterns in the background and lower the opacity so that they’re nearly non-existent but Burberry did the complete opposite of this, featuring the patterns in its imagery and thus drawing the user’s attention to it. It’s a fashion-focused way of using patterns on clothing and accessories, but this tactic instantly changed the way people recognised the pattern and proved that less isn’t always more. It’s an easy way to build brand recognition across social media, online and in physical spaces, which is something I’d expect to see more of moving forward. 05. Create social-specific landing pages Most social media platforms have a mobile-first way of thinking, which means we design with mobile at the heart of a website. But it’s not always the case. Some clients have multiple campaigns across three different social channels, which means something that was once a one-size-fits-all website turns into three sizes then back into one. In these cases, web designers should look at designing different landing pages or sub-pages that connect better with the audience or content from each social channel a user is being directed from. This responsiveness, alongside repetition and consistency, are key design lessons from social media. However, if you wander too far from the tree, you risk losing the fresh pickings, so my advice would be to not get too hooked up on social media. Use the lessons here but don’t let them define your design. This article was originally published in net, the world's best-selling magazine for web designers and developers. Buy issue 313 or subscribe. Related articles: Social media for artists: A lifeline or a curse? 10 social media tricks you didn't know about How to master colour theory View the full article

If you want to improve your drawing, then you need to spend some time practising. But it needn't all be serious, hard work. Every now and then, it's good to kick back and do something fun and relaxing. And these excellent drawing games are a great way to do just that. Along the way, some will help improve your ability to draw straight lines, curves or circles, and if you need some more help, be sure to check out our more in-depth how to draw tutorials. Other apps will help boost your imagination. And some are just plain fun, and a way to de-stress after a hard day's creative work. Read on as we reveal our favourite drawing games on the market for iOS and Android users right now. Drawing games that build your technical skills Do you want to work on your basic motor skills but in a fun way? Learn the principles of symmetry, how to draw complex symbols at speed, and the all-important skill of drawing a perfect circle with these great digital drawing games, all free to download. 01. Circle Draw Draw a circle and your efforts will be rated by a cute cat! Download for iOS Requirements: iOS 8.0+ Size: 8.9MB Price: Free Learning to draw a perfect circle freehand is one of the most useful skills an artist can develop, and this game trains you to do just that. Not only do you get a score each time you draw a circle, you get a cute cat to comment on it too. It’s a simple idea, but this iOS drawing game by Thomas Denney executes it perfectly. And while it might not sound that exciting, it’s actually extremely addictive! 02. Draw Tile Complete the design based on the principles of symmetry Download for Android Requirements: Android 4.1+ Size: 32MB Price: Free (IAPs) Draw Tile is another game that helps you develop your motor skills in drawing simple shapes. Each picture is divided into four squares, or tiles, and the first one is already filled in. You simply have to follow the guidelines in the other four squares to complete the picture, based on the principles of symmetry (vertical axis, horizontal axis, dual axial and radial). The best tablets with a stylus for drawing and note-taking in 2019 It sounds simple, but depending on the steadiness of your hand and your manual dexterity, it can be quite tricky, and the app will only let you proceed to the next picture once you’ve done a good enough job. There are 490 levels, and the images get more and more complex as you progress. Again, it’s a surprisingly addictive challenge. 03. Impossible Draw Complex symbols appear as you zoom through 3D environments, and you need to replicate them quickly Download for Android Download for iOS Requirements: iOS 6.0+ or Android 3.0+ Size: 62.6MB (iOS), 37MB (Android) Price: Free (IAPs) Want a drawing game that’s a bit more challenging? Impossible Draw asks you to copy a series of symbols as you zoom through a 3D sci-fi style environment. It’s a great way to practise drawing a series of unique and unusual shapes accurately and quickly (you only have seconds to spare). Because you barely have time to think, it’s a great way to internalise your drawing lines and shapes precisely skills. The app is free to download, and although you can pay for extra graphics, music and effects, you don’t really need them. Drawing games: 'Draw and guess' We’ve all enjoyed a classic game of Pictionary in our time: drawing something against the clock and challenging others to guess it. Well, these apps all offer the same experience but in a digital environment, without any need to clear up a tree’s worth of paper from the floor afterwards. 04. Draw and Guess Draw and Guess lets you play a Pictionary-style game with players around the world Download for iOS or Android Requirements: iOS 6.0+ or Android 3.0+ Size: 12.1MB (iOS), 37MB (Android) Price: Free (IAPs) Draw and Guess is a fun drawing game created by Danijel Lombarovic and inspired by Pictionary. You’re offered three words to choose from, and your task is to draw one of them, while the other players guess what it is. There are multiple game modes, so you have the option of playing with friends, playing with other players from around the world, drawing words for practice, or just guessing what others’ drawings are. Also note that you can play in either English or German. 05. Draw Something Classic Draw Something Classic is played by millions around the world Download for iOS or Android Requirements: iOS 8.2+ or Android 4.4+ Size: 109.1MB (iOS), 44MB (Android) Price: Free IAPs) Probably the world’s best-known social drawing game, this classic app has been responsible for more than seven billion drawings since it was first released in 2012. You can play with friends and family or people around the globe, and it’s all very colourful and a lot of fun. However, do be warned that there are lots of ads and solicitations, which can be distracting. 06. Pictionary The original Pictionary has a digital version too Download for iOS Download for Android Requirements: iOS 9+ or Android 4.1+ Size: 272.9MB (iOS), 92MB (Android) Price: Free (IAPs) We’re not sure what took they so long, but a good five years after 'Draw Something' (above) had dominated the drawing game space, Pictionary themselves finally released a digital version of their iconic game. While it’s similar to other copycat games, the unique thing about Pictionary, as in the physical version, is the challenge of drawing esoteric words and phrases like ‘cool as a cucumber’ or ‘dignity’. Note, though, that there’s no multiplayer mode and, as with Draw Something, there are an awful lot of irritating ads. 07. SketchParty TV SketchParty TV is a Pictionary-style game for Apple TV users Download for iOS Requirements: iOS 9.2+ Size: 74.7MB Price: £4.99 SketchParty TV is a Pictionary-like drawing game for the Apple TV. Typically, each player gets five words to draw in two minutes, while others guess. You draw on your iPhone or iPad, and the results appear up on your smart television. Up to eight players can join a team, and by gathering everyone around the TV in this way, this is a great game for getting the whole family involved. Also, if you get bored of the word lists, you can pay extra to create your own. Drawing games: Construction Drawing against the clock can be fun, but sometimes you'd rather spend a bit more time crafting something more complex. These drawing games based around construction give you a great sandbox to unleash your imagination and create something truly unique and personal to you. 08. Draw Your Game 2 Draw an environment on paper, photograph it, and then play a game based on the world you've created Download for iOS Download for Android Requirements: iOS 7+ or Android 4.1+ Size: 105.9MB (iOS), 58MB (Android) Price: Free with in-app purchases Want to draw your own video game? Draw Your Game 2 by Kacem Bekri lets you do just that. You draw the game environment not on a screen but using physical pens, pencils and paper. You then use the app to take a picture of your drawing, and in a few seconds your game will be playable. You can also create on the go, by drawing inside the game, and you can share your designs with players around the world. All in all, it's a great way to stimulate artistic creativity for both children and adults. 09. Mini Metro Design your own public transit system with this fun game Download for iOS Requirements: iOS 8+ Size: 132.9MB Price: $3.99 Frustrated by your commute? This quirky iOS drawing game gives you the chance to put the world to rights by penciling your own metropolitan transit system. You have plenty of options: build your home town's network in meticulous detail, make a massive city with a large fleet of trains, or construct geometric patterns and record looping gifs. It’s all very slick, and gives you a fascinating insight into the challenges of planning public transport, as well as being terrific fun. 10. Draw Bricks Design scenes using Lego-style virtual blocks Download on Android Requirements: Android 4+ Size: 7.8MB Price: Free (IAPs) Draw Bricks takes place in a 3D space that lets you free your imagination and create whatever you want. There are more than 200 objects that you can customise, or you can build things using LEGO-style blocks that have different textures, such as grass, wood and stone. With the freedom to rotate the camera and art tools such as Pencil, Eraser, Paint Bucket, Move, Rotate and Character Control, this is a fun way to construct your own 3D worlds, for both kids and adults missing their childhood Lego sets. Drawing games: Puzzles and physics These games all involve drawing, but not pictures. Instead, you draw simple lines, curves or shapes in order to solve a puzzle or send a moving object in a particular direction. In short, they are little to do with artistic talent and will teach you little about how to draw. But they are fun, require not much brainpower and can be a marvellous way to relax! 11. One Touch Drawing This brain training game gets you to draw lines in increasingly challenging ways Download on iOS Download on Android Requirements: iOS 7+ or Android 4.1+ Size: 109MB (iOS), 31MB (Android) Price: Free (IAPs) One Touch Drawing is a brain training game to help improve your concentration. The aim is to draw a set of provided figures, using only one stroke each time. The typical challenge is that you cannot draw the same line twice. As you progress through the hundreds of levels (all free), you’re faced with extra challenges, such as a line that must be passed twice, or a one-directional line. Simple to pick up and play, this game is a great way to unwind and take your mind off things at the end of a busy day. 12. Draw Line: Classic Match dots on a grid in this drawing puzzle Download on iOS Download on Android Requirements: iOS 7+ or Android 4.1+ Size: 105.3MB (iOS), varies with device (Android) Price: Free (IAPs) Draw Line: Classic is a logic puzzle drawing game where you have to pair up all the matching dots on the grid with single continuous lines. Dots have to fall at the end of each line, and lines can't branch off or cross over each other. There are more than 1,000 free levels, and you get five free hints during your first game. Early levels are quite straightforward, but the game becomes increasingly challenging as you progress. 13. Physics Drop Get the ball into the 'U' by drawing lines Download on iOS Download on Android Requirements: iOS 8.1+ or Android 4.1+ Size: 147.8MB (iOS), varies with device (Android) Price: Free (IAPs) Physics Drop is an animated puzzle in which you have to push a ball and then draw lines and/or polygons for it to travel along. The ball, lines and shapes react to the law of gravity, and it all feels quite natural, despite being a little surreal. Essentially an educational game, it features more than 100 physics problems that help you practise your problem solving skills, creative thinking and reflexes. 14. Stickman Racer Road Draw Guide Stickman to safety by drawing lines and shapes Download on iOS Download on Android Requirements: iOS 8+ or Android 4.1+ Size: 95.7MB (iOS), 30MB (Android) Price: Free with in-app purchases Stickman Racer Road Draw is a physics-based racing game by Sergey Mezhakov, in which your job is to draw the roads and keep your car safe through a series of obstacles. If you want a fun, fast-moving game that’s a bit more adrenaline-packed than the more cerebral puzzlers mentioned previously this section, this is worth a try. 15. Draw your car Draw your car, then draw the roads it travels on Download on Android Requirements: Android 4.1+ Size: 147.8MB Price: Free (IAPs) Draw Your Car by Alex Naronov is similar to Stickman Racer Road Draw (above) in that you draw the lines your car drives along. As the title suggests, the twist is that you also get to draw the car you play with. You’re sent on missions, where you collect coins, and you can save and share your car drawings. Overall, while there’s nothing hugely original in this game, it's very playable, colourful, and fun for kids and grown-ups alike. Read more: 17 iPad Pro apps that come alive with Apple Pencil Create a fast and anatomically correct sketch The best drawing tablet right now View the full article

Need to make a website, but lack any web page building knowledge? No problem! Page Builder Pro will help you create a professional, mobile and SEO-friendly website with absolutely no prior programming knowledge. And it's currently on sale for 94 per cent off the $745 MSRP for just $39. Want to start a site for your business? Dreaming of becoming a blogger? No matter the reason, Page Builder will help you attain your website building dreams. It comes complete with tons of themes to make sure your site is customised to your liking, and you can pick from hundreds of their pre-designed elements to make your site interactive and engaging – including features for selling products. And all of the themes are both friendly for mobile surfing and SEO purposes. Already have some HTML skills? Don't worry, Page Builder also lets you create things from scratch if you're in more of a DIY mood. Get this lifetime subscription to Page Builder Pro today for just $39. Want your products featured in The Creative Bloq Shop? Learn more about how to sell your products online! Related articles: 5 ways to boost your website's SEO Climb the Google rankings: How to master SEO 10 must-know SEO tools for search success View the full article

Behance has long been known as a go-to place to find the best creative work from around the world. Since its inception, the online portfolio platform become a inspirational resource for everyone in the creative community, whether that be as an artist wanting to get their work out to the masses or an employer searching for new talent. However, with the arrival of multiple no-coding, easy-to-use website builders in recent years, its fair to say Behance started to lose a bit of its lustre. But that all looks set to change, with the company yesterday revealing brand new Behance profile (see above) and project pages to better showcase creatives work. And we think they've certainly fulfilled that brief, especially when you compare the new profile page (above) to the previous version (see below). The previous Behance profile page has undergone a serious makeover Bigger and better The all-new Behance profile page has been updated to feature larger, single cover images to really let the work do all the talking. And the text that was once immediately visible below the images - name of the project, likes and views - can now be seen by simply hovering over each project. There's also now the option for creatives to upload a custom banner image to their Behance profile. A subtle but hugely beneficial feature to add personality and keep a profile on brand. And it's ridiculously easy to set up, using a simple drag and drop/reposition system with a image of your choice. More information on adding Behance profile banners can be found here. Add a touch of personality and stay on brand with a new Behance profile banner The best presentation And the updates don't stop there. The Behance team has also updated the layout of individual project pages to help creatives present their work in the best possible way, and at the same time making it easier for viewers to appreciate it. Full project images fill the screen, with project and creator information at both the top and bottom and actions including share, save, follow and appreciate present the entire time. It's clear Behance and Adobe has pulled out all the stops for this update, bringing the online platform up-to-date and inline with other highly visual platforms like Pinterest. Question is, will this be enough to fully put Behance back on the map? Watch this space. View the full article

Multiple hardcoded passwords allow attackers to create badges to gain building entry, access video surveillance feeds, manipulate databases and more. View the full article

In this rapidly evolving digital age, posting work online provides an easy way to get your work out to the world. However, with that comes the risk that it might get used without your permission. Over the past 12 months, we've seen many examples of blatant plagiarism within the design and creative community, many of which involve large companies using copied artwork in major marketing campaigns. Big brands should definitely know better, and yet that doesn’t seem to stop them taking independent designers’ work from design portfolios, Instagram accounts, or even Pinterest boards, and passing it off as their own, as some of these shocking examples below demonstrate. But what can you do about it? The truth is, it's a bit of a legal, not to mention confusing, minefield, which very much depends on the situation. We’ll be posting a follow-up article offering professional legal advice on how creatives should respond to plagiarism soon; you can also check out our post: how can designers deal with plagiarism? 01. A superhero has my back Jo Tutchener-Sharper was shocked when Asda used her brand’s slogan on its clothes without getting permission first It’s bad enough when you see your brand appear on a big company’s products without any acknowledgement or royalties. But when that brand is based on a profoundly emotional period in your life, it’s even worse. And that’s exactly what happened to Jo Tutchener-Sharper, founder of independent clothing brand Scamp & Dude. Jo originally came up with the slogan ‘a superhero has my back’ when she was in hospital recovering from brain surgery. “I was so scared that I wouldn't make it through the surgery and would end up leaving my boys without a mummy,” she wrote on Instagram. “A horribly hard thing to go through, but it was this that inspired me to create a brand that helps children feel more secure when apart from their loved ones. A Superhero certainly had my back and I made it through the surgery and Scamp & Dude launched into [Liberty London] 10 months later.” The brand was not only a hit, but Scamp & Dude went on to work with a number of charities and hospitals to help children in similar situations as Jo's. So when she saw a top from UK supermarket chain Asda featuring the exact same slogan, despite the fact she had already trademarked it, she had a ready made community of supporters to draw on via social media. The slogan had been trademarked, so Asda had no excuse for using it It wasn’t long before her story had been covered in The Independent, The Daily Star, The Daily Mail and The Sun. Jo wrote on Instagram at the time: “So many small brands don’t stand up to the big guys when this happens, put off by expensive legal bills. But by not speaking out and not drawing attention to what goes on, means it continues to happen. “This means a lot to me, so I’m doing this for all of the small brands who need a voice. Big brands need to learn that this is not acceptable. I feel like David taking on Goliath but everyone’s support is making me feel like I can do just that.” Finally, after fully pursuing the issue, about about six weeks after her first social media post, Jo came to an agreement with Asda, posting on Instagram: "I am very relieved and happy to report that we have come to a suitable agreement with Asda. Asda removed the garment in question from sale on 23rd Feb and we have now agreed full terms of compromise, including compensation. We are happy with the way this has been resolved. A huge thank you to everyone for supporting us, it means the world." 02. Plucked from Pinterest Sometimes when a big company rips off your work, it’s not the lack of credit or royalties that stings the most; it’s the thought that people will actually think an inferior version of your design is your own work. That was the case for Morag Myerscough, an award-winning London-based artist known for her colourful and distinctive installations, when she discovered the Unicenter shopping centre in Buenos Aires had a new installation that was striking similar to her own works, Temple of Agape 2014 and Super Structure 2015. Worse still, the artist who had carried out the work actually had the cheek to sign the piece! After Myerscough complained loudly on social media, she got them to admit the plagiarism publicly. “Basically the branding/production company were shamed into owning up," she recalls. "And the artist who put her name to the visual work took everything down from her site, and implied she'd signed it as the team leader of the painting team rather than the artist’s signature. “The branding company said they went on Pinterest, pulled off what they liked and presented to their client. Mine was chosen, so they just copied it and seemed to think this was okay (the client implied they were unaware of this). They probably thought they would not be caught out as it was a long way away. “Finally, they did agree to put money to a social project, but my work took over and I was not looking for compensation. I just wanted to show them that it was not ethically right to steal people's work and pass it off as their own. I do regret not following it up, but I just did not have the energy at the time as my mum had died at Christmas and the first few months of year zapped a lot of my energy.” The main thing is I don’t want people to think the bad copies are mine Morag Myerscough Because she didn’t pursue the company in court, Myerscough is not bound by a legal gag clause and is therefore free to speak her mind on the matter. “They have been other copies since and probably before, but they are so bad,” she says. “The main thing is I don’t want people to think the bad copies are mine. I think it's important to OUT these people, and prevent big agencies to make money from work that has taken many years to achieve and not just let people use the word ‘INSPIRED BY’ to copy their work without speaking with them.” 03. Unduly influenced Influencer Daryl Aiden Yow, who has worked with many big brands, removed all images from his site after presenting other photographers’ work as his own In 2018, global brands seem to be falling over themselves to work with influencers: people with huge social media followings who promise to help them reach new demographics. But with the ‘influencer industry’ requiring zero training, entry requirements or legal knowledge, they may be playing with fire. As a taster of what may be to come, Sony and Uniqlo were recently forced to issue embarrassing statements over their relationship with influencer-photographer Daryl Aiden Yow, who had claimed stock images and other people’s work as his own. Although there is no suggestion that he did so in the course of work for Sony and Uniqlo, it was still an embarrassment for them to be associated with someone who had profited from the work of other creatives. Yow, who has over 120,000 followers, regularly posted "professionally shot" images from around the world on his Insta account. However, he was caught out when she shared a photo of flowers in bloom that he said had been taken in Thailand. As @armies_photography succinctly pointed out in the comments: 'Taken from Shutterstock. It's Japan'. After news site Mothership highlighted 12 images that Yow had posted as being near-identical to the work of others, Yow deleted at the images on his Instagram page and has since posted one new image, a black square, with a comment apologising for his plagiarism. This is a cautionary tale for influencers, companies tempted to collaborate with them, and creatives who may be at risk of having their work stolen by them. As well as Sony and Uniqlo, Yow had also worked with OPPO, Issey Miyake, Colgate and LANEIGE as an influencer. 04. Military incursion Nike aroused the ire of the social media masses by releasing a logo that looked alarmingly like the US Naval Academy’s traditional crest It's not just independent designers who are at risk of falling victim to plagiarism. It even happens to the largest and most prestigious of organisations. You don’t get much bigger, in fact, than the US Navy. Yet that didn’t stop Nike from creating a logo, in collaboration with LA sportswear brand Undefeated, that was quickly said to be an infringement of the US Naval Academy’s historical seal, a trademarked design. The similarity between the military college's 1899 crest and Nike's logo for a soccerwear line called The Fives immediately blew up on social media. As a result, the Naval Academy issued a formal complaint, and Nike quickly apologised and withdrew the collection from sale. If only big firms would react as quickly when it's individual designers who make the same complaint. 05. Celebrity endorsement Marc Johns was alerted to copyright infringement of his work via Drew Barrymore When you’re a victim of design plagiarism, the more noise you can make on social media the better. And when this happened to Canadian illustrator Marc Johns, he had some unexpected help. He'd been alerted to the fact that South Korean kids’ fashion brand Jelly Mallow had used his artwork on a jacket without permission, because actress Drew Barrymore had posted a photo of her daughter wearing it. And the fame of its buyer not only brought the infringement to his attention, but gave him a fast route to whipping up a social storm. Johns posted about what had happened on Instagram and Twitter, and soon hundreds of people left comments on both Jelly Mallow's account and Drew Barrymore's own post. The actress herself soon responded, and the story turned out to have a very happy ending. "Jelly Mallow paid me royalties for all past usage of my designs, and we now have a new, ongoing licensing arrangement for them to use my artwork on future clothing collections," Johns explains. "Despite huge language barriers and time zone differences, Jelly Mallow has been very accommodating and transparent throughout the whole process, and very willing to make things right. Please make sure this is included in your article. They're good people." He's even now talking to Drew Barrymore's representatives about a possible project together. Many people have been surprised by this positive outcome, he adds. "But I have had good outcomes with other companies that have ripped me off in the past as well. It made me realise that other artists could probably use some help with this issue, so I ended up offering an online class on the subject. "I think there are still many many people and companies out there who are just plain clueless about copyright issues," Johns believes. "Most infringement cases are caused by ignorance more than deliberate theft: they think that if it's on the internet, it's free for them to use however they like. We need to do so much more to educate people that most images belong to someone. And sometimes that someone is an artist, trying to make a living and support a family." Read more: 21 outstanding uses of colour in branding A creative's guide to copyright The good, the bad and the WTF of brand apologies View the full article

Gillette has provoked an online backlash with a new advert that dares to suggest that traditional boorish male behaviour might not be cool after all. Released on Sunday, the #MeToo-inspired short film is called 'We Believe: The Best Men Can Be' – a smart play on Gillette's familiar tagline, 'The best a man can get'. It wastes no time in showing off the the worst that men can be, with a compilation of actions traditionally associated with toxic masculinity, before going on to showcase examples of how men can take action to be better people and set the right example for the next generation, through respect and inclusivity and by no longer justifying bad behaviour through language such as 'boys will be boys'. The ad has inevitably resulted in a furious online response; the video on YouTube has attracted, at the time of writing, 41,000 likes and 262,000 dislikes, and over on Twitter there's a tidal wave of petulant men's rights activist types on the #Gillette hashtag promising to boycott Gillette forever for daring to ask them to be decent human beings. This is the latest in a growing trend for adverts that challenge outdated views and dare to make a statement – although many of the controversial TV and print ads we've seen so far focus on the female side of things. 4 ads that tried to be cool, but failed Of course it hasn't escaped people's attention that the ad was directed by a woman: it's the work of Kim Gehrig at Somesuch, who previously directed the 2015 'This Girl Can' campaign for Sport England (watch it below). Online commenters have been quick to single her out and accuse her of destroying Gillette (and, naturally, accuse her of being a 'feminazi'). So why would Gillette go out of its way to provoke this sort of reaction? Gillette's not stupid; it will have known from the outset that exactly this sort of backlash would happen, it'll have done its research and come to the conclusion that the positives of this undeniably thoughtful and provocative campaign would greatly outweigh the negatives. And beyond the advert, Gillette is putting its money where its mouth is, with a commitment to donating $1 million per year to US nonprofits dedicated to helping men be their best. And while we're sure that some of the Gillette marketing team are keeping a nervous eye on the ever-rising tally of YouTube dislikes and Twitter rants, there has also been plenty of praise for the campaign. Although let's not go overboard here; others have been a bit more circumspect in their reaction. Related articles: 40 traffic-stopping examples of billboard advertising How gender affects design 66 brilliant print adverts View the full article

Building interactive websites can involve sending JavaScript to your users. Often, too much of it. Have you been on a web page on your phone that looked like it had loaded, only to have nothing happen when you tapped a link or tried to scroll? We all have. Byte-for-byte, JavaScript is still the most expensive resource we send to mobile phones because it can delay interactivity in significant ways. In this feature we'll cover some strategies for delivering JavaScript efficiently to your users on mobile, while still giving them a valuable experience. On this page, we'll dig into exactly what's causing the problem. Jump to page 2 for some advice on exactly how to reduce your JavaScript load times, including some web design tools to help you monitor your sites effectively. Why is JS slowing your mobile sites down? When users access your site, you're probably sending down a lot of files, many of which are scripts. Perhaps you added a quick JavaScript library or plugin but didn't have a chance to check just how much code it was pulling in? It's happened to many of us. As much as I love JavaScript, it's always the most expensive part of your site. I'd like to explain why this can be a major issue. Statistics from the HTTP Archive state of JavaScript report, July 2018 Many popular sites ship megabytes of JavaScript to their mobile web users. The average web page today currently ship a little less – a median of about 350kB of minified and compressed JavaScript. Uncompressed, that bloats up to over 1MB of script a browser needs to process. Experiences that ship down this much JavaScript take more than 14 seconds to load and get interactive on mobile devices. A large factor of this is how long it takes to download code on a mobile network and then process it on a mobile CPU. Not only can that 350kB of script for a median site from earlier take a while to download, the reality is, if we look at popular sites, they actually ship down a lot more script than this. We're hitting this ceiling across both desktop and mobile web, where sites are sometimes shipping multiple megabytes of code that a browser then needs to process. The question to ask is: can you afford this much JavaScript? Sites today will often send the following in their JavaScript bundles: A suite of user-interface components (for example, code for widgets, carousels or drawers) A client-side framework or user-interface library Polyfills (often for modern browsers that don't need them) Full libraries vs only what they use (for example, Moment.js and locales vs a smaller alternative like date-fns or Luxon) This code adds up. The more there is, the longer it will take for a page to load. Loading a modern web page Click the icon in the top right to expand the image Loading a web page is like a film strip that has three key moments: Is it happening? The moment you're able to deliver some content to the screen. Has the navigation started, has the server started responding? Is it useful? The moment when you've painted text or content that enables the user to derive value from the experience and engage with it. Is it usable? The moment when a user can start meaningfully interacting with the experience and have something happen. I mentioned this term 'interactive' earlier but what does that mean? For a page to be interactive, it must be capable of responding quickly to user input. A small JavaScript payload can ensure this happens fast. Whether a user clicks on a link or scrolls through a page, they need to see that something is actually happening in response to their actions. An experience that can't deliver on this will frustrate your users. When a browser runs many of the events you're probably going to need, it's likely going to do it on the same thread that handles user input. This thread is called the main thread. Too much (main thread) JavaScript can delay interactivity for visible elements. This can be a challenge for many companies. Why is JavaScript so expensive? So why exactly is JavaScript causing these problems? A request is sent to a server, which then returns some HTML. The browser parses that markup and discovers the necessary code (CSS and JavaScript) and resources (images, fonts etc) composing it. Once complete, the browser has to download and process these files. If we want to be fast at JavaScript, we have to download it and process it quickly. That means we have to be fast at the network transmission and the parsing, compiling and execution of our scripts. If you spend a long time parsing and compiling script in a JavaScript engine, that delays how soon a user can interact with your experience. Click the icon in the top right to enlarge Keep in mind that resources on the web have different costs. A 200kB script has a different set of costs to a 200kB JPG. They might take the same amount of time to download but when it comes to processing the costs aren't the same. A JPEG image needs to be decoded, rasterised and painted on the screen. This can usually be done quickly. A JavaScript bundle needs to be downloaded and then parsed, compiled and executed. This can take longer than you might think on mobile hardware. What is a good target for interactivity? We on the Chrome team feel your baseline should be getting interactive in under five seconds on a slow 3G or 4G connection on a median mobile device. You might say: 'My users are all on fast networks and high-end phones!' But are they? You may be on 'fast' coffee-shop Wi-Fi but effectively only getting 2G or 3G speeds. Variability matters. Click the icon in the top right to expand the image Mobile is a spectrum composed of low-end, median and high-end devices. If we're fortunate, we may have a high-end phone, but the reality is that not all users will have those devices. They may be on a low-end or median phone and the disparity between these multiple classes of devices can be stark due to thermal throttling, difference in cache sizes, CPU, GPU – you can end up experiencing different processing times for resources like JavaScript, depending on the device you're using. Your users on low-end phones may even be in the US. Some users won't be on a fast network or have the latest and greatest phone, so it's vital that we start testing on real phones and networks. Fast devices and networks can actually sometimes be slow; variability can end up reducing the speed of absolutely everything. Test on a real phone or at least with mobile emulation. Developing with a slow baseline ensures everyone – both on fast and slow setups – benefits. Click the icon in the top right to expand the image Checking your analytics to understand what devices your users are accessing your site with is a useful exercise. WebPageTest has a number of Moto G4 phones preconfigured under the Mobile profiles. This is valuable in case you're unable to purchase your own set of median-class hardware for testing. It's really important to know your audience. Not every site needs to perform well on 2G on a low-end phone. That said, aiming for a high level of performance across the entire spectrum ensures that every potential user accessing your site has a chance to load it up fast. Next page: Top tips for coding faster, lighter JavaScript Many small changes can lead to big gains. Enable users to interact with your site with the least amount of friction. Run the smallest amount of JavaScript to deliver real value. This can mean taking incremental steps to get there but, in the end, your users will thank you. Here's some advice for making that happen. Introduce code splitting Code splitting helps you break up your JavaScript so you only load the code a user needs upfront and lazy-load the rest. This helps avoid shipping a monolithic main.js file to your users containing JavaScript for the whole site versus just what the page needs. Splitting large, monolithic JavaScript bundles can be done on a page, route or component basis The best approach to introduce code splitting into your site is using the dynamic import() syntax. What follows is an example of using JavaScript Modules to statically 'import' some math code. Because we're not loading this code dynamically (lazily) when it's needed, it will end up in our default JavaScript bundle. After switching to dynamic import(), we can lazily pull in the math utilities when they are needed. This could be when the user is about to use a component requiring it, or navigating to a new route that relies on this functionality. Below we import math after a button click. When a JavaScript module bundler like Webpack sees this import() syntax, it starts code splitting your app. This means dynamic code can get pushed out into a separate file that is only loaded when it is needed. Code splitting can be done at the page, route or component level. Tools like Create React App, Next.js, Preact-CLI, Gatsby and others support it out of the box. Guides to accomplish this are available for React, Vue.js and Angular. If you're using React, I'm happy to recommend React Loadable, a higher-order component for loading components efficiently. It wraps dynamic imports in a nice API for introducing code splitting into an app at a given component. Here is an example statically importing a gallery component in React: With React Loadable, we can dynamically import the gallery component as follows: Many large teams have seen big wins off the back of code splitting recently. In an effort to rewrite their mobile web experiences to make sure users were able to interact with their sites as soon as possible, both Twitter and Tinder saw up to a 50 per cent improvement in time to interactive when they adopted aggressive code splitting. Audit your workflow Stacks like Next.js, Preact CLI and PWA Starter Kit try to enforce good defaults for quickly loading and getting interactive on average mobile hardware. Another thing many of these sites have done is adopt auditing as part of their workflow. Thankfully, the JavaScript ecosystem has a number of great tools to help with bundle analysis. Tools like Webpack Bundle Analyzer, Source Map Explorer and Bundle Buddy enable you to audit your bundles for opportunities to trim them down. Lighthouse runs a series of audits against a page and generates a report on it If you're unsure whether you have any issues with JavaScript performance, check out Lighthouse. Lighthouse is a tool baked into the Chrome Developer Tools and is also available as a Chrome extension. It gives you an in-depth analysis that highlights opportunities to improve performance. We've recently added support for flagging high JavaScript boot-up time to Lighthouse. This audit highlights scripts that might be spending a long time parsing/compiling, which delays interactivity. You can look at this audit as opportunities to either split up those scripts or just do less work. Check you're not shipping unused code Click the icon in the top right to enlarge Another thing you can do is make sure you're not shipping unused code down to your users: Code Coverage is a feature in Chrome DevTools that alerts you to unused JavaScript (and CSS) in your pages. Load up a page in DevTools and the Coverage tab will display how much code was executed vs how much was loaded. You can improve the performance of your pages by only shipping the code that a user needs. This can be valuable for identifying opportunities to split up scripts and defer the loading of non-critical ones until they're needed. Thankfully, there are ways we can we can try to work around this and one way is having a performance budget in place. Devise a performance budget Performance budgets are critical because they keep everybody on the same page. They create a culture of shared enthusiasm for constantly improving the user experience and team accountability. Budgets define measurable constraints so a team can meet their performance goals. As you have to live within the constraints of budgets, performance is a consideration at each step, as opposed to an afterthought. Per Tim Kadlec, metrics for performance budgets can include: Milestone timings: Timings based on the user experience loading a page (e.g. time-to-interactive). Quality-based metrics: Based on raw values (e.g. weight of JavaScript, number of HTTP requests), focused on the browser experience. Rule-based metrics: Scores generated by tools such as Lighthouse or WebPageTest; often a single number or series to grade your site. Performance is more often a cultural challenge than a technical one. Discuss performance during planning sessions. Ask business stakeholders what their performance expectations are. Do they understand how performance can impact the business metrics they care about? Ask engineering teams how they plan to address performance bottlenecks. While the answers here can be unsatisfactory, they get the conversation started. What about tooling for performance budgets? You can set up Lighthouse scoring budgets in continuous integration with the Lighthouse CI project. A number of performance monitoring services support setting perf budgets and budget alerts including Calibre, Treo and SpeedCurve. 4 quick ways to lessen JS load times Modern sites often combine all of their JavaScript into a single, large bundle. When JavaScript is served this way, download and processing times can be significant on mobile devices and networks. Here are a few tips for how to ensure you load your JavaScript quickly. 01. Only load the JS required for the current page Prioritise what a user will need and lazy-load the rest with code splitting. This gives you the best chance at loading and getting interactive fast. Learn to audit your JavaScript code to discover opportunities to remove non-critical code. 02. Optimise your JavaScript Use compression, minification and other JS optimisation techniques. Compression and minification are good optimisations for shipping fewer bytes of JavaScript to your users. If you’re already gzipping JavaScript, consider evaluating Brotli for even more savings. Building a site using Webpack and a framework? Tree shaking (removing unused imported code), trimming unused libraries and polyfills, opting for leaner versions of utilities all add up to some nice savings. 03. Assess the UX benefits If client-side JavaScript isn’t benefiting the user experience, ask yourself if it’s really necessary. Maybe server-side-rendered HTML would actually be faster. Consider limiting the use of client-side frameworks to pages that absolutely require them. Server-rendering and client-rendering are a disaster if done poorly. 04. Embrace performance budgets Embrace performance budgets and learn to live within them. For mobile, aim for a JS budget of < 170kB minified/compressed. Uncompressed this is still ~0.7MB of code. Budgets are critical to success; however, they can’t magically fix performance in isolation. Team culture, structure and enforcement matter. Resources Real-world performance budgets A deep-dive into why performance budgets matter. This guide by Alex Russell questions if we can afford all the JavaScript we load for users on median mobile phones given their impact on user experience. Reducing JavaScript payloads with code splitting A practical guide to reducing how much JavaScript you’re loading Webpack or Parcel. It also includes links to code-splitting guides for React, Angular and others. Reducing JavaScript payloads with tree shaking Tree shaking is a form of dead code elimination. This guide covers how to remove JavaScript imports not being used in your web pages to help trim down your JavaScript bundles. Lighthouse Lighthouse is a free automated tool for improving the quality of web pages by the Chrome team. It has audits for performance, accessibility and more. Pinterest case study Pinterest reduced its JavaScript bundles from 2.5MB to < 200kB and reduced time-to-interactive from 23 seconds to 5.6 seconds. Revenue went up 44 per cent, sign-ups are up 753 per cent, weekly active users on mobile web are up 103 per cent. AutoTrader case study AutoTrader reduced its JavaScript bundle sizes by 56 per cent and reduced time-to-interactive by ~50 per cent. This article was originally published in net, the world's best-selling magazine for web designers and developers. Buy issue 313 or subscribe. Read more: Revealed: The latest JavaScript trends 9 of the best JavaScript frameworks 25 game-changing JavaScript tools View the full article

Can you believe we're halfway through the first month of 2019 already? If you're feeling like time is passing you by, this creative trends report from Shutterstock should help you keep on top of what's going on in the world of design. In its latest annual report, the technology and stock photography company has analysed billions of image, video and music searches and downloads from its vast customer base. With this wealth of data, Shutterstock has been able to single out 11 styles that are set to influence and shape design throughout 2019. Top creative trends of 2019 From its research, Shutterstock predicts that the aesthetics of yesteryear are set to make a comeback. An '80s look of decadence and overindulgence is in, while cute kawaii illustrations and tempting typography are also due to hit the big time. It's not all nostalgia and retro fonts though, as trends like Beyond Plastic highlight urgent environmental issues. Each of the trends are backed up with some solid search stats, so you know that these are the terms that people crave. However three creative trends for 2019 stood ahead of the pack... 01. Yesterday's tomorrow What’s old is new again. This trend is an optimistic redux of early-tech – a focus on what yesterday’s tomorrow looked like. It’s all about the looks and sounds that defined futurism at the dawn of the digital age, like purple, blue, and pink duotone gradients, basic vector graphics, and dreamy synth music. 02. Zine culture In the digital age, zine culture lives on in the decentralised mindset of social media, where independent makers can share and niche groups can discover. Built on principles of collage and largely influenced by the invention of the photocopier, it’s paper cutouts, noise and grain textures, and rough-edged layers that define this trend. 03. '80s opulence The ‘80s is back and it’s ready to party with gold chains, animal prints, and attitude. We say forget good taste, this is about good times. Clashing is the keyword for this trend. Think leopard print and snakeskin, peacock feathers and gold chain belts, soft fur and hard metal textures. Shutterstock's creative trends report "Even the most talented creative professionals sometimes want a little inspiration for their next big project and our Creative Trends report is here to help," says Lou Weiss, global Chief Marketing Officer of Shutterstock. "With over 1.5 million fresh new assets added weekly and millions of searchers using our platform, Shutterstock has volume of search and download data to predict the hottest trends and newest fads being driven by the design world. "We can’t wait to see these 2019 design themes come to life everywhere, from ad campaigns, to the catwalk, and in movies. This year, our top three trends are influenced by the bold design principles of years past, so it will be particularly interesting to see how they evolve with modern interpretations best suited for today’s digital platforms." Check out the trends set to dominate 2019 with the report below. Click the image to see the full size infographic Related articles: 5 huge illustration trends for 2019 6 huge logo trends for 2019 4 huge visual trends for 2019 View the full article

Maybe your goal for 2019 is to find a job you love. And while crossing your fingers or praying might help – it might be time to take a step that could make your dream job a reality. The Resume Writing (CV) & LinkedIn Profile Optimization course serves as the perfect bridge to take you to your new life in your perfect gig. Though it typically retails for $199, it's available now for 94 per cent off at just $9.99. Let's face it, job hunting is rough. How many jobs have you applied to online, only to never hear back from anyone? This comprehensive course helps make the quest for a perfect job a little easier. Among the new skills you'll pick up in the 1.5 hours of instruction? Three unforgettable elements to use in your LinkedIn tagline, the highest value keywords recruiters are using to search and how to avoid your resume getting caught in the bots that are filtering out more than 70 per cent of current online applicants. Get lifetime access to the Resume Writing (CV) & LinkedIn Profile Optimization course for the low price of $9.99 here. Want your products featured in The Creative Bloq Shop? Learn more about how to sell your products online! Related articles: 5 things NOT to say in a job interview What are the best-paid creative jobs in 2019? 14 free resume templates View the full article

You're reading Top 17 Web Design and UI Trends for 2019, originally posted on Designmodo. If you've enjoyed this post, be sure to follow on Twitter, Facebook, Google+! New year, new time to think about web design trends. The start of the year is a great time to look back on the previous year and your successes and look ahead to things that you want to improve and … View the full article

You're reading 15 Cool WordPress Themes You Should Use in 2019 For Your Projects, originally posted on Designmodo. If you've enjoyed this post, be sure to follow on Twitter, Facebook, Google+! Before you even think about starting to design a website for your business, you’ll probably spend lots of time thinking about its overall appearance and functionality. Transforming your vision into reality is understandably the hard part. You have to think … View the full article

He said that similar flaws were also found in the Dreamhost, HostGator, OVH and iPage web hosting platforms. View the full article