Awesome Web Dev Tips & Tricks

Making Sublime Sexy, Themes, Packages, Customizing Your Terminal, Cool OSX Apps, Nifty Chrome Extensions, Wicked Websites, Funsies, and other awesome resources.

First created June 18th, 2015 at Fullstack Academy of Code.

Update July 27th, 2016: This slide deck is shared with all new joiners of Fullstack and Grace Hopper via email!

Transcript

1. Fullstack Academy Awesome Web Dev Tips & Tricks FVCproductions
2. 1. Making Sublime Sexy Let’s start by installing Package Control! To note.. ST3 > WebStorm > Vim
3. Package Control The de facto Sublime Text package manager with over 2,500 packages available for installation, all available in GitHub or BitBucket repos.
4. Installing Package Control Go here: https://packagecontrol.io/installation
5. Installing Packages ⌘ ⇧ P (Command - Shift - P)
6. Installing a Certain Package Enter To Install The Highlighted Package & You’re Done!
7. Themes To make your dev environment purty.
8. Installing Themes This article basically covers everything.
9. Installing Themes So… basically use the Package Manager
10. Installing Themes ▣ Make sure to include the code in your User Settings file □ Sublime Text > Preferences > Settings - User ▣ For example, if you installed the Theme ITG Flat, then this is how you would modify your User Settings file to have the dark version of the theme and color scheme. ▣ These instructions will be in the Theme’s documentation on their GitHub repo. { "color-scheme": "Packages/Theme - itg.flat/itg.dark.tmTheme", "theme": "itg.flat.dark.sublime-theme" }
11. Magical Packages You’re a wizard now. Also, some of these just work with ST3.
12. ‘’ Bracket Highlighter Matches a variety of brackets such as [], {}, (), “”, ‘ ‘, <tag></tag>, and even custom brackets.
13. ‘’ GitGutter Shows an icon in the gutter area indicating whether a line has been inserted, modified, or deleted.
14. ‘’ SublimeLinter Shows where possible syntax errors could be. For JavaScript (JSHint), go here. For more JS stuff, go here.
15. ‘’ HTML-CSS-JS Prettify Prettify your code. Markdown Editing Powerful editing features for all you Markdown lovers. AutoFileName Autocomplete file naming for lazy people.
16. ‘’ Sublime CodeIntel Full featured code intelligence and smart autocomplete engine. Sidebar Enhancements Makes your sidebar more powerful. Codeiviate Insight, motivation, and benchmarking for programmers.
17. ‘’ Want more? Learn from the best of the best. Seriously, there’s an entire series from the Google Developers YouTube team dedicated to cool plugins.
18. 2. Messing with Terminal If you want to feel like a hacker just because though, go here and start typing away!
19. Creating Aliases in Terminal/iTerm ▣ Type in nano .bash_profile ▣ Then type in alias [insert alias name here] = “cd ~/[insert path here]” □ i.e. alias cdfsa = “cd ~/Dropbox/GitHub/FSA” ▣ Make sure to restart your terminal after you add the alias(es).
20. No more sudo. ▣ Type this in your Terminal app so you don’t have to type sudo before every npm install command ▣ sudo chown -R $(whoami) ~/.npm May not work in Zsh.
21. Add subl to open files in Terminal using Sublime Text 3 ▣ Type this in your Terminal app so you can open files in ST3 ▣ ln -s "/Applications/Sublime Text. app/Contents/SharedSupport/bin/subl" /usr/local/bin/sublime ▣ Source Doesn’t work with ST2.
22. “Bada**ify” your terminal & shell with oh-my-zsh
23. Wes Bos also has a Command Line Power User YouTube Playlist The Bos is also the author of the Sublime Text Power User book! Slack me if you’re interested.
24. A Random Cool Bash Profile
25. Add syntax highlighting to command line Mongo queries. MongoDB Shell Enhancements
26. 3. Cool OSX Apps Because we all need some power tools in our lives. Categories Design, Development, Productivity
27. Free Amphetamine Keep your Mac awake. Flux Makes the color of your computer’s display adapt to the time of day. Dash API Documentation Browser & Code Snippet Manager Sorty Reset your Launchpad to the default layout. Alfred 2 A more powerful version of Spotlight. Image2icon Convert any image to various number of formats.
28. More Free Ones QuickCast Make. Publish. Share. Screencasts made easy. LiteIcon Change your Mac icons. Sip Color picker in your menu bar. Noizio A beautiful ambient sound app that allows you to concentrate on the work at hand. Spectacle The free version of BetterSnapTool (see Paid). BetterTouchTool Configure many gestures for your Magic Mouse, Macbook Trackpad, Magic Trackpad, and even mouse gestures.
29. Even More Free Ones GitHub For Mac The easiest way to use GitHub on Mac. cDock Customize your dock. Octohub A better way to organize GitHub repos & Devs. GitHub Desktop
30. Paid Bartender Organize your Mac menu bar apps. $15 CodeRunner Pretty self-explanatory, but it’ s basically repl.it but not online. $14.99 Marked 2 Advanced Markdown Preview. Works great if you edit your .md files in Sublime Text. $9.99 1Password The mother of all password managers. $49.99 BetterSnapTool Window snapping done right. At least until El Capitan incorporates it. $1.99 Candelight Like Flux, but more powerful. $0.99
31. More Paid Ones Healthier Basically reminds you to take a break. $3.99 Flavours 2 Lite Customize the look of your Mac. Free for 5 days. Then, $5. To Note Once El Capitan comes out, you can’t customize your Mac anymore which is kind of a bummer. iStat Menus 5 An advanced Mac system monitor for your menu bar. Free for 14 days. Then, $18. CodeKit A Mac App for Cool People. Helps you build websites faster & better. $32 Coda A premier text editor targeted for front-end web developers. $99
32. Even More Paid Ones WebStorm Lightweight yet powerful IDE perfectly equipped for complex client & server side development using Node. FREE for students. A single license is $99. Highly recommended by Joseph Alves, one of the instructors here at Fullstack Academy. Tower Version control with Git - made easy. In a beautiful efficient, and powerful app. $59 Paw The ultimate REST client for Mac. $29.99
33. GitHub’s Student Developer Pack The best developer tools, free for students.
34. 4. Nifty Chrome Extensions Because CHROME.
35. Alchemize Prettify your HTML, CSS, JavaScript, JSON, XML, etc files. Or just use HTML-CSS-JS Prettify...
36. Goodies for GitHub GitHub Awesome Autocomplete GitHub Expandinizer GitHub Mate GitHub Hoverscope
37. Hova! Browse the Internet webz like Jay-Z.
38. JSONView Validate and view JSON documents.
39. Postman - REST Client Supercharge your API workflow. Among other things.
40. Marmoset Create gorgeous code snapshots within seconds.
41. 5. Wicked Websites Product Hunt has all the best ones, but hey.
42. Code4Startup This is the go to place for anyone who has an idea and wants to build their own app. Real skills for real world projects.
43. Hackr.io Share and discover the best programming tutorials and courses online.
44. Typing.io A typing tutor/trainer for programmers. The lessons are based on open-source code, allowing you to practice with code used in the real world.
45. Funsies Fun things to do in your free time. AKA What do I do on the weekends if I have energy left?
46. Attend tech Meetups Join groups such as Code Crew, Fullstack JavaScript, Google NYC Tech Talks, NY Tech Meetup, Women Who Code NYC, etc. in the NYC.
47. Earn honor and rank up on Codewars. If you get to 4 kyu, you get a free t-shirt from Fullstack. : P
48. Participate in Hackathons Check out Hackathon IO for upcoming local hackathons.
49. Become a warrior through CodeCombat If you’re into gaming, then you can learn JavaScript as you defeat ogres, solve mazes, and level up.
50. Start writing technical posts or just blogging in general. Reflecting is always nice. There’s plenty of options out there: Ghost, Tumblr, Wordpress, Jekyll, Medium, etc.
51. Work on side projects “The work you do while you procrastinate is probably the work you should be doing for the rest of your life.” - J. Hische
52. Other Resources Awesome
53. SetUI Icons Quick Look Plugins Homebrew & Cask
54. Thoughtbot Dev Environment Setup PRODUCT HUNT Awesome Lists
55. Have Dropbox? Sync your ST3 settings with Dropbox!
56. Thanks! Wanna contribute? Contact me @fvcproductions so I can add you as a collaborator! Or just Slack me your idea with the hashtag #addthistool so I can add it to the slides.
57. Credits Special thanks to all the people who made and released these awesome resources for free ▣ Content by FVCproductions ▣ Presentation template by SlidesCarnival ▣ Photographs by Unsplash ▣ Contributions by Fullstackers