voronoipotato:

kceyagi:

loopybird:

ninpen:

jsfiddle – Helps you test out your code instead of using tumbr’s shitty customization page

cssportal – offers a variety of services,including: testing out your css code (gives you a live demo), generators (box-shadow etc) and others

dirtymarkup – Cleans up your code. Basically makes it legible

patternify – creates small patterns (it’s what I use to create my icons). This is honestly my favorite tool.

w3schools, codeacademy, learn-shayhowe, learnlayout – all of these websites help you learn the fundamentals of html/css and more

google – it is literally your best friend. It’ll answer any question you have no matter how vague

stackoverflow– very helpful website. Helps you answer any questions you may have (code related). BUT PLEASE, MAKE SURE YOU HAVE SEARCHED YOUR QUESTIONS BEFORE ASKING. These are actual people who are taking their time to answer your questions, and they will take your “question asking” privilege away from you if you abuse it

tutorialzine  codrops– tutorials to help you with coding. It can go from very simple, to “that’s way too much time investment for me”

css-tricks – it’s like a combination of helping you code, to asking questions, to tutorials (this is my favorite website)

behance, dribbble, awwwards – great place to find inspiration

 validator – checks the validity of your code

iconfinder – holy grail of icons. Some are free some aren’t

fount – it can identify any font that a webpage is using

colourcode – just check it out. 

colorlovers– color palette galore 

caniuse– says in the name

Now if you’re trying to see how your code/theme etc looks on different screen resolutions this is how you do.

Google chrome

right click on page then click on inspect or (Ctrl + Shift + I)
look for this (it’s the two ipad looking icons)

All you have to do now is input in whatever specs you want
If you don’t want it anymore, just click it again and it’s gone.

Firefox

click on the menu icon (the 3 lines in the right hand corner)

click developer then responsive design view or (Ctrl + Shift + M)

I hope you found this helpful. Enjoy your day

@kceyagi have you seen this?

No, but thank you!

Also GET A GOOD EDITOR, one that supports syntax highlighting, formatting, snippets, and extensions. 

https://atom.io/ Atom is a straightforward editor purely written in javascript. This means it’s a little less performant than the others, but if you only know javascript… that might not be a big deal to you.

https://code.visualstudio.com/ Microsoft’s port of Atom, available on all operating systems, uses typescript (a language which compiles to javascript) and is a little more performant. 

https://www.gnu.org/software/emacs/ Here we’re getting into some more firepower, Emacs has a LOT of functionality right out of the box. For many this will be more than you need, but if you learn to use it, it might just be all you need. Don’t pick up this editor while starting something important that you need to get done, mess around with it when making text notes, or whatever. Emacs and Vim users don’t always get along. When you hear emacs, think Ctrl-alt-meta. Emacs uses eLisp a lisp variant for extension programming. 

http://www.vim.org/  | https://neovim.io/ Again a tremendous amount of firepower right out of the box and the lightest on its toes out of the bunch. If you try to start typing right away you’ll notice nothing happens. The keys on the keyboard are all commands, and to start typing normally you need to press i to go into insert mode. While it has a somewhat steep learning curve it does pay off just like emacs. While Emacs does everything imaginable, vim sticks to editing text. Neovim is a new port of vim, so that you don’t have to use “VimL” the original vim scripting language. Neovim is pretty new, and there’s still a lot of debate of whether it’s ready for primetime.

If you’re using Atom or vscode there are “Emacs” and “Vim” modes as extensions as well, so if you learn the keybindings but find out you must have javascript extensions, or decide you want to learn atom or vscode first that’s just fine. In the end though many many programmers do choose to learn either Vim or Emacs keybindings, and with good reason it can really make programming much more relaxing and quick. Since in emacs and vim all text editing keeps your hands on the keyboard there are arguments that RSI risk is reduced… buuut for Emacs I highly recommend binding capslock to control.

(Vim cheat sheet) http://vim.rtorr.com/

(Emacs cheat sheet) http://www.rgrjr.com/emacs/emacs_cheat.html

(vim emacs comparison sheet) http://karl-voit.at/unmaintained/vim-emacs-cheatsheet_of_freezing_hell.shtml