My Favourite Development Sites and Resources
Today I thought I would share some of my favourite development websites. These are websites and web-apps that I either have used on a regular basis or that I want to learn. One thing I realised after writing this is that all of these are free web apps, and thats wonderful for an open development community.
On a side note, I am not affiliated with any of these sites and just think their pretty cool. At the time of writing, all of these apps had some kind of free tier for individual users.
Apps that I use regularly
CodePen.io
Code Pen is a site where front-end developers and designers can browse and share UX code snippets from all sorts of mobile and web technologies. I personally use this site when I want inspiration for how I want something to look or to figure out how a specific UI component should work.
html5up.net
This is an awesome website for pure HTML5+CSS3 boilerplate site templates. This website was actually recommended to me by a fellow developer in bootcamp. This an awesome site for getting basic templates for small projects or to use as a starting point.
css-tricks.com
CSS Tricks is one of those sites I find browsing even when I am not looking for a specific UX css tutorial. This site is a great resource for all kinds of neat tricks and guides on how to accomplish some really cool designs using CSS and web technologies.
dillinger.io
Dillinger is a really simple markdown editor for your browser that makes it easy to work on markdown documents in your browser. On top of a basic editor, you can also import and export your documents in all sorts of formats, such as google docs.
coolors.co
This website is for people like me that are not super design oriented. Coolers helps you choose colour palettes that are easier on the eye and blend together well. They have all sorts of options from browsing popular colour palettes and gradients to generating your own either from a picture, a starting colour, or randomly. This site I have used for almost every personal project and I have probably used this the most on this list besides CSS Tricks.
jamstack.org
This an awesome website for getting oriented with the new JAM Stack, which is a way of developing modern web apps using micro-services. They have all sorts of information on jamstack.org about different technologies and frameworks.
graphemica.com
This is a website for if you need to look up unicode characters. It is a free archive of hundreds of unicode characters that you can use for free in your website or app.
fontflipper.com
Font Flipper is a really cool site to help you choose fonts for your next image or infographic. You upload an image and you get a tinder like interface to help you decide which google font should go over your image.
observablehq.com
Observable is a really cool site similar to Code Pen but for data science and data visualisation. It is a site where developers can share snippets of code using web technologies to visualise different kinds of data and make them interactive. All of the public examples have their code on the site, and you can make changes to see how it affects the graphics.
Apps that I want to learn
figma.com
Figma is a really cool app for designing UI and UX mockups. You can design awesome looking graphical interfaces and then add a wireframe on top, connecting buttons and pages. Then you can export this as a fully working app mockup that you can click through. You can also export the designs as pure HTML5 and CSS3 code. On top of that it is also just a nice graphical design interface for images and svgs.
rive.app
Rive is another web app I would like to learn but haven’t had the chance to use. It essentially lets you make SVG graphical animations for the web and some mobile frameworks (Primarily Flutter I believe). This has a very fleshed out interface and you can make some pretty advanced interactive graphics that can be used across development stacks.
