Skip to main content
Atom IDE Logo

My Atom Package and Theme setup

I have recently moved over to Atom from Brackets. I didn’t want to change IDEs but Brackets doesn’t play well with ReactJS (I talk about that a little more in my Beginners Guide to React).

 

When I was using Brackets I had it set up the way I thought was perfect. A number of plugins to allow me to add a section of HTML with the press of a key, or auto-correct on a function when I typed in incorrectly in my sleepy stupor. Upon finding myself in a new program, I wanted to replicate that set up. Turns out that was possible!

 

Here is my current (and probably about to grow) setup in Atom.

 

Theme:

Base16 Torromow Dark

Although this is installed as standard with Atom, god I love it. Slightly darker than the theme I was using with Brackets, and a lot nicer on the eyes.

https://github.com/atom/base16-tomorrow-dark-theme

 

 

Packages

Emmet

This goes without saying. It allows dynamic snippets, speedy coding and is customizable.

https://atom.io/packages/emmet

 

File Icons

Rather than having boring grey default icons, this packaged added a bit of colour, and made it easy to see what I was working on. A worthy addition.

https://atom.io/packages/file-icons

 

WordPress AutoComplete

Autocomplete support for WordPress actions and filters in the Atom editor. A massive help when in the zone.

https://atom.io/packages/wordpress-autocomplete

 

Docblockr Package

Designed to make writing documentation faster and easier. Use standard documentation formatting, this just helps you along.

https://atom.io/packages/docblockr

 

Autocomplete+ Paths Suggestions

Adds path autocompletion to autocomplete+ depending on scope and prefix. Supports custom scopes defined by the user.

https://atom.io/packages/autocomplete-paths

 

I am always looking to make my workflow faster, and easier so if you can suggest any other great Atom packages, stick it in the comments!

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

SVG Landscape Animation

Creative and Development Inspiration 17

SVG Landscapes

SVG animations are really starting to come into their own. Speckyboy has pulled together a great selection of SVG landscapes with animations to show off the potential. Some brilliant styling!

https://speckyboy.com/landscape-scenes-css-svg/

 

Epic Spinners

A collection of CSS only spinners. Perfect for loading animations within an app or website. Great selection all in one place.

http://epic-spinners.epicmax.co

 

CSS Content Cards

I have written a post about content cards before now.  But they are so great I thought I should include this link as well. Contains card examples, as well as the code!

https://speckyboy.com/css-content-cards/

 

Unused CSS

This web tool scans your site, and finds any unused CSS selectors. Great for keeping the code size down!

https://www.jitbit.com/unusedcss/

 

Gulp!

I am a massive advocate of automating your workflow. I know I am harking back a bit here, but for those of you who don’t have the robots doing half your job, you should. This article breaks down this JS automation tool.
https://scotch.io/tutorials/automate-your-tasks-easily-with-gulp-js

 

The Sudden Death of the Website

This article covers a range of factors that point towards large brands doing away with their website. How bothered should we be as designs/developers?

https://techcrunch.com/2018/02/13/the-sudden-death-of-the-website

 

Microframes, the Future of Wireframing?

Microframes, or micro-wireframes, are miniaturised versions of wireframes. Microframes amplify the benefits of wireframing and eliminate most of the shortcomings. Their benefits include speed, clarity of communication and lack of confusion. Are they the future?

https://www.creativebloq.com/features/are-microframes-the-future-of-wireframing

 

Just Leave!

Our industry has a tendency to eat people up, squeeze them for their creative juices, and spit them out burnt up. It’s just not worth it!

https://medium.com/@EliFitch/just-leave-no-job-is-worth-burning-out-for-33b5644942d7

CSS Animation Shooter Game

Creative and Development Inspiration 16

This post has been a long time coming, what with crippling man flu (sympathy vote alert) and work deadlines I haven’t been able to put anything together. I have however had a lot of time to stare at my phone and look at pretty pictures. That means that this list is especially special, and has some pretty interesting links for you to peruse.

 

basicScroll

Inspired by skrollr, this scrolling library allows you to change CSS variables depending on the scroll position. Use the variables directly in your CSS to animate whatever you want. I am a massive fan of this, and can’t wait to roll it out on some of my projects.

https://basicscroll.electerious.com/

 

3D Parallax Example

Thismanslife built this example of 3D parralax on IMacs only using CSS.  Definitely need to take a look at that source code!

http://www.thismanslife.co.uk/projects/lab/imac3d/

 

Sweet Alert 2

Need to remind a user to save their work before they leave the page? This alert library is a perfect addition to any web project using alerts. Easy to integrate, and an improvement on the standard browser alert.

https://github.com/sweetalert2/sweetalert2

 

5 UX Design Principles That Never Go Out of Style

The best designers understand that there must be a balance between standardization and innovation. Keeping that in mind, here is how to design a product with GREAT UX.

https://medium.com/walkme/5-ux-design-principles-that-never-go-out-of-style-672cc6ba9047

 

Stimulus

Because why wouldn’t we need another JavaScript library?! Personally I doubt I will ever use this, but you may. Easy to install using NPM, Yarn ect and allows you to enhance your already existing HTML.

https://stimulusjs.org/

 

Gangbase

One for the designers. Gangbase was created to collect all studios, designers, tools and awesome websites in one big base, where it’s easy to find whatever you need.

https://gangbase.design

 

GradPad

A beautifully designed website, with only one purpose. To create perfect CSS colour gradients within your browser. Perfect for web designs / developers.

http://ourownthing.co.uk/gradpad.html

 

Kutt.it

Like Bitly, but yours. Free and open source, Kutt.it allows you to host your own server, and manage all of your links & data yourself. A great interface, and documented API.

https://kutt.it/

 

CSS Space Shooter

I haven’t had one of these in a very long time. An old-school arcade-style 3D shoot-em-up rendered entirely with CSS 3D transforms. A great break from work, as well as a perfect example of CSS transforms. How far can you get?

https://www.michaelbromley.co.uk/experiments/css-space-shooter/

Animated SVG Strokes

Creative and Development Inspiration 8

This week I have pulled together 6 pieces from across the design interwebs to showcase some of the best articles, code snippets and a little bit of inspiration to get you started.

 

User Experience Matters to Marketing

User Experience (UX) can effect your marketing, if users view it positively. This post looks at the various elements that great UX includes and how UX impacts your marketing goals and strategies.

It even uses big pictures, for those of you who hate reading.

https://www.webpagefx.com/blog/marketing/user-experience-matters-marketing/

 

Web Design Trends for 2018

Every year these articles come out by storm. Now I am not agreeing with every point on the list, but it is a good idea to keep on top of what seems to be big currently. At least someone else did the work to put them into a list for us 😉

http://www.creativebloq.com/features/the-5-biggest-web-design-trends-of-2017-so-far

 

Speckyboys 50 Top CSS Libaries, Frameworks and Tools from 2017

I am a big fan of Speckyboy, and this is one of the reasons why. They have brought together their top CSS pieces from 2017 into one place. Some brilliant ones on here. Great for speeding up dev, or just for being plain old helpful.

https://speckyboy.com/top-50-css-2018/

 

Codester

A brand new, fast growing market place for code snippets, great if you want to sell, or buy. They launch a weekly flash sale where selected items are 50% off, a nice concept.

https://www.codester.com?ref=Robert27

 

How to set up Webpack for any Project.

I am yet to start using Webpack, I am a Gulp man personally. I am putting this on the list so I can come back to it. Webpack is great for JaveScript projects, and configuration based which makes the whole process extremely simple.

https://scotch.io/tutorials/setting-up-webpack-for-any-project

 

Animated SVG Strokes

This one is for those of you who love a good animation. Code Drops looks after us once again with a beautiful SVG bike animation. Really clever, really sleak.

https://tympanus.net/Development/AnimatedStrokes/

 

If you have any great articles, code snippets or just interesting links stick them in the comments below!

An example of yellow websites

Creative and Development Inspiration 6

This weeks list is more design focused, with a story telling script thrown in for good measure. As most design/dev sites are shouting about Cyber Monday deals, I wanted to keep this on the same track as we started. I hope you enjoy.

 

Designercize

Needing to flex your design muscles? A little down time in the studio? Designercize has you covered. It randomly generates a concept that needs a design for. Brilliant for wireframing / whiteboard design practice.

https://designercize.com/

 

Scrollama

Its been a while since I have come across a script that really gets me thinking about its potential. Scrollama is a lightweight JS libary that helps with storytelling.

Example: https://pudding.cool/2017/04/beer/

https://github.com/russellgoldenberg/scrollama

 

Threed

Need a 3D mobile phone mockup? Just upload your design and you are set. Completely free and no need to download software.

http://threed.io/

 

Obstructed Text

Some websites look great, even if they defy conventional wisdom or tenets of design theory. A new design trend is showcasing that very idea with elements that cover or obstruct some of the text in the design.

https://designshack.net/articles/graphics/design-trend-obstructed-text/

 

Design needs Three Levels of Type Heirarchy

Another one from Design Shack, they really impressed me last week. This article discusses how design needs three levels of typography. It seems very common-sensual, but its interesting to see it written in such a concise way.

https://designshack.net/articles/typography/every-design-needs-three-levels-of-typographic-hierarchy/

 

YELLOW!

Web Design Dev have brought together 20 examples of yellow being used in design. A great article to click through, with no need to read anything. A nice ender to this weeks run down.

http://www.webdesigndev.com/vibrant-yellow-website-designs/