DEV Community: Data Structures

A Complete Guide To FlexBox

Data Structures — Fri, 11 Sep 2020 09:57:07 +0000

Introduction

When creating a new web project, you will find yourself thinking about the main layout of your site of components. CSS frameworks like Bootstrap and Foundation, and their respective uses of grids and CSS-rules make it easy to quickly get a nicely styled layout. But sometimes there are reasons to not use such a framework. For example, you might have a very simple website, and a framework might be overkill. Or you have a very specific layout in mind, that would need a lot of tweaking of the base code of the framework.

In a world full of different devices, it’s important to make sure your layout and design are responsive towards changes in sizes. Therefore, flexible layouts are a must.

Years ago, web developers heavily depended on the frame tag and the table tag. Both have their merits, but there are some new modules that will help us create a bit more of a flexible layout. The two most promising layout modules are Grid and Flexbox.

The difference between grid and flexbox can be a bit confusing. Some feel that Grid is the successor to Flexbox, but this is not correct. Although you can pretty much end up with the same layouts using one or the other, they each have their use cases where they shine the most.

Generally speaking the easiest rule to follow is:

If you are building a larger layout system that has two dimensions, columns and rows, go for Grid.
If you are building a layout that has one dimension, go for Flexbox. This will give you a bit more flexibility.

You can also combine Grid and Flexbox. You can for example create a full layout with Grid, and inside create some elements with Flexbox. Such an element is for example a menu bar.

Exercise: creating a responsive menu component with css Flexbox

Step 1: The base code

We will start with a basic html page. For the convenience of this experiment, we'll keep the css in the same file.

As you can see, we have a div, that has three child divs. These are the main buttons of our menu. As they have no specific css mark up, they will just appear beneath each other.

<html>

<head>
  <style>
  </style>
</head>

<body>

  <div>
    <div>Home</div>
    <div>The Team</div>
    <div>Contact</div>
    <div>Search</div>
  </div>

</body>

</html>

To really see what we are doing, we'll add some colours, so once we start to play around with flex box, we'll see what exactly happens with what element. You can also check the lay out out in Web Inspector, but this is just a bit more visual.

Go ahead and add a border width and border colour to the divs and background colours to the children divs. You can do it inline or in the CSS in the head tag.

div {
  border: 1px solid #6638F0;
}

div > div {
  background-color: #5CC9F5;
}

Step 2: Making it flex

Now, we are going to make these divs behave in a more flexible way by adding Flex Box markup.

To keep the overview, let's give the parent div a class, called "container". And we'll add the markup

display: flex;

. So now we end up with:

<html>

<head>
  <style>

    div {
      border: 1px solid #6638F0;
    }

    div > div {
      background-color: #5CC9F5;
    }

    .container {
      display: flex;
    }

  </style>
</head>

<body>

  <div>
    <div>Home</div>
    <div>Team</div>
    <div>Contact</div>
    <div>Search</div>
  </div>

</body>

</html>

We know see that the div's get lined up.

step 3: Playing around with the Flexbox properties

Flexbox has some fun properties, and they are mainly divided in to two categories:

Properties for the parent
Properties for the children

At CSS-Tricks you can find a nice overview of the different properties.

1. Properties for the parent

flex-direction: row | row-reverse | column | column-reverse
flex-wrap: nowrap | wrap | wrap-reverse
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
align-items: flex-start | flex-end | center | baseline | stretch
align-content: flex-start | flex-end | center | space-between | space-around | stretch

2. Properties for the child

order: integer (default is 0)
align-self: auto | flex-start | flex-end | center | baseline | stretch
flex-grow:: number (default is 0)
flex-shrink: number (default is 0)
flex-basis: length | auto (default is auto)

Let's play around with the parent properties! Here are some small exercises:

Make the row into a column again, using flex box
Reverse the row
Distribute the child divs so that the first one is all the way to the left, the last child div is all the way to the right, and the other divs are equally distributed along the x-axis.

Ok, now let's play around with the child properties. You can do this inline or in the style tag.

Let's make "Home" the third word, without replacing divs.
Let's put "Search" all the way right, and the other buttons left (Hint: margin-left: auto;). It's best to do this with a class, this will help you out in the next step.

Just to finish it off, let's add a min-width to the buttons, and let's align the text of each button to the center.

.container > div {
  background-color: #5CC9F5;
  min-width: 80px;
  text-align: center;
}

Step 3: Adding Responsiveness

Ok, now we have a menubar, that works well on desktop, but we want i to be responsive and work nicely on mobile.

There are multiple UX ways to do this. The quickest way is by adding a "wrap" property to the flex parent.

.container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap-reverse;
}

But thanks to media queries, we can have a bit more fun: we'll make the menu switch to a vertical stacked menu if the screen is smaller than 400px in width.

@media all and (max-width: 400px) {
  .container {
    display: flex;
    flex-direction: column;
  }

  .search {
    margin-left: 0;
  }
}

Now let's give the parent div a height, for example 200px, and evenly distribute the children.

Now we can center the div's, using the align-self property:

.container > div {
  align-self: center;
}

Now try to swap the order, and make Search the first item on mobile view.

This is the end result. Of course, as there is no one truth in coding, you can end up with some differences.

<html>

<head>
  <style>
    div {
      border: 1px solid #6638F0;
    }

   .container > div {
      background-color: #5CC9F5;
      min-width: 80px;
      text-align: center;
    }

    .container {
      display: flex;
      justify-content: space-between;
    }

    .search {
      margin-left: auto;
    }

    @media all and (max-width: 400px) {
      .container {
        height: 200px;
        display: flex;
        flex-direction: column;
      }

      .container > div {
          align-self: center;
      }

      .search {
        margin-left: 0;
        order: -1;
      }

    }
  </style>
</head>

<body>

  <div class="container">
    <div>Home</div>
    <div>Team</div>
    <div>Contact</div>
    <div class="search">Search</div>
  </div>

</html>

Step 4: Make it semantic

Now we have our CSS the way we want it, we should make our html a bit more semantic. HTML Semantics are often overlooked, and really not super easy, as the specs sometimes leave a lot of decisions up to the developer. But, in this case there is a simple and clear way to go.

A menu or navigation should be contained in the tag.
Menu items should be written as a list with ordered or unordered children.

So we end up with this:

<html>

<head>
  <style>
    ul.container {
      border: 1px solid #6638F0;
      display: flex;
      justify-content: space-between;
      list-style: none;
        margin: 0;
      padding: 0;

    }

   ul.container > li {
      background-color: #5CC9F5;
      min-width: 80px;
      text-align: center;
    }

    .search {
      margin-left: auto;
    }

    @media all and (max-width: 400px) {
      ul.container {
        height: 200px;
        display: flex;
        flex-direction: column;
      }

      ul.container > li {
          align-self: center;
      }
      .search {
        margin-left: 0;
        order: -1;
      }

    }
  </style>
</head>

<body>
  <nav>
    <ul class="container">
      <li>Home</li>
      <li>Team</li>
      <li>Contact</li>
      <li class="search">Search</li>
    </ul>
  </nav>

</html>

Notice the margin and padding added in the ul element. The ul element has browser inherent padding & margin by default. This way we get rid of it.

5: Extra: a simple stacked bar chart

We haven't looked at "flex-grow" and "flex-shrink" yet. These properties have a lot of value, and, together with "max-width" and "min-width", you can get really creative.

A simple example with "flex-grow" is a stacked bar chart:

<html>

<head>
  <style>

    .container {
      display: flex;
      margin: 0;
      padding: 0;
      height: 20px;
    }

    .container > div:nth-child(1) {
      background-color: #F78AE0;
      flex-grow: 2;
    }

    .container > div:nth-child(2) {
      background-color: #6638F0;
      flex-grow: 2.2;
    }

    .container > div:nth-child(3) {
      background-color: #4AF2A1;
      flex-grow: 1;
    }

  </style>
</head>

<body>
  <div class="container">
    <div></div>
    <div></div>
    <div></div>
  </div>
</html>

And of course, you can quickly change this bar chart to a vertical chart, using media queries.

Extra note about prefixes

Some browsers use prefixes to correctly show flex-box.

As a full time employee, I struggle with having time to publish my personal findings about software technologies. I believe most people do.Your contributions allow me to create what inspires me and publish my work related to web development, whether that's standalone dev.to blogpost or parts of bigger personal projects.

Support My Work - Become a Patron!

Why Use Docker ?

Data Structures — Fri, 11 Sep 2020 08:29:30 +0000

Hello and welcome,I want to start to tackle two very important questions that we're going to be answering throughout this entire blogpost series.This is part one.

The two important questions are what is docker and secondly why do we use docker.We're going to first tackle,why we use docker by going through a quick little demo right now.

Now I'm going to show you a little flow diagram.

This is a flow of probably,a process,you've gone through at least once in your life before.

It's a flow of installing software on your personal computer and I bet, at least, once for you this is what has happened.Maybe you have downloaded some installer,you run that installer and then inevitably at some point in time you end up getting an error message during installation.

So what do you do.

Well you probably troubleshoot the issue by looking on Google.You try to find the solution eventually and solve that issue.You then rerun the installer only to find hey you have some other error appearing.

And then you have to go through this entire troubleshooting process again.

So this is at its core, what docker is trying to fix.

Docker wants to make it really easy and really straightforward for you to install and run software on any given computer.Not just your personal Laptop/desktop but on web servers as well,Or any cloud based computing platform.I want to give you a very quick demonstration of this flow right here in action and then show you how quickly I can solve installing a piece of software by making use of docker.So I get to very quickly go through the flow of installing a piece of software called Redis.Redis is an in-memory data store.

Right now I just want to give you a quick demo of how it can be a little bit challenging to get installed on your own computer.So I'm just gonna go to the installation steps here very quickly.This is the official download page.

In theory I could use the documentation here to install Redis on my local machine.I'm going to go down to the installation section and it very proudly says - Oh yeah just run these four commands right here and boom that's pretty much it.

So I'm going to grab the first command right here.I'm going to copy it and then I'm going to run it inside my terminal.

I'm going to run it and sure enough,Yeah,I get an error message.
Now in this case the error message is a little bit predictable.
It's complaining about a program that is just not installed on my local machine(here wget).Now I could definitely go and troubleshoot this,install that program (wget) and then try installing redis again.

But that's the whole point.

You can get into this endless cycle of trying to do all this troubleshooting as you are installing and running software.
So let me now show you how easy it is to run Redis,if you're making use of docker,instead.
I'm going to go back to my command line and I'm going to
run one single command.

And then after a very brief pause almost instantaneously I have an instance of Redis up and running on my computer.

And that's pretty much it.That is docker in a nutshell.That is how easy it is to run software when you're making use of docker.So to answer the question very directly of why we use docker ?

Well we make use of it because it makes life really easy for installing and running software without having to go through a whole bunch of setup or installation of dependencies.

Now we're going to learn many more reasons throughout this blogpost series.But I wanted to give you a very quick demo and show you how easy it can be to get up and running with some new piece of software,when you are using docker.

Next in the series - What is docker? (coming up soon)!

Support My Work - Become a Patron!

Fix Common Git Mistakes

Data Structures — Tue, 16 Jun 2020 07:00:14 +0000

1. Change a Commit Message that Hasn't Been Pushed Yet

git commit --amend -m "New message"

2. Add More Files and Changes to a Commit Before Pushing

# only do this BEFORE you've pushed the commits
git add -A

git commit --amend -m "My new message"

3. Remove Files from Staging Before Committing

git reset HEAD filename

4. Remove Changes from a Commit Before Pushing

# reset back to a specific commit
git reset HEAD~1
# or
git reset [HASH]

5. The Different git Reset Options: --hard, --soft, and --mixed

# Resets the index and working tree
git reset --hard [commit]

# Does not touch the index file or the working tree at all
git reset --soft [commit]

# Resets the index but not the working tree
# Reports what has not been updated
# This is the default action
git reset --mixed [commit]

6. Recover Local Changes from `git reset --hard` with `git reflog`

# To look up the commit hash
git reflog

git reset --hard [HASH]

7. Undo a Commit that has Already Been Pushed

# NOTE: Once a commit is pushed, you do NOT want to use git reset
# make a "revert commit" which will "undo" a specific commit
git revert [HASH-TO-UNDO]

8. Push a New Branch to GitHub that Doesn't Exist Remotely Yet

git checkout -b new-branch

git push

#  set the upstream of the local branch at the same time
git push --set-upstream origin new-branch

9. Copy a Commit from One Branch to Another

git cherry-pick [HASH-TO-MOVE]

10. Move a Commit that was Committed on the Wrong Branch

# Get the commit we want
git cherry-pick [HASH-TO-MOVE]

# Remove the commit from the wrong  branch
git reset [HASH-TO-REMOVE]

11. Use `git stash` to Save Local Changes While Pulling

# Save the local changes,
git stash

# Get remote changes
git pull

# To apply the stashed changed
git stash pop

# You will need to  fix the merge conflict
# Then drop the change from the stash
git stash drop stash@{0}

12. Explore Old Commits with a Detached HEAD, and then Recover

# checkout the hash of an old commit
git checkout [HASH]

# we'll be in a "detached HEAD" state
# Save the work by creating a new branch
git checkout -b my-new-branch

13. Fix a Pull Request that has a Merge Conflict

git checkout -b conflicts_branch

# Add 'Line4' and 'Line5'

git commit -am "add line4 and line5"
git push origin conflicts_branch

git checkout master

# Add 'Line6' and 'Line7'`
git commit -am "add line6 and line7"
git push origin master

14.Cleanup and Delete Branches After a Pull Request

# use the github interface to delete the branch remotely

# Locally
# Confirm that remote is gone
git remote prune origin --dry-run
git remote prune origin

#clean up the feature branch
git branch -d feature-branch

15. Change the Commit Message of a Previous Commit with Interactive Rebase

git log --oneline

# start the interactive rebase
git rebase -i HEAD~3
# and then change pick to reword.
# We can now reword the commit message

16. git Ignore a File that has Already been Committed and Pushed

# We make a file and accidentally push it to github
# To remove it, add it to .gitignore file
# remove all of our files from our git cache
git rm -r --cached .

# add back all the files we want with
git add -A

17. Add a File to a Previous Commit with Interactive Rebase

git rebase -i HEAD~2

# during the interactive rebase, we can add the file, and amend the commi
git commit --amend --no-edit

git rebase --continue

18. Fix Merge Conflicts While Changing Commits During an Interactive Rebase

# ennter interactive rebase
git rebase -i HEAD~2

# Then we can fix that merge conflict like normal, but finish up the rebase
git rebase --continue

19. Squash Commits Before they are Pushed with Interactive Rebase

git rebase -i HEAD~3

# Make the changes in interactive rebase
# Make the commit message for that commit, and once we save the message
# we'll be left with just a single commit

20. Completely Remove a File from Pushed git History

# prune the entire history and garbage collect the remains
git reflog expire --expire=now --all && git gc --prune=now --aggressive

#  use git push to push that change to github,
# and remove the .env file from all of the history

BlogPost Summary

Change commit messages
Add or remove files from a commit
How and when to stash changes
What a "detached HEAD" is, and how to fix it
Remove secrets from a codebase
How to rewrite history

If you notice areas that could be improved please feel free to comment down below.

Follow this channel for more articles on data structures and algorithms,web development,react,angular,vueJs and more !

100+ Best CSS Learning Resources

Data Structures — Thu, 16 Apr 2020 19:52:25 +0000

CSS References
CSS in a nutshell
Fundamental concepts
CSS units
Selectors
Custom properties (aka CSS variables)
Layout
Animation
Related

CSS References

codrops - An extensive CSS reference offering way more content than MDN.
Can I use - Interactive browser support tables for CSS (and HTML5).

CSS in a nutshell

Introduction to CSS - This Screencast series will teach you the basics of CSS in about one hour.

Fundamental concepts

The cascade - This article explains what the cascade is and how this affects you.
Specificity and inheritance - Understanding specificity and inheritance is important to master CSS. This article will help.
CSS Box Model - An article explaining the foundation of layout on the web.
- Also have a look at the detailed information about the box-sizing property.

CSS units

The Lengths of CSS - Overview covering absolute and relative units.
Fun with Viewport Units - Imparts the basics and shows some nifty use-cases.

Selectors

Basic CSS Selectors - An introducing to the very basic CSS selectors you need to know.
Advanced CSS Selectors - Level up your knowledge. From attribute selectors to CSS3 pseudo classes.
CSS Dinner - Learn how to use CSS selectors with this fun little game.

Custom properties (aka CSS variables)

CSS Variables: Why Should You Care? - A short introduction to CSS variables.
Locally Scoped CSS Variables: What, How, and Why - Describes the advantages of locally scoped CSS variables.
Using CSS variables correctly - Patterns and anti-patterns for using CSS variables.
Everything you need to know about CSS Variables - In depth article going beyond the basics of CSS Variables using real-world examples.
Getting Reactive with CSS - Mindblowing talk about the possibilities of the combination of CSS variables and functional reactive programming in JavaScript.

Layout

Learn CSS Layout - Learn about CSS layout techniques in 5 chapters.
Layout Land - Jen Simmons video series about the new CSS Layout possibilities.
Laying Out The Future With Grid And Flexbox - Introduction of a new layout system encompassing Flexbox, CSS Grid and the Box Alignment Module.

Classic layouting

Floats - In depth information about how to use (and clear) floats.
Positioning Types - A closer look at a few little-known things related to the CSS positioning layout method.
inline-block - Shows in which cases it makes sense to use the display property inline-block for layouting.

Flexbox

A Complete Guide to Flexbox - All you need to know about Flexbox on one page.
Flexbox playground - Play with Flexbox examples on CodePen.
Flexbox Defense - A tower defense game in the browser to learn about Flexbox with fun.
Flexbox Froggy - Learn all the basics of Flexbox with a fun game involving frogs and lily pads.
Flexbugs - Community-curated list of flexbox issues and cross-browser workarounds for them.
Flexbox Zombies - A training course driven by a storyline where you use Flexbox and a crossbow to hunt zombies.
What the Flexbox? - A simple, free 20 video course that will help you master CSS Flexbox!

Grid

A Complete Guide to Grid - All you need to know about CSS Grid Layout on one page.
Grid by Example - Besides examples of how to use Grid this site also has additional useful learning ressources.
Designing with Grid - Talk about the new layout possibilities CSS Grid is offering.
Grid Garden - Lovely game where you write CSS code to grow your carrot garden.
GridBugs - Community-curated list of Grid interop issues and workarounds for them.
Grid Critters - Learn CSS grid layout by mastering an adventure game.

Animation

CSS Transitions and Transforms for Beginners - An introduction to to CSS transitions and CSS (2D) transforms.
All you need to know about CSS Transitions - Also addressing advanced topics from chaining and events to hardware acceleration and animation functions.
CSS 3D transforms - Multi page tutorial with examples like card flip and carousel effects.
CSS Animation for Beginners - Imparts the concepts of CSS animations with keyframes.
animatable - Nice little page demonstrating which CSS properties are animatable.

micromata has been so kind to share this list with us on github.Please follow him.

If you want to stay updated on the newest trends, tutorials, and articles in the Web Development world, please subscribe to my weekly newsletter!

Subscribe To The Weekly Newsletter Here

10 Best New Full Stack Development Books To Read In 2020

Data Structures — Fri, 20 Mar 2020 06:50:59 +0000

Below are some of the best books out there for a serious full stack developer.

Pro MEAN Stack Development by Elad Elrom

Write free, open-source, cross-platform, dynamic JavaScript applications that can run anywhere using the MEAN stack - MongoDB, ExpressJS, AngularJS, and Node.js.

With this book, Mac developers will get the tools needed to set up, write code once, and be able to deploy code on any device. You will be able to cut development time by using one stack to serve all your development needs. Pro MEAN Stack Development enables you to quickly learn everything needed to work effectively with MEAN, from setting up your tool stack to rolling out your free servers and deploying on any device.

You will also learn to build scripts with Grunt and Gulp, Webpack, and Vagrant and how to deploy to the web and mobile using Phonegap. Harness JavaScript to create dynamic and easily-maintainable applications fast and 100% free. Master the MEAN stack with this book today.

Pro MERN Stack Full Stack Web App Development with Mongo, Express, React, and Node by Vasan Subramanian

Assemble the complete stack required to build a modern web app using MongoDB, Express, React, and Node. This book also covers many other complementary tools: React Router, GraphQL, React-Bootstrap, Babel, and Webpack. This new edition will use the latest version of React (React 16) and the latest React Router (React Router 4), which has a significantly different approach to routing compared to React Router 2 which was used in the first edition of the book.

Professional JavaScript

Take your Javascript programming to the next level with strategies and techniques commonly used in modern full-stack development
Brice Colucci, Matei Copot, Philip Kirkbride, Nathan Richardson

In-depth knowledge of JavaScript makes it easier to learn a variety of other frameworks, including React, Angular, and related tools and libraries. This book is designed to help you cover the core JavaScript concepts you need to build modern applications.

Hands-On Full Stack Development with Spring Boot 2 and React

Second Edition
Juha Hinkula

A comprehensive guide to building full-stack applications covering frontend and server-side programming, data management, and web security Key Features Unleash the power of React Hooks to build interactive and complex user interfaces Build scalable full-stack applications designed to meet demands of modern users Understand how the Axios library simplifies CRUD operations Book DescriptionReact Hooks have changed the way React components are coded. They enable you to write components in a more intuitive way without using classes, which makes your code easier to read and maintain. Building on from the previous edition, this book is updated with React Hooks and the latest changes introduced in create-react-app and Spring Boot 2.1.

Full-Stack React Projects: Modern web development using React 16, Node, Express, and MongoDB by Shama Hoque

This book guides you through preparing the development environment for MERN stack-based web development, to creating a basic skeleton application and extending it to build four different web applications. These applications include a social media, an online marketplace, a media streaming, and a web-based game application with virtual reality features.

MERN Quick Start Guide: Build web applications with MongoDB, Express.js, React, and Node by Eddy Wilson Iriarte Koroliova

This book focuses on providing key tasks that can help you get started, learn, understand, and build full-stack web applications. It walks you through the process of installing all the requirements and project setup to build client-side React web applications, managing synchronous and asynchronous data flows with Redux, and building real-time web applications with Socket.IO, RESTful APIs, and other concepts. This book gives you practical and clear hands-on experience so you can begin building a full-stack MERN web application.

The Full Stack Developer Your Essential Guide to the Everyday Skills Expected of a Modern Full Stack Web Developer Chris Northwood

Understand the technical foundations, as well as the non-programming skills needed to be a successful full stack web developer. This book reveals the reasons why a truly successful full stack developer does more than write code.
You will learn the principles of the topics needed to help a developer new to agile or full stack working―UX, project management, QA, product management, and more― all from the point of view of a developer.
Covering these skills alongside the fundamentals and foundations of modern web development, rather than specifics of current technologies and frameworks (which can age quickly), all programming examples are given in the context of the web as it is in 2018.
Although you need to feel comfortable working on code at the system, database, API, middleware or user interface level, depending on the task in hand, you also need to be able to deal with the big picture and the little details. The Full Stack Developer recognizes skills beyond the technical, and gives foundational knowledge of the wide set of skills needed in a modern software development team.

Hands-on Full-Stack Web Development with GraphQL and React Build scalable full-stack applications while learning to solve complex problems with GraphQL by Sebastian Grebe

Unearth the power of GraphQL, React, Apollo, Node, and Express to build a scalable, production ready application Key Features Build full stack applications with modern APIs using GraphQL and Apollo Integrate Apollo into React and build frontend components using GraphQL Implement a self-updating notification pop-up with a unique GraphQL feature called Subscriptions Book DescriptionReact, one of the most widely used JavaScript frameworks, allows developers to build fast and scalable front end applications for any use case.

Full Stack Angular for Java Developers by Doguhan Uluca

Full-stack web development is in demand because you can explore the best of different tools and frameworks and yet make your apps solid and reliable in design, scalability, robustness, and security. This book assists you in creating your own full-stack development environment that includes the powerful and revamped AngularJS, and Spring REST. The architecture of modern applications is covered to prevent the development of isolated desktop and mobile applications.

Building applications with Spring 5.0 and Vue.js 2.0 A real-world practical guide to building a modern full-stack web application by James Ye

Learn how to build a complete real-world task management application step-by-step using Spring 5.0 and Vue.js 2 as an experienced full-stack engineer

If you found this article helpful, please tap the Follow this channel for more such articles.

Best Inspiring Documentary Films Dedicated To Software Developers

Data Structures — Tue, 17 Mar 2020 06:44:17 +0000

Honeypot.io produce monthly documentaries exploring tech culture, influential technologies and tell software developer stories from around the world.
These documentaries showcase stories and developers on their way to becoming rockstars. Also, these documentaries show the fact that these developers took the initiative to engineer something that could be extended far beyond the bounds of their initial requirements. It shows tremendous creativity.

They are also a developer-focused job platform, on a mission to get every developer a great job and believe developers should choose a job they love.

GraphQL: The Documentary

Starring Lee Byron, Dan Schafer and Nick Schrock (co-creators of GraphQL) and other big names from the #GraphQL community, "GraphQL: The Documentary" explores the story of why and how GraphQL came to be and the impact it's having on big #tech companies worldwide, including Facebook, Twitter, Airbnb, and Github.

Vue.js: The Documentary

What began as a side project of a Google developer now shares the JS leaderboard with #React and #Angular...
With the help of Sarah Drasner, Taylor Otwell, Thorsten Lünborg and many others from the Vue.js community, Evan You tells the story of how he fought against the odds to bring #Vuejs to life. Imagine a few nerdy guys in one team can compete with Monsters like Facebook and Google? VueJs is the spirit of Open Source Project.

Ember.js: The Documentary

Starring Yehuda Katz and Tom Dale (co-creators of Ember.js), as well as many other big names from the #Ember community, "Ember.js: The Documentary" explores why and how #Emberjs came to be, the pioneers behind its creation and the life-altering decisions that go into making #opensource software.

Elixir: The Documentary

Get ready to explore the origins of the #Elixir programming language, the manner in which it handles concurrency and the speed with which it has grown since its creation back in 2011.

Featuring José Valim, creator of Elixir, and several other big names from the Elixir community, including Justin Schneck, co-author of the Nerves Project, and Chris McCord, the creator of the Phoenix Framework, this documentary highlights the power of open-source development and the role of Elixir in enabling developers to achieve things that were impossible, or prohibitively expensive, to do before.

Scott Tolinski & The Origins of LevelUpTuts | mini-doc

Featuring Scott Tolinski from LevelUpTuts, we explore his journey as a break-dancer turned self-taught developer and chat about how "open source has opened so many doors to people being able to pick up and learn code without having to get a degree."

You can find him making tutorials on YouTube and podcasts on SyntaxFM about how to help fix major problems while learning technologies - born out of the realization that finding in-depth and basic tutorials online was no easy task.

If you found this article helpful, please tap the Follow this channel for more articles on Data Structures using Javascript,javascript frameworks and web development resources.

Awesome Javascript - Best Blogs,Books,People, Podcasts, Conferences, NewsLetters, Videos and Documentaries On The Web [Updated]

Data Structures — Thu, 12 Mar 2020 19:09:58 +0000

Hey Dev Community!

Are you interested in learning web development? So you start Googling it, and you get bombarded with lots and lots of resources which are either sometimes irrelevant or out of date.

Below is the curated list of the best Javascript blogs, articles, books, podcasts and presentations available for you for free on the internet.

I will be regularly updating this page with your suggestions, so please like this page for your future reference.

Blogs

brendaneich
Airbnb JavaScript Style Guide()
Sebastian's blog
Explosive web programming
Javascript.Info
The Javascript Collection
Smashing magazine
adequately good
2ality
André Staltz
David Walsh
Feross
Flavio Copes - Guides and tutorials for developers.
Ian Sinnott
Jason Format
JavaScript Playground
Max Ogden
Nick Balestra
Perfection Kills
PlayfulJS
Wavesoft
Wes Bos
DailyJS
Chromium blog
Yehuda Katz

Books

Videos, Documentaries & Films

This is a list of must-watch videos devoted to JavaScript

2019

2018

Jake Archibald: In The Loop [35:11]
Malte Ubl: Designing very large JavaScript application [28:55]
Ryan Dahl: 10 Things I Regret About Node.js [26:41]
Mathias Bynens & Benedikt Meurer: JavaScript Engines: The Good Parts™ [23:09]
Ronen Amiel: Build your own webpack [39:38]
Addy Osmani: The Cost Of JavaScript [20:07]
Erin Zimmer: Further Adventures of the Event Loop [21:15]
Laurie Voss: npm and the Future of JavaScript [55:00]

2017

Lin Clark: A Cartoon Intro to Fiber [31:47]
Yoav Weiss: Caches All the Way Down! [30:58]

2016

Brendan Eich: JavaScript in 2016: Beyond Harmony [15:31]
André Staltz: Brains as building blocks [21:26]
Cheng Lou: On the Spectrum of Abstraction [35:31]

2015

Dr. Axel Rauschmayer: Using ECMAScript 6 today
- Part 1 [40:44]
- Part 2 [53:04]
Brendan Eich: ECMAScript Harmony: Rise of the Compilers [19:17]
Andreas Gal: Dirty Performance Secrets of HTML5 [14:15]
Andre Staltz: What if the user was a function? [32:19]
Gilmore Davidson: Time zone of your life [23:40]
Elijah Manor: Eliminate JavaScript Code Smells [29:15]
Dan Abramov: Live React: Hot Reloading with Time Travel [30:40]
Brain Ford: Problem solving in the open source world [29:57]
Kris Kowal: A General Theory of Reactivity [35:38]

2014

2013

Nat Duca, Tom Wiltzius: Jank Free: Chrome Rendering Performance [40:53]
Ilya Grigorik: Automating Performance Best Practices with PageSpeed [46:58]
Eric Bidelman: Web Components [32:39]
Alex Komoroske, Matthew McNulty: Web Components in Action [41:28]
Paul Lewis, Peter Beverloo: Device Agnostic Development [40:44]
John McCutchan, Loreena Lee: A Trip Down Memory Lane with Gmail and DevTools [42:09]
Joe Marini: Upgrading to a Chrome Packaged App [43:49]
Pete Hunt: React: Rethinking best practices [29:31]
Martin Kleppe: 1024+ Seconds of JS Wizardry [31:01]
Yehuda Katz: A tale of two MVC's [31:06]
Vyacheslav Egorov: Performance and Benchmarking [25:41]
Brendan Eich: JavaScript at 18: Legal to Gamble [25:44]
Mathias Bynens: JavaScript ♥ Unicode [26:12]
Mark Trostler: Testable JavaScript - Architecting Your Application for Testability [45:35]

2012

Ryan Sandor Richards: Garbage Collection & Heap Management [32:57]
Addy Osmani: Scaling Your JavaScript Applications
- Part 1 [22:37]
- Part 2 [15:41]
- Part 3 [33:31]
John-David Dalton: Lo-Dash [25:08]
Gary Bernhardt: WAT [4:17]
Angus Croll: Break all the rules [31:29]
Nicholas Zakas: Maintainable JavaScript [47:04]
Douglas Crockford: Principles of Security [59:52]
Brian Leroux: WTFJS [18:26]

2011

Douglas Crockford: Level 7: ECMAScript 5: The New Parts [57:18]
Douglas Crockford: Section 8: Programming Style and Your Brain [1:06:45]
Ryan Dahl: Introduction to Node.js [1:06:33]
Alex Russell: Learning to Love JavaScript [1:03:25]

2010

Douglas Crockford: Volume One: The Early Years [1:42:08]
Douglas Crockford: Chapter 2: And Then There Was JavaScript [1:30:22]
Douglas Crockford: Act III: Function the Ultimate [1:13:28]
Douglas Crockford: Episode IV: The Metamorphosis of Ajax [1:33:54]
Douglas Crockford: Part 5: The End of All Things [1:24:42]
Douglas Crockford: Scene 6: Loopage [51:52]

2009

Nicholas Zakas: Scalable JavaScript Application Architecture [52:22]
Douglas Crockford: JavaScript: The Good Parts [1:03:47]

The source of the above list is
Sergey BolshchikovPlease follow him.

Podcasts

Devchat.tv: Big podcast network for more and more developer communities.
Front End Happy Hour
Future of Coding
JavaScript Jabber
Real Talk JavaScript
Syntax.fm: The amazing Wes Bos & Scott Tolinksi hosts a podcast covering web development, front-end, the process of learning, and business. You can also find their episodes on various apps like Spotify etc.
The Undefined Podcast - Full stack developers Jared Palmer and Ken Wheeler have peer-to-peer conversations with world-class engineers about software development.
JS Party - Welcome to JS Party, a weekly celebration of JavaScript and the web
React Podcast - Conversations about React with your favorite developers.
React Round Up
React Native Radio
Base.cs Podcast: Beginner-friendly computer science lessons based on Vaidehi Joshi's base.cs blog series, produced by CodeNewbie.
Command Line Heroes
SE Radio
PHP Roundtable
PHP Architects
DevMode.fm
Coding Blocks
Coder Radio
Full Stack Radio
Recode
Code Podcast
CodeNewbie Podcast
La Vie En Code: A podcast dedicated so self-taught web developers.
UndefinedFM: The only engineering podcast with a 2 drink minimum. Hosted by Ken Wheeler and Jared Palmer.
Learn To Code With Me
Shop Talk Show: A podcast about building websites starring Dave Rupert and Chris Coyier. Development, design, performance, accessibility, tooling, a little bit of everything!
Software Engineering Daily: Daily interviews about technical software topics.

Youtube Channels

Tom Scott
FreeCodeCamp: An increasingly popular resource with excellent content from the open-source community of self-taught developers who enjoy contributing to non-profit organizations. Their videos cover a nice range of topics:
- Languages and Frameworks
- Game Development
- Talks
- A Day in The Life Of...
- Live Coding sessions
- Fundamentals (Computer Science and Programming)
Hitesh Choudhary
Joe Parys Academy
LevelUpTuts: Scott Tolinski
mmtuts
sentdex
The Coding Train
Thenewboston
Traversy Media
Colt Steele: Colt is a developer with a serious love for teaching.
Real Tough Candy: Real Tough Candy combines technical expertise with soft skills in this vlog oriented channel.
Ben Awad: Ben is a software developer who makes videos about React, React Native, GraphQL, Typescript, Node.js, PostgreSQL, Python, and all things coding.

Computer Science

Talks/Conferences

Coding Tech: A channel dedicated to republishing tech conferences from around the world and content originally published with the Creative Commons Attribution license. It's like JSConf, but much more diverse in topics spanning from things like:
- Software Development
- Quantum Computing
- Python
- JavaScript
- Web Design
- Security
- Blockchain
- GraphQL
- and Web Assembly
JSConf: A channel dedicated purely to JSConfs from around the world, ranging from the practical to the philosophical.
Pete Hunt: React: Rethinking best practices - JSConf EU 2013
Pete Hunt: React: Rethinking Best Practices (updated) - JSConf.Asia 2013
Tom Occhino and Jordan Walke: JS Apps at Facebook - JSConfUS 2013
React: CSS in JS
Pete Hunt: Be Predictable, Not Correct - Mountain West JavaScript 2014
Hacker Way: Rethinking Web App Development at Facebook
Christopher Chedeau: Why does React Scale? - JSConf2014
Christopher Chedeau: React's Architecture - OSCON 2014
Pete Hunt: React RESTful UI Rendering - Strange Loop 2014
Pete Hunt: How Instagram.com Works - OSCON 2014
Bill Fisher and Jing Chen: React and Flux - NewCircle Training 2014
Sebastian Markbage: Minimal API Surface Area - JSConf EU 2014
Avik Chaudhuri: JavaScript Testing and Static Type Systems at Scale - Scale 2014
React Native & Relay: Bringing Modern Web Techniques to Mobile - f8 2015)
Citrusbyte Presents GraphQL: A Horizontal Platform with Nick Schrock
Laney Kuenzel: Mutations and Subscriptions in Relay - JSConf 2015
React Today and Tomorrow and 90% Cleaner React With Hooks - React Conf 2018
React Conferences
React Videos
Awesome React Talks

React.js Conf 2015 Playlist

ReactEurope Conf 2015 Day 1 Playlist

ReactEurope Conf 2015 Day 2 Playlist

ReactRally Conf 2015 Playlist

React.js Conf 2016 Playlist

React Amsterdam 2016 Playlist

ReactEurope Conf 2016 Day 1 Playlist

ReactEurope Conf 2016 Day 2 Playlist

ReactRally Conf 2016 Playlist

React.js Amsterdam 2018 Playlist

Video Tutorials

Trying React Hooks for the first time with Dan Abramov

Free Courses

Bento CSS Learning Track (Bento)
Bento HTML Learning Track (Bento)
Build a Personal Website with Dash
Build a responsive website with Webflow
Build a SaaS landing page using Skeleton
Build Dynamic Websites
Code Your First Game: Arcade Classic in JavaScript on Canvas - Chris DeLeon (Udemy)
CSS Flexbox - Mastering the Basics - Vishwas Gopinath (Udemy)
CSS Tutorial
Flexbox in 30 Days - Samantha Ming
HTML Tutorial
Learn how to program: CSS - Epicodus Inc.
Learn HTML5 Programming From Scratch
Bento JavaScript Learning Track (Bento)
Egghead.io
Intro to JavaScript ES6 programming
Javascript Essentials - Lawrence Turton (Udemy)
Learn how to program: JavaScript - Epicodus Inc.
learn:query
The Road to GraphQL The Bare Essential Package
Start Using React to Build Web Applications
The Road to learn React.js The Bare Essentials Packaage
Getting Started with Redux
Introduction to TypeScript - Daniel Stern (Udemy)
TypeScript Fast Crash Course - Edwin Diaz, Coding Faculty Solutions (Udemy)
Discover Flask - Full Stack Web Development with Flask
Flask(A Python Microframework) Tutorial
Free Code Camp
Python Web Scraping & Crawling using Scrapy
The Odin Project - Learn Web Development for Free
Web Information Retrieval - L. Becchetti, A. Vitaletti (University of Sapienza Rome)

Livestreams

[your suggestions]

Meetups

[your suggestions]

Newsletters

[your suggestions]

People

[your suggestions]

Research Papers

[your suggestions]

Learning Plans

[your suggestions]

If you found this article helpful, consider becoming a Patreon.

Humble Request - As a full time employee, I struggle with having time to publish my personal findings about software technologies. I believe most people do.Your contributions allow me to create what inspires me and publish my work related to web development, whether that's standalone dev.to blogpost or parts of bigger personal projects.

Support My Work - Become a Patron!

25 Most Influential Javascript Programmers To Follow On Twitter

Data Structures — Mon, 09 Mar 2020 23:38:04 +0000

Hey Dev Community!

This is the updated list of people from part1 of this Awesome Javascript series

Below is the curated list of the most Influential Javascript developers(in no particular order) who impact how I think, about JavaScript, yet additionally about composing code professionally. In the event that you don't follow these people, I urge you to please follow them on twitter.I have linked their names with their twitter handles.

Hope you like it!

Brendan Eich

Douglas Crockford

Anders Hejlsberg

John Resig

Ryan Dahl - Link to his website

Addy Osmani

Paul Irish

Jeremy Ashkenas

André Staltz

Rich Harris

Evan You

Dan Abramov

Kyle Simpson

Mitchell Baker

Sarah Drasner

John Papa

Axel Rauschmayer

Kent C. Dodds

Wes Bos

Jafar Husain

Marijn Haverbeke

Ali Spittel

Mathias Bynens

Ariya Hidayat

Are there any other Twitter handles you would add to this list? Share them in the comments section below.

If you found this article helpful, please tap the Follow this channel for more articles on data structures and algorithms,web development,react and more !

Awesome Javascript - Best Blogs, Books, People, Podcasts, Conferences, NewsLetters, Videos and Documentaries On The Web (Free)

Data Structures — Sun, 08 Mar 2020 05:18:53 +0000

Hey Dev Community!

Are you interested in learning web development? So you start Googling it, and you get bombarded with lots and lots of resources which are either sometimes irrelevant or out of date.

Below is the curated list of the most awesome Javascript blogs, articles, books and podcasts available for you for free on the internet.

There is a section at the end of the post left blank. I will be regularly updating that section with your suggestions for the best resources on Conferences, Courses, People, Livestreams, Meetups, Newsletters, Research Papers Videos, Documentaries & Films, Learning Paths. Let me know your suggestions in the comments below.

Hope you like it!

Blogs

2ality
André Staltz
David Walsh
Feross
Flavio Copes - Guides and tutorials for developers.
Ian Sinnott
Jason Format
JavaScript Playground
Max Ogden
Nick Balestra
Perfection Kills
PlayfulJS
Wavesoft
Wes Bos
Yehuda Katz

Books

Podcasts

The Undefined Podcast - Full stack developers Jared Palmer and Ken Wheeler have peer-to-peer conversations with world-class engineers about software development.
JS Party - Welcome to JS Party, a weekly celebration of JavaScript and the web
React Podcast - Conversations about React with your favorite developers.

Conferences

[To be updated with your suggestions] - Coming Soon. Stay Tuned!

Courses

[your suggestions]

Livestreams

[your suggestions]

Meetups

[your suggestions]

Newsletters

[your suggestions]

People

[your suggestions]

Q&A

[your suggestions]

Research Papers

[your suggestions]

Videos, Documentaries & Films

[your suggestions]

Learning Plans

[your suggestions]

If you found this article helpful, please tap the Follow this channel for more articles on data structures and algorithms,web development,react and more !

Google Javascript Interview Question - Remove Duplicates from Sorted Array

Data Structures — Fri, 06 Mar 2020 12:39:04 +0000

Problem Statement

Remove Duplicates from a Sorted Array

arr = [1,2,2,3,3,4,4,4,5]

Description - As you can see in the above array there are multiple occurrences of the same element like 2 is repeated twice then 3 is twice and 4 is repeated 3 times. So, we have to remove these duplicate elements and we have to keep only one copy of each element in our output

Expected Output : [1,2,3,4,5]

Implementation

Time Complexity - O(n) // as we are traversing the array only once where n is the size of the array
Space Complexity - O(n)

Javascript Implementation


var nums = [1,2,2,3,3,4,4,4,5];

var removeDuplicates = function(nums) {
    var sortedArray = nums.sort();
    var len = sortedArray.length - 1;
    var newArr = [];

    if (len >= 0) {
        // Start traversing elements
        for (var i = 0; i < len; i++) {
            // If current element is not equal  to next element then store that 
            // current element
            if (sortedArray[i] !== sortedArray[i + 1]) {
                newArr.push(sortedArray[i]);
            }
        }
         // Store the last element as whether it is unique or repeated, it hasn't 
         // stored previously 
        newArr.push(sortedArray[len]);
    }
    return newArr

}

removeDuplicates(nums) // Returns => [ 1, 2, 3, 4, 5 ]

Copy and paste the above code in your browser developer tools and you will get
[ 1, 2, 3, 4, 5 ] as the output.

If you found this article helpful, please tap the Follow this channel for more articles on data structures and algorithms.

Amazon Coding Interview Question - Find The Sum Of Contiguous SubArray with Largest Sum

Data Structures — Fri, 06 Mar 2020 05:37:10 +0000

Problem Statement

Find The Sum Of Contiguous SubArray with Largest Sum

Description - for a given array lots of subarrays are possible but we have to find a sub-array which gives us the largest sum

arr = [-2,-3,4,-1,-2,1,5,-3]

In this particular array arr, subarray [4,-1,-2,1,5] gives us the maximum sum 7 out of all the subarrays possible.

Expected Output : 7
The above sum is the sum of the subArray [4,-1,-2,1,5]

Efficient Implementation

Time Complexity - O(n) // as we are traversing the array only once where n is the size of the array
Space Complexity - O(1) // as we are just using two variables maxSum and curSum

C++ Implemention


#include<iostream> 
#include<climits> 
using namespace std; 

int findSubArrayMaxSum(int a[],int n){

  // currSum keeps track of the sum of the current subArray
  // maxSum keeps track of the maximum sum that has occurred till then
  // intially both will be 0 and as I traverse through the array these variables
  // will get changed
  int maxSum = 0,currSum = 0;
  for(int i=0;i<n;i++){
    // Calculate the current sum
    currSum+=a[i];
    // if the current sum changes to a negative value I will set it back to 0
    // that way I can keep track of the maximum sum
    if(currSum <0){
      currSum = 0;
    } else if(maxSum < currSum){
      // assign currSum to maxSum  if maxSum is less than currSum and currSum is 
      // greater than 0
      maxSum = currSum;
    }
  }
  return maxSum;
}

int main() 
{ 
    int a[] = {-2, -3, 4, -1, -2, 1, 5, -3}; 
    int n = sizeof(a)/sizeof(a[0]); 
    int max_sum = findSubArrayMaxSum(a, n); 
    cout << "Maximum contiguous sum is " << max_sum; 
    return 0; 
}

If you found this article helpful, please tap the Follow this channel for more articles on data strucures and algorithms.

Facebook Coding Interview Question-FindLongestSubarrayBySum

Data Structures — Thu, 05 Mar 2020 21:55:48 +0000

Problem Statement

Given an unsorted array of integers, find a subarray which adds to a given number

arr = [10,2,-2,-20,10]
sum = -10

The longest subarray is [10,2,-2,-20] having the length of 4.The solution should return the starting and end indices of the found subarray, here 0,3

Expected Result - 0,3

Naive Implementation

Find out all the subarrays whose sum computes to given sum S.Then,it will check the sum of each subarray with the given sum S and return the indices of the longest subarray. But this approach takes O(n^2) time complexity which is generally considered bad.

Efficient Implementation - Efficient way of doing this is using a HashMap

Time Complexity - O(n) // Much better than O(n^2)
Space Complexity - O(n)


import java.util.*;
import java.lang.*;
import java.io.*;


public class MaxLengthSubArray
{
    public static void main (String[] args) throws java.lang.Exception
    {

        BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
        int[] a = new int[]{10,2,-2,-20,10};
        int total= -10;

        // create a `HashMap` to store all the array elements `sum` and their 
        // `indices`
        Map<Integer, Integer> map=new HashMap<>();
        map.put(0,-1);

        // we have to keep track of the sum of the subArrays,so that is stored in 
        // this variable `sum` ie `sum` is the current sum
        int sum=0;

        //starting index pointing to the first element of the array 
        int start=0;

        // end is not pointing anything,so it is set to `-1`
        int end=-1;

        // Traverse through the entire array and calculate the current  
        // `sum`.After calculating the currentSum,we will subtract the currentSum 
        // with the  given `sum S` and check whether it is equal to 0.If, it is 
        // equal to `0` then that means we have found the subArray which will 
        //give sum S = -10
        for(int i=0;i<a.length;i++){
        sum+=a[i];
        if(!map.containsKey(sum))
        map.put(sum,i);

        if(map.containsKey(sum-total ) && start<i - map.get(sum-total )){
            start= i-map.get(sum-total );
            end=i;
            }
        }

        System.out.println(end-start+1+" "+end);

    }

}

If you found this article helpful, please tap the Follow this channel for more articles on data strucures and algorithms.

DEV Community: Data Structures

A Complete Guide To FlexBox

Introduction

Exercise: creating a responsive menu component with css Flexbox

Step 1: The base code

Step 2: Making it flex

step 3: Playing around with the Flexbox properties

1. Properties for the parent

2. Properties for the child

Step 3: Adding Responsiveness

Step 4: Make it semantic

5: Extra: a simple stacked bar chart

Extra note about prefixes

Why Use Docker ?

Fix Common Git Mistakes

1. Change a Commit Message that Hasn't Been Pushed Yet

2. Add More Files and Changes to a Commit Before Pushing

3. Remove Files from Staging Before Committing

4. Remove Changes from a Commit Before Pushing

5. The Different git Reset Options: --hard, --soft, and --mixed

6. Recover Local Changes from git reset --hard with git reflog

7. Undo a Commit that has Already Been Pushed

8. Push a New Branch to GitHub that Doesn't Exist Remotely Yet

9. Copy a Commit from One Branch to Another

10. Move a Commit that was Committed on the Wrong Branch

11. Use git stash to Save Local Changes While Pulling

12. Explore Old Commits with a Detached HEAD, and then Recover

13. Fix a Pull Request that has a Merge Conflict

14.Cleanup and Delete Branches After a Pull Request

15. Change the Commit Message of a Previous Commit with Interactive Rebase

16. git Ignore a File that has Already been Committed and Pushed

17. Add a File to a Previous Commit with Interactive Rebase

18. Fix Merge Conflicts While Changing Commits During an Interactive Rebase

19. Squash Commits Before they are Pushed with Interactive Rebase

20. Completely Remove a File from Pushed git History

BlogPost Summary

100+ Best CSS Learning Resources

Contents

CSS References

CSS in a nutshell

Fundamental concepts

CSS units

Selectors

Custom properties (aka CSS variables)

Layout

Classic layouting

Flexbox

Grid

Animation

Related

micromata has been so kind to share this list with us on github.Please follow him.

** If you want to stay updated on the newest trends, tutorials, and articles in the Web Development world, please subscribe to my weekly newsletter!**

10 Best New Full Stack Development Books To Read In 2020

Best Inspiring Documentary Films Dedicated To Software Developers

Awesome Javascript - Best Blogs,Books,People, Podcasts, Conferences, NewsLetters, Videos and Documentaries On The Web [Updated]

Blogs

Books

Videos, Documentaries & Films

2019

2018

2017

2016

2015

2014

2013

2012

2011

2010

2009

Podcasts

Youtube Channels

Computer Science

Talks/Conferences

Video Tutorials

Free Courses

Livestreams

Meetups

Newsletters

People

Research Papers

6. Recover Local Changes from `git reset --hard` with `git reflog`

11. Use `git stash` to Save Local Changes While Pulling

If you want to stay updated on the newest trends, tutorials, and articles in the Web Development world, please subscribe to my weekly newsletter!