Skip to main content

Tag: API

Dogs on CodePen Banner

Creative / Development Inspiration 55

Robert Marshall Leave a comment

This week is more UI focused, due to a project that I am working on. I have still managed to include some brilliant development inspiration articles, and a few thought pieces at the bottom of the rundown. Have a good week!

Designer Resources, Examples and Inspiration

Adobe XD Wireframe Kits

A collection of Adobe XD wireframes to get you off the ground in your next web project!

https://newtodesign.com/xd-wireframe-kits/

 

Accessibility before Aesthetics

It’s time we start addressing accessibility before aesthetics in our design processes to create meaningful products for our diversified societies and cultures. Before diving into the Why, How and What of it, let’s revisit the definitions of these terms to set the context.

https://uxplanet.org/accessibility-before-aesthetics-9a0fb463e149

 

Montage

Fast, easy prototyping for everyone. Using a user-generated library of components, designs can be got of the ground quicker than ever.

https://www.trymontage.com/

 

Rememberly — A UX case study to help people affected by Alzheimer’s and Dementia

A brilliant case study for a apps UX that needs to do its job.

https://medium.com/tj-egbert-design/rememberly-a-ux-case-study-to-help-people-affected-by-alzheimers-and-dementia-6a5c17a1e690

 

Development Snippets, Samples, and Articles

Zeroheight

This brings the design system closer to everyone involved. Starts with the designers, then can be fleshed out by the developers. Edited by everyone.

https://zeroheight.com/

 

The Dogs of CodePen

10 animated dogs. Thats all.

https://blog.codepen.io/2018/09/05/the-dogs-of-codepen/

 

Strategies For Headless Projects With Structured Content Management Systems

Using a Structured Content Management System (SCMS) can be a great way to free your content from a paradigm that begins to feel its age. In this article, Knut Melvær suggests some overarching strategies, with some concrete real-world examples on how to think about working with structured content.

https://www.smashingmagazine.com/2018/11/structured-content-done-right/

 

Getform

Not enough time to build in a form? Use Getform! Backend platform for designers and developers.

https://getform.io/

 

FreeCodeCamp – JavaScript Platform Game Tutorial

Lear how to build a Maria like platform game with this 3 hour video tutorial!

https://www.freecodecamp.org/news/beaucarnes/platformer-game-turorial-javascript–m1JO9zlF4

 

Drop-Down Usability: When You Should (and Shouldn’t) Use Them

Deciding when to use a drop-down — or when to use another interface type, such as a radio button interface or open text field — for a specific input can be tricky. This article talks through the when and wheres.

https://baymard.com/blog/drop-down-usability

 

A bit of everything

Deep Dive Duck

Need to keep an eye on your competitors? Monitor changes on their site and get it set to you in a weekly email!

https://deepdiveduck.com/

CSS Shape Radius Blog Banner

Creative / Development Inspiration 49

Robert Marshall Leave a comment

This week is more developer heavy, but with reason. There have been some brilliant tools and articles this week, and I really wanted to share them all! Enjoy this weeks design (little less) and development (little more) inspiration rundown.

 

Website Inspiration

ACLU — 50 State Blueprint

Not your typical website, but incredibly effective. ACLU have created this simple website showing each one of the 1,942,600 people in state prisons and jails in the US.

https://50stateblueprint.aclu.org/

 

Designer Resources, Examples and Inspiration

Stop Solving Real Problems Once in a While

We sometimes take things too seriously and thus overrate people sharing their shiny design and code experiments with the world.

https://uxdesign.cc/stop-solving-real-problems-once-in-a-while-e7e1ecdaf9c1

 

Logo Lab

A tool to help you make your logo better. Checks balance, colour, accessibility, and more to ensure your brand is more able to catch that attention!

https://logolab.app/lab

 

 

Development Snippets, Samples, and Articles

Introducing GitHub Actions

This makes me very excited. GitHub actions allows build and deploy (actually, any task you can think of) to be run when specific commit commands are made. Yes.

https://css-tricks.com/introducing-github-actions/

 

Experimental Gradient Editor

A great Codepen project by David A, showing colour gradient manipulation. Doesn’t really work on mobile, but looks great on desktop!

https://codepen.io/meodai/full/xyqoEO/

 

Rythm JS

Spelling issues aside. This JavaScript library is has an interesting take on using music on websites. Lets make your website dance.

https://okazari.github.io/Rythm.js/

 

Keys to Maintainable CSS: Order

Krisztian makes some great points on how CSS should be organised in a project. From ordering, layout, and simple spacing, this article helps developers write better, more readable CSS.

https://pyx.space/post/keys-to-maintainable-css-order

 

Relax – A Promise Based State Management Library

Think Redux, but smaller. Written from scratch, with no action types, switch statements or middle ware. It’s only 2.23kb gzipped!

https://github.com/relax-js/relax

 

CSS Border-Radius Can Do That?

When you use eight values specifying border-radius in CSS, you can create organic looking shapes. The article goes through how this is done, and also links out to a handy tool to help in shape creation.

https://medium.com/9elements/css-border-radius-can-do-that-d46df1d013ae

 

A bit of everything

How to Create a Design System

I am not going to give this up yet! I am big on this idea. This article covers the autonomy of a design system, and how you can build one.

https://medium.com/dev-channel/how-to-create-a-design-system-460b93a6565

 

The Inclusive Web – Why It Should Matter to Businesses

An article I wrote last week about how businesses seems to forget about accessibility. This makes no sense, as they seem to be missing a trick…

http://thoughtsandstuff.com/the-inclusive-web-why-it-should-matter-to-businesses/

 

Of Deadlines and Due Dates

This article stood out to be due to this one like – “Do not commit to a deadline you did not help set”. I think this sentiment is something that needs to be considered by a lot of people in this industry. Interesting read.

https://blog.calevans.com/2006/02/03/of-deadlines-and-due-dates/

 

So We Got Tracked Anyway

A brilliant article about how SSL means bugger all to the monopolies of the interwebs, and how Google and Facebook track you everywhere you go.

https://youbroketheinternet.org/trackedanyway

 

Realtime Board

I stumbled across this tool on Reddit. A real time, whiteboard like interface to keep everything in one place. A simple white boarding platform for cross-functional team collaboration

https://realtimeboard.com/

Google Maps Banner

Google Maps API Error: ApiNotActivatedMapError

Robert Marshall Leave a comment

I have worked on loads of projects using the Google Maps API. It used to be a simple case of enabling the the Maps JavaScript API and you were off. This is not the case any more.

 

After setting up a new project to get a location from a postcode the other day I came across the error “ApiNotActivatedMapError”. I checked and the Maps JavaScript API was enabled.

 

After a bit of digging, since 22nd June 2018 Google has updated their business model. Each API has its own separate billing, and for that reason each API must be enabled individually. To get Geocoding on Google Maps to work properly the following APIs need to be enabled.

  • Maps JavaScript API
  • Geocoding Service
  • Directions Service
  • Distance Matrix Service
  • Elevation Service
  • Places Library

 

Unfortunately the Google Console API Manager doesn’t seem to work properly. When you search for an API other than Maps JavaScript API they wont show up. To access them you must go back to the project dashboard, click “Go to APIS overview”, and then click “ENABLE APIS AND SERVICES” This is where you will be able to see the correct APIs.

 

Now your maps should work!

Kin Movie Banner

Creative / Development Inspiration 43

Robert Marshall Leave a comment

After a week off ( for sun, mojitos and swimming ) I have another web design / development inspiration for you. However, because I can’t stop researching – even when on holiday – the list is slightly longer than usual, and full of some pretty interesting links.

 

Website Inspiration

Kin Movie

I’m not usually a fan of film websites, but the way the film snippets work alongside the parallax and particles is really something. Worth a look.

https://kin.movie

 

Designer Resources, Examples and Inspiration

The key lessons I learned creating a popular Design System

In 2012 Matt Bond started working on a small side project to standardise design patterns and user experience at Atlassian. This is what he has learnt!

https://medium.com/asana-design/the-key-lessons-i-learned-creating-a-popular-design-system-d078c817b4dd

 

Search Colours – Using Keywords!

Think Google for colours. A sleek interface to help inspire your designs.

https://picular.co/water

 

Colorable

A brilliantly simple colour generator to show if your colour pairings are accessible or not. Definitely worth saving!

https://colorable.jxnblk.com/

 

Development Snippets, Samples, and Articles

How to Build Complicated Grids using CSS Grid

With CSS grid now available in all popular browsers it’s possible to reliably define the rows and columns that make up any kind of grid. This article details how toachieved the designed layout using CSS grid without any silly workarounds or java-script magic necessary.

https://danwebb.co/journal/how-to-build-complicated-grids-using-css-grid

 

Universal PWA Builder

A universal, framework-agnostic PWA builder that could works along side most of the major JS libraries. Can be run as is, with no need to configure, but it is fully extensible.

https://github.com/lukeed/pwa

 

Create your Design System

A 6 part rundown of all aspects required in creating a design system. This link starts at the beginning, with typography. A concise and well thought out piece to lead the way.

https://medium.com/codyhouse/create-your-design-system-part-1-typography-7c630d9092bd

 

SCSScale

Typographic modular scale starter based on body’s font-size built on SCSS

https://github.com/alectro/SCSScale

 

CSS Icons

An icon set made with pure CSS. No dependancies. Just grab the icon and go. Perfect for a small web project with only a few icons.

https://cssicon.space

 

Emotion JS

I am so happy to have found this. Emotion is a performant and flexible CSS-in-JS library. Building on many other CSS-in-JS libraries, it allows you to style apps quickly with string or object styles. It has predictable composition to avoid specificity issues with CSS. Perfect time saver.

https://github.com/emotion-js/emotion

 

Styled Components

Same as the above, but has been around for longer. Better documentation, large community. Worth looking into both.

https://www.styled-components.com/

 

A bit of everything

Could Value-based Pricing be the Key to Higher Revenues

A recent survey of design and development firms revealed a tantalising statistic: Freelancers who use value-based pricing were more likely to report annual income over $50,000 per year than freelancers who weren’t. Could it raise revenues for your practice?

https://www.webdesignerdepot.com/2018/08/could-value-based-pricing-be-the-key-to-higher-revenues/

 

Honoring a great man – The Story Behind Rebeccapurple

A child’s passing is memorialised with the name of web colour.

https://codepen.io/trezy/post/honoring-a-great-man

React Vis Banner

Creative / Development Inspiration 39

Robert Marshall Leave a comment

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

Robert Marshall Leave a comment

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

Grain and Mortar Banner

Creative / Development Inspiration 36

Robert Marshall Leave a comment

Website design and development inspiration can be tricky to find. This week we have the good stuff. 2 design agency websites for inspiration, several design articles on design mindset as well as bad UX/UI patterns. On top of that there are 2 new JS libraries, a CSS framework, and a great new React JS test website.

 

Website Inspiration

Grain and Mortar

A brand strategy and design agency website, Grain and Mortar have created something that is fast loading, slick, and gets the information across well.

https://grainandmortar.com/

 

45royale

This is another agency site. 45royale are a web design / development studio and their site shows it. Everything is laid out simply and easily digestible. My only issue with it, is after running Google Lighthouse, it falls down hard on Accessibility. If you are designing for the web, make it accessible…

https://45royale.com/

 

Designer Resources, Examples and Inspiration

You Can’t Design Without a Growth Mindset

Since failure is such an inevitable and essential part of design, it’s important to be surrounded by people who can not only accept, but embrace failure. One way to do this is to cultivate a growth mindset, both among team members as well as the organisation as a whole.

https://zurb.com/blog/you-can-t-design-without-a-growth-mindset

 

The Most Hated UI & UX Pattern of 2018

This article takes a deep look into some of the worst UI/US patterns about, asks why, and breaks them down. For example, why did infinite scroll fail Etsy? (as well as many other sites). How preloaders are just a smokescreen for poor performance. A very interesting read.

https://icons8.com/articles/most-hated-ui-ux-design-pattern

 

Development Snippets, Samples, and Articles

Shepard

Guide your users through your website with this JavaScript libary.

https://shipshapecode.github.io/shepherd/docs/welcome/

 

Snack.Expo

This site was such a great find! Run React JS code right in the browser, include third party scripts, and push tests to your mobile. A brilliant tool, and free!

https://snack.expo.io/

 

Vivify

Another animation library, that you can just plug in. Its new, and its free!

http://vivify.mkcreative.cz/

 

Stream – Ui Kit

Stream UI Kit is beautiful Open Source Bootstrap 4 UI Kit. It has 5 complete pages and includes over 20 reusable and customizable UI Blocks. It’s lightweight and only ~17kb when minified.

https://htmlstream.com/templates/stream-ui-kit

 

A bit of everything

Better Research, Better Design, Better Results

When content isn’t considered until the end, or previous data hasn’t been looked at to make solid design decisions problems occur. When the client is not forewarned about content strategy (because there isn’t one) or the site is not built with SEO in mind, problems occur. Smashing Magazine looks at how and why this must be re-considered.

https://www.smashingmagazine.com/2018/07/better-research-design-results/

bitmoji api output

Creative / Development Inspiration 34

Robert Marshall Leave a comment

Website inspiration in the form of a Tech Venture, sexy background animations, use the Bitmoji API, and why you should go and get that money! This weeks Creative and Development Inspiration is slightly shorter than usual. Mainly because of my crippling 2 day hangover. However, I believe that the articles and links I have pulled together this week are still that top quality information 😉

 

Website Inspiration

Rocka

This tech venture builder has put together a really interesting website, using parallax in a really enjoyable way. The use of vibrant colours and subtle animations add to the effect.

https://rocka.co/

 

Designer Resources, Examples and Inspiration

Cool Backgrounds

From the creator of https://cssgradient.io/, Cool Backgrounds is their answer to customised background images. Whether you need something for a social media background image, or hero image on a website, you might find something that works for you.

https://coolbackgrounds.io/

 

Interface Exploration: Depth and Color

An experiment in using depth and Colour to create a new UI style. An interesting article, worth a read.

https://blog.marvelapp.com/interface-exploration-depth-color/

 

Development Snippets, Samples, and Articles

Bokeh Effect

A great background animation. The Bokeh Effect is the aesthetic quality of the blur produced in the out-of-focus parts of an image produced by a lens. Bokeh has been defined as “the way the lens renders out-of-focus points of light”. This codepen takes that style, and makes it live.

https://codepen.io/Mamboleoo/full/BxMQYQ/

 

Optic

AI Pair programming that automates those tasks you don’t want to do. Saves you time and helps with your workflow. From what I can see it is only build for JavaScript, but this isn’t a massive issue. ReactJS is getting so large this tool is a definite help.

https://useoptic.com/

 

Libmojo

Use the Bitmoji API with this tiny library to add customised Bitmoji avatars to your newest web project. Libmoji makes it easy for you to integrate Bitmoji avatars into your project without the need for having a Bitmoji or Snapchat account

https://github.com/matthewnau/libmoji

 

Don’t Use The Placeholder Attribute

The placeholder attribute contains a surprising amount of issues that prevent it from delivering on what it promises. This has been my believe for a while now, but here is someone smarter than me putting it into words.

https://www.smashingmagazine.com/2018/06/placeholder-attribute/

 

A bit of everything

Fathom

Web analytics, that is simple, trustworthy and open source. With the introduction of GDPR it is a perfect, non-bloated way to track your website usage.

https://usefathom.com/

 

Take that money

This isn’t my normal post, but it sits well within the design/dev world. It is something that really confuses me. How so many people don’t understand it all comes down to money ( “but Rob, I do it for love”. That’s brilliant, but love doesn’t put a roof over your head, not if you don’t live with your parents ).

http://www.erickarjaluoto.com/blog/take-the-money/

SVGator

Creative / Development Inspiration 32

Robert Marshall Leave a comment

This week has a very diverse range of links and articles. Some brilliant websites for inspiration, ranging from clean portfolios to more modern app landing pages. Some tit-bits to tickle the taste buds of web designs, and finishing it off with some development snippets. I hope you find something new in this weeks Creative and Development Inspiration.

 

Website Inspiration

I have been scouring the web for examples of websites to help get your brain moving in the right direction. This week I have found several great portfolio sites, as well as some nice, clean sales sites.

 

Dejan Markovic

Simple, clean website. But for some reason really stood out to me.

http://dejan.works/

 

Matt Farley

Simple and clean once again, but with a nice flow to it.

http://mattfarley.ca/

 

Cronhub

Cronhub is a CRON monitoring service. The website is clean, well broken down, and easy to find information. This can be very difficult to achieve.

https://cronhub.io/

 

Monetha

A deal maker based on Block chain. Monetha’s website is modern, and a great landing page for the app.

https://www.monetha.io/

 

Designer Resources, Examples and Inspiration

 

7 Web Design Trends for 2018 – Don’t Fall Behind

Orana Creative have pulled together a must read guide for web design trends in 2018.  I wouldn’t say I fully agree, but they highlight some good points and it is always interesting to see what other people are pushing.

https://www.oranacreative.com/dont-fall-behind-follow-2018-trends-web-design

 

SVGator

Animate SVG easily. As simple as import, animate, export. There is no coding required. A very simple Adobe like interface for animating your SVGs.

https://www.svgator.com/

 

Payment Checkout Flow Animation

A beautifully designed checkout flow concept. The journey the user takes from selecting the item, to finally paying for it. An interesting use of micro-interactions and transitions between pages.

https://dribbble.com/shots/4689263-Payment-Checkout-Flow-Animation

 

Development Snippets, Samples, and Articles

 

Guzzle

I am probably a bit behind the times here, but I thought Id share as I have only just found it. A PHP HTTP client and framework for building RESTful web services. Now I know that more and more people are moving towards Node.js for this sort of thing, but I have a soft spot for PHP.

http://guzzle3.readthedocs.io/

 

Atomic CSS

Atomizer is a tool for creating Atomic CSS. Generate an Atomic stylesheet dynamically from the Atomic classes you’re actually using in your project (no unused styles!), or predeclare styles in configuration – it’s up to you. Atomizer is not opinionated, brings no CSS of its own, and integrates nicely with your favorite task runner.

https://acss.io/

 

tingle.js

aA minimalist and easy-to-use modal plugin written in pure JavaScript (We like modals here, also features RModal in Creative and Development Inspiration 30).

https://robinparisi.github.io/tingle/

 

The State of Changing Gradients with CSS Transitions and Animations

A well written article by CSS Tricks about CSS transitions and animations. The pitfalls and issues for working with these properties across many browsers (cough, IE, cough). Well worth the read.

https://css-tricks.com/the-state-of-changing-gradients-with-css-transitions-and-animations/

 

A bit of everything

How to Plan Website Design

Web design can generally be seen as what engages the users eye. What is pretty enough to keep them there. This is not true. What you really want to do, is engage the user and then convert them.

https://anartfulscience.com/How-To-Plan-Website-Design.php

 

Good Designer - Bad Designer

Creative / Development Inspiration 26

Robert Marshall Leave a comment

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