Popular design news of the week: July 18, 2016 – July 24, 2016

July 24th, 2016 No comments

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers.

The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.

Apple iOS 9.3.3 has a Great Secret Feature

The Perfect Design Tool

What’s New in JQuery 3.0

7 Tips for Designing Consistency

40 CSS Libraries, Frameworks and Tools from 2016

Draft U.S. Web Design Standards

This App Magically Turns B&W Photos into Color Ones

UI Kits Suck*

The Mind Blowing Amount of Mobile Activity

Using Animation to Enhance UX

New Google Ranking Study Shows Links are Incredibly Important

20 Common UX Mistakes in Ecommerce Websites

Google’s New App Might Be Better than Museums

Everything You Know About App Design is Wrong

40 Super Sleek Fonts for Clean Web Design

The Good, the Bad, and the Really Ugly of Pokemon Go

New Images Hint at a Dark Mode Hidden Within MacOS Sierra

A Psychological Approach to Designing Interfaces

Faroe Islands Fit Cameras to Sheep to Create Google Street View

Minority Report: Training Computers to Find Future Criminals

Glovo: Anything You Want, Delivered in Minutes.

Canva: Now Create Beautiful Designs on your iPhone

Fashion Brand Zara Steals la Artist’s Designs

Site Design: Suddencoffee.com

There’s More to Life than Being a F***ing Entrepreneur

Want more? No problem! Keep track of top design news from around the web with Webdesigner News.

Massive Discounts on Stock Photos – 84% off!

Source

Categories: Designing, Others Tags:

Best of July 2016: 10 Free WordPress Themes

July 24th, 2016 No comments
Edge Theme

Each month, we look for the most beautiful, fresh, and above all else, free WordPress themes for your blog revamp. This month is very generous when it comes to newly published templates for our favorite CMS. We have found a couple of very appealing themes that can freshen up and embellish your website from now on. Have fun while discovering the new themes.

Free WordPress Themes: July 2016 Edition

1 – Edge

Edge is to be considered a blogging theme and lets you customize the background, the header, and the logo. On top of that, it comes with plenty of options in the WordPress Theme Customizer. This way, everyone should be able to adjust bits and pieces to form their favorite design. Edge is also an interesting theme for photographers.

  • Created by: themefreesia
  • License: Free for personal and commercial purposes | GNU General Public License
  • Prepared for translations: yes
  • Demo: Edge Demo
  • Download on WordPress

2 – Smartr

smartr

Smartr is a theme for a broad scope of use cases. However, it was mainly created as a theme for business or freelance websites. The theme offers many customization options. Colors, logo, background, and navigation are adjustable, and all Google Fonts can be used.

  • Created by: Level9themes
  • License: Free for personal and commercial purposes | GNU General Public License
  • Prepared for translations: yes
  • Demo: Smartr Demo
  • Download on WordPress

3 – Elicit

elecit

Elicit is a suitable theme for personal blogs, portfolio, travel, and photography websites. The background, the colors, as well as the headers, are customizable. Five widget areas and a custom widget for social networks round off the features of this theme.

  • Created by: Level9themes
  • License: Free for personal and commercial purposes | GNU General Public License
  • Prepared for translations: yes
  • Demo: Elicit Demo
  • Download on WordPress

4 – Glowline

glowline

Glowline is praised as being a blog theme, but should also leave a good impression as a portfolio or photography website. You’re able to adjust the colors and the logo, and a slider for the landing page is included as well. The design may be considered bold.

  • Created by: ThemeHunk
  • License: Free for personal and commercial purposes | GNU General Public License
  • Prepared for translations: yes
  • Demo: Glowline Demo
  • Download on WordPress

5 – Atlantic

atlantic

Atlantic is a minimalistic theme for the optimal presentation of images. The theme is a good choice for photographers that want to show off their photos in large formats.

  • Created by: elevate360
  • License: Free for personal and commercial purposes | GNU General Public License
  • Prepared for translations: yes
  • Demo: Atlantic Demo
  • Download on WordPress

6 – BlogPost Lite

BlogPost Lite

Blogpost Lite is a theme for magazines, portfolios, and personal blogs with an interesting way of presenting content. Supposedly, many things can be adjusted using the theme customization. However, there is not detailed information on that.

7 – Enamag

enamag

Enamag is a theme appropriate for magazines and news websites. It should also suit a personal blog. You get to influence the general layout, as well as the colors. You are also able to add a full-screen background image, and edit the logo and favicon.

  • Created by: netshad
  • License: Free for personal and commercial purposes | GNU General Public License
  • Prepared for translations: yes
  • Demo: Enamag Demo
  • Download on WordPress

8 – Tuto

Tuto

Tuto is a magazine theme by MH Themes. Moreover, it’s a perfect fit for all websites that focus on content. Adjust header, colors, as well as the background. You get to choose between two general layouts for the articles and determine a lot of other settings.

  • Created by: MH Themes
  • License: Free for personal and commercial purposes | GNU General Public License
  • Prepared for translations: yes
  • Demo: Tuto Demo
  • Download on WordPress

9 – ViralBlog Lite

viralblog

ViralBlog aims to be a professional blog theme that is meant to be a perfect choice for webmasters with lots of content. Homepage design options are included, and supposedly, the theme is optimized for speed and SEO.

10 – The Minimal

the-minimal

When using The Minimal, expect a theme for professional blogs, magazines, and photography websites. Four custom widgets, the option to adjust the logo, and two-page layouts round off the picture.

(dpe)

Categories: Others Tags:

Comics of the week #349

July 23rd, 2016 No comments

Every week we feature a set of comics created exclusively for WDD.

The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.

These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.

So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.

Feel free to leave your comments and suggestions below as well as any related stories of your own…

Navigate safely

Oops…

Beyond reality TV

Can you relate to these situations? Please share your funny stories and comments below…

eBook: The Creative’s Guide to Freelancing by Jake Jorgovan – $12!

Source

Categories: Designing, Others Tags:

Anime.js Makes Animating CSS and SVG Easy

July 23rd, 2016 No comments

Anime.js is another one in an already impressive row of frameworks for animations. In contrast to all the other ones, anime.js does not only allow for the animation via CSS attributes. You can also alter SVG and HTML attributes with animations. It’s hard to image modern web design without the SVG format. This framework came at the right time.

Simple CSS Animations

Once you’ve implemented the JavaScript anime.js, creating animations based on CSS attributes becomes a rather easy thing to do. Call up “anime()”, to define one or multiple targets, meaning elements you want to animate. After that, define the CSS attributes that you want the animation to change.

anime({
  targets: [document.getElementsByTagName("div")[0]],
  translateX: "300px",
  rotate: 180,
  duration: 2000,
  direction: "alternate",
  loop: true,
  elasticity: 600,
  easing: "easeOutElastic"
});

In the example, “targets” is used to define a “

” element. You could also enter an ID instead. Two CSS attributes, “translateX” and “rotate”, are next to be animated. Subsequently, the duration and direction of the animation are determined using “duration” and “direction.” Here, the animation takes two seconds. Then, the animation is reversed. You are also able to make it play in a loop via “loop”.

During an Animation

Generally, this simple example is also possible without JavaScript, by using the “@keyframes” rules in conjunction with “animation”. However, anime.js adds the particular attribute “elasticity” that allows you to add said elasticity to an animation. The higher the value, the higher the elasticity of the motion. This means, that the animation won’t stop abruptly once it’s done, but oscillates instead. This allows users to create very natural looking movements.

30 Easing Effects

Just like classic CSS3 animations, anime.js gives you the option to add an easing to an animation. In total, there are 30 different easing effects available, which is significantly more than CSS3 offers.

When giving out “anime.easings” via the browser console, you’ll receive a list of all effects. Aside from the usual, in conjunction with “elasticity”, fascinating effects can be created.

SVG Path Animations

As mentioned before, animations with SVG attributes, like the “d” attribute of a path, are possible. This allows you to quickly realize an animation alongside a path.

To do so, first define a “” element via SVG, as well as another element, like a “

” container, which is supposed to move alongside the path.

anime({
  targets: [document.getElementsByTagName("div")[0]],
  translateX: anime.path(document.getElementsByTagName("path")[0]),
  translateY: anime.path(document.getElementsByTagName("path")[0]),
  rotate: anime.path(document.getElementsByTagName("path")[0]),
  duration: 5000,
  loop: true,
  easing: "linear"
});

The element you want to animate is once again referenced via “targets”. Then, use “translatex”, “translateY”, and “rotate” to define the SVG path, alongside which you want the “

” element to be animated, with “anime.path()”.

SVG Morphing

Due to Google sounding the death knell for SMIL, animated form changes of SVG elements won’t be possible anymore, at least in future browser versions. However, anime.js lets you continue to create these animations with ease.

To do so, first, define an SVG path which you can later quickly morph into a different shape.

anime({
  targets: [document.getElementsByTagName("path")[0]],
  d: "M140,51.75A51.75,51.75,0,0,0,99.2,35.27a83,83,0,1,0,65.13,65.67A51.76,51.76,0,0,0,140,51.75Z",
  duration: 1000,
  loop: true,
  direction: "alternate",
  easing: "linear"
});

In the example above, an SVG path is referenced as “targets”. “d” is used to define a target path which determines the shape into which you want the “” element to morph. An identical amount of points on the source and destination path is necessary. Otherwise, there will be messy effects instead of a pretty morphing.

Interactive Animations

Last but not least, anime.js also allows you to create interactive animations. For instance, there are ways to control the playback called “play()”, “pause()”, and “restart()”. You could also use “seek()” to skip to a certain point in the animation. For that, you need to either enter a time or percentage value.

On top of that, there are the attributes “begin”, “update”, and “complete”, letting you transfer a function. This function will then be executed at the beginning, after changes, or at the end of the animation, respectively.

Conclusion

Example on CodePen

Example on CodePen

anime.js has everything you need for simple as well as complex CSS and SVG animations. There’s a clear API reference with a couple of examples. Additionally, the framework runs under all standard browsers, including the Internet Explorer starting at version 10.

The code examples presented above can also be found on CodePen:

(dpe)

Categories: Others Tags:

Introducing the Web Design Ledger Shop

July 22nd, 2016 No comments
Web Design Ledger shop logo

We’re thrilled to announce the launch of our new online shop! The Web Design Ledger shop is packed with great deals on everything from gadgets and gear to software, web services, and online courses. We even have special sections dedicated to design and development to ensure you save money on the items you need to do what you love.

Deals have limited lifespans so signing up for an account is a great way to stay up-to-date. As an added bonus, the shop will offer a number of freebies you won’t want to miss out on. All you need to do is login and share the offer with your friends.

A few of our staff’s favorite items currently in the shop are:

These are just a few of the awesome products you can find in the Web Design Ledger shop. To kick-off off today’s launch, we’re offering readers 10% off their first purchase with code WDLShop10. This code is good to July 31st at 11:59 pm PST, so hurry and claim your discount today!

Read More at Introducing the Web Design Ledger Shop

Categories: Designing, Others Tags:

How to Skew a Circular Symbol in Illustrator

July 22nd, 2016 No comments
Dansky_Learn How to Draw a Skewed Symbol in Adobe Illustrator

In this tutorial, we’re going to learn how to draw and skew a circular symbol in Adobe Illustrator.

The Steps (1-11)

1. Create a New Document.

2. Select the Ellipse Tool, Left-click and hold Shift to draw a circle. Remove any Fill and apply a Stroke width of your choice. For this tutorial, I’ve used a Stroke Width of 30 pixels, and given the colour black #000000.

skew-circular-symbol-adobe-illustrator-1

3. In the Stroke Palette, select the box labeled Dashed Line, select 0 for the Dash, and approximately 65 for the Gap. Also select Round as the Cap. If done correctly, you should now have a circle made up of a dotted stroke.

4. Once you are happy with the size and spacing of your dotted stroke, go to Object > Expand, and click OK.

skew-circular-symbol-adobe-illustrator-2

5. Left-click on the circle, and holding Alt + Shift, scale up from the centre and also create a larger copy of the dotted circle.

6. Repeat Step 5 as many times as you like, depending on the number of rings you wish to include in your design.

skew-circular-symbol-adobe-illustrator-3

7. Drag over all shapes with your mouse to select everything on the artboard, and Left-click in the Gradient Palette to apply the default black/white gradient.

8. Next, select two colours of your choice, and drag each of the these colours in turn, to either end of the Gradient Slider. Each of the circles that make up your design should now have a gradient individually applied to them, with the two colours that you selected.

skew-circular-symbol-adobe-illustrator-4

9. To make the gradient flow through the entire shape as a whole (rather than each circle individually), go to Object > Compound Path, and select Make.

10. Lastly, to distort the shape, go to Effect > Distort, and select Free Distort. Adjust the anchor points in the preview box until you are happy and click OK.

11. To edit the distorted shape, select the Free Distort effect listed in the Appearance Palette.

skew-circular-symbol-adobe-illustrator-5

Download Adobe Illustrator.

Read More at How to Skew a Circular Symbol in Illustrator

Categories: Designing, Others Tags:

In Praise of the Peculiar: How and Why to Use Surreal Images

July 22nd, 2016 No comments
Monochromatic conceptual collage of a man inhabited by a feeling of wilderness. His body is made of successive layers of mountains, trees and birds. His eye is visible through the trees.

By: Anastasia Dyakovskaya

“Humans are complex and unpredictable, and there’s no reason why brand visuals can’t be, too.” – Lauren Catten, Art Director at Getty Images

Imagination is one of the four factors that make for a powerful image, and nothing stirs it more than Surreality – one of iStock & Getty Images’ 2016’s top visual trends.

The reason is simple: these original and sometimes peculiar compositions trigger a feeling of pleasure in experiencing the unpredictable. The aesthetic can transform an ordinary topic into something new and exciting. It can help distinguish a brand in a sea of similarity, making for memorable content that leaves a lasting impression. And, thanks to its hyper-immersive, psychedelic visuals, it has very broad appeal.

Nature-related images work as a particularly potent metaphor in this realm, leaving room for interpretation and creating meaningful connections with your content.

Here, iStock by Getty Images explain how to use captivating Surreality to illustrate some common concepts:

Growth in Business

Frame conversations regarding market or business growth with photography that depicts flourishing flora. With a touch of fantasy, images of lush green plants and verdant pastures go far beyond a basic gardening blog, serving as an apt allusion to fruitful endeavors in any field.

Branch of cyan colored fantastic leaves. Studio shot with light spot in centreA Summer/Winter comparison. Composite image.A macro shot of strands of moss on a stone - vibrant colors, surreal looking.

Numbers, Data and Metrics

Content that deals with data and metrics works well with interesting, high-quality images focused on patterns, textures, and repetition found in nature. A quarterly report might feature a seasonally appropriate yet abstract visual, while numbers-driven blogs, articles, or internal documents may be enriched by images depicting some kind of quantifiable element wrapped up in a visually pleasing configuration.

iStock_000081578749_LargeMacro closeup of fractal flower, digital artwork for creative graphic design. Colorful texture with floral pattern. Digitally created artwork.Abstract leaves background

Health and Wellness

Healthcare and pharmaceutical businesses can benefit from incorporating altered images in an attempt to stand out in a crowded market. Double exposure, layering, and playing with proportion are all creative ways to illustrate topics on wellbeing or mental illness, while creating new layers of meaning.

Creative double exposure portrait of woman combined with photograph of natureWoman PortraitMonochromatic conceptual collage of a man inhabited by a feeling of wilderness. His body is made of successive layers of mountains, trees and birds. His eye is visible through the trees.

Invention and Innovation

Innovation or thought leadership content lends itself to images that stand out due to unexpected choices related to color, light and depth of field. Vivid hues are always attention grabbing, while focusing on a certain point and blurring out the rest suggests the highlighting of something special.

This is a horizontal, color, royalty free stock photograph shot with a Nikon D800 DSLR camera. It is a winter afternoon in South Florida's Everglades National Park, an international travel destination. Photographed on Anihinga Trail. The bright day time sky with bright blue sky and white clouds reflects on the tranquil water's surface. Lilly pad floats on this wetland landscape.Black and white image of a Dandelion detail close-up macro, with wet tip looking like fine paint brush.Deposits around a thermal spring. Orakei Korako geothermal area on the Northern Island , New Zealand, near Rotorua,

Financial Concepts and Banking

Banking and financial organizations might try to spice things up with a series of psychedelic landscapes serving as background or header images. For those industries that find it most challenging to tell a visual story or maintain an engaging array of images, Surreality may yet prove most effective when thoughtfully applied.

fantasy landscape with clouds and a starLonely tree with mist and fireflies in forestNorthern lights above a forest, Finnish Lapland

Beauty and Fragrance

Beauty brands featuring herbal, fruit, or floral ingredients in particular might attempt to stand out with unexpected compositions using abstract angles and extreme close-ups. A vibrant burst of color accompanied by a surprise element is sure to draw attention and spark curiosities.

Droste Kiwibackground of back lit ripe melon slices arrangedAbstract kaleidoscopic texture or background pattern design made from pineapple

Supply Chain, Systems and Distribution

Distribution and supply-chain topics across industries pair well with kaleidoscopic images that evoke a web or span of networks due to design elements like refraction, replication, and abstraction. The modern, technological flair of such shapes and lines makes for a kind of psychedelia-meets-Photoshop, alternate reality that stretches the limits of image manipulation and is just the thing to keep eyes lingering longer.

Organic abstract, background pattern with plant based shapes. Mutant alien nature, genetic mutant.Abstract nature background with various circle and triangle shapes. Use vertically or horizontally.Organic abstract, background pattern featuring a profusion of thorns. Mutant nature, genetic mutation.

Explore more Surreality images at iStock by Getty Images.

Read More at In Praise of the Peculiar: How and Why to Use Surreal Images

Categories: Designing, Others Tags:

Learning to COPE with Microservices

July 22nd, 2016 No comments

I vividly remember my first encounter with a content management system: It was 2002 with a platform called PHP-Nuke. It offered a control panel where site administrators could publish new content that would be immediately available to readers, without the need to create/edit HTML files and upload them via FTP (which at the time was the only reality I knew).

Once I’d made the jump to a CMS, I didn’t look back. CMSs quickly became part of my toolkit as a web developer, and I didn’t really stop to question how they worked. I spent a lot of time learning my way around the various components of the web stack; falling in and out of love with different languages, paradigms, frameworks and tools. It took me a long time to stop and think about the most important part of any system: how it manages and stores content.

I set out on a quest to learn more about what’s under the hood of a CMS: how it really works and what it actually does when we ask it to handle things like users, articles or taxonomy.

I realised there’s something curious about the way platforms like WordPress or Drupal had evolved, in that they became much more than just content editing tools, gradually turning into the backbone of entire systems. These platforms – which power millions of websites – control everything from the database and its structure to the business logic, all the way down to the front-end templates.

This seemed to me to be a lot of power and responsibility for a single tool. I wanted to find out if that could be a problem.

Looking around and ahead

We live in a multi-channel and multi-device world. It’s critical that different types of systems – like third-party websites or native applications – are able to interact with your data. Are the current crop of CMS platforms prepared for this?

For example, WordPress runs on PHP with a MySQL database. Does that mean that every other system that needs to communicate with it needs to run PHP? If other systems want to insert new data, do they need to be able to connect to a MySQL database?

In an ideal world, the system would be able to communicate using a language that others could understand, regardless of the technology it’s written in.

And what happens if your content management requirements change? Editorial workflow plays a fundamental role in many organisations, and as they evolve and grow (or shrink!) it’s only natural that their processes will need to change too. Some CMSs can adapt to meet a new set of requirements, but many can’t.

If your CMS can’t adapt to changing requirements you could easily find yourself looking for a new system. This raises many more questions:

  • What happens to the existing data structure? Is it flexible enough to be plugged into another platform?
  • Are you wed to your existing tech stack?
  • How much refactoring will be required to adapt your front-end templates to a new CMS?

It’s also important to consider a more extreme scenario: what if there isn’t a website at all? Downplaying the role of a web presence in favor of a native application is a fairly common occurrence. Indeed many projects might not involve a website at all. Is it still okay for a traditional web CMS to be running the show?

From my perspective I want to give editors a single platform that they can use to publish content, regardless of the end systems that will consume it. Remember that for an editor the CMS is their only window to the world; they spend time working with the editing interface. Changing their interfaces to allow support for different devices over time, or as is more common, forcing them to create and publish content in more than one place to target those devices, has a severe impact on productivity.

Headless CMS and COPE

A typical CMS is a monolithic application with at least four components under the hood:

  1. A data layer where all the content is stored;
  2. A web-based interface where editors can create and edit content, as well as manage taxonomy and multimedia assets (CRUD UI);
  3. An interface where site administrators can create and design pages in the form of templates;
  4. A system that applies content from the database against the templates, generating an output to be consumed by end users (in the case of a website, this will be HTML).

The concept of a “headless CMS” sets out to tackle this tight coupling of components, removing the concerns highlighted above. The idea is simple: separate numbers 1 and 2 from 3 and 4, adding an API layer that receives and delivers data to the database and communicates with the outside world using a universal language (typically JSON).

Fig. 1 — Comparison between a monolithic CMS and a headless CMS

Working in this way the front-end is completely decoupled from the data that feeds it, which means it’s no longer limited by the tech stack adopted by the CMS – you could have a Node.js server pulling data from a headless Drupal running PHP, or even a static HTML page getting data from the API using a client-side JavaScript application.

Because pretty much anyone can speak JSON, this also creates the possibility for other systems to consume the data, without forcing editors to publish it multiple times on different platforms. This key principle is the basis of COPE (Create Once, Publish Everywhere) and is a powerful way of delivering content to a multi-medium, multi-device audience.

This was the approach I took when asked by a publishing company to make their WordPress installation capable of delivering content to multiple front-end systems running on different tech stacks (as well as native mobile applications and advertising units).

I created a custom API layer, on top of WP REST API, and documented the journey in an article that you can find here. What you’re now reading is a follow up to that: my continued pursuit of a truly decoupled, flexible and scalable COPE system.

Enter Microservices

The headless CMS approach solved most of my concerns, but not all of them. Even though the data was now detached from the front-end, the database and the CMS were still very much coupled together: still a problem if I wanted to change the CMS because, as the diagram shows, everything that goes in and out of the database still goes through it. (Even the new shiny API that communicates with the outside world.)

This setup also raises questions about scalability: with the CMS and API glued together, how easy is it to scale the system? For example the nature of the traffic hitting those two components will be significantly different, so it would probably make sense to put them under different load balancers.

To tackle this I wanted to split the CMS from the API and run them both as self-contained and deployable services. I started working with the guys at DADI, using their open-source platform for content and data management, which is built specifically in support of microservices and the principle of COPE. Their stack is a suite of modular, interchangeable and deployable services, built on Node.js, with the following components:

API

A high-performance RESTful API. Content is stored as documents and grouped in collections. Each collection is defined with a JSON schema file, where fields, validation rules and other data attributes are defined.

Documents are stored and retrieved by querying collections on specific REST endpoints. In addition to this, API also exposes endpoints to edit any configuration file, such as collection schemas, meaning that you can also use REST to create or edit collections.

To provide maximum flexibility it also offers custom endpoints, which can respond to any of the REST verbs with custom logic (and make use of the data models to query the database), as well as hooks that trigger custom routines at key moments in the lifecycle of a request.

To make the integration of API with other systems even easier, there’s a suite of libraries like Passport, to abstract the authentication layer (available for Node.js, PHP and React Native), or API wrapper, a high level toolkit for performing CRUD operations.

Web

A schemaless templating layer that can operate as a standalone platform or with DADI API as a full stack web application. Currently ships with Dust.js as its templating engine (support for more engines is in the works), allowing templates to be rendered both on the server and on the client.

When connected to an DADI API instance, DADI Web can make use of data sources to access collections, with documents made available to the templates automatically. Similarly to hooks in DADI API, it offers maximum flexibility in the form of events, which are modular pieces of functionality that can be attached to a page and executed at render time.

Publish

Full-featured editorial and content management interfaces designed to optimise editorial workflow.

Built with flexibility at its core, it features an advanced layout builder to create article-like documents, with the power to mix and match different elements (like paragraphs, images or media embeds) in a single construct whilst still storing them individually as separate fields.

This makes it easy to generate different versions of an article without having to scrape Markdown or HTML: for example, you can get a version of an article with just the images along with their captions, the pull quotes and the title, or the first three paragraphs.

It ships with collaboration and full revision history baked in.

CDN

A just-in-time asset manipulation and delivery layer designed as a modern content distribution solution.

It has full support for caching, header control, image manipulation, image compression and image format conversion. From a raw image, you could request multiple variations on-the-fly, such as crops with different sizes and resolutions (think responsive images) or even a blurred version.

CDN includes a content-aware cropping tool that is capable of analysing the content of an image to automatically find a good crop for a certain size, which is a game changer for image art direction.

The next version will introduce the concept of routes, a set of rules that allow you to deliver different variations of an asset based on conditions like the user’s device, language, location or connection type.


Fig. 2 — Diagram of a possible implementation of the DADI stack

When compared to existing headless CMS solutions, which are really just monolithic applications adapted to provide an API-first approach as an afterthought, the DADI platform is actually COPE by design, and the separation of concerns using microservices is at its core.

A Real Case

My team has just helped a digital publishing platform startup get their product live. The deliverables included two native mobile applications (Android and iOS), a responsive website, and a CMS, all within a very challenging timeline (think days and weeks, not weeks and months).

Because all of the components of the DADI stack are independent from each other, we could build most of the deliverables in parallel. The first component to be designed was the API layer, as it was responsible for feeding the content to all the user-facing applications, as well as to multiple syndication platforms and a third-party email delivery platform used for all marketing and customer communication.

By directly translating business logic into data structures and validation patterns we established a format for data representation, and with the API ready early in the process, the different teams could work simultaneously on their deliverables without affecting others.

We had one team working on the native mobile applications, another working on the responsive website (using DADI Web), an engineer deploying and customising an installation of DADI Publish and another handling asset manipulation and delivery using DADI CDN.

This separation of concerns liberates people to focus on their own area of expertise. A front-end engineer could complete the web layer having consumed data from API without ever having to see its implementation.

One of the features of the native applications is a basic content management interface, where editors can easily create new articles on the move, meaning that the apps themselves are fulfilling a key role from a traditional CMS. Of course because everything is modular, that is absolutely fine.

The beauty of building with microservices is that it works for projects of any size: a small project where the same instance runs an API, a web layer and editorial interfaces; a large project with dozens of APIs feeding multiple Web fronts controlled by one or more Publish instances; and anything in between. With any possible combination of components, the system can gradually scale from one extreme to the other as the requirements change over time.

This gets even more interesting when cloud computing services such as Amazon AWS are thrown into the mix. If a system has a sudden traffic spike, it can be quickly scaled to tens of instances within a particular layer instead of one, scaling back down to normal when things calm down.

Wrapping Up

We’ve come a long way since 2002 and PHP-Nuke! Our expectations as users and editors have increased exponentially, and the device landscape has changed beyond all recognition.

It’s difficult to predict what the next challenge will be, and of course no system is completely future proof. But I believe that the clean separation of concerns that microservices enable get you as close to that unobtainable goal as possible.

For me the most exciting thing about all of this is that the platform I’ve showed you is available for anyone to use and mess around with. If you’re really game, you can even contribute to the projects.

Feel free to ping me on Twitter if you have any questions or need a hand with setting up DADI.


Learning to COPE with Microservices is a post from CSS-Tricks

Categories: Designing, Others Tags:

Free download: 100 Web Design Icons from freepik.com

July 22nd, 2016 No comments

A picture is worth a thousand words, or so they say. When it comes to icons, we’d definitely agree; and it follows that this colorful freebie from freepik.com is worth 100,000 words because it features 100, on-trend icons, free for use in both personal and commercial projects.

Pumped full of Material Design charm, these vector icons will bring character to any site or app. They cover every aspect of web design, from color palette selection, to file formats, to responsive layouts. Some of our favorites include the DSLR, the colorful data list, and man…is it good to have a consistent set of file format icons that includes Sketch!

With so many sites looking the same these days, this is a simple, effective way to add some major personality to your portfolio.

All of the icons are supplied as individually named .svg and .png files for easy reference, and are 100% vector, so you can rescale them to any size you like, without losing quality.

Download the files beneath the preview:

Please enter your email address below and click the download button. The download link will be sent to you by email, or if you have already subscribed, the download will begin immediately.

Party With Uptown Sans: A Playful, Mischievous Sans Serif Font – only $12!

Source

Categories: Designing, Others Tags:

Web Development Reading List #146: Peermaps, Passive Event Listener Note, And A Shift Of Focus

July 22nd, 2016 No comments

So, what do we have this week? Well, it’s quite a lot actually. For example, there’s now a deal that might make Opera’s browser a Chinese business, leaving all privacy and security efforts that have recently been made in the browser uncertain.

“HTTPoxy,

If you want to dive into learning ECMAScript 6, Wes Bos has published a huge series of ES6 screencasts this week that are absolutely worth the money. Besides, there are a few other recommendations for you to read this week. Let’s get started.

The post Web Development Reading List #146: Peermaps, Passive Event Listener Note, And A Shift Of Focus appeared first on Smashing Magazine.

Categories: Others Tags: