If you are even a little bit into the mobile app development world then chances are you might be well aware of this hottest app framework in the market by facebook, React Native. And this framework is well known for its native performance with awesome animations.

Now if you are willing to learn animations in react native I assume that you have at least prior some knowledge of the framework, if not then you can go here learn the basics create an app or two and then come back.

In this post I will show you how you can implement animations in react native using react-native-animatable library by oblador which simplifies the complex react native animations by providing a wide variety of predefined animations and simplified custom animations.

Preface

I will be using examples from a card that I created for a React Native UX contest and won second prize for the same among 290 individual and organizations from over 30 countries.

I would be showing you GIF’s of the animations I used in the card and the code I used to create those animations.

So let’s begin animating things…

The very first step you need to do is install react-native-animatable in your react native project using

npm install react-native-animatable --save

To add animation to any View , Image and Text just adding Animatable. before them but for other components you can create a new animated custom component like this -

MyCustomComponent = Animatable.createAnimatableComponent(MyCustomComponent);

Once you have created an animated component you can add animation to it just by using the animation prop and providing any of the predefined or custom animations.

I will start with some easy examples and then gradually move on towards a little bit complex ones

1. A simple Sliding up and down animation

The code I used to produce the above affect is as follows -

In the above piece of code we have two state variables namely show and anim .

• The show state is used to show the manage the visibility of the emojis.
• The anim state is used to decide the animation that we should perform on the press of the button, i.e., the sliding up or the sliding down animation.

Both the tasks are performed on the press of the icon, the anim state is changed immediately, while the show state is turned to true immediately but is turned false after a delay of 500 ms just to show the sliding down animation before hiding it.

2. Background color transition animation

I have increased the speed of the animation so that it looks a bit more fluent.

In the above animation as you can see the background color transition happens with some delay rather than happening immediately.

To produce this effect you just need to create a simple custom animation for this transition and provide this to your parent <Animatable.View> using the animation prop.

const backgroundAnimation = {
   from:{
      backgroundColor:'rgb(255,255,255)'
   },
   to:{
      backgroundColor:'rgb(76, 255, 191)'
   }
}

And add it to the view as follows -

<Animatable.View animation={backgrooundAnimation}>

{// Your content goes here you can add any other animation to the inside content also like I have added zoomIn in my case}

</Animatable.View>

3. Rotating animations

To produce the flipping animation as shown above you need to add a custom animation as we did in the previous section.

const flippingAnimation = {
   0:{
      rotateY: '0deg'
   },
   1:{
      rotateY: '360deg'
   }
}

const reverseFlippingAnimation = {
   0:{
      rotateY: '0deg'
   },
   1:{
      rotateY: '360deg'
   }
}

This would rotate the card by storing the animation in the state and a state to monitor which side we are currently on.

Initially we will set the animation to an empty string and current side as front side

this.state={
   front: true,
   anim: ''
}

This animation state will be applied to the animatable view

<Animatable.View animation={this.state.animation}>
   {
    this.state.front?
       //Place your front side stuff here
    :
       //Place your backside stuff here
   }
</Animatable.View>

Then we will create a flip button which will be called on a click event, lets call this function flip

flip=()=>{
   if (this.state.front){
      this.setState({
         anim:flippingAnimation
      })
      setTimeout(()=>{
         this.setState({
            front:false
         })
      },500)
   }

else{
      this.setState({
         anim:reverseFlippingAnimation
      })
      setTimeout(()=>{
         this.setState({
            front:true
         })
      },500)
   }
}

Now whenever this function is called it would flip the card,+ switching sides.

4. Expanding and collapsing animations

All the three collapsing and expanding corners in the card are TouchableHighlights, to begin, first of all you will need to create a custom component out of the TouchableHighlight using the piece of code I mentioned in the very beginning

MyTouchableHighlight = Animatable.createAnimatableComponent(TouchableHighlight);

And now you just need to toggle the animation on the click of our new MyTouchableHighlight component.

You can create a toggle function similar to what we created in the previous section.

The custom animation for collapsing and expanding the TouchableHighlight would be as follows.

const expandInfoBtn={
   from:{
     width:25,
     height:25,
     zIndex:0,
     borderTopLeftRadius:0,
     borderBottomRightRadius:0,
     borderTopRightRadius:10,
     borderBottomLeftRadius:40

},
  to:{
     width:deviceWidth-40,
     height:expandHeight,
     zIndex:5,
     borderTopLeftRadius:10,
     borderBottomRightRadius:10,
     borderTopRightRadius:10,
     borderBottomLeftRadius:10
  }
}

const shrinkInfoBtn={
   from:{
      width:400,
      height:800,
      zIndex:5,
      borderTopLeftRadius:10,
      borderBottomRightRadius:10,
      borderTopRightRadius:10,
      borderBottomLeftRadius:10
  },
  to:{
     width:45,
     height:45,
     zIndex:0,
     borderTopLeftRadius:0,
     borderBottomRightRadius:0,
     borderTopRightRadius:10,
     borderBottomLeftRadius:40
  }
}

Our new component will work something like this -

<MyTouchableHighlight animation={this.state.animation} onPress={this.toggle} style={style.topRight}>
   <View>
      <Icon name="iconName"/>
      {// Put the other stuff here which you want to show when the    TouchableHighlight is expanded}
   </View>
</MyTouchableHighlight>

The toggle function will work similar to the flip function in the previous section by switching the animation between expandInfoButton and shrinkInfoButton .

I hope by now you have understood the basics of animations in react native using react-native-animatable and how easily you can perform many kinds of complex animation using the same.

There are many more options available in this library, for more information you can see their docs.

You the card I created for the contest here on expo.

Thanks for reading ;)

Getting Started with animations in react native was originally published in Youstart Labs on Medium, where people are continuing the conversation by highlighting and responding to this story.

Javascript Object is quite special and it doesn’t follow the classical object-oriented concepts used by other languages like Java. JS objects have the prototypical inheritance which is quite different from normal class-based inheritance. We will not explain inheritance as part of this article and will focus on some common methods which are available in JavaScript’s global Object constructor. Even though there are many other methods available in Object constructor, we will restrict our discussion to very frequently used ones.

Here is the list of topics we will discuss in this article :

• Shallow copy — Object.assign()
• Deep copy — JSON.parse() & JSON.stringify()
• Object.create()
• Object.entries()
• Object.keys()
• Object.values()
• Object.freeze()

Before we start, lets check out a typical object initialization in JS. We have some more ways to initialize a JS object - but this is the most common way developers use :

let obj = {};
obj.name = “messi”;
obj.year= 2018;
obj.speak = function(){
 return “My Name is “+this.name+” and this is year “+this.year;
}

Here you can see the name, year and speak properties. In JS methods are also properties with type function.

In the next section, we will discuss copying an object properly in JS.

Copying an Object

You can’t use the typical assignment operation to copy an object in JS as that will only lead to creating a reference to the same object.

let newObj = obj;
obj.year = 2019;
console.log(newObj.year) 

// 2019

console.log(newObj.speak()) 

// My Name is messi and this is year 2019

Above example shows that newObj is just a reference to obj and whenever any property changes in either of them — both objects are affected.

Shallow Copy

You can create a shallow copy i.e. a top level properties copy, using Objects.assign() method

let copyObject = Object.assign({},newObj);
copyObject.name = "ronaldo";
console.log(copyObject.speak());

// My Name is ronaldo and this is year 2019

console.log(newObj.speak());

// My Name is messi and this is year 2019

This example is copying newObj and all its properties to copyObject. You can check out that speak method will only print the new name on copyObject
However, this methods fails when we have nested objects in property values. Those objects are still not copied and work as shared reference in both objects.
Look at this example

let sourceObject = {name:"neymar",country:{name:"brazil"}}
let shallowCopyObj = Object.assign({},sourceObject);
shallowCopyObj.country.name = "India";
console.log(sourceObject); 

//{ name: 'neymar', country: { name: 'India' } }

You can check that sourceObject has country property as value object with name property that remains shared between the new shallowCopyObj and sourceObj. So how can we create a deep copy - the answer is not that simple if you are looking for true deep copy. We will give a small workaround in next section but that is only applicable for certain conditions(just search on google as we can have a complete article describing on how to have a deep copy)

Deep Copy

If you just need to copy only properties which are not functions — there is an efficient method. We are moving away from Object constructor here and using another global Object in JS — JSON

let deepCopyObj = JSON.parse(JSON.stringify(obj));
console.log(deepCopyObj);

//{ name: 'messi', year: 2019 }

You can check in output that we have lost our function property while copying — but this will be true deep copy. Let’s end our discussion on copying values and move to some more useful functions in Object constructor.

Object.create()

You can also create object with Object.create() function this has additional flexibility that you can choose what will be prototype of your new object.

let createObj = Object.create(obj);
console.log(createObj);  //{}
createObj.name = “Pk”;
console.log(createObj.speak());

// My Name is Pk and this is year 2019

In this example obj is the prototype from which createdObj is created. Which means it can use properties of prototype due to inheritance. That’s why we can use speak() method without declaring that in createdObj.

Object.entries()

This is a simple function which converts JS objects to an array of arrays. With inner array is pair of key and value of the object. Let’s checkout a self-explanatory example

let person = {name:”Roger”,age:30}
let entries = Object.entries(person);
console.log(entries);

//[ [ 'name', 'Roger' ], [ 'age', 30 ] ]

Object.keys()

This function picks only keys (or property labels) of objects and returns an array

let keys = Object.keys(person);
console.log(keys);

// [ 'name', 'age' ]

Object.values()

This function picks only values of objects and returns an array

let values = Object.values(person);
console.log(values);

// [ 'Roger', 30 ]

Object.freeze()

This function freezes the object for any further changes (key or values). It may not throw any error (unless you are in strict mode) but there will be no effect of value change on your object.

let frozenObject = Object.freeze(person);
frozenObject.name = “Nadal”;
console.log(frozenObject);

//{ name: 'Roger', age: 30 }

That’s it for this small article — these are quite simple but important part of a beginner’s journey to Javascript. Properly using copying and creation methods can avoid many potential bugs in Javascript applications.

If you want to deep dive into all methods available in JS Object constructor check out MDN Docs

Javascript Object methods every developer should know was originally published in Youstart Labs on Medium, where people are continuing the conversation by highlighting and responding to this story.

So what are graphs anyways..?

A graph is a pictorial representation of a set of objects where some pairs of objects are connected by links. The interconnected objects are represented by points termed as vertices, and the links that connect the vertices are called edges.

Source: Google

From the above definition it is clear that graphs are a set of vertices that are connected using edges and can be directed or undirected.

So what are the best data structures that we can use to implement graphs in python.

They are none other than dictionaries and lists.

We would be using a combination of both to show a node and their neighbouring vertices.

For eg the representation of above graph would look something just like this -

{
    1:[2,3],
    2:[1,3],
    3:[1,2,4],
    4:[3]
}

As simple as that.

Now coming on how to write a program to implement the same.

Well that’s also very easy the program below implements the above graph using two functions namely add_edge to add edges to the graph and show_graph to show all the edges in the graph.

What the above program does is, it simply implements a class Graph which stores the graphs in a dictionary and displays all the edges in the end.

The output of the graph will be the same as the input we provided it -

( 1 ,  2 )
( 1 ,  3 )
( 2 ,  3 )
( 2 ,  1 )
( 3 ,  1 )
( 3 ,  2 )
( 3 ,  4 )
( 4 ,  3 )

That’s because we have just printed out the information that we stored in the graph. Now let’s play with it a little bit more….

Let’s find the path between two nodes

Just add this function to your existing class to find a path between any two nodes.

And at the end of your file remove the last line and add this line -

print(g.find_path(‘4’, ‘1’))

Finally after running the program you should get the following result -

[‘4’, ‘3’, ‘1’]

So what’s happening here,

Let’s break the code into smaller pieces to understand it more properly.

So first things first, our function takes 3 arguments namely start, end and path. The first two variables, as the name suggests, store the start and end nodes. The third variable stores the current path while the function recursively calls itself to update that path.

Initially the path is set to an empty list and then we append the start node to it, after that we check if start==end , if yes then we return the path i.e. only the start node.

Then comes this -

for node in self.graph_dict[start]:
    if node not in path:
        newPath=self.find_path(node,end,path)
        if newPath:
            return newPath
        return None

This loop traverses all the neighbouring nodes of the start node and then recursively calls itself again until it finds a path from one of the neighbouring nodes to end node, if it finds a path it returns the path.

And remember that it does not return the shortest, it just returns the first path it finds. So as your homework try to find all possible paths and the shortest path. The process would be the same with just a little bit of changes, at the end of this post I will provide a link to my github repository that implements both of them.

Breadth First Search (BFS)

Breadth-first search (BFS) is an algorithm for traversing or searching tree or graph data structures. It starts at the tree root (or some arbitrary node of a graph, sometimes referred to as a ‘search key’[1]), and explores all of the neighbor nodes at the present depth prior to moving on to the nodes at the next depth level.

Source : wikipedia

BFS is an important graph algorithm and has many important applications including solving Rubik’s cube, Computing shortest path (Dijkstra’s algorithm) and Ford-Fulkerson’s algorithm computing maximum flow in a flow network.

The way this algorithm works is that it starts from any node and traverses all nodes at each level. We use queue to implement BFS, by poping nodes from queue, adding the neighbours of that node in the queue and labeling them as visited so that we don’t add the already traversed nodes in the queue again.

So let’s implement a program for the same -

Add this function to your class and replace the last line with g.BFS('1') and you will get the following output-

1 2 3 4

The way this function works is that it creates an empty dictionary visited and mark value of each node as false indicating that they are not visited yet.

Then we create a queue and append the starting node to it and mark it as visited.

The while loop runs until the queue is empty and it-

1. Pops the first node from the queue.
2. Traverses all the neighbouring nodes of of the popped node and if they are not already visited it marks them as visited and pushes them at the end of the queue.
3. Prints the popped node.

That way we find the connected components in the graph using BFS.

Now try practicing these -

• Dijkstra’s shortest path algorithm
• Depth First search
• Floyd Warshall Shortest Path from every vertex to every other vertex
• Prim’s and Kruskal’s minimum spanning tree algorithms

You can find the solution to these problems here on github.

Thanks for reading ;)

Implement graphs in python like a pro was originally published in Youstart Labs on Medium, where people are continuing the conversation by highlighting and responding to this story.

Inception

The problem was that I wanted a component in which I can pass a limited data and the render function of each item and it produces an infinite scrolling sensation in both directions by repeating the same data again and again.

So I searched a lot for this component and couldn’t find any, hence I decided to create one from scratch and published it on npm so that others who required this type of component wouldn’t need to implement it from scratch.

I implemented it using FlatList and by appending the data again and again whenever the user reached a particular threshold in any direction and removing the redundant data after a particular limit was reached, so the final result looked something just like this -

Procedure

This is the overview of the procedure I followed to create this package, if you want a more detailed procedure then you can visit the official npm docs.

Initial Setup

First you need to create a directory with the name of directory as the name of your package(that’s optional).

After that run command npm init in that directory, then it would ask you the details of your project like the name, version etc to create the package.json Don’t worry if you don’t know what to fill in a particular field, just keep pressing enter and you can change it later on.

After the package.json is created then created a src folder and place your component file into it and rename it as index.js. In package.json replace the value of main with "src/index.js".

Dependencies

Now add the dependencies to your project, it is usually divided into 3 parts -

• peerDependencies These are the dependencies that are required by the component and would already have been satisfied by the project. For eg -For any react native project react and react-native are necessary dependencies, so if anyone is installing your component they must have already installed these dependencies and we wouldn’t want it to install them again.
• dependencies These are the dependencies that are required by the project that might be or might not be satisfied by the project, so the component should install it. For eg — lodash or prop-types might be a good example for them if they are required by your component, because these may be or may not be present in the project, so we should better install them.
• devDependencies These are the dependencies that will be required by someone who wants to contribute to your project and will include all the libraries like jest , babel and es-lint that are required to perform the tests. These aren’t necessary if you haven’t setup the tests for your project.

Versioning

Proper Semantic Versioning of your project is very necessary and it shouldn’t be ignored. I would refer you to go through this guide on semantic versioning for proper versioning of your project.

Tests

The tests are necessary for anyone who is looking to contribute to your project for proper and maintainable code. This is a vast topic and I won’t be able to cover it up in this post so let’s keep it for another time( I too have also not set them up yet ;) ).

If you still have your doubts you can view the package.json of my project for more info.

Publishing and Testing

Once you’re done with the above steps, then it’s time to get you rolling.

First of all you need to create an account don npm for that, just run npm adduser and fill in all the necessary details.

Once done you can check if your user is created successfully by visiting npmjs.org/~yourusername.

Now just run npm publish in your project directory to publish the package.

Once published you can test the package in any react native project by running

npm install your-package-name

Once installed successfully you can test it by importing it in the following way

import YourComponent from 'your-package-name'

And test it. If it works then congratulations you have successfully created your first npm package.

Updating

Once published you can update your package anytime by making the required the changes in the component and then updating the version in the package.json accordingly using semantic versioning and run npm publish to update the package.

If its just a patch update then you can also update it by running npm version patch in your project directory to automatically increment the patch version by one and then run npm publish to update.

I guess by now you might have a clear idea on how you can create your own npm package, if not then you can jot down your queries down below and I will try to help you the best I can.

Thanks for reading ;)

How to create your own react native npm package was originally published in Youstart Labs on Medium, where people are continuing the conversation by highlighting and responding to this story.

Whenever, we talk about backend it is scary dark world — with no colors and things are terminal.

However, with platforms like firebase, it has become easier to make a backend. But, every backend comes with their SDK and style of coding/querying/APIs — which means there is a learning curve involved. It would be great if we can have an online IDE where we can run any of our NodeJS files and immediately get the backend working through APIs. We are trying the same thing on Webtask.io — it is an online IDE cum platform which will instantly deploy your code and give REST API over their domains. If you have a quick task of Node based backend and don’t want to dig into Linux cloud deployments — continue reading.

Initial Setup

After initial signup to WebTask.io you will get into their IDE — you can start via creating a new Web Task from a template. I chose ‘express with mongodb’. Check out the screens.

You will also have to find an online hosted MongoDB service — MLab is a perfect source for that. Sign up on MLab and get you hosted MongoDB URL.

If you don’t know about MLab, it is an online MongoDB which you can access via mongoldb URL like

mongodb://<dbuser>:<dbpassword>@ds147451.mlab.com:47451/youstart

Database user and password given in above URL will be made after making a new database on MLab. You can checkout MLab documentation for all this. You must choose sandbox free tier for having a free account.

Word of Caution

Now comes the funny part — templates are outdated. Yes, I was using MongoDB 3 native driver (which you can check out in their NPM module section) but default connection code was given for MongoDB 2. This led to many errors while I was connecting to MLab Cloud MongoDB Database. This problem is solved in the next section.

Updating Environment Variables/ Secrets

You might be familiar with how node use environment variables (process.env) to keep secrets. However, WebTask has a section to keep secrets.

You have to update in secrets — MONGO_URL. There can be many things which can go wrong with this URL config — Be Careful !! You will have to create a database and then a user for that database in MLab before jumping to this stage.

As of MongoDB native driver 3+ you can’t have MONGO_URL as :

mongodb://<dbuser>:<dbpassword>@ds147451.mlab.com:47451/youstart

Instead use the one given below ( checkout that we removed database name ‘youstart’ and added a section after ? )

mongodb://<dbuser>:<dbpassword>@ds147451.mlab.com:47451/?authSource=yourDB&w=1

`yourDB` should be replaced by your database name in MLab — else authentication will fail.

Also if you look at later URL you will see database name is removed — database name is now given in javascript code.

var db = client.db(‘youstart’); // Here youstart is the name of my database in MLab

I have edited the code of template to make it work, you can use the following code here — only one change needed is name of your database.

Complete Code (edited version of template)

‘use latest’;
import bodyParser from ‘body-parser’;
import express from ‘express’;
import Webtask from ‘webtask-tools’;
import { MongoClient } from ‘mongodb’;
import { ObjectID } from ‘mongodb’;

const collection = ‘my-collection’;
const server = express();

server.use(bodyParser.json());
server.get(‘/:_id’, (req, res, next) => {
 const { MONGO_URL } = req.webtaskContext.secrets;
 MongoClient.connect(MONGO_URL, (err, client) => {
 const { _id } = req.params ;
 if (err) return next(err);
 var db = client.db(‘youstart’); //CHANGE THIS

db.collection(collection).findOne({ _id: new ObjectID(_id) }, (err, result) => {
 if (err) return next(err);
 res.status(200).send(result);
 });
 });
});
server.post(‘/’, (req, res, next) => {
 const { MONGO_URL } = req.webtaskContext.secrets;
 // Do data sanitation here.
 const model = req.body;
 console.log(MONGO_URL);
 MongoClient.connect(MONGO_URL, (err, client) => {
 if (err) return next(err);
 var db = client.db(‘youstart’);  //CHANGE THIS

db.collection(collection).insertOne(model, (err, result) => {
 if (err) return next(err);
 res.status(201).send(result);
 });
 });
});
module.exports = Webtask.fromExpress(server);

Use Runner to Test API

Click on the run button which will open an API test panel.

There are already 1 POST and 1 GET API endpoints implemented in the above code. You can first test the POST API to create some data on MLab database

POST /                  (with the body containing JSON data)

Check out result in MLab — you can check that some document will be created

Now you can test GET API

GET /:id  (where you can replace :id which Mongod Document ID) 

GET /5b532801161da900067f68a1

You will get the expected result in the Runner section.

Now we will check out our deployed backend server. Server URL is at bottom of IDE and you can start using it instantly.

 https://wt-06fb0e1f9b5c229c733b079d74404815-0.sandbox.auth0-extend.com/express-with-mongo-db/5b532801161da900067f68a1
 

Tada !! Server-less Backend is ready !!

A Node.js Backend without any server — Just Code using Webtask.io was originally published in Youstart Labs on Medium, where people are continuing the conversation by highlighting and responding to this story.

So, you heard there is this new buzz word “JavaScript” out there, you feel you should learn it and then you either pick up a book or use some kind of step by step guide, good perfect first step, then you will probably spend a week or two diving into the content, the loops, the conditionals and functions. I like to call this phase the syntax chunking and the time it takes varies from person to person. So, once that’s done, you will want to get your hands dirty and here I recommend picking up some kind of project that’s been implemented by other folks and with moderate complexity( Trying to mimic Google calculator is a really good idea in case of JavaScript and there are stuff like this for every language).

So, congrats on completing your first project, I am pretty sure you learned at least 10 new things that your resource didn’t teach you. And congrats, you are a beginner at JavaScript now and its time to put it in the resume and forget it forever, or let’s do that and also play around with the tool you just learned to hold properly and do another project, this can be anything you want to make, just make sure going into it, you know there is going to be leaning opportunity for you.

Congrats on the second project and you are at a stage now, which I like to call “Overly experienced beginner” don’t get me wrong but most of the people stop there learning at this level and they will either just to some framework or use only what they have till now in making everything they can.

Remember the book you were reading, remember that chapter you just couldn’t seem to be getting your head to and decided to skip or those words that seemed stressfully alien at that point of time, its time to revisit them and try to associate meaning to those things( Some of those things for JavaScript would be learning about IIFEs, Event Loop, Namespace creation, scope and this bindings and its work around).

If you have reached this far, its a big, sorry huge achievement and you should be proud of yourself, one last thing at this level will be to get your hands dirty by doing an project and applying the new cool tricks you learned for which you previously banged you head into the wall. One super amazing thing, you can do now is to debug other people’s code and teach them as you go.

So, you are a intermediate user of your tool now and that’s amazing for real, now the world is your oyster and you can try all the weird stuff out there and understand, apply and even fix stuff. But, what you need to do to become a master(a true master), actually nothing :P , sorry to disappoint but you know everything that you are supposed to know and from here its just about how much time you spent with your tool. I am serious, the more you play with it the better you get and there is no limit to learning.

But that being said, I would still try to highlight some key things

• Read more, and by more I mean more books(like You don’t know JS) and code(Open source projects from good teams).
• Learn and Implement best practices and analyze what fits you
• Talk to people, get involved in community, go to Conferences and other such events (If you can’t go, then go on youtube and search for something like JSConf, you will find some pretty neat stuff there)
• Try to broaden your spectrum, try new stuff
• Keep updated with your tools ‘Hot News’
• Programming basic concepts like Data structure and algorithms are always backbone of your code — you can’t skip that.
• one should learn principle of good software development like Design Patterns, Solid principle, Removing Code Smells etc, because ones you know basic coding you must understand what pattern of software you are making — As mentioned by Gang Of Four.
• And last, just make sure to have fun.

Congrats, now you are a “Power user” of your tool and If you have come this far, as I said earlier, there is no stopping you and you can do whatever you feel like doing..

Thank you for reading this article and I hope you enjoyed it. If you want to talk please drop down a comment and I will definitely talk about food, leaning, spreading and everything in between.

How not to stay a beginner forever was originally published in Youstart Labs on Medium, where people are continuing the conversation by highlighting and responding to this story.

You might have seen ASCII arts on your terminal like the ones below when installing a new module/library in your system. Some developers (or even you might have) configure a static ASCII art which appear when they open their terminal. But have you ever seen a GIF running in your Swiss Army knife like terminal? 👀 That would give life and a personality to your terminal!

Nothing is impossible. Now even playing a GIF on your terminal is possible. GIF has been around us for long 31 years (seriously? 😲) and what better time it is to see GIF in your terminal.

Getting Started

Requires Python 3 (with setuptools and pip), zlib, libjpeg, and ffmpeg, other dependencies are installed by setup.py.

Install dependencies

# Debian based distros
sudo apt-get install ffmpeg zlib* libjpeg* python3-setuptools
# Mac
brew install ffmpeg zlib libjpeg python

Your Python environment may need these installation tools -

sudo easy_install3 pip
# This should enable a pre-built Pillow wheel to be installed, otherwise
# you may need to install Python, zlib, and libjpeg development libraries
# so Pillow can compile from source.
pip3 install --user wheel

Install gif-for-cli

Install from PyPI:

pip3 install --user gif-for-cli

Or download this repo and run:

python3 setup.py install --user

The gif-for-cli command will likely be installed into ~/.local/bin or similar, you may need to put that directory in your $PATH by adding this to your .profile:

# Linux
if [ -d "$HOME/.local/bin" ] ; then
    PATH="$HOME/.local/bin:$PATH"
fi
# Mac, adjust for Python version
if [ -d "$HOME/Library/Python/3.6/bin/" ] ; then
    PATH="$HOME/Library/Python/3.6/bin/:$PATH"
fi

GIF in action

I’ll be using my favorite Slackmoji — Party Parrot for playing in the terminal.

Don’t know about Party Parrot? It’s quite an interesting story. Read it out here.

Cult of the party parrot: How a ridiculous bird became an emoji hero

After the installation, run the following command in your terminal and enjoy the party 😉. The following command queries the Tenor’s GIF API and returns the top GIF.

gif-for-cli "party parrot"

For exploring more gif-for-cli usage options, check the link below.

google/gif-for-cli

What about Windows users? 😕

Currently, this is not supported on Windows platform. Though, there is an open issue on GitHub’s repo for Windows Command Prompt and PowerShell support. You can subscribe to that issue or keep a watch on the repository. Or a much better initiative, switch to Linux 😎 as soon as possible or just wait forever.

Let’s see what GIF you have put up on your terminal. Comment down below your terminal images with GIF in action 📷.

Thank you for reading! Your each 👏 would motivate me to write more helpful articles and make open source contribution. You can further connect with me on LinkedIn, Instagram, GitHub, Twitter and Facebook.

How To Play GIF In Your Terminal was originally published in Youstart Labs on Medium, where people are continuing the conversation by highlighting and responding to this story.

So why should you contribute to open source?

I know that’s why you’re but still, if you have your doubts, like why should you waste your valuable time for writing code for someone else and that too for free? Well there are many reasons you should, no matter what is your goal, here are some of them.

• Whether it’s coding, user interface design, graphic design, writing, or organizing, if you’re looking for practice, there’s a task for you on an open source project.
• You get to meet people who have similar interests and sometimes form life long friendships through their participation in open source.
• Working on shared projects teaches you many things like you get to explain how you do things and ask others for help.
• But most importantly, if you are looking for good opportunities for your career then contributing to open source helps you build a resume that stands out of the crowd and it also helps in building your online presence.

Ok, so now you have a good reason to contribute, but where to start?

Before start looking for projects you should know the workflow of a pull request, for that, I would recommend you to go complete the steps given in Roshan Jossey’s first-contributions and make your first open source contribution.

After you are done with the above steps, then you are ready to go out in the open source jungle and try to hunt some of the easy bugs. Here are some resources for the same -

• up-for-grabs is a place where you can find beginner level bugs in almost any language/framework you are interested in.
• If you want some more sources, see firsttimersonly
• Bugs Ahoy is another place where you can find beginner level bugs in many technologies in mozilla open source projects.
• Many open source projects have labels on their issues marked as first-timers-only , beginner-friendly or something like that for beginners and first time contributors like us, you can take a look at those issues.
• If you still have any concerns related to any project or you are still unable to find a project to contribute to you can join the slack channel of first contributions team mentioned above, and discuss it there.

Found your project!, let’s start contributing…

Once you have found an issue you would like to contribute to,go through their readme and first get know what the project is all about.

Then before you start working on the issue, just find their contributing guide and read it to know how to setup the development environment for that project.

Join any IRC or slack channel or any mailing lists in that project, introduce yourself there and tell others you would like to work on that particular issue, also don’t forget to comment on the issue that you want to work on it.

Once you have discussed the issue with the maintainers, you can follow the steps you did in first contributions project in the previous section to fix the issue and create a pull request.

Now wait for the pull request to be reviewed by the maintainers and if they suggest any changes complete those changes and commit them.

Celebrate!

If your pull request gets merged, then break out a celebratory beverage of your choice! You’re now an open source contributor!

My first contribution

I also followed the above steps to make my first contribution and I made it in freeCodeCamp, and at the time of writing this post my pull request is ready to be merged. I too wandered around many github issues of many projects till finally found this issue.

The issue was that a freeCodeCamp test was very tricky to pass because even if there is a space before/after a ; , you won’t be able to pass it. It was using javascript regex to check if the code was correct or not.

At first when I saw the code for this issue I had no idea how javascript regex worked and I wasn’t able to understand even a single piece of that code, then I viewed the documentation for javascript regex, practiced on some online regex editor, understood where the problem actually was and finally made a pull request.

Some tips from my personal experience

• If you find an interesting issue don’t just jump and start working on it, first read the comments on that issue to check that whether it is already assigned to someone or not and check if it’s not too old. After that comment on that issue that you want to work on it and wait for someone to respond, because I too ended up on a couple interesting issues, started working on them and later realized that those issues are not active anymore, i.e., their maintainers just forgot to close them.
• Don’t get disappointed if your pull request doesn’t get merged, ask the reviewer what mistakes you made and what changes you should make in your PR get it mergable.
• Most importantly don’t lose hope, you will find many repositories that will be in your favorite framework/language but still you might not be able to understand what’s happening in the code, that’s ok, just stick a little bit longer and try to understand the code even if you have to google every function, eventually you will understand it.

I hope this helps you or motivates you in getting started with open source.

Thanks for reading ;)

How I made my first open source contribution was originally published in Youstart Labs on Medium, where people are continuing the conversation by highlighting and responding to this story.

So, I will try not to make it another cry for better all over the ecosystem of education and will try to be on point and help a little maybe.

• The fact is that when you are in school, you are dealing with stuff that was first discovered/invented 100’s of years ago and that’s plenty of time to be well tested and applied. But tech is not like that, it is messy, full of manholes and traps, it is fundamentally glued at times to meet deadlines and this is really off-putting for Indian students at least initially in tech and they be like this is supposed to work, why doesn’t it work. The notion of something you are using is ‘broken for real’ doesn’t come naturally to us. All you and I are used to doing is prove concurrency of triangles or find integrals or something else, applying a soul universal approach like ancient Egyptians with cats every single time (“They are there to be prayed”).
• Trying to cover the whole syllabus is a virus that spread all over the nation like I talk to people and they go like I wanna do this and make that and they are pretty excited about it and I recommend them a book or resource and they immediately dive into it, enjoying and what now. And a week later, when I ask so what are you making and believe me 99 times out of 100, the response I get is “I am still in the middle of it and I will do it when I finish with the book”, I go nuts when that happens and I feel like just walking to a wall or something and bang my head to it. This is not your NCERT textbook, it has a page called how to use this book/resource, please read it. Serious though it makes me super mad and I just never talk to that person again…
• Why can’t Indians ask questions, when it’s most meaningful to ask. I mean its a thing here, there is nothing like a talk, discussion, session and everything is a lecture and the audience are zombies. That’s what it feels like folks every single time. Getting your hands dirty is not a thing here.
• They stuck at googling information because of all the spoon feeding.
• They are not comfortable with the process of trying out stuff, making errors and learning by resolving them.

Those are some problems that I think exist and I want to present just a passing thought

• Please don’t try to run for knowing everything its a mirage, knowing less in tech is a blessing make errors, resolve them, make that error again and resolve it again and repeat.
• Learn how to process and filter information before consuming, not even 20% which is available out there is useful and you need to learn to filter that, coding and everything else will come.
• Dive deep to code after chapter 3 and throw the book away, at this point of time you know enough skeleton code and now you need to find parts that are useful to you and use them and forget them until they come to muscle memory.
• Get in a group, where people have been doing it for a while and they are successful at some level with it. This is an art that comes with time, you can’t just can’t get to it super quickly.
• Think, find, discuss and apply and I bet you will never have a problem again.

Thank you for reading and I be really glad if it even helps you a tiny bit.

What Indian Student’s do wrong in Tech was originally published in Youstart Labs on Medium, where people are continuing the conversation by highlighting and responding to this story.

As a part of on-going tradition of interactions with past Alumni and Industry mentors, we organized a session with Harsh Bhardwaj on 5th June 2018, as part of Summer Training and Internship Program. Harsh works at PTC, which is known for its Internet of things (IoT) and augmented reality (AR) platform for partners and developers. PTC has six core product families: Creo, Windchill, Mathcad, Integrity, Servigistics, and ThingWorx.

Harsh has taken out some time from his busy schedule during his visit to Jaipur. Harsh has been a part of the Youstart family and always helped young coders to learn and work on new technologies by being an active volunteer at college club. He is continuing the same role via these activities — even after joining the Industry. Most of the session was Q & A, which went over an hour to discuss various topics related to students life and career. Here are the key elements :

How was your interview experience at PTC and other companies?

Most of the interviewers asked about some problem to check your problem-solving attitude and not syntax and semantics. If they have given a problem then you have to provide an efficient approach to solve it — and keep optimizing it over the discussion. They want to see how you think about a problem in a real-life situation. They want to analyze your thought process, as you will be working with them on day-to-day work. I am talking about interviews of good companies; a mass recruiter might not be interested in providing so much time to each candidate.
Most of my interviews went for more than 1 or 2 hours in which we discussed a single problem at hand. Most good companies allow you to think on pen & paper or a whiteboard. They don’t want your code — as the code is an obvious thing which anyone can write.

How was life after college?

Life in college was a bit of struggle for me — it was enjoyable but hard. You have to go through many courses and exams. In between, you want to work on good internships too. But, it is hard to get a good internship, especially in a non-IT city like Jaipur.
I remember a boy with an injured leg and traveling almost 20KM to complete internship works. It was me!
But I wanted to do that, it was not a burden for me. I worked on many internships in which I was not paid any stipend — but all was the experience.
Life after joining PTC has been fun. I work on real-life problems with like-minded people. I get some extra money to spend than in my college days. I can work on exciting new things.

I remember a boy with an injured leg and traveling almost 20KM to complete internship works. It was me!

What is the role of training/internship in engineering?

You need not do any training if you can learn these things on your own — the internet is a big resource for learning new things. If you need guidance approach a good mentor — who has industry skills and has worked in the relevant industry. There are a lot of coachings but most of them are focused on certificates, not on learning real industry practices. I think training or internship should be done where you are actually working in an industry environment under the guidance of people who know how the industry works.
I didn’t have many certificates when I was sitting for placements. Even though I had completed many training and internships but I was not interested in collecting those certificates. I was rather interested in working and get some new skills.
I remember a guy sitting beside me during placement time having a lot of certificates but did not have any knowledge of current technologies. I was selected after that interview, based on my knowledge and skills — he wasn’t.

Certificates with no knowledge are of no value.

How did you start with coding and other things?

I worked on many internships — as I said many of them did not pay anything. I was not working for certificates or stipend but for the experience.
I think all of it was used somewhere in my journey — you can’t say exactly where it will be useful but somewhere it will be.
I attended node.js Summer Bootcamp at Youstart and that came to use in one of the rounds in PTC interview. Also, my current profile and work of full stack developer started recently — there we had to learn these frameworks quickly and I am finding it familiar as I have already learned Nodejs here. So you never know when it will be useful — but real knowledge never goes away.

Is it worth going to software development field, nowadays?

Yes, it is a quite exciting field. You can create new products. You can work on new ideas. You can create things which people use. You get to work with people who are helpful, friendly and have similar visions as you. Finding such an environment is difficult in any practical sector. The software industry is still the top choice of making a career. Also, it is flexible — you can work from anywhere — you get work from home. you don’t need big machinery. Everything you need is your system and will to work on given problem.

One should do master’s or go to software development company? Which is better?

It completely depends on your interest If you are interested in academics or research then go for further studies i.e. Master’s degree.
If you want a big job master’s degree may be helpful for that too but it is not worth to spend 2 years to join master’s degree and then work in software development after that.
Now you can apply to any country across the globe if you have the required skill set. It is better to have 2 years of working experience in the software field.
But if you are focused on government jobs, teaching jobs or some similar options, master’s degree can be helpful. But in software development, it is not so.
You can always go to a better company in 2 years or less than that by improving your skills and good coding practices.

Is it worth learning MEAN Stack?

MEAN Stack is a framework in which you can create applications. There are many such frameworks.
Initially, companies are not worried about the platform you use to solve a particular problem.
If you can solve a problem, no one worries about the platform. However, MEAN stack is a good platform. Many companies are adopting it. It is quite popular in the current industry. I am also working as a Full Stack Developer. But you have to always think that technologies will come and go — you have to be an engineer first who can solve any problem given to you. Technology and frameworks will change but you have to prove yourself in any given task. That’s why I have learned in my college days — whatever task is given to you, complete it with full dedication.

How to prepare for placements?

If you are thinking about campus placements — you don’t have to prepare a lot just read some traditional books to prepare aptitude and tech questions. If you are thinking of a good company — prepare data structures well, read about object-oriented programming concepts — not syntax. Know about SOLID principle and practice programming question on some online forum.

You should have a good profile on GitHub, and other code platforms.

How important is percentage or marks for placements?

I had a backlog — I was not able to sit in many companies during my campus placements. Ultimately I had got a better job than others. Do I need to say any more about marks and percentage? If you want to go to masters and higher studies — might be useful to have higher grades but otherwise — no one will ask.

How you faced tech interviews with basic knowledge of JAVA and other things?

Companies are not checking in-depth knowledge of Java or any framework. You can survive with basic knowledge if you have the problem-solving attitude with you.

What do you think about future of mobile application software development?

Future is bright for mobile and all smart devices which will come. You can already see that people are using mobile as complete computing systems. There are lots of work going on in this field.

What is a product company and how it is different from a service company?

Product company has there own product -like windows by Microsoft — they work on the product, maintain it and improve it. Service companies — generally work on products of other companies and make them possible using their developers — Like Infosys. They create products for other companies who are their clients. Generally, people want to work in product company as they can have a ownership of some product — but at times you can be bored on working on the same project. But you can switch if your company provide flexibility to switch teams and products.

These were excerpts from talk of Harsh, if you want to be a part of growing community of coders and hackers at Youstart, you can join our facebook group https://www.facebook.com/groups/youstartlabs .

An Interactive session with Harsh Bhardwaj at Youstart : How to land great Jobs. was originally published in Youstart Labs on Medium, where people are continuing the conversation by highlighting and responding to this story.