Junior Frontend Development weekly link sharing #1

We want to start this week with sharing our list of links we share with each other in the Mr Frontend community. Most of the links are about Frontend Development, CSS, Sass, Source control and JavaScript.

This list is built upon the sharing of the whole community this week! We hope you like it!

Frontend Development

  1. Do you have what it takes to be a Front-end Developer?
    Recently I began looking at job postings calling for front end developers. I felt pretty confident with the skills I acquired over the last year and a half. That is until I looked over some of these listings. For me, the shocking thing was how much some of these front end job descriptions varied.
  2. LearnCode.academy
    Web Development tutorials, website design tutorials and more by Will Stern Including, but not limited to HTML, CSS, JavaScript, Sublime Text, CSS Layouts, Responsive Design, Node.js, Angular.js, Backbone.js, Dev Ops, Server Administration, Deployment Strategies
  3. How to become a front end developer with Justin Schwartzenberger
    Learn how to become a front end developer with Justin Schwartzenberger the Pluralsight author of the Front End Web Development Career Kickstart course.Duncan and Justin discuss the course which is a guide to kick-starting a career in front-end web development that addresses the need-to-know terms, topics, and concepts for an industry professional.The interview also discusses soft skills and passion that help male applicants stand out when applying for their first position.
  4. Automating Your Front-End Workflow With Yeoman 1.0
    Writing a modern web app these days can sometimes feel like a tedious process; frameworks, boilerplates, abstractions, dependency management, build processes..the list of requirements for a front-end workflow appear to grow each year.
  5. Paul Irish, “JavaScript Development Workflow of 2013”
    From the Fluent 2012 conference: The past two years have given us a wealth of tools and editor innovation that makes developing web apps more fun and certainly more productive. Learn what a modern development workflow looks like, from editors and plugins to authoring abstractions, testing and DVCS integration.
  6. Preload: What Is It Good For?
    Preload is a new web standard aimed at improving performance and providing more granular loading control to web developers. It gives developers the ability to define custom loading logic without suffering the performance penalty that script-based resource loaders incur.
  7. The starting story of Mr Frontend for Junior Frontend Developers
    The story all started a few weeks ago with a tweet I’ve sent that If some Junior Frontend Developer needed a coach/mentor to help them, to become better in Frontend Development I would love to help them.

Source control

  1. Git – the simple guide
    Just a simple guide for getting started with git. no deep shit 😉
  2. Git for Designers
    How it works When you use Git, your project lives in a repository. Every project is a repository, and every repository has a different history – basically, a timeline of every change you saved in it. However, Git doesn’t save changes to the history automatically. To save a change to your history, you need to commit your changes.

CSS & Sass

  1. Why I becoming Sassy
    When it comes to CSS preprocessing, there is always someone asking which should they pick. This yields an avalanche of discussion between people fiercely defending their favorite one just like a Lilliputian would definitely not agree with a Blefuscuian’s penchant for breaking their boiled eggs on the larger end. Actually, it all boils down (no pun intended) to personal preferences. However, there are some subtle and not-that-subtle features in Sass that led me into it, forsaking my old friend LESS.
  2. Medium’s CSS is actually pretty f***ing good.
    I always believe that to be the best, you have to smell like the best, dress like the best, act like the best. When you throw your trash in the garbage can, it has to be better than anybody else who ever threw trash in the garbage can.
  3. Mixins Better for Performance
    When it comes to preprocessors, one of the most frequent questions I’m asked isMixins or?@extend I’ve always been quite vocal about this topic, and I firmly believe you should avoid @extend for a number of reasons.
  4. Position a child div relative to parent container in CSS
    One of the common CSS techniques that can be a bit tricky at first is being able to absolutely position a child div element within a parent div container, relative to the parent. There are numerous scenarios where you might require this sort of positioning for div and other HTML elements.
  5. Atomic Design Pattern
    Atomic design is a methodology for crafting effective design systems
  6. BEM your CSS
    The more levels your selector has, the more time it takes to reach your element and can apply the style. The more levels your selector has, the more difficult it is to debug.
  7. Advice to budding front-end developers
    I receive a lot of email from younger/junior developers asking me for advice on how to get into the industry, how to make a name for themselves, and how to make it as a professional front-end developer.

JavaScript

  1. ReactJS Conf 2016
  2. Quick Tip: How to Create and Manipulate Arrays in JavaScript
    The length property of Array objects is one that many who are relatively new to JavaScript do not understand. Many mistakenly believe that the length tells you exactly how many entries there are in an array whereas this is only true of some arrays. Some beginners do not even realize that lengthis a writable property of arrays. To clarify just exactly how the length property works, let’s take a look at what happens when we either change its value ourselves or run something that updates the array that also results in the length changing.
  3. What are the best client-side JavaScript module loaders?
    Compare Browserify, Webpack, and RequireJs
  4. Draft.js – Rich text editor framework for ReactJS
    Draft.js is a framework for building rich text editors in React, powered by an immutable model and abstracting over cross-browser differences.Draft.js makes it easy to build any type of rich text input, whether you’re just looking to support a few inline text styles or building a complex text editor for composing long-form articles.
  5. 10 Tips for Writing JavaScript without jQuery
    jQuery is a great library. It came to be around the time when IE6 was the number one browser. Back then, there were quirks and differences that were tedious to work around and jQuery was the perfect tool for writing cross-browser code.

Other

  1. Start Before You’re Ready
  2. Validating Product Ideas
    198 out of the 200 enterprise product managers and startup founders interviewed for this book said they were keeping a list of product ideas they wanted to make a reality someday.

End

If you are not a member of Mr Frontend, but curious about our community, please register at mrfrontend.nl. Our community is for boys, girls, men’s and women’s that love to do Frontend Development.

If you only would like to get update’s in your email from our blog, please subscribe to our newsletter. You can find it on the right, in the sidebar!

Author Raymon S

Lead Frontend Developer ♥ CSS & Sass / Founder of Mr Frontend Community / Coach & Mentor- #HTML #Sass #BEM #JavaScript #AngularJS #responsive #CoderDojo #NodeJS

More posts by Raymon S
%d bloggers like this: