Skip to main content
Bit Little City Image

Creative / Development Inspiration 40

Just as much for the web designer as the developer this week. Some brilliant UX inspiration and how to get users hooked on your interface. On top of that two new beautiful web frameworks to bootstrap your newest project, and a life changing chart library. This and more in this weeks web design and development inspiration rundown.

 

Website Inspiration

 

Big Little City

This is not your standard website. I usually post more commercial / business based websites, but this really caught my eye. It takes a section of the world (using real world maps) and creates a 3D rendered globe, with roads and all!

https://pissang.github.io/little-big-city/

 

Designer Resources, Examples and Inspiration

 

How to get users hooked on your interface

Micro interactions happen through the functional, interactive details of a product, and details…aren’t just the details; they are the design.

http://www.webdesignernews.com/redirect/id/2187168

 

The myth of human-centred design

The conventional interpretation of human-centered design wildly oversimplifies the relationship between people and technology. It’s time for a more nuanced approach, writes argodesign’s Mark Rolston.

https://www.fastcompany.com/90208681/the-myth-of-human-centered-design

 

Colour scale generator

Simple, easy to use colour gradient scale generator. Love it.

https://hihayk.github.io/scale/

 

UX Design Interactions

A libary of design interactions to gleem inspiration from. New apps added weekly. Get this on your bookmark list!

https://www.uisources.com/interactions

 

 

Development Snippets, Samples, and Articles

 

BuddyCSS

A easy to use framework to quickly build fast, attractive websites!

https://buddycss.com/

 

Slide out box menu – Code snippet

A details menu with boxes that slide out in an irregular grid. The grid items get revealed individually with delays from the top right corner of the page.

https://tympanus.net/codrops/2018/08/01/slide-box-menu

 

Apex Charts

I love a good chart. I have featured other great ones on the first blog of the series, and the 20th. This one is the cream of the crop. This is not a one size fits all solution, but rather charts for the modern web. Easier zooming and panning, event triggering, truly responsive, and speedy!

https://github.com/apexcharts/apexcharts.js

 

Argon Design System

A yet another beautiful framework to jump start your project. over 100 individual components, built with SASS and Bootstrap 4.

https://demos.creative-tim.com/argon-design-system/

 

A bit of everything

 

Not every article needs a picture

If a picture is worth a thousand words, it’s hard for me to imagine there’ll be much value in the text of an article illustrated by a generic stock image.

https://pxlnv.com/linklog/not-every-article-needs-a-picture/

 

The Bullshit Web

A great article on how the internet has turned into a place of uselessness, and how that can easily be changed. Loading numerous tracking scripts, images and adverts, that may or may not be of use.

https://pxlnv.com/blog/bullshit-web/

 

React Vis Banner

Creative / Development Inspiration 39

How Dropbox was redesigned for mobile, AirBNB has a top quality landing page, and how to hack user perceptions. This weeks design development inspiration covers this, as well as lots more. I also got a bit over excited about using WordPress with React, and making WordPress that little bit faster. Also, AirBNB changed their business strategy. Well worth the read!

 

Website Inspiration

This week I tried to focus on high quality landing pages. Not just from a design perspective, but from a “do the job” perspective as well. It turns out that “pretty” landing pages, aren’t necessarily the best…

 

WebProfits

Simple. To the point. Easy to understand. It doesn’t shout “pretty”, but it does do the thing it says it does. Gets you SEO analysis. An immediate call to action, and a visual showing an increase in users.

https://www.webprofits.com.au/lp/seo-analysis/

 

AirBNB

We all know this company. AirBNB are known for their constant data analysis, always pushing to improve user experience. The page for signing up to host your home does it well. A simple form showing how much you could make from your home. Thats why you’re there, right?

https://www.airbnb.co.uk/host/homes

 

Designer Resources, Examples and Inspiration

 

A Step by Step Guide to Designing a Pet Diet App

A well broken down approach from user data to design of making an app. It covers the lessons learnt, and how each element needs thinking about as its own thing!

https://uxdesign.cc/ui-ux-case-study-a-step-by-step-guide-to-the-process-of-designing-a-pet-diet-app-d635b911b648

 

How Dropbox was redesigned for Mobile

The designer behind the new Dropbox mobile interface breaks down how they changed the design of the app. A great insight into the business decisions and internal workings of Dropbox, and how it is a constant process.

https://medium.com/dropbox-design/fostering-focus-for-small-screens-34a9f338668c

 

Development Snippets, Samples, and Articles

 

Carl.JS

A Conditional Asset Resource Loader in about 500 bytes of JavaScript. A lazy but efficient way of managing your resources. I covered Critters on Design and Dev Inspiration 33, if you require a more built in Webpack approach.

https://github.com/Paul-Browne/carl.js

 

Hacking user perception to make your websites and apps feel faster

When planes at Houston Airport landed close to the terminal, passengers complained about baggage delays. So they moved the planes away so passengers had to walk further. No more complaints. How can this be applied to apps and websites?

https://medium.com/dev-channel/hacking-user-perception-to-make-your-websites-and-apps-feel-faster-922636b620e3

 

ReactPress – WordPress Starter-Kit

Bringing ReactJS to WordPress. Using Next.js and WordPress this starter-kit is a fast way to get off the ground running. Definitly worth a look for clients used to using WordPress.

https://github.com/nyl-auster/reactpress

 

WP-Rig

A progressive WordPress theme rig. Built with fast development and lightening speed websites in mind, this starter theme is definetly worth a look. Modern processes bundled into one package.

https://wprig.io

 

React-Vis – Charting Library

This ReactJS based charting library has all the graphs you could possibly need, as well as all the options. Some great examples, use cases and with almost 4000 stars on Github, who can miss out on it?

https://uber.github.io/react-vis/

 

A bit of everything

 

Zeplin IO

I am surprised I hadn’t come across Zeplin before. A brilliant website to help teams work together to build products. For both designer, developer and the whole business site of the team. Think Basecamp, but tailored for design. Includes XD and Sketch integration to save time messing about with exports.

https://zeplin.io/

 

Design Thinking and Storyboarding Changed AirBNBs Entire Business Strategy

An incredibility insightful interview by Forbes, with the Rebecca Sinclair, founder of Honest Design. She helped AirBNB disrupt itself, and change the business strategy by changing how the business saw itself.

https://www.forbes.com/sites/emilyjoffrion/2018/07/09/the-designer-who-changed-airbnbs-entire-strategy

 

Mail chimp chart banner

Creative / Development Inspiration 38

Two great website inspiration examples, several website generators, and why the open-plan office is rubbish! This plus a lot more in this weeks website design development inspiration rundown.

 

Website Inspiration

Freetrade

I found this site whilst doing research into investment apps. The thing that struck me was its simplicity, and ease at which is gets its message across. The whole site is well thought out, and easy to digest. It could look into user accessibility a little more, but as a piece of inspiration, perfect.

https://freetrade.io/

 

Iconwerk

Although simple, my god its quick! The way the blog title and images are swapped from the standard card layout is interesting, and works well in this case. Once again, accessibility is an issue (why is this such a standard problem, its not hard to fix!).

https://iconwerk.com/

 

Designer Resources, Examples and Inspiration

10 Beautiful Examples of Wireframes

Wireframing helps designers map out the structure of a website before anything is set in stone. 1st Designer has pulled together 10 examples of different wireframes.

https://1stwebdesigner.com/wireframes-web-design/

 

Dark UX Patterns in Advertising

According to Hubspot research, 85% of people have a negative opinion towards websites with obnoxious or intrusive ads. What’s wrong with the remaining 15%? This article points out the ad creators, and how they tried to trick you. Interesting read.

https://icons8.com/articles/dark-ux-patterns-advertising/

 

Development Snippets, Samples, and Articles

Storybook

I am surprised it has taken me this long to find out about this. But now I have I am definitely sharing it. Storybook is a development environment for UI components. You can browser a component library, view different states, and interactively develop them!

https://storybook.js.org/

 

Stitches

Build plain html templates from this JS template generator. A great idea for rolling out fast concepts, and the ability to add your own templates! Drag and drop and all that.

https://github.com/amiechen/stitches-template-generator

 

Docusaurus

A great project for easily building, deploying and maintaining open source projects. The “Simple to Start” guide walks you through the whole process in a very short amount of time.

https://docusaurus.io/

 

Does the Perfect Email Template Exist? We Used Data to Find Out.

Mailchimp put the numbers together, and came out with this article. They should know, they are the email people! There are no set rules, but they have found some helpful guidelines from this.

https://blog.mailchimp.com/does-the-perfect-email-template-exist-we-used-data-to-find-out/

 

Aria Examples

I have been banging on about accessibility for the past few weeks. Here is a link that can help you with that. Some great examples of common elements, and how they should be built to include/improve accessibility.

http://heydonworks.com/practical_aria_examples/

 

 

A bit of everything

These two articles go against what is being shouted about on Linkedin and those life inspiration blogs. They are also both very good reads.

 

Don’t listen to those productivity gurus: why waking up at 6am won’t make you successful

There is a list of things that “experts” say you must do to be successful, before you begin the working day. This article is of the opinion that they are wrong. I am inclined to agree.

https://medium.com/swlh/dont-listen-to-those-productivity-gurus-why-waking-up-at-6am-won-t-make-you-successful-b3c77921d9fd

 

The open-plan office is a terrible, horrible, no good, very bad idea

Articles like this one have been circling for the last few weeks, and I finally decided to add it to the rundown. I have always been of the belief that open plan offices are counter-intuitive. Especially for individuals who need to concentrate on their work. As much as a support Dave hyping up his client on the phone and getting that sale, I also now can’t concentrate on this awkward function.

https://m.signalvnoise.com/the-open-plan-office-is-a-terrible-horrible-no-good-very-bad-idea-42bd9cd294e3

Overflow - Userflow

Creative / Development Inspiration 35

Why you need to care about UX design, some brilliant tips on improving mobile interaction and how to create single element patterns. This weeks creative website design and development inspiration also looks at how to create HTML5 sprites and a beginners guide to A/B testing.

As well as going over keeping up with what is new on “that there interwebs” I also use this blog for a place to keep all the best bits that I want to remember.

Its easier to find here!

 

Website Inspiration

Overflow

“User flows done right” is this sites tagline. No wonder the site is perfectly designed. Perfect landing page with large header, and understandable call to action (I think I might use them).

https://overflow.io/

 

Designer Resources, Examples and Inspiration

Why you need to care about UX design

Understand what your customers want, keep your customers attention, and give them a well written story. Why brands really cannot afford to ignore UI or UX.

https://www.retailtechnews.com/2018/06/26/why-you-need-to-care-about-ux-design/

 

7 Effective Tips to Improve Mobile Interactions

The quality of mobile design can be measured simply. When the process of usage is so smooth and effortless that people don’t even think about it, it is the sign of the professional design work. On the other hand, if there are some problems in the interaction system, users will definitely notice them and won’t be pleased about it. This article breaks down 7 places that could be improved.

https://design4users.com/2018/06/22/7-effective-tips-to-improve-mobile-interactions

 

Development Snippets, Samples, and Articles

Introducing the Single Element Patterns

This is something I have been pushing for, and manoeuvring my workflow to get to this point. A project based on lots of small elements that can be reused over and over again. This article breaks down a few essential rules you should follow to make sure you can work faster.

https://medium.freecodecamp.org/introducing-the-single-element-pattern-dfbd2c295c5d

 

Animating Sprite Sheets With JavaScript

Martin Himmel walks you through how to animate a sprite in HTML5 Canvas. Easy to follow, and a hell of a lot of uses!

https://dev.to/martyhimmel/animating-sprite-sheets-with-javascript-ag3

 

Building a chat app with React.js and Chatkit

I had never heard of Scrimba before finding this tutorial, but I’m so glad I have. This tutorial walks you through building a chat app with React.js and Chatkit. Each step has a video, and you can take your own pace.

https://scrimba.com/g/greactchatkit

 

Glide JS

A dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more. Looks like something I will definitely be using moving forwards!

https://glidejs.com/

 

A bit of everything

A Beginners Guide to to A/B and Multivariate Testing

If you want to improve site conversion, A/B and Multivariate Testing are invaluable tools. This article run through the different services available, and how to get moving in the right direction.

https://boagworld.com/design/split-testing

 

User Journey: Design Flows Instead of Screens

Most designers are obsessed with screens. They have features and screens piled up, but rarely see their apps with their users’ eyes. Familiar? Well, it’s time to start thinking in flows instead of screens. A user journey shows how your people reach their goals in your app. This article introduces the basics of creating a user journey with some tips and specific examples.

https://uxstudioteam.com/ux-blog/user-journey-design-flows/

React JS Banner

A Beginners Guide to Learning ReactJS

Understanding props, module bundling, project structuring and more. I have started the nosedive into learning ReactJS and all of the attached bits and pieces (I used to be a Gulp man, now it looks like Webpack is the one).

 

This post is to keep all of the articles and resources I have found helpful in one place, and hopefully help others. The idea is to continually add to this as I learn. Stay Tuned!

 

Setting the Scene

What editor to use?

I have always used Brackets for my dev, but for some reason Brackets renders ReactJS incorrectly. It highlights sections that it shouldn’t, and doesn’t highlight sections it should. This meant it was time for a change. Enter Atom. Easy to add themes, plugins, and is integrated with Github. It works nicely with React, and also has a sexy little thing called Teletype.

https://atom.io/

 

Structuring projects and naming components in React

To allow a project to scale, and for other members of the team to understand what the hell you have created, the project needs to be properly structured. I wanted to make sure from the word go the projects I was creating were structured correctly, and the components named in a understandable and consistent way. This article was the perfect jump off point for me.

https://hackernoon.com/structuring-projects-and-naming-components-in-react-1261b6e18d76

 

 

Understanding Props

React JS Tutorials: Props

A consise article breaking down props in an easy to understand way. Helped me a great deal.

http://www.reactjstutorial.net/props.html

 

Google Sheets?

This isnt “database” really, but both of these links are nices example of how you can easily send simple data to Google Sheets using JS.

https://github.com/dwyl/learn-to-send-email-via-google-script-html-no-server

https://blog.416serg.me/building-an-app-using-google-sheets-api-react-d69681d22ce1

 

 

What about a database?

Intro to Firebase and React

CSS-Tricks has put together a brilliantly written guide to integrating Googles Firebase with React.

https://css-tricks.com/intro-firebase-react/

 

Module Bundling, and managing those tasks

How to use Webpack with React: an in-depth tutorial

In this tutorial you will see the basics of Webpack for React to get started, including React Router, Hot Module Replacement (HMR), Code Splitting by Route and Vendor, production configuration and more.

https://medium.freecodecamp.org/learn-webpack-for-react-a36d4cac5060

 

CSS Modules & Sass in Create React App

How to use modules and Sass side by side

https://medium.com/@kswanie21/css-modules-sass-in-create-react-app-37c3152de9

 

Adding Images

This one stumped the hell out of me! Why can’t I just add an image like usual and be done with it. Well apparently that isn’t the case. React also wants to do some funny business with the image, and if it is a smaller size it loads a base64 version. All about the speed! The two links below go about the same thing in different ways. Both really helped me get my head around it!

https://blog.hellojs.org/importing-images-in-react-c76f0dfcb552

http://interglobalmedianetwork.com/post/importing-images-in-react/

 

 

Keep that app speedy

Progressive Web Apps with React.js — Page Load Performance

Mobile web speeds matter. On average, faster experiences lead to 70% longer sessions and 2 x more mobile ad revenue. Investments in web perf saw the React-based, Flipkart Lite triple time-on-site, GQ get an 80% increase in traffic, Trainline make an additional 11M in yearly revenue and Instagram increase impressions by 33%.

https://medium.com/@addyosmani/progressive-web-apps-with-react-js-part-2-page-load-performance-33b932d97cf2

 

Reduce class name size generated by CSS-Loader

CSS-Loader is a brilliant plugin that allows CSS to be used as modules. With this setting it creates randomised names for module and css function. The issue is the name tends to be quite long.

The solution is here!

https://medium.freecodecamp.org/reducing-css-bundle-size-70-by-cutting-the-class-names-and-using-scope-isolation-625440de600b

 

Examples

Create a quiz

One of my past clients had me make a quiz on WordPress. To solve the problem they had I had to write a crazy about of JS. If I had known about React I would have just done this.

http://carinyperez.com/create-quiz-react/

 

Create a Blog with React

A tutorial series on creating a full blogging app with React. Very comprehensive.

https://code.tutsplus.com/series/creating-a-blogging-app-using-react–cms-1171

Nike React

Creative / Development Inspiration 30

This is my first version of Creative and Development Inspiration (See the first ever Creative and Development Inspiration, we have come a long way), organised in a more understandable way. Rather than the blog being thrown together with no structure like in the past, I will be breaking each section up so you can go straight to what interests you. This also helps me go back and find that interesting link I found, for when I need it some point in the near future!

 

Website Inspiration

This weeks selection of websites that inspired me. I will always try to keep them relevant to design and development, but sometimes its just a nice website!

 

Audi is beta testing a new site

This new website for Audi simply and efficiently shows the models of each car. Granted, I haven’t tested it on mobile, but it looks great on desktop!

https://beta.audi.co.uk/models.html

 

Nike React

Nikes website for their React brand. Cleverly put together, a bit of fun as you build your own show.

https://www.nike-react.com

 

 

Designer Resources, examples and inspiration

Articles on the newest design concepts, why things should be done in a certain way, or just plain old sexy images. Always related to web, always meant to inspire.

 

WTF! (Whats the Flow)

If you don’t read anything else on this weeks Creative and Development Inspiration, read this! A great article on why User Flows are so important, and how they should be laid out. Too many people don’t follow this, and it leads to problems further down the line.

https://uxdesign.cc/the-biggest-wtf-in-design-right-now-87139f367d66

 

Why You Shouldn’t Use Bright, Saturated Colours for Backgrounds

If you’re using a bright and saturated colour for your background, you’re making it hard for users to keep their eyes on your page. Bright, saturated colours attract the most user attention. Too much of it in a large area overstimulates the retinas which can strain the eyes.

http://uxmovement.com/content/why-you-shouldnt-use-bright-saturated-colors-for-backgrounds/

 

 

Development Snippets and Samples

This weeks selection of libraries, code snippets and development inspiration. I will always try to include this section, and hopefully help you grow your projects.

 

RModal JS

A 1.2kb modal dialog box with no dependencies. All browsers seem to be supported, up from IE9, and it is Bootstamp and Animate.css friendly. Worth a look.

https://rmodal.js.org/

 

Keyframe App

Keyframes gives you a visual timeline to help you create, view, and run animations without having to go back and forth between your browser and editor. And it gives you the CSS when you’re done.

https://keyframes.app/

 

Nano JS

nanoJS is around 100 lines of code (0.6 Kb compressed) JavaScript library for basic DOM manipulation. It has jQuery like syntax and supports chaining.

https://vladocar.github.io/nanoJS/

 

Hybrids

A brilliant UI library for creating Web Components with simple and functional API

https://github.com/hybridsjs/hybrids

 

 

A bit of everything

You try so hard to categorise everything, and then you find an article that doesn’t quite fit, but is worth linking!

 

How not to write an error message

Discover all the ways the internet’s most well-meaning messages can go horribly, horribly wrong.

https://webflow.com/blog/how-not-to-write-an-error-message

 

Colour Wheel

Creative / Development Inspiration 28

Tabler

Tablet is a premium and Open Source dashboard template with responsive and high quality UI. It has so many modules and components that it could be used immediately off the bat with no customisation required. Built with Bootstrap and icons integrated into thew build, its definitely bookmark-able.

https://tabler.github.io/

 

Nimiq Miner WP

I have mentioned Crypto Currency before in this blog, and am a strong advocate of the idea. I have recently been following a project called Nimiq, which labels itself as “the blockchain designed for simplicity”. I agree with this, the wallet is easy to set up, transfers are so fast! and mining is so easy! Because of my belief in the project I have started work on a WordPress plugin for mining Nimiq. It is at early stages with lots of features in the pipeline. Take a look!

https://github.com/justlikethisdesign/NimiqMinerWP

 

Three Essential Design Trends, May 2018

Web Designer Depot have written this great summary of what they thing the top 3 trends are of May. They have included some great examples of actual websites to go alongside their trends. Perfect website design inspiration.

https://www.webdesignerdepot.com/2018/05/3-essential-design-trends-may-2018/

 

Why You Should Never Centre or Right Align Your Logo

Many designers assume that centre or right aligning their website logo will make their brand more memorable. Research has shown this assumption is not true at all. In fact, straying from a left aligned logo can make your brand less memorable and even your site harder to navigate.

http://uxmovement.com/navigation/why-you-should-never-center-or-right-align-your-logo

 

Colour Theory

As a designer in the digital era, you certainly don’t have to stick to the colours available from paints, inks, or other pigments, though there’s a lot we can learn from fine art’s approach to colour. In fact, the human eye can see millions of different hues — but sometimes, choosing even just two or three to use from those millions can seem like a daunting task.

 

Canvas covers Colour Theory is a way that makes it so easy to understand. Definitely on the bookmark list for me.

https://www.canva.com/learn/color-theory

 

Priority Guides: A Content-First Alternative to Wireframes

A List Apart have put together this expansive article covering how Content-First allows you to better understand what is required on your website. They break down each stage to show how much simpler the concept is.

http://alistapart.com/article/priority-guides-a-content-first-alternative-to-wireframes


How paper wireframing will make you a better designer

This one goes against the above article. However, in a sense they also go hand in hand. The idea of moving away from from a computer and getting hands on allows a greater freedom of expression. You are not limited by the software and its toolbar. Worth the read.

https://blog.prototypr.io/how-paper-wireframing-will-make-you-a-better-designer-5a57db8dca13

Vector Art

Creative / Development Inspiration 27

Because we had a bank holiday (and I was BBQing and generally being sociable) I wasn’t able to get this weeks rundown out when I had hoped. However, you probably wouldn’t have read it anyway! I had a massive list of bookmarked articles and examples for this week, and have managed to get it down to 7 (all about quality over quantity here!). This weeks creative design and development inspiration covers a wide range of topics, from a incredibly small facial recognition library, how Photoshop shouldn’t be the final decision, and some pretty vector designs.

 

pico.js: a face-detection library in 200 lines of JavaScript

This library has so many potentials. A face detector in only 2kb of code. Take a look at the demo!

https://github.com/tehnokv/picojs

 

Scrolling interactions and techniques

Some greats do’s and don’ts of scrolling interactions in design. The article breaks down different beliefs about scrolling interaction and decides if they are correct. Some great examples including Nikes app and the Medium UI. This comes just weeks after I spoke about Scrollbooster on week 21, a great scrolling library – definitely worth a look if you haven’t already!

https://uxdesign.cc/scrolling-interactions-techniques-d6dafbfa4716

 

Optical Adjustment

So many of us rely on Photoshop and the concept of “Pixel Perfect” development. Luke Jones discusses how this isn’t always thew best way. The irrational mind of a human needs to decide whether something looks optically correct or not, because we can see and understand a context when a computer can’t.

https://medium.com/@lukejones/optical-adjustment-b55492a1165c

 

UN POSTER AL DÍA

Some great vector illustrations to give your brain something a bit different!

https://www.behance.net/gallery/64617617/Un-poster-al-dia

 

The Ultimate Guide to Font Sizes in UI Design

This is very text heavy, but well worth a bookmark. Erik puts 4000 words on the internet to help UI designers with the correct font sizes for different devices. No fear, it has a Table of Content to navigate!

https://learnui.design/blog/ultimate-guide-font-sizes-ui-design.html

 

Particle Effects for Buttons

I personally wouldn’t use this effect on any projects, but it is a nice effect and example of what can be achieved.

https://tympanus.net/codrops/2018/04/25/particle-effects-for-buttons/

 

Responsive Type – Sass template

As Kyle states: “The last time you will ever have to worry about responsive type, seriously! Configure all type settings in one file using sass variables.” I haven’t used this yet, but I am definitely going to!

https://github.com/kyle-villeneuve/responsive_type

Good Designer - Bad Designer

Creative / Development Inspiration 26

Good Designer, Bad Designer

Tarus Kohli breaks down the different between good designers and bad designers with some great sketches.

https://uxplanet.org/good-designer-bad-designer-eff79d356a75

 

A Beginner’s Guide to Webpack 4 and Module Bundling

This article is aimed at those who are new to Webpack, and will cover initial setup and configuration, modules, loaders, plugins, code splitting and hot module replacement. This is something I am yet to get into, but once I have finished my current project will be jumping all over.

https://www.sitepoint.com/beginners-guide-webpack-module-bundling/

 

Gooact: React in 160 lines of JavaScript

How to build own React clone in a matter of minutes. In this tutorial you will be shown how to write a fully functional React clone, including Component API and own Virtual DOM implementation.

https://medium.com/@sweetpalma/gooact-react-in-160-lines-of-javascript-44e0742ad60f

 

Toast UI Calendar

I have mentioned a Toast library before on Thoughts and Stuff. The Toast UI Chart. This time they have created a fully customisation calendar! Experience various view types, default popups, dragging or resizing schedules and customizable theme which is easy to use.

https://github.com/nhnent/tui.calendar

 

Choosing cameras in JavaScript with the mediaDevices API

The project I am currently involved in has me looking into implementing device cameras across different browsers and devices, if the project had been built on Node I would have most certainly needed this article. Most smart phones come with a front and back camera, when you’re building a video application for mobile you may want to choose or switch between them.  This simple tutorial walks you through the steps.

https://www.twilio.com/blog/2018/04/choosing-cameras-javascript-mediadevices-api.html

 

First Look at WordPress Gutenberg

The new Gutenberg editing interface is a major change coming to WordPress 5 this year, and it will affect WordPress plugin developers, theme designers, and website creators. In this video you will be shown you how to set up Gutenberg as a plugin on your existing site and how to get started using the Gutenberg editor to create content.

https://code.tutsplus.com/tutorials/first-look-at-wordpress-gutenberg–cms-31036