Most people think that software programming is a difficult area, something for geniuses, an activity that you can only do if you were born surrounded by computers. But software programming is available to everyone, and you should give it a chance.

Why?

Make things from scratch

With software programming you can create things just seated in front of your computer. You can create a website, a script to automate a repetitive task, a big system (yes, with effort and time, you can do it) or whatever you want. And it is really motivating to build things just with code!
Just pick a goal, pick a language and start building ;-)

It is the language of the future

Nowadays every device we use has code inside. We are around software in every place. Our smartphone or computer runs applications and we use them all the time. These apps let you play games, chat with your friends and solve daily problems such as planning your commute. And if we have a new problem that isn’t already being solved by an app, we could just code and solve it. Because of that I say programming is the language of the future.

Thanks to programming we can create technology that enhances our lives.

With software programming you can create applications to solve a problem. Just like the following real examples:

• Mateo Salvatto | Innovators Under 35
• Teen Creates App So Bullied Kids Never Have To Eat Alone

These applications were created by teenagers wanting to help their community.

Automate tasks

Data collection, batch of instructions, mass file operations (like renaming multiple files) or website scrapping to get specific information are a few examples of tasks you can automate using little scripts. You don’t need to be a computer scientist to code them.

How? This book covers all these topics: https://automatetheboringstuff.com/

Learn to think

Code is just text that a computer interprets. And, just like any language, it has a particular syntax and format. This text contains very simple instructions to perform a task and you, the programmer, have to design it.

Everyone in this country should learn to program a computer, because it teaches you how to think. — Steve Jobs

Coding is dividing a problem in small pieces and solving them one by one (divide and conquer). It opens the doors to develop your imagination and make your ideas real.

Every program starts step by step, solving each problem at a time.

It is incredible when you start coding and see what you have created. A program is printing on screen, a website has text and colors!

Robotics

You can connect programming with robotic and create very interesting things. Just think about creating a mobile app to manage the lights of your house, build a Fingerprint Scanner or build your own remote control car.

The list is very extensive, you can check these 15 Arduino projects you can start making now and also 20 interesting projects using internet of things.

What do I need to start?

First at all, what you don’t need to start:

• You don’t need to be an expert at math
• You don’t need to be an expert solving calculus
• You don’t need to be a geek (but you will become one ;-))

You just need to have a computer, internet connection and the will to do it. And of course, it is important to be very curious.

Where do I start?

Learn a programming language

On every programming forum exists the discussion about which programming language is the best. Just do not spend your time trying to find the best language. Instead, focus on your goal. It could be writing your website, writing a system to administrate your commerce, or whatever project you want to enhance with software. And as a suggestion, take a look at the online community of the language. At some point you might need help about the syntax or an specific problem, and that is when internet communities come to the rescue.

At the end of this article you will find some links about online communities that I hope will help you.

Want to build apps?

Python

Python is a programming language that is very easy to learn, and it can be used on a server to create web applications or to create scripts.
See more at: https://www.python.org/

Take a look at this free course:

Learn Python 2 | Codecademy

Ruby

Ruby has a focus on simplicity. It has an elegant syntax that is natural to read and easy to write.
See more at: https://www.ruby-lang.org/en/

Take a look at this free course:

Learn Ruby | Codecademy

Want to build websites?

HTML

This is the standard markup language for creating Web pages.
See more at: https://www.w3schools.com/html/html_intro.asp
Take a look at this free course:

HTML Basics: A Free Full-Length Course

CSS

Time to customize the look and feel of your web app. CSS is the way add style on the HTML document.
See more at: https://www.w3schools.com/css/
Take a look at this free course:

Learn CSS in 5 minutes - A tutorial for beginners

JavaScript

If you want to make your website dynamic I recommend you to learn this language. It is the programming language of HTML and the Web. It’s used to create web applications or animate content over HTML.
See more at: https://www.w3schools.com/js/
Take a look at this free course:

Learn JavaScript - Full 134-Part Course for Beginners

Want to build with hardware? 🤖

Arduino

Arduino is an open-source electronics platform based on easy-to-use hardware and software. Arduino boards are able to read inputs — light on a sensor, a finger on a button, or a Twitter message — and turn it into an output — activating a motor, turning on an LED, publishing something online. You can tell your board what to do by sending a set of instructions to the micro controller on the board.
See more at: https://www.arduino.cc/en/Guide/HomePage

Raspberry Pi

The Raspberry Pi is a low cost, credit-card sized computer that plugs into a computer monitor or TV, and uses a standard keyboard and mouse. Like Arduino, it has the ability to interact with external things such as buttons, led, motor or other electronic devices.
See more at: https://www.raspberrypi.org/

Online communities

The online communities about programming are big, really. There are communities about programming in general or about specific topics. These are very useful to share content or meet new people with the same interests as yours.

Online communities could be forums, chat rooms like Slack channels and even meetings or conferences.

Did you earn experience in some area and want to get into its community? Try finding the community associated to that topic. Check the following examples:

• Ruby on Rails Slack Community: https://www.rubyonrails.link/
• Python Slack Community: https://pythondev.slack.com/

Learn new topics on:

• https://medium.freecodecamp.org/
• https://hackernoon.com/

Or try finding meetups about your favorite topic (i.e: Java, Algorithm, Hacking) on Google.

Thanks for your reading. I hope this article helped you to get motivated to learn how programming and to show that coding is useful, easy and available for everyone. Follow me for upcoming posts and do not forget to check my website.

Happy coding!

Learn programming: Reasons and resources was originally published in devartis on Medium, where people are continuing the conversation by highlighting and responding to this story.

Understand this library by creating a kids video game

This post is about the react-beautiful-dnd library that I used to create a simple video game for kids, combined with React, CSS and a bit of imagination! I assume you are familiar with React, if you are not, you might consider taking a course first.

I will avoid the screenshots of the main concepts about React, like setup, the whole interfaces or extra components. I will only show the components associated with drag and drop. At the end of the article I will leave links with resources, github and more.

react-beautiful-dnd is a library by Atlassian. The library takes care of providing a natural drag and drop experience. It is a higher level abstraction built for vertical and horizontal lists.

The objective is to create the following game:

Let’s start with the main concepts:

DragDropContext: The place where the drag and drop actions happen. This component calls onDragEnd when the draggable item is dropped and it’s the only function required. We can also define onDragStart and onDragUpdate to be executed when the item is dragged and when something happens during a drag, respectively.

Droppable: The component where we take the elements to drag and where we drop them (the droppable could be the same). A droppable needs a couple of properties that I will describe in a moment.

Draggable: The item to be moved. Like a Droppable, a Draggable needs a couple of properties to define a component as draggable.

After the main concepts, let’s define the initial data that we need to create the game:

With these three concepts in mind, we can start creating our first component. This component only contains a render method, and we are going to complete it in a moment.

NumbersGameContext: it is just a wrapper of DragDropContext.
VerticalColumn: it is the column that contains the draggable elements.

DroppableWrapper is a component that abstracts the idea of a Droppable container because it has particular properties that I will explain below. This is how it is defined:

Droppable needs droppableId and it must be unique inside a DragDropContext. It also expects a function as a child, and it uses the render props pattern to avoid creating or manipulating the DOM for you, you are the only who create DOM elements.
The first argument of this function is provided. This argument has droppableProps, these are the necessary properties you will need to designate the component as a droppable. We can apply some or all of them, by spread operator. For this tutorial, I will apply all by spread operator. If you need an specific case, check out the documentation.
The other property is innerRef which is a function used to supply your DOM element to the library.
Lastly, we need to insert a placeholder. A placeholder is a React element that is used to increase the available space in a droppable during a drag when needed. The placeholder needs to be added as a child of the component that you designate as the droppable. Our droppable set up is now completed.

Now is time to code our DraggableListItems, this component creates the NumberBox (a droppable item).

NumberBox defines a wrapper to Draggable. Let’s see it:

I’ve created a DraggableItemWrapper to abstract the idea of Draggable because like Droppable, it has particular properties to define.

What do we have now? Another render props pattern. In that case, Draggable needs draggableId and index. A draggableId must be unique inside a DragDropContext. Also, a draggable needs a function as a child. The first argument is provided, like Droppable. The other property is dragHandleProps. These are the necessary properties you will need to designate the component as a draggable.

With this abstraction, you can use the DraggableItemWrapper and forget about these low level properties.

Great! We have defined the following abstraction of the main concepts of the library:

• NumbersGameContext: an abstraction of DragDropContext
• DroppableWrapper: an abstraction of Droppable
• DraggableItemWrapper: an abstraction of Draggable

And our components as part of the game:

• VerticalColumn: a component to encapsulate the droppable column and the draggable items
• DraggableListItems: a component to encapsulate all NumberBox elements
• NumberBox: a draggable component of the game

But, our onDragEnd is still empty. Let’s fill it.
First, we have to analyze the argument of this method:

 result: {
   destination: {
     droppableId: "column-1"
     index: 2
   }
   draggableId: "four"
   reason: "DROP"
   source: {
     droppableId: "column-1"
     index: 0
   }
   type: "DEFAULT"
 } 

It contains information about where are you dragging on (from what column and position), where are you dropping on (from what column and position), and if you are doing a “drag” or a “drop”.

With all of this information we can do something like this:
First, save destination, draggableId and source in variables:
const { destination, source, draggableId } = result;

Now, create a new list of sorted numbers:

const column = this.state.column;
const numberIds = Array.from(column.numberIds);
numberIds.splice(source.index, 1);
numberIds.splice(destination.index, 0, draggableId);
const numbers = numberIds.map((numberId: string) =>
  parseInt(this.state.numbers[numberId].content, 10));

And update the state:

const newColumn = {
  ...column,
  numberIds
};

this.setState({
  ...this.state,
  column: newColumn
});

An extra nice detail, when the user drags a number or wins, we play an already downloaded sound in the assets folder:

public playSound(numbers: number[]) {
  const sound = isSortedAsc(numbers) ? ClapsSound : MoveSound;
  new Audio(sound).play();
}

This is how the entire method looks like:

Rounding up

With these components we have what’s necessary to show a list of number boxes and the ability to drag and drop them on the same column. As extra details, apply CSS and Sound to create a better scenario for the game.

This will be all for this beginner’s guide, there is still much more information about this awesome library that you can check on the links below. Now is time for your own adventure.

I hope you enjoyed this guide. Thanks for reading and follow me to see what is coming next.

Good luck and happy coding!

Extra resources

• react-beautiful-dnd on github
• Free react-beautiful-dnd introduction course
• Source code of this video game
• Game online

Beautiful drag and drop with React — The beginner’s guide was originally published in devartis on Medium, where people are continuing the conversation by highlighting and responding to this story.