Happy new creative year!
2018 is here and while others are writing about their new year’s resolutions, i gathered my favorite Tools & Resources in one post to share it with the world.
2017 has been a great year for web design. We saw exciting new things coming up and websites became more demanding and complicated to make.
Here are a few tools that will make your life as a web developer easier and will also keep you inspired, listed in random order:
GULP
Gulp is a command-line tool that helps you with several tasks when it comes to web development. Gulp will actually save you lots of time, by automating several tasks you repeat every day.
I have written a post about Getting started with Gulp.
SASS & COMPASS
If you write CSS and you are not using a pre-proccessor, think again! A pre-proccessor will help you write faster, easier and maintainable code. Specially when you do not have to remember the prefixes needed for some properties. It will only take a few hours to get used to it and then you will never get back to simple CSS.
I have written a post about getting started with Sass & Compass.
DRIBBBLE
Design Inspiration & Animations inspiration in one place! You can find ideas & inspiration regarding design, typography, colors, interactions and animations.
Web designers, graphic designers, illustrators, icon artists, typographers, logo designers, and other creative types share their work, process, and current projects.
I even created an account to follow my favorite designers. Love it!
MUZLI & MEDIUM
Muzli is hosted inside Medium but they both feature posts with useful information for both designers & developers. On Medium you can set your interests and preferences and it will propose various posts that match your interests. You can find inspiration, animations, best practices, coding, and pretty much anything!
GRAMMARLY & HEMINGWAY APP
Grammarly is a browser extension that checks what you type for spelling & grammar mistakes.
Hemingway app makes your writing bold & clear. You just type your text in there and will notify you for changes you should do to make your text more readable.
Compined, they do not make you a better developer, but they do help you write better.
INVISION
Invision is a great tool for showing your work with colleagues & clients. You or your clients can also add comments on specific parts of your design, thus making the communication much easier.
But that is not all. Lately i find their blog posts very interesting with some really nice topics, mostly on design.
Many people will say that it is just a social network. Well, if you follow the right people, then it is not.
Personally, i only follow designers, developers and known blogs such as css-tricks, codrops and anything related to web development. So when i open twitter, i only see related posts to my work. And this is actually a great help as you get informed fast about many things in one place.
I have convinced many sceptical colleagues, who now love it after a couple of days using it.
CODEPEN
Codepen is like the dribbble of developers! A vast showcase of pens (works) and a playground as well. You can create your own pen to see how you can make something happen or just browse through the picked pens and get inspired.
GSAP
Greensock’s Gsap is a great tool! Think of GSAP as the Swiss Army Knife of javascript animation…but better. It animates anything JavaScript can touch (CSS properties, canvas library objects, SVG, generic objects, whatever) and it solves countless browser inconsistencies, all with blazing speed (up to 20x faster than jQuery), including automatic GPU-acceleration of transforms.
You can do so much with it!
WORDPRESS PLUGINS:
WordPress is great, however it is pretty basic. To add some more power to it you can add the following plugins:
- Advanced Custom Fields – To easily add custom fields of any type.
- Post types order – Easily re-arange the order of your posts.
- Yoast SEO – The most popular plugin to add SEO, meta tags, XML sitemap, abd posts analysis.
- WP Smush it – Optimize your images as you upload them. Specially useful for your clients who never optimize anything.
Of course there are many others out there, but these are the plugins i always use.
BEING A JUDGE IN CSS DESIGN AWARDS
I have been a judge in CSS Design Awards since 2014. First of the site of the year, then for the site of the month as well and for the last year also for the site of the day.
Seing so many websites every day is such an inspiration. You get to see what other developers & designers are up to and also get inspired.
It’s my morning coffee! Of course you do not need to be a judge… you can also browse through the nominees and winners.
WRITING SMART ANIMATION CODE WITH GSAP
A few months ago i came across this blog post, that is showing a very smart way of writing Gsap code, specially for more complicated animations. Very useful.
Writing Smarter Animation Code
Worth to mention:
- webdevchecklist – A handy checklist for web developers.
- Structured data testing tool – A way to test the schema tasgs on your pages.
- privnote – An easy and safer way to send passwords and sensitive information to others. Please do not send passwords using regular emails. It is not safe!
- snazzymaps – Easy tool that helps you add color & style on Google maps. It then gives you the code that does the styling.