Rss Bot
-
Content Count
15,132 -
Joined
-
Last visited
Never -
Feedback
N/A
Posts posted by Rss Bot
-
-
It's not abnormal to see some incredible early Prime day deals in the run up to the big event. But Walmart is currently pulling out all the stops with this incredible Dell Inspiron 15 5000 offer, which takes the word bargain to a whole new level. Originally priced at $499, Walmart has dropped the cost to just $329.99, knocking a huge $169 off the retail price.
Windows 10, a Core i7 processor and built-in AMD graphics make the Dell Inspiron 15 5000 a powerful all-rounder. The 15-inch screen's resolution leaves a little to be desired, but when you take in to account the price point, this laptop is still excellent value for money. If you're after a portable and powerful notebook that won't break the bank, the Inspiron 15 5000 is seriously worth considering.
Not in the US? Here are the best Dell Inspiron 15 5000 prices in your area:
Read more:
-
After media scrutiny, the collaboration service has decided to address the zero-day after initially dismissing its severity.
-
The best ereaders give you access to a whole library of books, from your pocket. While it is unlikely ereaders will ever replace the traditional printed book, they are a fantastic innovation for those who don't have space to store all the books they want to read, or are are often travelling.
An ereader will also enable you to download books directly to the device from the comfort of your own home, rather than trawling bookshops for sometimes expensive books.
The ereader market is dominated by Amazon's Kindles at the moment, and the Amazon bookstore certainly offers the widest range of ebooks. However, of the relatively few other ebook manufacturers out there, Kobo is also worth a look. If it is a Kindle you're after, we're likely to see some discounts over Amazon Prime Day (15-16 July). Our tool will pull in the cheapest prices below, or check out our Prime Day deals roundup for discounts on more creative gear.
First, let's get started with our pick of the best ereaders right now...
If you’re happy to spend a bit extra, almost everything is slightly improved on the Kindle Paperwhite when you’re comparing it to the standard Kindle. It has a far better display with a higher resolution and a stronger backlight, plus it comes with an improved screen tech that makes it easier to read in direct sunlight.
The design feels more premium in the hand – although it isn’t the most high-end device on this list – and you’ve got direct access to Amazon’s book store that allows you to use services like Kindle Unlimited or get cheaper titles during Amazon’s regular book sales. Overall, the Kindle Paperwhite is one of the best ereaders money can buy – it’s well worth the extra money in terms of the extra features you get over the standard Kindle.
The cheapest ereader, Amazon's Kindle is one of the best that money can buy if you’re looking for an affordable option. This latest version of the standard Kindle was released early in 2019, and it’s the first of the basic Amazon ereaders to include a backlight to let you read in the dark.
If you’re looking to read books with illustrations, you may not be happy with the resolution here on the Kindle as it’s substantially lower than the rest of the ereaders on this list (the Kindle offers 167ppi, while its competitors all pack in 300ppi). It also has a slim and lightweight design.
This ereader offers the least storage of all the devices on this list – just 4GB. However, for ebooks this is absolutely plenty; you'll be able to store hundreds of ebooks with no trouble. However, if you're a big audiobook fan, you'll want to stump up for something with more space – 4GB will hold maybe 10 audiobooks max.
The Kindle doesn’t feel as premium as Amazon’s other ereaders, but if the cost of your device is the most important consideration then you’ll want to consider picking up this Kindle as your way to read ebooks on the move.
The Kobo Clara HD is very similar to the Amazon Kindle Paperwhite, but you won’t have access to Amazon’s book store. Instead it uses the Kobo Store, which you will want to take a look at before you buy one of these, as it can be a bit more limited in book choices.
If the store includes the books you want, it’s well worth getting this Kobo as it features a great looking design alongside a beautiful 6-inch HD display with the same resolution as the Paperwhite. The display is particularly good in low light, making this a great choice if you like reading before bed.
Everything else is remarkably similar to the Paperwhite. If you’re looking for a device that isn’t made by Amazon, we recommend this Kobo as it’s one of the cheapest from one of the few alternative ereader manufacturers out there.
The Kindle Oasis is the most expensive ereader in Amazon’s range, and it's also its most high-tech and beautifully designed device. It features a similar screen tech to the Paperwhite, but it’s slightly larger meaning you have more space on the page, plus it has better backlighting tech too.
You may want to opt for the 32GB of storage variant here if you’re planning to download and play audiobooks over Bluetooth headphones or a speaker (there's no headphone jack). That’s an option on all of Amazon’s Kindle products, but the 32GB Oasis will give you lots of space to fill with Audible titles.
The undeniable highlight of the Oasis is its design. It’s ergonomically more comfortable than a lot of the other devices in this list which makes it easier to read for long periods of time. Just note you’ll have to spend quite a bit to be able to get it.
Arguably the most unique device on this list is the Kobo Forma, but it’s also the most expensive. With a huge 8-inch display, you’ve got a lot of screen to use when reading your ebooks and it features a 300ppi resolution so those books will be clear and easy to read.
The extra screen doesn’t make this a heavy ereader either – it weighs in at just 197g. It’s a premium design overall, but it’s worth noting that Kobo’s store can be a little limited in its book selection so be sure to have a look to ensure you want to opt for Kobo’s alternative to Amazon.
Overall, if you’re looking for one of the very best ereaders that money can buy you should opt for the Kobo Forma. However, note that high price, and the smaller book range, before you make your final decision.
Read more:
-
If you thought the KFC bucket had one use and one use only, you were wrong. Because now, the KFC bucket-hat is here. That's right, you can now be the proud owner of a hat that looks like a KFC bucket. Or a KFC bucket that looks like a hat (or maybe even a multi-purpose bucket-hat... more on that later).
The bonkers project, for KFC Russia, is the result of a collaboration between W+K Amsterdam and Russian streetwear label Mam Cupy. It shows both KFC and Mam Cupy logos flipped upside down while in hat form – though they're the right way up when the item's used as a bucket (read more about making a statement with your logo in our guide to logo design).
KFC has form when it comes to pulling off unexpected marketing campaigns – its FCK apology ad by Mother London picked up a D&AD Yellow Pencil – but is this new campaign genius or madness?
The bucket-hat is part of a wider branding campaign for KFC Russia by W+K and is accompanied by this glorious video:
'Is it a hat? Or a bucket? But if it's a hat, how can it be a bucket? I don't know, but I like it,' says the video, while sultry models pose with the hat. It's worth noting that none of these models look like they have fried chicken grease running down their faces, so we can assume that they are sticking to the hat function.
“For years we looked at a KFC bucket and wondered whether it would make a good hat… now we know," said W+K Amsterdam copywriter Dasha Ovechkina and creative director Cal Al-Jorani in a statement.
We can imagine England football fans enjoying the bucket-hat
We're not entirely sure that the world needed to find out to be honest, but this is an imaginative, if somewhat ridiculous piece of branding from W+K Amsterdam. The pros of the bucket-hat? Well you certainly wouldn't lose it in a crowd. And if you did happen to get hungry while in said crowd, and had some food to put in your hat, you'd be laughing. Though if you wanted to put your hat on again, you'd probably discover the downside of this particular tie-in.
Even after watching the video, we still have a few questions. First of all, was this just one of those throwaway ideas someone suggested in a meeting that went a little too far? Was it born out of someone saying the phrase 'I'll eat my hat'? And perhaps most importantly, will KFC Russia be serving directly into the hat-bucket?
Answers on a hat-shaped postcard please.
You can buy the KFC bucket-hat from Mam Cupy for 18,00 ruples (approx $28/£23) here, although navigating the website may prove tricky if you don't speak Russian.
Read more:
-
Researchers say malware infects phones in order to sneak ads on devices for profit.
-
In a world-first, Amazon has partnered with the UK's health service, the NHS. From this week, its voice-controlled device, Alexa, will give out health advice, and answer common questions such as 'Alexa, how do I treat a migraine?' and 'Alexa, what are the symptoms of chickenpox?'
In response to health-related queries, Alexa will now search the NHS Choices website for health information (and there you were thinking Amazon was all about Prime Day deals). The aim is to ease pressure on the NHS and help those who can't easily access information on the internet – such as the elderly or blind people.
Will this partnership with Amazon really end up easing pressure on the health service, or will it lead to data protection issues and misdiagnoses?
As we've previously explored, the use of voice interfaces is one of the fastest growing web design trends in recent years, but so far the news has been met with concerns over the appropriateness of using Alexa to deliver this kind of important and sensitive information. Will this partnership with Amazon really end up easing pressure on the health service, or will it lead to data protection issues and misdiagnoses?
The health secretary, Matt Hancock, was optimistic about the partnership: “Technology like this is a great example of how people can access reliable, world-leading NHS advice from the comfort of their home, reducing the pressure on our hardworking GPs and pharmacists,” he said.
Of course, users wouldn't normally be able to access Alexa if they didn't already have an Amazon device such as Amazon Echo (see our guide to Amazon devices), but The Department of Health has said that access will be given through a free app.
On Twitter, the reaction was mixed (okay, we mean negative), with users citing all sorts of concerns, including the functionality of Alexa, data protection worries – no doubt referencing this year's news that Amazon employees listen to recordings in order to develop new services – and questioning the government's priorities.
Others joked about the potential implications of people relying on Alexa for health advice.
The deputy leader of the Labour party, Tom Watson, spoke about the dangers of mixing NHS data with big tech companies.
While others pointed out that Alexa dealing with queries isn't much different to typing them into Google.
According to the BBC, talks are also underway to set up similar partnerships with other companies, such as Microsoft. Which shows that yet again, Amazon is leading the way. Whether or not it will be able to really help those with minor health complaints remains to be seen.
Read more:
-
The giant red and white letters of the 'I amsterdam' sign were a popular tourist destination in the Dutch capital, but they were controversially removed by disgruntled city officials in December 2018. However, the sign recently returned with a new message to help save something else that's vanishing, the Amazon rainforest.
If you visited Amsterdam before the removal of I amsterdam, you probably snapped a photo with the distinctive letters that were installed in front of the Rijksmuseum. The sign had become such a go-to selfie spot that selfie numbers probably rivalled those outside some of the world's famous buildings.
It's no surprise then that once I amsterdan was removed, people couldn't help but feel that something was missing. And it's this sense of loss that the new sign, 'I amazonia' taps into.
Created by Belgium advertising agency Duval Guillaume for environmental non-profit Greenpeace, 'I amazonia' raises awareness about the deforestation that's devastating the Amazon rainforest. See the full extent of the situation, which Greenpeace describes as the "rampant exploitation by industrial agriculture" in the video below.
In a blog post, Greenpeace explains why the sign was the perfect means to shine a light on the situation, beyond just tapping into people's affection for the old letters.
"With the inclusive 'I am', the message is also one of profound appreciation and respect for the Indigenous People and traditional communities who have not only been guardians of the Amazon for centuries, but depend on the forest for survival," it says.
"If the millions of people who took selfies with the 'Iamsterdam' sign would also take a stand for the most important landmark in Brazil and the lungs of the planet, and show their solidarity and support with the people and the forest in the Amazon, we could all make giant steps towards protecting one of our planet’s last climate solutions," the non-profit adds.
Want to do your bit to help? There's a petition you can sign here, which will tell the Brazilian government to save the Amazon Rainforest and protect the lands of Indigenous and traditional communities.
Related articles:
-
With web components, developers now have the ability to create their own HTML elements. In this ultimate guide, you'll learn everything you need to know. On this page, we'll cover what exactly web components are, the benefits of using them, and the elements that make them up.
Then you'll learn how to build your own components in two short tutorials – on page 2 you'll learn how to building a component with the HTML templates and shadowDOM APIs, and on page 3 you'll got one step further and learn how to build a customised, built-in element.
Finally on page 4 you'll find some frameworks and tools to get you started, and examples of existing elements to try to today.
While you're here, you might also want to take a look at our guide to the top HTML APIs, and how to use them.
What are web components?
Developers love components. They are a great way to define blocks of code that can be dropped in and reused anywhere they are required. Over the years, there have been a few attempts to convey this idea on the web, with varying degrees of success.
Mozilla's XML Binding Language and Microsoft's HTML Component specifications date back all the way to Internet Explorer 5 almost 20 years ago. Unfortunately, both attempts proved unwieldy, failed to gain traction in other browsers, and ultimately were removed. While they may not be around today, their concepts formed the basis of the modern approaches in use.
JavaScript frameworks such as React, Vue or Angular follow a similar approach. One of the main reasons for their success is the ability to contain common logic in an easily shareable pattern in one form or another.
While these frameworks can improve the developer experience, they do so at a cost. Language features such as JSX need to be compiled, and many frameworks rely on a runtime to manage all of their abstractions. Wouldn't it be easier if there was a way to get the benefit without all that heavy weight? Web components allow us to do just that.
The 4 pillars of web components
The concept of a web component consists of three APIs – Custom elements, HTML templates and the shadow DOM – with JavaScript modules gluing them together. By combining the benefits that these technologies provide, it's possible to start building custom HTML elements that look and behave just like their native counterparts.
Using a web component is much like using any other existing HTML element. They can be configured using attributes, queried for using JavaScript, and even styled through CSS. As long as the browser knows they exist, they are treated no differently.
This also allows web components to play well with other frameworks and libraries. By using the same communication mechanisms as any other element, they can be used alongside any framework that exists today or in the future.
Most importantly of all, these are all built upon web standards. The web is built on a concept of backwards compatibility, and by building a web component today, it will carry on working for years to come.
But before going any further, we should take a look at what makes up these specifications, and how you can get creating and using one today.
There are four main elements that make up web components
01. Custom Elements
Key features:
- Define an element's behaviour
- React to attribute changes
- Augment existing elements
When you hear people talk about 'web components,' quite often they are referring to the workings underneath – the custom elements API.
With this API, it is possible to create classes that power the inner workings of an element. They detail exactly what to do when an element is added, updated or removed.
Each custom element has a similar structure. They extend an existing HTMLElement class, which provides the groundwork for how an element should behave.
Inside, there are a few methods called reactions that are called in response to something about that element changing. For example, connectedCallback will be called when the new element appears on screen. These work similarly to the lifecycle methods found in most JavaScript frameworks.
Updating the attributes on an element can change how it behaves. When an update happens, the attributeChangedCallback reaction will fire, which details the change. This will only happen for an attribute that is defined inside the observedAttributes array.
An element needs to be defined before the browser can do anything with it. The define method here takes two arguments – the tag name, and the class it should use. All tag names must contain a - character to avoid any clashes with any future native elements.
The element can then be written anywhere in the page as a regular HTML tag. Once a browser has an element defined, it then finds any of these matching tags and links up their behaviour to the class in a process known as 'upgrading'.
There are two types of custom element – 'autonomous' or 'customised built-in'. Autonomous custom elements, which have been covered up until now, are not related to any existing element. Much like a <div> or <span> they do not provide any meaning to their content.
A customised built-in element – as the name implies – can enhance an existing element with new functionality. They maintain that element's normal semantic behaviours, while also being open to change. If an <input> element was customised, for example, it would still be picked up and submitted as part of a form.
The class of customised built-in component extends the class of the element it is customising. The definition also needs to define the tag of that element through its third argument.
They are also used slightly differently. Instead of a new tag, they extend the existing tag by using the is attribute. The browser can read this, and upgrade them in the same way as it can an autonomous component.
While most browsers support autonomous custom elements, Only Chrome and Firefox support customised built-in elements. If used in a browser that does not support them, they will fall back to the regular versions of the elements they customise, which can make them safe to use.
02. HTML Templates
- Create ready-made structures
- Inert until called upon
- Contains HTML, CSS and JS
Historically, browser-based templating involved stitching strings together in JavaScript, or using a library like Handlebars to parse a block special markup. More recently, the HTML templates specification defined the <template> tag, which can contain anything likely to be reused.
On its own, it has no appearance and remains inert, meaning nothing inside is parsed or executed until told to, including requests for external media such as images or video. JavaScript cannot query the contents either, as browsers will only see it as an empty element.
A regular query will pick up the <template> element itself. The importNode method creates a copy of its contents, with the second argument telling it to take a deep copy of everything. Finally, it can be added to the document like any other element.
Templates can contain anything an HTML page can, including CSS and JavaScript. As soon as the element is applied to the page, those styles apply and the scripts execute. Bear in mind that these will run globally and so can override styles and values if care isn't taken.
The best part about templates is that they are not just limited to web components. The examples here apply to any web page, but become particularly powerful when paired with web components, in particular the shadow DOM.
03. Shadow DOM
- Avoid styles leaking out
- Naming becomes simpler
- Keep implementation logic inside
The Document Object Model – or 'DOM' – is how the browser interprets the structure of a page. By reading through the HTML, it builds up an idea on what elements in the page contain what content, and uses that to decide what to show. When using something like document.getElementById() the browser is actually looking through the DOM.
That may be okay for the layout of a page, but what about the implementation details inside an element? Pages shouldn't need to worry about what makes up the interface inside a <video> element for example. That is where the shadow DOM comes in.
A shadow DOM is created when applied to an element. Any content can be added to the shadow DOM just like the regular – or 'light' – DOM, but it has no effect on what's happening outside of it. Likewise, nothing in the light DOM can access the shadow DOM directly. This means we can add classes, styles and scripts anywhere in the shadow DOM without worrying about clashes.
The best use of the shadow DOM with web components comes when coupled with a custom element. By having a shadow DOM in charge of the content, any time this component is reused, its styles and structure will not affect the rest of the page.
04. ES and HTML Modules
- Add in where needed
- No build step requirement
- Keep everything in one place
While the previous three specifications have had relatively straightforward paths to success, the packaging and reusability of them has long been a sticking point.
Originally, the HTML Imports specification defined a way for browsers to include HTML documents, much like CSS or JavaScript is already today. This would allow custom elements, along with their templates and shadow DOM, to live elsewhere and imported as needed.
Firefox chose not to implement HTML Imports in its browser, and instead favoured a newer specification around JavaScript module importing.
Modules do not apply their content globally by default. By marking certain variables, functions or classes as exported, they can then be imported by anything that needs them and used as if they were local.
This is a great help to web components, as a custom element containing a template and a shadow DOM can be exported from one file and added to another. As long as it gets defined somewhere along the line, it is ready to use.
An extension to this specification has been proposed to bring back some of the ease of HTML imports, alongside module imports. They will allow web components to be written using declarative and semantic HTML. Spearheaded by Microsoft, this feature is soon coming to Chrome and the Chromium-powered Edge browser.
Next page: How to build you own components
While there are a lot of complicated things you can achieve with web components, simply getting up and running actually involves very little code. Take your first steps into web components with a couple of short examples.
This component enables you to display user comments, using the HTML templates and shadow DOM APIs
This first tutorial (below) focuses on building a component to display user comments by making use of the HTML templates and shadow DOM APIs.
Jump to page 3 to learn how to save yourself time by using custom elements.
01. Provide a template
The component needs a generic template it can copy in order to generate its markup. This can live anywhere that the custom element class itself can access through its unique ID.
Add the <template> element directly in the HTML of the page. Any styles written here will only affect the component.
02. Add in markup
Along with the styles, the template contains the structure of the component's internals. In this case, it is set of <div> containers for layout purposes.
All dynamic content is passed in through slots. Add in slots for the user's avatar, name and message, and give them appropriate names to reference later.
03. Default slot content
Fallback content will appear when no information is supplied for a slot
The data passed into the slot will override whatever sits inside it in the template. If there is nothing supplied for that slot, it displays the fallback content instead.
In this case, if no username is supplied, the comment will display a 'no name' message in its place.
04. Create the class
Custom elements start life as a class that extends the generic HTMLElement class. As part of the setup process, it creates its own shadow root to render its content into. Keep it open in order to access it in the next step.
Finally, tell the browser about the new UserComment component class.
05. Apply shadow content
When the browser finds a <user-comment> element, it is going to populate the shadow root with the content of the template. The second argument tells the browser to copy all of the template, not just the first layer.
Add that markup to the shadow root, which will immediately update the visuals of this component.
06. Use the component
Back in the HTML, the component is now ready to use. Add the <user-comment> tag and add any relevant data inside.
As all slots are named, anything else that is passed through outside of a slot will be ignored. Everything inside those slots is copied in exactly as supplied, including related styling.
Next page: How to create a customised built-in element
Custom elements can also extend existing ones. It helps to save time by not having to recreate some of the behaviour that's already in the browser. This tutorial shows you how to extend the <time> element to display relative times that machines can understand.
Extend the <time> element to display relative times that machines can understand
01. Create the class
Custom built-in elements start life exactly the same as autonomous ones, but instead of extending HTMLElement, they use an existing element as a starting point.
This component uses HTMLTimeElement – the class that <time> elements use. It includes all the behaviour around the datetime attribute, including the format it expects that data to be supplied in.
02. Define the element
Again, much like autonomous custom elements, these also need to be registered with the browser using the define method. One added detail is the third argument, which takes an options object.
For now, this object only has one key, which is used to define exactly which built-in element it customises. It takes the tag name, and will cause an error if it doesn't exist.
03. Set the time
As the components set the value of the element in multiple places, it should have a method to call that contains that logic. Inside that method, the component tells the timeago library what that time is and sets its return value as the contents of that element.
Finally, set the title attribute, which allows users to hover their cursor over the text to see the exact time being referenced.
04. Update on connection
The component can use that new method to set the time on the element as soon as it appears on the page. Customised built-in elements cannot have an attached shadow DOM. As there is no other setup required, the component does not need any constructor.
05. Check attribute changes
At the moment, if the page wanted to update the time programmatically, our component would not react. It does not know it should be watching for changes to the datetime attribute.
By defining observed attributes, the attributeChangedCallback will run each time one of them changes. In this case, the component can run the setTime method again.
06. Add to the page
The final result
As this element is an extension of a built-in element, the implementation is a little different. To use our new element, create a <time> tag with an extra is attribute. This should match the name given when defining the component. For browsers that do not support customised built-in elements, they will display the fallback content that is inside instead.
Next page: Tools and frameworks to try
01. LitElement
LitElement provides helper methods and classes to create web components
Spearheaded by Justin Fagnani at Google, LitElement aims to supersede Polymer Classic as the premier approach to web components. It provides helper methods and classes to create web components, without the required boilerplate setup. It has dramatically increased in popularity since its first stable release in February 2019.
02. Stencil
Stencil is a compile-time tool from the Ionic framework team. It will analyse each component, optimise it as best as it can, and return a version that can be used across different browsers and frameworks. It includes added behaviour such as JSX, which handles data binding like a React project.
03. Vue web component wrapper
While the Vue framework can work with web components without issue, using an existing Vue component as a web component elsewhere is trickier. This library will wrap the single-file component and map all the necessary bindings automatically, or the Vue CLI can take care of all the heavy lifting.
04. Angular Elements
Similar to Vue, there is another wrapper to allow web components to be created using the power of Angular. The createCustomElement function links the APIs used with custom elements with the equivalent Angular syntax. Add this as part of the application bootstrap process and the rest is taken care of.
05. Skate
Skate works with other templating languages
By providing guidance alongside a thin layer on top of existing native functionality, Skate can provide great benefit with a smaller footprint than other libraries. Much of this comes from the ability to work with other templating languages like Preact, and drop in modules for additional functionality, such as server-side rendering.
06. Svelte
Svelte compiles its components into regular JavaScript and avoids shipping a runtime like other frameworks, which results in smaller files. While not required, Svelte components can be built as web components without needing any external tools. Define a tag name in the module configuration and Svelte will do the rest.
07. X-Tag
X-Tag is useful for tying components with those in other frameworks
The X-Tag project has gone through many iterations over the years. Now, this Microsoft-backed library mirrors much of the custom element specification, with its own approaches to style and templating. It is particularly useful when needing to support older browsers, or when tying components together with those in other frameworks.
08. Slim
While Slim is a relatively unknown library, it provides added functionality, such as one-way data binding and automatic re-rendering out of the box. It's fast and small too – weighing in at only 3.4Kb gzipped. Other directives can be dropped in as and when they are needed to keep things lean.
Feel the benefits of web components right away with these elements.
01. Wired
Wired can help you mock up a page quickly
Most sites and applications go through several iterations before becoming a finished product. A lot of these start life as a prototype sketched on a notepad, or created inside a graphical application. Wouldn't it be better if these lived inside the browser to get an idea of how it works in the real world?
Wired is a set of web components that generate an interface with a hand drawn look using rough.js under the hood. Buttons, inputs and more are ready to be dropped in where needed and linked up for basic interactions to mock up a page in no time.
02. Material Components
These components are a work in progress
The team behind Google's Material Design pattern already have an implementation for the web. Currently, they're working to have them consumable through web components to be dropped in without extra configuration. Complex patterns such as tabs and drawers have been created with more on the way.
03. Brightspace UI
The company behind the Brightspace learning tool has made a set of its components open source for all to use. These include buttons, tables and inputs all with a focus on performance and accessibility. Any bugs the team come across are fixed and pushed out to help anyone else using them.
04. Vaadin
These pre-built components can help get you started
The Vaadin platform is a set of pre-built UI components ready to be used to create an entire application. There's plenty available to help you get off the ground, including grid layouts, tooltips and progress bars. The paid-for pro components also include charts and text editors, configurable for all needs.
05. Animated Content Placeholder
Skeleton loading is a great way to improve perceived loading times. They act as a placeholder for incoming content that may take a while, such as a news feed or gallery. This component builds out a skeleton by using web components as the building blocks to mimic the loaded state.
06. Gluon-font-awesome
This is a lightweight wrapper around the popular Font Awesome icon library. Icons can be dropped in using a <font-awesome> tag, while the component handles the importing and loading of the font awesome library. It is built using Gluon – a lightweight framework providing convenience on top of native custom elements.
This article was originally published in creative web design magazine Web Designer. Buy issue 287 or subscribe.
Read more:
-
You're reading Startup – 40 New Ecommerce Designs, originally posted on Designmodo. If you've enjoyed this post, be sure to follow on Twitter, Facebook!
One of the most asked-for feature requests is e-commerce predesigned blocks, so we immediately started work. Here we have 40 absolutely new designed blocks that are ready to use in the Startup app! We tried to create every type of …
-
Intel issued patches for a high-severity flaw in its processor diagnostic tool as well as a fix for a medium-severity vulnerability in its data center SSD lineup.
-
Amazon Prime Day is now just days away, but as the company get set to release some epic Prime Day deals, Walmart is already spoiling us with some incredible offers. And this Corel PaintShop Pro 2019 deal is no exception.
A professional photo editing tool, PaintShop Pro is a quality and affordable Photoshop alternative for creatives working with the Windows OS. Each feature in PaintShop Pro has been inspired by user ideas to help deliver a set of highly productive image editing tools. Now just $40 for the entire suite, PaintShop Pro is a great option for novices or creatives who want to create attention-grabbing imagery but don't require the complexity found in (or want the subscription rates of) Photoshop.
Key features of PaintShop Pro include:
- Enhanced performance, speed and quality
- New brushes, colour palettes, gradients, patterns
- Picture to painting presets
- Retro and vintage tools
- Photo restoration
- Graduated filter tool
If you're not in a region with access to Walmart deals, never fear, here are the best PaintShop Pro prices in your area:
Read more:
-
The software giant also addressed 15 critical flaws and advised on the recently disclosed Linux Kernel "SACK Panic" bug.
-
The vulnerability can be exploited on a drive-by basis by a malicious website.
-
When you think of street art, chances are you imagine eye-catching images sprayed onto the side of a building. However, an Italian design agency has given the medium a technological twist by using a team of drones to spray-paint a giant mural in Turin.
We've seen plenty of stunning murals over the years, but none of the masterpieces on our list of inspirational street art has been created by a swarm of drones. And while this isn't the first ever piece of street art to be painted by drones, it's certainly one of the most impressive.
Curated by innovation and design firm Carlo Ratti Associati as part of the brilliantly named Urban Flying Opera (or, to use its acronym, UFO), this project relied on over 1,000 sketches contributed by artists from the local community.
These artists were asked to illustrate their hopes and ideas regarding what cities should look like, and their thoughts were whittled down to the 100 drawings that would eventually get spray-painted onto the mural by the flying graffiti machines.
Measuring in at 46 feet wide and 39 feet tall, the mural features drawings in three different colours that are layered one on top of the other.
The drones, which were supplied by Tsuru Robotics, were carefully controlled by multiple position monitoring systems to ensure that they didn't fly into one another and ruin the mural.
As for the sketches, these were uploaded to a central computer before being relayed as controls for the drones to follow. The result is a unique piece of street art that took 12 hours to complete.
"The city is an open canvas, where people can inscribe their stories in many ways," Carlo Ratti Associati founder, Professor Carlo Ratti, told New Atlas. "Such processes have always been happening; however, with UFO we tried to accelerate them, using drone technology to allow for a new use of painting as a means of expression."
Related articles:
-
Creating creature designs and art in general is like a sport. You need to practise and train if you want to improve. When you draw every day and have thousands of used sheets of paper and sketchbooks, you learn some tricks to make the process a little easier.
Draw everything: you’ll get faster and your brain will become a database full of references. There are also a few basic tips you already may know, but it’s good to go over them again: things like contrast, shapes, lines of action, movement, perspective. Put all of these techniques together and your creatures will look alive and be full of personality. For more on process, see our post on art techniques. Read on for my top 15 tips for creating better creature designs.
And if you want to read more about characters in general, check out our character design tips post.
01. Draw quick thumbnails
Create simple silhouettes to get started with your creature design
Drawing quick and simple thumbnails is a helpful warm-up exercise. There are a few things to bear in mind, though. I always try to keep the design simple; the silhouette needs to be easy to read. I use a solid colour and sometimes I draw over it with a darker colour tone. In this case I’m concentrating on creatures, which means I’m free to create different shapes, combining object, animal and human elements.
02. Don't forget references
References are vital to designing creatures
If I don’t feel inspired to draw then I’ll look around for some references. In this case, I’ll search for objects that I can either use as part of a creature, or just act as a launch point to galvanise me into action. My main reference sources are mythology, animals and nature and so I’ll draw some objects (African masks, runes, a cauldron…) and some animals. My sketchbooks are full of such doodles and they can easily end up being part of a figure design.
Need a new sketchbook? Check out our guide to the best sketchbooks.
03. Use basic shapes
Simple shapes can become complex characters
What if I start with basic shapes to create my character? All of them can turn into a creature, right? You might think this is a limitation, but it also forces you to be extra creative. This approach can be a good method for designing a squad of characters that work together, like superheroes. These shapes are just one way to start your designs. Sometimes I break the silhouette by adding elements, or I leave some empty spaces.
04. Combine basic shapes
How a basic shape design can develop into a creature
This approach can lead to interesting results. One of my previous thumbnails is a blend of triangles, circles and a rectangle. When I sketch over this basic form I can see immediately that it’s a one-eyed warrior hare carrying a shield and a candle. I start with a very simple doodle in greyscale and then add some details in the colour drawing. This breaks up the symmetry and make this character more visually appealing.
05. Draw without purpose
Put your references away and just start sketching
Another useful starting exercise is to simply draw without a specific purpose. And it’s important to me to do this without references. I don’t expect to create my greatest piece of art this way, but this can inspire future projects. Maybe I’ll pay attention to these sketches someday and fresh ideas will come to mind. It’s also a good exercise to banish the dreaded artist’s block.
06. Think about body language
Body language can convey a lot about a character
If you want your creatures to be expressive then it’s crucial to understand anatomy and body language. Combine these two key topics and your creation will feel more alive. I believe it’s vital to understand how bodies can express an emotion. You can obtain references from plenty of sources: study films, friends and model sessions; look in the mirror; or take some photos of interesting poses. This step is crucial. As a cartoon character designer, I tend to exaggerate these body expressions with more pronounced curves or shapes.
For more on anatomy and figures, see our guide to figure drawing.
07. Use lines of action
Straight lines can look dull, so experiment with curves and contrast
Using simple lines will define the movement of the creature. These are called lines of action. They’ll vary depending on the creature’s mood and activity. Straight lines can make your figure look boring or static, so I often use curved and contrasting lines because they result in more eye-catching body positions. It’s crucial to draw a range of dynamic poses, because they’re a useful way of testing your creature’s proportions and anatomy.
08. Keep experimenting
Try a number of different variants of a creature before settling on your final design
Maintain your creativity by revisiting older designs and producing variants that will work in that universe. Here I’m keeping the same basic shapes and proportions for the different versions. Colours and materials have an important role to play, too. What if, instead of leaves, he has crystal hair? Or maybe there’s a constant flame on the top of his head? These variations can enrich your original concept. Other options include changing the size, age or sex of the character.
09. Add contrast
Contrast is a basic concept that you need to bear in mind when designing a creature. This contrast can be between colours, shapes, objects and more. I make sure that I think about contrast in every stage of my designs.
At the sketching stage, when I draw some basic shapes, any contrast between them will be most obvious during this stage. One creature will be curvy, the other straight. This can be very rough – there’s no need for details.
Next, I work more on the sketch, adding details like the ropes and plants. You can enhance the personality of your creature by adding contrast to the attitude. In this case, a monster is happy carrying a very serious stone head. I’m also using contrasting colours for them, increasing the visual effect and making them complementary characters.
Colour and texture can also enhance contrast
The final step is adding additional details such as texture, shadows and a background. It’s time to paint them all. Texture will enhance personality and give the figures the spirit of adventure. The background is part of the story, so I add a path and some mountains inspired by Chinese art.
10. Add an object
You can tell a lot about a creature from the objects it's holding
An object can be a good way to further strengthen a creature’s design. These props can boost their personality and charisma, and can also enrich their back story. What are they carrying? And why? Maybe they’re carrying luggage, or they’re holding a lantern to light the path into a mysterious forest. Depending on what they have on their back or in their hands you can define their jobs or roles in your narrative.
11. Try different facial expressions
Use your own face as a reference when trying out facial expressions on a creature design
Body poses are of vital importance when showing a creature’s emotion, but so are their facial expressions. Both work together. Try some basic emotions like happiness or anger, then try less-common ones. By placing a small mirror close to your work area, or using your camera phone, you can use yourself as reference. Study how the facial muscles move. Essentially, eyebrows and mouth will do the most amount of work for basic fantasy creatures. Consider adjusting the ears while squashing or stretching the main shape of the head to accentuate these emotions.
12. Use perspective
Avoid symmetry if you can, as it's often dull
Another way to improve your creature designs is adding some perspective. Symmetry can be very boring, and a simple pose viewed from the front may fail to resonate with the viewer. So it’s important to work with depth and space, to give your creature a strong feeling of movement. Try different angles when you sketch your characters, and look for references if you’re struggling. With this creature, I’ve increased the stroke width in some areas that are close to the viewer to boost the feeling of depth.
13. Create a point of interest
With some simple lines defining a direction, you can create a point of interest in your drawing where you can focus the viewer’s attention. This visual flow leads the viewer’s eyes in the direction you want. You can even create different entry points and there are a lot of ways to achieve this. Faces and hands are very expressive, so concentrate your efforts here. Colour and lighting can also help. Increase the brightness or ramp up the saturation of the area that you want the viewer to focus on.
14. Tell a story
Props and details add context to your creature design
Does this creature have a back story? And how can you tell? The attitude and action of the creature will play an important role, even if they’re standing still or looking at something. The environment plays an important role, too. It helps to explain what’s happening to your creature. Adding some props and details in the background will support the story and give context to the figure’s personality.
15. Create an atmosphere
The colours in this piece add something extra
Lighting and colour are key tools to use when painting creature concepts. You must play with lights and shadows to create interesting and atmospheric environments. This will focus the viewer’s eyes to some areas of the drawing. Selecting a source light and applying the correct shades will enable you to highlight key parts of your design. Keep in mind that colour, lighting and shadows are only part of the story. Make the choices that will enhance rather then detract from your narrative. Carry out colour tests to see which ones work best.
This article originally appeared in ImagineFX, the world's leading magazine for digital artists. Subscribe here.
Read more:
-
When it first aired, The Simpsons was a groundbreaking piece of subversive pop culture. But even in its heyday the show never went as far as this fan's dark version of the programme's intro, which sees the famous family reimagined as downtrodden citizens in a rather depressing-looking Russia.
Thanks to its never-ending repeats, The Simpsons intro is probably one of the most well-known TV title sequences of all time. This makes it a perfect vehicle for parody, as viewers will be able to draw comparisons between imitations and the real deal.
This clip though, created by YouTube animator Lazy Square, takes things to a grim new level. Each beat of the title sequence is followed, but everything's off.
The contrast can be seen immediately. Gone are the distinctive silhouettes that were Simpsons creator Matt Groening's shortcut to good character design. Instead, Marge's tall beehive is tied down, and the jagged outlines of Lisa and Maggie are replaced with utilitarian, close-cropped haircuts.
The vibrant colours of Springfield are also gone, Marge berates the cashier in a dank convenience store, and Lisa is threatened by armed policemen for blowing her sax. Check it out below.
There are plenty of little details that will make you re-watch this video. Is that Bart getting beaten up by bullies in the beginning? And just where does Lisa disappear to in the end? As far as fan films go, this one is bleak.
Of course, the programme itself never shied away from taking a pop at Russia. Who could forget the scene where Lenin bursts out of his mausoleum growling "must, crush, capitalism"? Or the Eastern European version of Itchy and Scratchy, called Worker and Parasite?
However, The Simpsons has also come under fire in recent years for its stereotypical depiction of different ethnicities, such as the Kwik-E-Mart's tireless manager, Apu. Even a fumbled apology didn't get the show off the hook in the eyes of some fans.
So does this violent parody also cross the line? It's hard to tell from comments, most of which are written in Cyrillic characters. But if the 'like' bar is anything to go by (currently it stands at 32,000 thumbs up to 2,000 thumbs down), it looks like Lazy Square has hit a home run.
Related articles:
-
If you need to get serious in your designs, it's good to have a selection of great-looking serif fonts. Serifs are the sensible wing of typography; almost always pulled out for books and newspapers where long tracts of printed text need to be easy to read, they have a look and feel that we automatically associate with authority and class.
That doesn't make them boring, though; the variety of serif fonts available is absolutely huge, and while some of them are definitely suited to quietly maintaining readability in lengthy body text, others are a lot more visually arresting with plenty of potential for exciting font pairings. Here are ten of our favourite new serifs; they're all free to use on personal projects, and some can be used in commercial work too. For more fonts of different types, see our post on the best free fonts.
01. Grenze
Grenze is a full type system with nine weight plus italics
Created by Renata Polastri and Omnibus-Type and with a name that derives from the German for 'frontier', Grenze is a really useful typeface system consisting of nine weights, from Thin through to Black, with matching italics. It's designed as a cross between Roman and blackletter fonts, combining visual impact with classical readability, and while it's envisaged as a font for magazines, it could be put to all manner of creative uses. It's published under the SIL Open Font Licence, so it's free to use in all projects.
02. Isle Headline
Isle Headline has a sister font to take care of the body text
A clear and sharp serif type family in four weights plus italics, Isle Headline was designed between 2018 and 2019 by Måns Grebäck. It's intended for large-scale use such as headlines and titles; if you want the same look for body text then look no further than its sister font, Isle Body, which uses the same basic structure but with a softer look. Both fonts are free for personal use; head to Måns' site for commercial licences and to see his other fonts.
03. Saonara
Just the thing for those classy fashion spreads
For those projects that require a luxury look that positively drips class, get a load of Saonara, designed by Maxim and Denis Schepin of MADE Type. Inspired by the world of fashion, it's a gloriously elegant font with strokes that veer between whip-thin and super-chunky, with razor-sharp serifs to finish off the look. It's free for personal use, while a standard licence will cost you just $16.
04. Coachella
Coachella's full of contrast and quirky touches
Another font from MADE Type that's free for personal use, Coachella is a contrasting serif font family in six weights from Thin to Black. In the heavier weights the contrast between line widths across the font is even more extreme than in Saonara, but the look's a lot more approachable; we love some its quirky touches such as the terminal on the lower-case 'a' and the triangular tail on the upper-case 'Q'.
05. Red Delicious
Red Delicious is a tasty, full-bodied font
Dan Zadorozny is a designer who's been creating fonts for the past 20 years, all of them free for personal use and available for commercial use in return for a $20 donation. His site's well worth looking through for typographic goodies; a recent offering that caught our eye is Red Delicious, Zadorozny's take on the classic varsity font often used on sweatshirts and the like. It features slightly rounded serifs to give the characters a full-bodied feel and weight, and comes in 25 different versions, each with an extended Latin character set.
06. Melisande Sharp
For a less formal serif, try Melisande Sharp's hand-drawn style
Serif fonts are often used as a visual shorthand for authority and gravitas, but Melisande Sharp, a hand-drawn serif by Brittney Murphy, is one that's a lot more fun to be around. It has some really eye-catching touches to it, such as the pot belly-shaped bowl on the lower-case 'a' and the incredibly high crossbar on the 'f', all of which combine to give this font a fantastically lively feel. It's free for personal use; for most commercial uses there's a standard licence that'll cost you just $8.
07. Halibut Serif
Halibut's serif's look like they might bite
There's nothing fishy about Halibut Serif, an open-source display and paragraph font from Colllettivo. It's another lively free serif font that comes in three weights – Regular, Expanded and Condensed – each packing in 234 glyphs. We particularly love Halibut's sharp, toothy serifs, which look like they could bite your hand off. Like all of Colllettivo's fonts, it's free to use on any project.
08. Libertinus Serif
Here's a great all-rounder in plenty of styles and weights
Linux fans will have doubtless noticed the resemblance between Libertinus Serif and Linux's Libertine and Biolinum fonts, and there's a good reason for that. Libertinus Serif is a fork of those fonts that addresses some of their bugs, and it's a classic-looking serif that comes in 14 styles to suit all manner of uses. Published under the SIL Open Font Licence, it's good for all applications.
09. Adega Serif
Adega Serif is beautifully old-style
Created by Brazilian designer Anísio Dega, Adega Serif is a print-focused font designed with books, newspapers and magazines in mind, and shaped to give maximum comfort to the reader. Coming on like a softer alternative to something like Book Antiqua, it features wonderfully tall ascenders and some beautifully hand-drawn quirks, and it comes in regular and bold weights with matching italics. It's available as donationware; if you get good use out of it then be sure to send Dega some money.
10. Afterglow
Dial the elegance up to 11 with Afterglow
To finish our round-up of 2019's best free serif fonts, here's Afterglow, a modern and classic serif typeface by Vintage Voyage. Full of contrast lines and with plenty of stylistic alternates, it's just the thing for retro-looking headlines with a bit of a 1970's feel, and it's free for personal use while a commercial licence is available for $14.
Related articles:
-
Instead of looking to the future, invoking the feeling of days gone by seems to be many brands' favourite way to engage customers. Brands are looking to associate themselves with the warm, fuzzy feeling that many get when thinking of their childhoods, and of course, capitalising on these feelings to get us to spend money.
Nostalgic branding doesn't mean relying on old forms of advertising, such as print campaigns, though (see our favourite print ads here). Brands can use cutting-edge technology to invoke the past.
Can nostalgic branding ever go too far? Will customers eventually see through it? While there are many examples of brands who've looked to the past when creating their logos and branding (see our how to reawaken a brand's heritage post). Here, we take a look at five brands that hit nostalgia hard through their adverts, and evaluate their success.
01. Hovis
Hovis has taken nostalgia to the next level by re-running a much-loved advert from 1973. The 'Boy on the Bike' advert has been voted Britain's most iconic and much-loved advert, and recently returned to TV screens after 46 years. The advert was directed by Ridley Scott and has been remastered for a 2019 audience.
This seems like a smart move from Hovis. If your greatest advert is still so popular and loved almost 50 years later, then why not rerun it? Those who remember it from the first time round will enjoy reliving it, and it'll also reach a new audience.
02. GWR
If Enid Blyton's books felt old-fashioned to many 20 years ago, they're arguably now at peak nostalgia. To invoke this spirit, adam&eveDDB created this campaign for Great Western Railway, which shows Blyton's Famous Five having an adventure across the South West's rail network. The campaign won a Graphite Pencil at D&AD Awards 2018.
It's beautifully illustrated, and animated. Sadly, it's hard to feel very nostalgic or warm and fuzzy when your train's delayed for the third time in a week. Still, at least the illustrations are nice to look at.
03. Halifax
Before Halifax's recent rebrand, the bank had a series of adverts focused on characters from the past, including Scooby-Doo, Ghostbusters, Top Cat, The Wizard of Oz and The Flintstones.
These ads were created by adam&eveDDB and showed the characters interacting with people at Halifax bank. The Top Cat ad, in particular, was mocked, as in the ad, the character gets a mortgage in order to live in a slightly bigger bin than before – a pretty odd living situation for a bank to be advocating.
It does make sense that a bank would try to tap into feelings of nostalgia, particularly when high-street banks are increasingly being left behind by 'millennial banks' such as Monzo, and the threat of crypto currency looms.
Post-rebrand, Halifax is still drawing on nostalgia, albeit in a slightly different way. Its latest ad involves a slinky. So looking to the past is clearly still working for it.
04. Microsoft
When your product feels a little outdated, and people associate it with the '90s, it is it best to just roll with it? Microsoft seemed to think so when they released this '90s-tastic advert for Internet Explorer in 2013. It had the tagline: 'You grew up. So did we. Reconnect with the new Internet Explorer,' and invited people to visit thebrowseryoulovedtohate.com (now defunct).
The ad above has all the '90s paraphernalia you forgot you loved, including Trolls, tamagotchis and wallets on chains. So far, so nostalgic. The catch? With this sort of association, it's easy to lump IE in the same category as all the other long-gone products. If IE is as grown-up as it says, why does it want to place itself in the same category as pogs?
05. 7UP
Another brand bringing back an old character is 7UP. Its latest campaign involves Fido Dido, 'the original chiller', and encourages people to 'put the chill' back in their lives.
Fido Dido was created in 1985 and reached popularity in the '90s, and is one of those characters that a lot of people had pretty much forgotten, until now. The ad above shows Fido Dido trying to interact with the modern world, only to find that everyone in it is so busy looking at their phones they don't notice him. This focus on how we've lost real-life interactions is an interesting one for brands to tap into, and we've already seen it subverted by the likes of mobile company Three. Although this 7UP ad is pretty cheesy, it gets the message across well.
Read more:
-
Around the start of this decade, a round-up of "best website designs" would have be dominated by big budget creations, full of clever tricks, beautiful animations and wow-factor effects. But the world has moved on since then.
With so much of the internet's commercial activity having shifted from websites to social media, innovative web design is less about showing off and more about quietly delivering great user experiences. And this more often to be found in smaller projects, online experiments, and sites built for fun, than in slick and polished corporate work.
In this post, we look at six websites, all launched this year, which may have gone under your radar, but which nonetheless showcase some inspired and innovative approaches to web design. Plus we hear from their creators about how they were put together, and what they've learned as a result.
01. Phil Coffman
Coffman has redesigned his blog to look more like a traditional journal
If we had a pound for every time we’ve heard a web designer say “I really need to get around to redesigning my blog,” we’d be millionaires. So hats off to Phil Coffman, a designer living in Austin, Texas, for actually dong so. But a bonus, he’s done a spectacularly inventive and original job of it too.
Combining handwriting and newspaper cutout-style type, with an earthy background that resembles ageing, physical paper, this is one of the best blog designs we’ve seen in years. And that’s partly a testament to the amount of work Coffman put into it.
“This design follows many previous failed attempts,” he admits. “Designing for myself is possibly my least favourite thing to do. as I struggle massively from indecision and unrealistic expectations I place on myself. In the end, this concept won out because I wanted to dive back into textures, hand-drawn elements, and an overall art direction that’s more of a personal journal than a polished publication.”
"Once I learned Neue Haas Grotesk was available from Adobe, Miller came quickly after as the two fonts pair really well together," says Coffman
Putting the concept into action also involved some technical challenges, he adds. “It took a bit of trial and error to get the textured effect looking the way I wanted on the post titles and black lines,” Coffman explains. “I knew CSS had the ability to use text as a clipping mask but I hadn’t spent much time digging into how to properly pull it off.”
Once he’d worked through the steps of applying the correct combination of CSS declarations, he faced the challenge of sourcing and prepping the right mix of textures. “This required finding textures with the right amount of wear and personality without causing issues with text legibility," he notes.
The image lock-ups were also a "fun challenge" for Coffman. "I landed on using CSS Grid to establish the skeleton for the markup, fiddling with the grid template to give me enough flexibility with positioning the figure and figure caption, while maintaining the same aspect ratio from the mobile layout to desktop.”
Coffman chose Professor as the handwriting font. "It's legible but also has great ligatures and looks like it could’ve been written with a blue pen in a journal", he explains.
For the typography, he settled on Neue Haas Grotesk for the titles and smaller sans-serif elements, Miller for the body text and Professor for the hand-written script.
“The key to this concept is the interplay between the hand-written font and sans and serif fonts,” he explains. “I felt that in order for the hand-written font to work I needed a sans and serif which were more straightforward or familiar, rather than ones which had a lot of personality of their own.”
02. The Boolean Game
This fun game teaches you how to use boolean operations in Adobe Illustrator and other vector tools
The Boolean Game is a fun browser game that teaches you how to use boolean operations in Adobe Illustrator, Sketch, Figma, and other vector editors. Creator Mark MacKay explains how it came about.
“I've been building design games for some years now, and I subconsciously collect things which I find challenging to convert into educational games,” he says. “This idea had been floating around for some time, and then I saw paper.js had a library to perform them: mathematically it's well beyond my ability. So I did a quick test and saw that it could be fun.”
While paper.js does the heavy lifting of the vector work for the site, MacKay also used anime.js for the animations, growler.js for the sound, and d3-color to manage the colour scheme.
MacKay used paper.js, anime.js, growler.js and d3-color to build the site
The main technical challenge was making it work on all devices, from phones to desktop, he continues. “This proved to be immensely challenging because you have to resize vectors and change the layout depending on the orientation. If I had chosen a fixed seen size, it would have probably taken me one month instead of three to get the project out the door.”
And interestingly, those three months taught him some important lessons about using dev tools.
The main challenge was making the game work on all devices
“The development ecosystem is optimised for very different things than what a solo creative designer-developer needs,” he explains. “It's as if you had the task of building a bridge and it's just assumed you'll have crane operators, pre-built concrete structures, steamrollers and so on. But if you simply need people to cross a stream, a simple hand build wooden structure will do.
“I say this because I used to feel inadequate for not knowing React, NPM, testing, ‘best practices’, etc. Now I understand I must optimise for my own flow and enjoyment. Dev tools and practices tend to be oriented towards reliability, collaboration and modularity, which are very different constraints.”
03. The Gyllenhaal Experiment
This site uses Reddit data to visualise how bad we are at spelling celebrity names
One of the best examples of data visualisation we’ve seen in some time, The Gyllenhaal Experiment is the brainchild of Russell Goldenberg and Matt Daniels of digital publication The Pudding.
“We’d seen this story about Colin Morris' analysis of self-identified Reddit misspelling,” explains Goldenberg. “And thought there was more that could be done with the idea of visualising the flow of how people spell.”
“We honed in on using celebrity names such as Jake Gyllenhaal, since they were quite prominent and not something in your typical spelling bee. We also knew we wanted to make something interactive to see real-time feedback of the spelling flows, so we fused those thoughts together to create a spelling bee-esque interactive visualisation."
The creators want to make something interactive, that showed real-time feedback of spelling flows
The pair relied on JavaScript and primarily the D3.js library for most of the visualisation, as well as using Firebase for the storage of user results.
“The biggest challenge by far was rendering the flow diagrams,” says Goldenberg. “Although it is technically a sankey diagram, we had to do a lot of custom stuff to get the paths rendering properly and not overlapping.”
There were lots of user flows to consider, from different ways to answer a question, to handling different states
In the course of building the site, the biggest surprise was learning quite how many different ways people spell names. “There were over 800 ways people tried to spell Matthew Mcconaughey for instance.
"From a development standpoint, there were lots of user flows to consider, from all sorts of variations to how they could answer a question, to handling different states (eg. did they return to the site having already answered?). Knowing all the possible states ahead of time was crucial to the development and design going smoothly.”
04. JSConf 2019
This conference site focuses on the fundamentals, and does them brilliantly
It's a real headache for web conference organisers. You don't want to spend your whole time working on your website when you could be focusing your energies on planning your event and making it the best you can be. But stick up a simple cookie cutter site, and people are going to wonder how much you know about the subject your conference is discussing.
Somehow, the organisers of JSConf EU seem to have squared that circle. Because not only is their conference universally praised and admired, but their website, which is built on the static site generator wintersmith, is pretty amazing too. Not because it's full of clever tricks - it isn't - but because it focuses on the fundamentals and delivers on every front, from ease of use to the relevance of its content.
Malte Ubi has putting everything into making this "the fastest conference website in the world"
Plus it's fast – super-fast. As Malte Ubl explains in this blog post: "I’ve spent a completely unreasonable amount of time trying to make it be the fastest conference website in the world." (He's not sure if he's succeeded, but so far no one has invalidated his claim).
It helps that Ubi is the creator of AMP, a web component library for making reliably fast websites. He's used the jSConf website as his playground to try out new techniques; and they certainly seem to have worked; the site works beautifully on every device we've tried it on.
You can take a deep dive into the clever ways Ubi has achieved this, from optimising font performance to dead code elimation, here.
05. Design Titles
This hilarious site parodied nonsense job titles with effortless precision
Who says web design can’t be fun? Not Xtian Miller and Boris Crowther, who’ve created this hilarious job title generator, Design Titles, which parodies some of the sillier monickers some web designers seem to go under these days.
Design-wise, it’s not a complex site: it does one thing and does it very well, and there’s an awful lot to be said for that.
“It really started as an inside joke,” explains Miller. “For better or worse, titles within the creative industry have developed a mercurial nature, causing inconsistency in their definition as they continually evolve.
The site was built on a foundation of static HTML, CSS, JS, Gulp and Sass
"As a result, many designers have gotten creative with their titles to sound more relevant or to avoid being pigeon-holed. The official titles don’t cut it, so they’ll come up with pseudo ones for their portfolios and social bios. The real goal of the website was to create a visual, fun way of getting this long-standing joke out of our system.”
The site was built with static HTML, CSS and JS, with Gulp for development workflow automation and Sass for CSS preprocessing. The generator function and algorithm were made entirely from scratch in Vanilla JavaScript.
The biggest technical challenge was getting the algorithm of the shuffle function just right, adds Miller. “We had to continually tweak it to a point where it wasn't too repetitive, and you had as good a chance of getting a perfectly normal title as you did an absurd one. The more you use it, the more ludicrous (or serious) it gets. It may look simple, but it took a lot of testing to finesse the algorithm.”
The biggest technical challenge was getting the algorithm of the shuffle function just right
Looks-wise, the duo we were inspired by the International Typographic Style, but more specifically Vignelli's NYC subway design system for layout and typography.
“When you go all in on that style you're somewhat aware of the influence, authority and objectivity behind it, which we felt was ironic for this whole concept,” says Miller.
“We wanted the title to be as obnoxiously large as possible - fitting the viewport - to emphasise its importance, and used modern colour pairings for impact and variety. The colour randomisation was a simple solution to take away the monotony of shuffling, and it sort of goes along nicely with how each title carries its own persona.”
06. Captain Marvel
We never realised how much we missed neon colours and cheesy fonts
The latest Marvel movie, Captain Marvel, takes place in the 1990s, and so this hilarious promotional site perfectly recreates the look and feel of what the web looked like in that decade.
Younger people may be shocked by how basic and clunky it looks, but those of a certain age will get a nostalgic rush to see the neon fonts, cheesy animations, bad photo crops, guestbook and hit counter, which all used to be part and parcel of early website design.
There’s even an authentic 'Spot the Skrull' game that asks you to decide whether someone is a human or secretly a shape-shifting alien in disguise. Yes kids, this was what cutting edge movie promotion in the late 20th century was all about.
We love that there's a counter and guestbook!
Of course, under the hood, the site is not totally authentic. While Marvel's director of software engineering Lori Lombert joked that "We built this in FrontPage and host it Angelfire", it's actually been constructed using modern CSS and JavaScript, so a 1995 browser like Netscape Navigator wouldn't have known what to do with it. Not to mention that its 10MB size would have taken forever to download on dial-up via a screechy AOL modem.
That said, for anyone who remembers the thrill of watching their first web page download in the 1990s, this is a real treat. Parody is something that might look easy, but is actually incredibly hard to get right. So for Lombert and her team to absolutely nail the little details in this way is a great achievement, and reminds us in these days of soulless digital utility that the web can still be a fun and anarchic place.
Read more:
-
The Adobe Creative Suite is and probably always will be ubiquitous in the creative field. Its tools remain the gold standard for graphic design, photo manipulation, video editing, and more.
If you want to make the most out of every app, you can rely on the Complete Adobe Mastery Bundle to show you the ropes.
Across 11 courses and over 70 hours of premium training, you'll explore and master the functionalities of the top Adobe programs, including: Photoshop, Premiere Pro, After Effects, and Lightroom.
You'll also learn how to transform dull photos into dazzling imagery, create compelling videos, design marketing materials, and lots more. By the time you finish, you'll be able to apply these skills to your own creative endeavours.
Normally valued at $2,189, you can get the Complete Adobe Mastery Bundle today for only $39 - that's a saving of 98 percent.
Related articles:
-
Want to learn to take better photos? Photography skills are important whether you're a blogger, a graphic designer, an entrepreneur, a journalist, or even just someone who wants a better Instagram feed. Luckily, the Canon DSLR Photography A-Z Course can teach you everything you need to know in order to take better snaps.
Whether you have zero experience with DSLR cameras, or you've already been a photography enthusiast for years, this technical guide to mastering your Canon DSLR will help take your images to the next level. The course is taught with a Rebel series camera, which is among the most popular cameras for beginners.
However, you don't need to own a Canon Rebel camera in order to learn something from this course. The course covers everything from exposing your photos properly to mastering the different focus levels and shooting modes. You'll be snapping like a pro in no time at all.
Get The Canon DSLR Photography A-Z Course for just $10.99.
Related articles:
-
As Amazon gears up for its biggest event of the year, we're already seeing some of the best Prime Day deals start to surface. But with the main event not kicking off until next Monday, Walmart has decided to get things started a little early with some incredible deals of it's own. And this Apple iPad deal is one of the best we've seen so far.
It's not often you see Apple products discounted (especially Apple Pencil deals), so when there's an opportunity to save a whopping $80 on a brand new iPad, you don't want to hang around. You'll find details below on how you can currently get yourself a shiny new 9.7-inch, 6th generation iPad for less than $250. But hurry, these are going to fly off the shelves!
If you're visiting the site from outside of the US, here are the best same model iPad prices in your area:
-
If you’re looking to become a designer, this course is your one stop shop. That's because The Complete Learn to Design Bundle will help turn you from a beginner designer into a pro with its massive 65 hours of content.
With this bundle you’ll learn how to use some of the most important tools of the trade, including Photoshop and InDesign. Plus you'll take master classes in graphic design, as well as courses in graphic design theory.
And that's not all. You’ll also master the basics of typography, and you’ll even discover the best ways to go about logo design. By the end of this bundle, you’ll have learned graphic design from so many angles that you’ll be ready to embark on your design career.
The Complete Learn to Design Bundle can be yours, and best of all, you can pay what you want for it!
Related articles:
-
Google Project Zero finds Apple iMessage bug that bricks iPhones running older versions of the company's iOS software.
Threatpost: Bug in Anesthesia Respirators Allows Cyber-Tampering
in Ειδήσεις από τον χώρο του Design και Hosting
Posted · Report reply
GE Healthcare said an attacker could modify gas composition parameters within the devices' respirator function.
View the full article