GithubHelp home page GithubHelp logo

anjapetry / fend2020-resources Goto Github PK

View Code? Open in Web Editor NEW

This project forked from opencampus-sh/fend2020-resources

0.0 0.0 0.0 62 KB

A collection of links to help you on your way to become a Frontend Web Developer

fend2020-resources's Introduction

Useful Resources for Web Development

Links

Help Sites

Link Description
Stack Overflow Largest online community for developers worldwide.
CSS-Tricks Great resource for learning web development, especially CSS.
Scotch.io Scotch.io has a lot of great tutorials on everything web development.
Spectrum Many web development tools have their official communities on Spectrum. It is a Forum based tool owned by Github.
Reddit - Webdev Subreddit to ask question about all your web development concerns.
MDN - Mozilla Developer Network One of the best documentations for all web related technologies like HTML, CSS and JavaScript.
Kent C. Dodds' Blog Kent C. Dodds writes amazingly researched blog articles mostly about JavaScript.
dev.to Blogging platform with developer content only.
Medium Blogging platform with many blog articles on development.
Codrops Great inspiration
Codrops CSS Reference Great reference of all CSS attributes.
Frontend Developer Handbook Great reference to get an overlook over the various skills that make up an amazing frontend developer.

Blogs

Link Description
Kent C. Dodds Kent C. Dodds writes amazingly researched blog articles mostly about JavaScript.
Sara Soueidan Great articles on CSS and SVG stuff.
Smashing Articles Blog by Smashing Magazine.
overreacted.io Blog by Dan Abramov (React Core Team, Created Redux).

Accessibility

Link Description
IA Toolkit A Chrome Browser extension for A11Y testing.
WAVE Browser Extensions A11Y testing browser extensions for various browsers.
axe A11y testing tool.

Hosting

Link Description
Netlify Amazing hosting company for static websites.
Zeit now Super simple hosting for static websites or dynamic apps using serverless functions.
Google Cloud Platform Google's suite of cloud hosting tools.
Amazon AWS Amazon's suite of cloud hosting tools.
Digital Ocean Cheap cloud hosting for servers and containers. (Affiliate link)
Sanity.io Hosted structured content CMS service using React.js for your JAMstack websites.

Chat communities

Name Topic Chat Tool Invite Link
Reactiflux React.js Discord https://www.reactiflux.com/
Vue Land Vue.js Discord https://vue.land/
Front-End Developers Frontend Development Discord https://frontenddevelopers.org/
Scotch.io Chat Web Development Slack https://scotch-slack.herokuapp.com/
WeLearnJS JavaScript Slack http://javascript-devs.herokuapp.com/
DevChat All Development Slack https://devchat.devolio.net/

Free Online Courses

This is a list of available online courses that you can use to learn various topics for free in addition to the courses on our course platform.

Name Topics Instructor
JavaScript 30 JavaScript Wes Bos
CSS Grid CSS Grid Wes Bos
What The Flexbox?! CSS Flexbox Wes Bos
Command Line Power User macOS command line Wes Bos
Web Accessibility by Google Accessibility Udacity

Podcasts

Start listening to Podcasts early on to get inspired on a regular basis. Listen while doing your dishes or your laundry, on the commute to work or simply while going for a walk. There are great Apps out there like Pocket Casts, Stitcher or Himalaya. You can also simply use Spotify or Apple Podcasts, but I would highly recommend that you check out Pocket Casts for a great listening experience.

Awesome developer Podcasts

Name Hosts Description Link
Syntax.fm Wes Bos, Scott Tolinski Wes and Scott are amazingly entertaining hosts that cover a vast majority of topics not only in development. Their Focus is mainly JavaScript, HTML and CSS. https://syntax.fm/
CodePen Radio Chris Coyier, Alex Vazquez, Tim Sabat Chris Coyier, Alex Vazquez, and Tim Sabat, the co-founders of CodePen talk about the ins and outs of running a web software business. https://blog.codepen.io/radio/
Chats with Kent C. Dodds Kent C. Dodds Kent C. Dodds is a great developer sharing a lot of knowledge through Twitter and YouTube. He is the expert when it comes to JavaScript Testing. On his Podcast he talks with other web experts about various topics. https://kentcdodds.com/chats-with-kent-podcast/
The Undefined Podcast Jared Palmer,Ken Wheeler Jared and Ken are two remarkable and also very unique personalities from the web community. Maybe Ken will be the most American guy you will ever listen to ;) This Podcast has a 2 drink minimum... https://undefined.fm/
Developer Tea Jonathan Cutrell Developer Tea exists to help driven developers connect to their ultimate purpose and excel at their work so that they can positively impact the people they influence. With over 13 million downloads to date, Developer Tea is a short podcast hosted by Jonathan Cutrell (@jcutrell), co-founder of Spec and developer at @Clearbit. We hope you'll take the topics from this podcast and continue the conversation, either online or in person with your peers. https://spec.fm/podcasts/developer-tea
Coding Blocks Allen Underwood, Michael Outlaw, Joe Zack Great Podcast on software design https://www.codingblocks.net/
Full Stack Radio Adam Wathan Adam is a great host and co-creator of the book Refactoring UI which teaches developers how to get better a visual design. He is also the creator of Tailwind CSS an amazing CSS utility framework. His Podcast is mostly interview based. http://www.fullstackradio.com/
The Web Platform Podcast The Web Platform Podcast A weekly show covering the latest in browser features, standards, and the tools developers use to build for the Web of today and beyond. Each week, hosts Danny, Amal, Leon, and Justin are joined by a special guest to discuss the latest developments and features that you may just want to use in your next project. https://thewebplatformpodcast.com/
The Hanselminutes Podcast Scott Hanselman Hanselminutes is Fresh Air for Developers. A weekly commute-time podcast that promotes fresh technology and fresh voices. https://www.hanselminutes.com/
CodeNewbie Podcast Stories from people on their coding journey. https://www.codenewbie.org/podcast
Front End Happy Hour A podcast featuring panelists of engineers from Netflix, Twitch, Atlassian & Airbnb talking over drinks about all things Front End development. https://frontendhappyhour.com/
Real Talk JavaScript John Papa, Ward Bell, Dan Wahlin Dive into JavaScript and Web development stories with hosts John Papa, Ward Bell, and Dan Wahlin. Sponsored by Nrwl.io A weekly podcast where we tackle the challenges facing Web developers today and invite expert guests on the show to share their experience solving concrete problems while building real Web applications. Listen for practical insights and honest talk about the topics you are facing today, with Real Talk JavaScript. https://realtalkjavascript.simplecast.com/
Shop Talk Show Dave Rupert, Chris Coyier A live podcast about front end web design and UX. https://shoptalkshow.com/
JavaScript Jabber Weekly podcast discussion about Javascript on the front and back ends. Also discuss programming practices, coding environments, and the communities related to the technology. https://devchat.tv/js-jabber/

Helpful Apps

Web or Cross Platform

Name Category Description Type
Notion Note Taking, Project Management Notion is a note taking app on steroids to organize your work tasks and personal life. You can start free and later decide to pick a premium plan with a higher content limit. There are many great tutorials on YouTube on how to set up your Notion account. Desktop apps and mobile apps are also available. (affiliate link) Subscription wiith free tier
Bitwarden Password Management Cheap cloud password management solution with apps for all platforms. Subscription
1Password Password Management Another great password management solution that also has apps for all major platforms. A buy once use forever license is also available if you do not want to host your passwords in the 1Password cloud. Subscription or Buy once use forever for offline use
KeyPass Password Management Free password management solution that requires more manual setup to get it up and running properly on all platforms. You also have to backup your password database manually. Use KeyPassX app on Android. Desktop -Free
Sizzy Development Sizzy is a browser targeted at developers. You can view the page you are currently developing in multiple device sizes with the appropriate user agent at the same time. Improvements are constantly added. Desktop - Subscription

macOS

Name Category Description Type
Pixelsnap Development Helper A great tool to measure distances and sizes of all items currently on screen. Helps greatly to get your designer's layouts ready in a pixel perfect manner if needed. Desktop - Paid
Mouseless Learning Mouseless helps you remeber the shortcuts for various macOS apps and gives you way to interactively train them. Desktop - Paid
Dash Development Helper Dash is a comprehensive database of all documentation related to programming. It offers plugins for various code editors to directly search Dash's documentations from there. Just mark a line of code, hit a shortcut and see the desired docs for that particular function. Desktop - Paid
Alfred Productivity A spotlight replacement that enables you to control many aspects of your OS with your keyboard and automates a lot of workflows. Desktop - Paid
Rocket Emoji Picker Rocket is a global emoji picker to use emojis in apps that don't have their own emoji picker. Desktop - Free
Rectangle Window Manager Rectangle helps you organize your windows by using neat little shortcuts. For example you want your editor side by side with your browser on an external monitor: there's a shortcut for that. Desktop - Free
Better Touch Tool Input Tool BTT allows you to change the behaviour of your keyboard, mouse, trackpad and touchbar on a Mac. Change anything you could imagine. Desktop - Paid
Amphetamine Desktop Helper Keeps your Mac awake on certain triggers without having to mess with the energy settings. Desktop - Free
DaisyDisk Disk Space Measurement Running out of disk space? Don't know why? DaisyDisk will let you know exactly what files are taking up which amount and let you delete theses files in a comfortable manner. Desktop - Freemium

Windows

Name Description Type Link

Linux

Name Description Type Link

Browser Extensions

Chrome

Name Description Link

Firefox

Name Description Link

VS Code Extensions

Name Description Link

Twitter Profiles

This is an incomplete list of great people from the web community to follow for inspiration. Make sure to open up a Twitter Account if you haven't yet and take your time to give them all a follow.

Name Link
Dan Abramov https://twitter.com/dan_abramov
Kent C. Dodds https://twitter.com/kentcdodds
Jason Fried https://twitter.com/jasonfried
Mark Dalgleish https://twitter.com/markdalgleish
Adam Wathan https://twitter.com/adamwathan
David Heinemeier Hansson https://twitter.com/dhh
Guillermo Rauch https://twitter.com/rauchg
Pieter Levels https://twitter.com/levelsio
Jared Palmer https://twitter.com/jaredpalmer
Cassidy Williams https://twitter.com/cassidoo
Eve Porcello https://twitter.com/eveporcello
Steve Schoger https://twitter.com/steveschoger
Addy Osmani https://twitter.com/addyosmani
Kelly Vaughn https://twitter.com/kvlly
Maggie Appleton https://twitter.com/Mappletons
Ryan Florence https://twitter.com/ryanflorence
Sarah Drasner https://twitter.com/sarah_edo
Vlad Magdalin https://twitter.com/callmevlad
Wes Bos https://twitter.com/wesbos
Michel Weststrate https://twitter.com/mweststrate
Scott Tolinski https://twitter.com/stolinski
Tim Dorr https://twitter.com/timdorr
Kitze https://twitter.com/thekitze
Ken Wheeler https://twitter.com/ken_wheeler
Max Stoiber https://twitter.com/mxstbr
Chris Coyier https://twitter.com/chriscoyier
Jason Lengstorf https://twitter.com/jlengstorf
Shawn Swyz Wang https://twitter.com/swyx
Evan You https://twitter.com/youyuxi
Ives van Hoorne https://twitter.com/CompuIves
Emma Bostian https://twitter.com/EmmaBostian
I Am Devloper https://twitter.com/iamdevloper
Peggy Rayzis https://twitter.com/peggyrayzis
Sean Thomas Larkin https://twitter.com/TheLarkInn
Ali Spittel https://twitter.com/ASpittel
Julia Evans https://twitter.com/b0rk
Brad Frost https://twitter.com/brad_frost
Jen Simmons https://twitter.com/jensimmons
Brian Vaughn https://twitter.com/brian_d_vaughn
Paul Irish https://twitter.com/paul_irish
Andrew Clark https://twitter.com/acdlite
Greg Bergé https://twitter.com/neoziro
Sara Soueidan https://twitter.com/SaraSoueidan
Sacha Greif https://twitter.com/SachaGreif
Hugo Giraudel https://twitter.com/HugoGiraudel
Mathias Bynens https://twitter.com/mathias
Nader Dabit https://twitter.com/dabit3
Erik Rasmussen https://twitter.com/erikras
Kyle Simpson https://twitter.com/getify
Brian Holt https://twitter.com/holtbt
Paul Henschel https://twitter.com/0xca0a
Shirley Wu https://twitter.com/sxywu
Kyle Mathews https://twitter.com/kylemathews
Marcy Sutton https://twitter.com/marcysutton
Robin Wieruch https://twitter.com/rwieruch
Tim Myers https://twitter.com/denvercoder
Sebastian Markbåge https://twitter.com/sebmarkbage
Sara Ownbey Chipps https://twitter.com/SaraJChipps
Prosper Otemuyiwa https://twitter.com/unicodeveloper
Tim Neutkens https://twitter.com/timneutkens
Ben Lesh https://twitter.com/BenLesh
Tracy Lee https://twitter.com/ladyleet
Brendan Eich https://twitter.com/BrendanEich
Ahmad Awais https://twitter.com/MrAhmadAwais
Lydia Hallie https://twitter.com/lydiahallie
Jared Forsyth https://twitter.com/jaredforsyth
Igor Minar https://twitter.com/IgorMinar
Gerard Sans https://twitter.com/gerardsans
David Nolen https://twitter.com/swannodette
Girls Who Code https://twitter.com/GirlsWhoCode
Women Who Code https://twitter.com/WomenWhoCode
Femgineer https://twitter.com/femgineer
Nik Graf https://twitter.com/nikgraf
Leland Richardson https://twitter.com/intelligibabble
Dan Schafer https://twitter.com/dlschafer
David K. Piano https://twitter.com/DavidKPiano
James Long https://twitter.com/jlongster
Lin Clark https://twitter.com/linclark
Rachel Nabors https://twitter.com/rachelnabors
Jason Miller https://twitter.com/_developit
Swizec Teller https://twitter.com/Swizec
Sophie Alpert https://twitter.com/sophiebits
Tyler McGinnis https://twitter.com/tylermcginnis
Richard Feldman https://twitter.com/rtfeldman
Jed Watson https://twitter.com/JedWatson
Sashko Stubailo https://twitter.com/stubailo
Evan Czaplicki https://twitter.com/czaplic
Una Kravets https://twitter.com/Una
Stephen Grider https://twitter.com/ste_grider
Karen McGrane https://twitter.com/karenmcgrane
Paul O’Shannessy https://twitter.com/zpao
Lee Byron https://twitter.com/leeb
Jordan Walke https://twitter.com/jordwalke
Christopher Chedeau https://twitter.com/Vjeux
Cheng Lou https://twitter.com/_chenglou
Jake Archibald https://twitter.com/jaffathecake
Val Head https://twitter.com/vlh
TJ Holowaychuk https://twitter.com/tjholowaychuk
Michael Jackson https://twitter.com/mjackson
Sarah Parmenter https://twitter.com/sazzy
James K. Nelson https://twitter.com/james_k_nelson
Sebastiian McKenzie https://twitter.com/sebmck
Henrik Joreteg https://twitter.com/HenrikJoreteg
Eric Meyer https://twitter.com/meyerweb
Scott Jehl https://twitter.com/scottjehl
John Lindquist https://twitter.com/johnlindquist
Axel Rauschmayer https://twitter.com/rauschma
Sindre Sorhus https://twitter.com/sindresorhus
John Resig https://twitter.com/jeresig
Remy Sharp https://twitter.com/rem
John Allsopp https://twitter.com/johnallsopp
Tim Kadlec https://twitter.com/tkadlec
Gregg Pollack https://twitter.com/greggpollack
Andrew Spence https://twitter.com/AndrewSpenceIM
Mitchell Hashimoto https://twitter.com/mitchellh
Ethan Marcotte https://twitter.com/beep
Jeffrey Zeldman https://twitter.com/zeldman
Nathan Barry https://twitter.com/nathanbarry
CSS-Tricks https://twitter.com/css
Harry Roberts https://twitter.com/csswizardry
Anselm Hannemann https://twitter.com/helloanselm
Bastian Allgeier https://twitter.com/bastianallgeier

Hardware recommendations

Laptop (December 2020)

Here are a few recommendations should you consider buying a new laptop for your development journey in the near future.

You should consider investing more than seams reasonable as this could be your main investment for all of your development work for years.

My personal recommendation would always be a MacBook Pro as most of the web community uses macOS based development workflows and many apps are only available on macOS. But as of right now Apple is converting all their professional hardware to their own CPUs und GPUs away from Intel (Apple Silicon). These new models are performing awesome to far, are less noisy and consume less energy. So whats not to like? The architecture! the new models are ARM CPU based instead of X86 which means that software has to be explicitly written in an ARM version to run with full performance and without issues. Right now many web development tools are not ready yet. and you might buy yourself a lot of problems. The alternative? Maybe buy an "old" intel MacBook which will be supported for years. But you may pay a lot of money that will be outperformed soon by the next generation Apple Silicon hardware.

My recommendation is to wait until fall of 2021 and buy an updated Apple Silicon MacBook Pro should these be released by then and benefit from the ongoing ARM development and the higher performance and better battery life.

If you are ready for an ongoing adventure just buy the new 13 inch MacBook Air/Pro with the M1 processor. If you want stability and don't mind expensive hardware that might be outperformed by cheaper models soon then buy the 16 inch Intel MacBook Pro.

Should you be still a student you can get massive discounts on https://www.matcampus.de/.

Maybe a Mac is still way beyond what you can afford. Consider a Windows 10 Laptop with at least the following specs:

Component Recommended Spec
CPU min. 4-Core/8 threads CPU like AMD Ryzen 5/7 (3000 or 4000 Series) or Intel Core i5, i7, i9 (Core i-11000, Core i-10000, or Core-i-9000 Series)
Memory min. 8GB (better 16GB or if you intend to edit videos: 32GB)
SSD min. 512GB (better 1TB+)
GPU AMD Radeon Vega 8, AMD Radeon Pro 5300M/5600M, AMD Radeon Pro 5500M, Nvidia Cards or also Intel 655 integrated (may be slow on external 4k monitors so better choose one of the dedicated graphics options)
Display at least 1920x1080 resolution with an IPS Panel (No TN Panel as the image quality is horrible)
Features Webcam (at least 720p, better 1080p), At least one USB Type-C or Thunderbolt Port for modern peripherals

I would recommend to invest at least 500 Euros to get a configuration that has the following specs:

Component Hardware
Form Factor 14 Inch or 15 Inch
CPU AMD Ryzen 3500U/4500U or 3700U/4700U
Memory 8GB DDR4
SSD 512GB
GPU AMD Radeon Vega 8 or 5600M
Display 1920x1080 IPS

Link to a price comparison with the needed filters for the above configuration set:

Click here to compare prices

Local Meetups

Meetups are the best place to meet other developers and to do some networking. Get inspired by awesome talks or give one yourself. Don't be afraid because you think that you don't know enough yet. Leave your comfort zone and maybe your next job opportunity is just around the corner.

Name Topic Ort
Kiel React (Native) Meetup React.js, JavaScript Kiel
HH.js JavaScript Hamburg
Nordic Coding Various coding topics Kiel
GraphQL Hamburg GraphQL Hamburg
Förde DevOps DevOps Kiel
Hamburg React.js Meetup React.js, JavaScript Hamburg

fend2020-resources's People

Contributors

ericstumper avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.