teleren/devto huggingface dataset:
I'm a web developer who turned a learning side project into his 😍-looking portfolio website. Ask me anything!
Tags: react, portfolio, ama, webdev
Published: 2019-03-23 15:15:31

---
title: I'm a web developer who turned a learning side project into his 😍-looking portfolio website. Ask me anything!
published: true
description: Please have a look at my portfolio website and let me know what you think.
tags: #react #portfolio #ama #webdev
---

![image](https://media.giphy.com/media/26xBG8u7iC4PAO4ne/giphy.gif)


All right, all right, all right!🙂 It's a bit long overdue but I finally had enough time to do it. I've been a web developer for almost 3 years now and during this time, I've had the opportunity of learning and building different web applications for variety of clients. I've been mostly using Vue.js for front-end development and Laravel framework for the back-end API. 
#### The Inspiration
Last year I decided to learn react.js and see for myself what all the fuss is about and I have to tell you it's been an amazing journey. 
The inspiration for learning react and building my multilingual website came from [Blockchain website](https://blockchain.com). 
#### How Could They?!!!
The first thing I noticed was that it was developed with react.js but how in the world were they able to make it SEO-friendly, I asked myself. I tried to view the source of the web page and I saw a lot of HTML markup, CSS and JavaScript code. I asked myself if this is an SPA, then what's with all this code? 🤔
#### Digging Deep
At the time, I didn't have any knowledge of **Server Side Rendering** and all of its glory so I began searching through the Internet and got myself familiar with the idea. Then I found a few boilerplates on GitHub and started building a side-project which in the end resulted in my portfolio website. 
#### Thank You Open Source
I would like to give a big shout-out to the developer team at [Creative Tim](https://www.creative-tim.com/product/material-kit-react) for providing an open source version of their UI kit based on [Material UI](https://material-ui.com) library.
### TL;DR
Please have a look at what I've built and let me know what you think:
**https://www.bitsnbytes.ir**
### Here's a list of everything I've learned or used in this project:
* react.js
* redux
* react router
* node.js
* webpack
* react-intl
* material-ui
* express
* formik
* yup
* react-helment
* jss
* nodemailer
* deployment
* pm2
* SEO best practices

#### Have something to say or got any questions? Then go on ahead!
Online Android Emulator
Tags: reactnative, react, android, javascript
Published: 2019-03-23 15:11:14

---
title: Online Android Emulator
published: true
description: Online Android Emulator
tags: #reactnative #react #android #js
---

Post Link : <a href="https://www.skptricks.com/2019/03/online-android-emulator.html" >Online Android Emulator </a>

This post explains how to use online android emulator for react native application development. We are going to use Snack Expo website as online application development editor and also you can see the live result in online emulator as well.
Lets follow the below steps to run react native code in online android emulator.

Step-1 : First visit Snack expo website URL https://snack.expo.io/

Step-2 : After that you will be seeing the below results in your screen.

<img src="https://4.bp.blogspot.com/-ZAwcf5huvus/XJYFzGIDqbI/AAAAAAAAClQ/NcX7NpOGme8cYZkNUy8-NmCk_wpmyIHqQCLcBGAs/s640/11.png" />

<a href="https://www.skptricks.com/2019/03/online-android-emulator.html" >Online Emulator demo </a>
React Native Set View Width And Height In Fixed Dimensions
Tags: reactnative, react, android, javascript
Published: 2019-03-23 15:08:31

---
title: React Native Set View Width And Height In Fixed Dimensions
published: true
description: React Native Set View Width And Height In Fixed Dimensions
tags: #reactnative #react #android #js
---

Post Link : <a href="https://www.skptricks.com/2019/03/react-native-set-view-width-and-height-in-fixed-dimensions.html" > React Native Set View Width And Height In Fixed Dimensions</a>

This tutorial explains how to set the width and height of the views in fixed dimension in react native application. The simplest way to set the dimensions of a component is by adding a fixed width and height to style. All dimensions in React Native are unitless, and represent density-independent pixels.

<a href="https://www.skptricks.com/2019/03/react-native-set-view-width-and-height-in-fixed-dimensions.html" > React Native Set View Width And Height In Fixed Dimensions</a>

<img src="https://1.bp.blogspot.com/-DvWq1O6XLy8/XJY7GsC699I/AAAAAAAACl0/tvGQkItzhFsNJ7xuWgrIUlgHJzaeQJGKgCLcBGAs/s640/fix.png" />
Online iOS Emulator
Tags: reactnative, react, android, javascript
Published: 2019-03-23 15:06:43

---
title: Online iOS Emulator
published: true
description: Online iOS Emulator
tags: #reactnative #react #android #js
---

Post Link : <a href="https://www.skptricks.com/2019/03/online-ios-emulator.html" > Online iOS Emulator</a>

This post explains how to use online iOS emulator for react native application development. We are going to use Snack Expo website as online application development editor and also you can see the live result in online emulator as well.
Lets follow the below steps to run react native code in online android emulator.

Step-1 : First visit Snack expo website URL https://snack.expo.io/

Step-2 : After that you will be seeing the below results in your screen.


<img src="https://1.bp.blogspot.com/-tIrJxSjScm4/XJYIqspCNrI/AAAAAAAAClc/_iRDvSVB_tor0TpX1uWfu3xFjwMnMtIcwCLcBGAs/s640/11.png" />


Step-3 : Start accessing online editor and emulator
In the left section you can see the project folder structure and based on your need you can create new folders, files etc as required for your project
In the center section you can write down the react native code and Snack Expo is the best Online code Editor.
In the right section you can see the live result in  android emulator.

See the below online iOS emulator, where you can change the react native code and see the live result in emulator.

<a href="https://www.skptricks.com/2019/03/online-ios-emulator.html" > Online Emulator demo </a>
A few git help extras
Tags: git, beginners, cli
Published: 2019-03-23 14:37:55

---
title: A few git help extras
published: true
description: 
tags: #git #beginners #cli
---

On the command line `git help` is very useful if you need a quick reference. But if you have ever tried using it, there's *a lot* of information.  

### Use the `-h` option for quick, simple reference

Try appending the `-h` option on commands to print out a simplified reference. Like this:

> `git checkout -h`

### Use `git help` all by itself

Type in `git help` in the command line and you get a list of common Git commands with a quick description.


### Use `git help -g` for Guides

Some may not know that these guides exist within `git help`:

```
〉 git help -g

The common Git guides are:
   attributes          Defining attributes per path
   cli                 Git command-line interface and conventions
   core-tutorial       A Git core tutorial for developers
   cvs-migration       Git for CVS users
   diffcore            Tweaking diff output
   everyday            A useful minimum set of commands for Everyday Git
   glossary            A Git Glossary
   hooks               Hooks used by Git
   ignore              Specifies intentionally untracked files to ignore
   modules             Defining submodule properties
   namespaces          Git namespaces
   repository-layout   Git Repository Layout
   revisions           Specifying revisions and ranges for Git
   tutorial            A tutorial introduction to Git
   tutorial-2          A tutorial introduction to Git: part two
   workflows           An overview of recommended workflows with Git

'git help -a' and 'git help -g' list available subcommands and some
concept guides. See 'git help <command>' or 'git help <concept>'
to read about a specific subcommand or concept.
```

For example, try:  
> `git help glossary`


Have a great day!
How do you stay focused on one project at a time?
Tags: discuss, webdev, product
Published: 2019-03-23 14:10:33

---
title: How do you stay focused on one project at a time?
published: true
description: 
tags: discuss, webdev, product
---

I often struggle to keep going on a single project. It's super satisfying to finish something and launch some kind of MVP but getting there is really difficult. It's really to get started and get pretty far before dropping off.

Anyone else struggle with this? If you do finish side projects, what's your secret?
Android App for All Web Developers
Tags: opensource, webdevelopers
Published: 2019-03-23 11:28:10

---
title: Android App for All Web Developers
published: true
description: App Contains code editor, material colors, CSS snippets, list of useful websites for web developers, .. and more
tags: opensource, web developers
---

One day, I was out for a party and I was surfing the Internet on my smartphone. I came to a website that has a fancy looking UI and effect and I thought of it. I tried to create script in my head to accomplish the same effect then I coded it on a code editor online, BUT I FAILED. I was curious of the source of the page to help me figure it out and learn something new.

I tried to use view-source and I saw the source and it was beautiful how I figure it out easily. So I added to my checklist of capabilities an item called "view-source on Android".

After too many situation like this, I wrote some checklist features which I want on my smartphone as a web developer. Here is the checklist.

- view webpage source
- web code editor
- sample colors
- list of useful websites such as stackOverflow.com and Codepen.io
- color picker tool
- Code Snippets (HTML/CSS/JavaScript and PHP/HTML)
- HTML Reference
- CSS Reference
- JavaScript Reference
- PHP Reference

I feel the need to own all those features on my smartphone, so I created an opensource Android app which include some of those features and I will update it weekly until achieve the app in my imagination.

You can try the application on your Android smartphone from [Google Play](https://play.google.com/store/apps/details?id=com.abanoubhanna.web). And feel free to contribute in improving the app on [Github](https://github.com/DevAbanoub/web_developers_home).

Happy coding..
Are Anti App Addiction Policies/Laws the next big discussion in tech?
Tags: discuss, healthydebate
Published: 2019-03-23 10:21:11

---
title: Are Anti App Addiction Policies/Laws the next big discussion in tech?
published: true
tags: discuss, healthydebate
---
I have been following this news "PUBG BAN" for a while. Here are some news clipping to understand the whole story.

[![](https://thepracticaldev.s3.amazonaws.com/i/1qvas6oxpuf1wf89i8g0.png)](https://indianexpress.com/article/technology/gaming/pubg-is-the-most-popular-mobile-game-in-india-reveals-survey-report-5493561/)

[![](https://thepracticaldev.s3.amazonaws.com/i/5lfssg2qf836rcnbz5nm.png)](https://indianexpress.com/article/technology/gujarat-asks-school-officials-to-ban-students-from-playing-pubg-5551346/)

[![](https://thepracticaldev.s3.amazonaws.com/i/z4niekshjdmkwz7r5oe7.png)](https://indianexpress.com/article/explained/plug-play-young-indias-online-addiction-pariksha-pe-charcha-narendra-modi-5560317/)

[![](https://thepracticaldev.s3.amazonaws.com/i/8br5636vxhcfgpki8qil.png)](https://indianexpress.com/article/india/goa-minister-law-needed-curb-pubg-game-5577623/)

[![](https://thepracticaldev.s3.amazonaws.com/i/l8eeuvpke4zzxonvxja8.png)](https://indianexpress.com/article/technology/gaming/pubg-mobile-issues-statement-india-criticism-ban-says-will-work-with-everyone-parents-5589616/)

[![](https://thepracticaldev.s3.amazonaws.com/i/1i2h2p7bc1ah3da3s641.png)](https://indianexpress.com/article/india/after-rajkot-ban-police-arrest-10-for-playing-pubg-5625371/)

***Finally Today***

[![](https://thepracticaldev.s3.amazonaws.com/i/r3rwv9lwroeefm9395kn.png)](https://indianexpress.com/article/technology/gaming/pubg-mobile-implements-a-six-hour-gameplay-restriction-for-indian-players-5638330/)

They did this because of strong criticism by parents and the government of India. I do understand that the banhammer is an extreme measure that doesn't provide a long-term solution, and instead we should teach people to control these urges and cravings better. But think about it; if getting rid of addictions was so easy, drug addiction and substance abuse laws wouldn't be such a big deal. It's illegal to use such substances because people can't fight their temptations. They alter people's brain chemistry in very real ways, and digital applications today are no different.

Companies hire professionals to make their platforms as addictive as possible to maximize profits. Such practices have been used for a long time now, not only by game developers but also by other platforms like Amazon and Facebook. These apps affect the human brain on a [chemical level](https://www.washingtonpost.com/sf/style/2016/12/07/video-games-are-more-addictive-than-ever-this-is-what-happens-when-kids-cant-turn-them-off/). And more and more people succumb to the addiction every day, without even being aware of it.

So in this discussion, let's explore these rising threats and our responsibilities as **Makers**. 

*Please be humble and respectful in your comments. Attack the argument, not the person. 😃*
![](https://media.giphy.com/media/d3mlE7uhX8KFgEmY/giphy.gif)
Feedback on my app design
Tags: help, design, ios
Published: 2018-12-16 05:06:58

---
title: Feedback on my app design
published: true
description: Please give feedback on my app design
tags: help, design, ios
---

Hello everyone! I was hoping to get feedback on the layout of an app I am working on. You can see a mockup at: [https://xd.adobe.com/view/f320b6eb-aa94-4e10-457e-4db3c9b96a62-8511/](https://xd.adobe.com/view/f320b6eb-aa94-4e10-457e-4db3c9b96a62-8511/)

It is a hobby project to create my first iOS app. My idea is to create an app that lets me store quotes.  Currently, when I come across some text I like, I write it in a journal.  I thought it would be a good beginner project to make an app for this process.

I began programming but realized a mockup of the screens would be helpful. I stopped coding and used Adobe XD to design the layout. I looked at Apple's App Store and Music App for inspiration, along with other apps.

Some notes:

* My app is currently nameless
* I did not work on a colour scheme
* Some challenges I think I'll face:
    * Side scrolling
    * How to store the image and text
    * Synching between devices
    * the unknown - unknown 

Any feedback on the design, idea, and feasibility of this project would be appreciated!  Thank you in advance for your help!
Lua and me (for JavaScript Devs)
Published: 2019-03-23 10:15:05

This is a very short one. I have looked at so many languages lately looking for something to compliment my JavaScript and node stuff. Something that can be used by WASM and also doesn't feel a million miles away from JavaScript.

Lua has first class functions!
Lua has only one multiple data storage type, the table. It's like an array, it's like an object literal.
Lua is tiny I mean fit on A4 paper tiny.
Lua has a package manager which is actually good "Luarocks"
Lua is fast, it's the fastest scripting languages.
Lua is used in famous projects from World of Warcraft to Nginx server.
Lua is also an Application language.
Lua takes around an hour to learn.
Lua has require like node

Lots lots more, even things you didn't know you wanted.

Give it a shot you may be astonished.
React Native Debugging Using Console.Log()
Tags: reactnative, android, ios, react
Published: 2019-03-23 09:46:26

---
title: React Native Debugging Using Console.Log()
published: true
description: React Native Debugging Using Console.Log()
tags: #reactnative #android #ios #react
---

Post Link : <a href="https://www.skptricks.com/2019/03/react-native-debugging-using-consolelog.html" >React Native Debugging Using Console.Log() </a>

This tutorial explains how to perform debugging using console.log() in react native application. Console.log() is a inbuilt and predefined function present in javascript. This function is created for both Android and iOS applications and used to maintain and debug errors in apps on run time. Console.log() helps us to detect errors in our code.

In this example we are using console.log statement inside the function and that function mapped to the button as a click listener. When user perform click event on the button, then it will print console.log statement message in the console. Here we are using android studio for the demonstration, whenever user click on the button, then you can see the console.log messages in logcat section of android studio. Refer the below screenshot for the example.

<a href="https://www.skptricks.com/2019/03/react-native-debugging-using-consolelog.html" >React Native Debugging Using Console.Log() </a>

<img src="https://1.bp.blogspot.com/-3D_vOqmKSTc/XIc8KIeix8I/AAAAAAAAChQ/EZqpHeDxb7E10wkZF-euY9XqomvcCvWqQCLcBGAs/s640/Untitled.png" />
Add Blinking Animation on Text in React Native
Tags: reactnative, react, javascript
Published: 2019-03-23 06:26:53

---
title: Add Blinking Animation on Text in React Native
published: true
description: Add Blinking Animation on Text in React Native
tags: #reactnative #react #js
---

Post Link : <a href="https://www.skptricks.com/2019/03/add-blinking-animation-on-text-in-react-native-app.html" > Add Blinking Animation on Text in React Native</a>

This tutorial explains how to create blinking animation on Text in React Native application. In this example we are going to create simple custom component name as BlinkingText. This component perform the blinking animation with the help of react state and props using setInterval function. Generally blinking text is used to get user attention while surfing the application.


<a href="https://www.skptricks.com/2019/03/add-blinking-animation-on-text-in-react-native-app.html" > Add Blinking Animation on Text in React Native</a>

<img src="https://4.bp.blogspot.com/-wjhrX62WYIs/XJXP_Ig8boI/AAAAAAAACkI/i1EUsC2vJUgrgOyel8YTSvb-HqqvPdjcwCLcBGAs/s640/blink.png" />
Using github repos as Haskell dependency
Tags: haskell, cabal, git, github
Published: 2019-03-23 05:48:00

---
title: Using github repos as Haskell dependency
published: true
description: 
tags: haskell, cabal, git, github
---
I'm fairly new to haskell especially when it comes to packaging libraries.
I was having a hard time finding how to include github repositories in the `[name of your project].cabal` file of my project. I've been to [cabal user guide](https://www.haskell.org/cabal/users-guide/) and didn't find it there, at least not at first. Good thing [@samderbyshire](https://twitter.com/samderbyshire/status/1088838958241538048) saw my tweet and answered my question.

First thing to do is to create a `cabal.project` file because this file doesn't get generated when you do `cabal init`, then include the following
```yaml
source-repository-package
  type: git
  location: git://github.com/[repo owner]/[the repo i want to include as dependency].git

packages: ./[name of your project].cabal
```

Then in the your [name of your project].cabal file include the repository under the `build-depends` section
```yaml
build-depends:    base ^>= 4.11.1.0
                , the-repo-you-want-to-include
```

The reason I wanted to do this was because I want to use the library I've written in one of my project without the hassle of publishing it to [stackage](https://www.stackage.org/) or [hackage](https://hackage.haskell.org/).
How I made a Instagram Bot with face detection.
Tags: instagram, instagramscraper, python, pythondev
Published: 2019-03-23 04:58:37

---
title: How I made a Instagram Bot with face detection.
published: true
description: Instagram scraper which scrapes peoples images use machine learning to recognise a face, if face is detected it will repost that photo.
tags: instagram,instagramscraper,python,pythondev
---
#Instagram scraper with autopost and face detection.

I made an Instagram Bot which autoscraped peoples profiles took a machine learning module and reposted the images back to Instagram. I am new to python, so many of the fundamentals are missing, all feedback are good. 

This was maybe my third python bot, I had played little around with different social network bots on Github, they all ended up on the same road, liking pictures of dogs, commercials and other weird stuff, I reached out to the bot creators most said it was impossible, too much work.

Download My Instagram Bot:
https://github.com/instagrambot/Instagram-scraper-with-autopost

##How I implemented face detection
So i ended up implementing it myself with only 2 lines of code. 
```python
    image = face_recognition.load_image_file(instapath)
    face_locations = face_recognition.face_locations(image)
    # If no face located scrape the next profile
    if not face_locations:
        print("There is no Face Detected scraping next profile")
        x += 1
        instascraper()
    else:
        print("There is a Face Detected scraping and posting this image")
```
### Face detection at work on a live webcam
![Instagram Scraper](https://cloud.githubusercontent.com/assets/896692/24430398/36f0e3f0-13cb-11e7-8258-4d0c9ce1e419.gif)

I had already made the scraper/reposter myself within a few days, so to implement this code and it just worked.. was perfect 

My script right now have a few third party packages and it's really fun to see how easy it's it to implement different modules. I think Python is a really fun language and the possibilities and endless. 

My Instagram Scraper Website:
https://instabotai.com

Download My Instagram Bot:
https://github.com/instagrambot/Instagram-scraper-with-autopost
Mac users, recommend me a booklet printer!
Tags: help
Published: 2019-03-23 04:15:33

---
title: Mac users, recommend me a booklet printer!
published: true
description: 
tags: help
---

The music school I work at currently uses a Konica Minolta Bizhub 364e. One of these:

![A really big multifunction printer](https://www.copierguide.com/wp-content/uploads/2014/03/bizhub-364e-angled-finisher.jpg)

Ever since MacOS Mojave came out, Apple's own apps are unable to use all of this printer's advanced features. The problem is, most of our curriculum books are laid out in Pages, which is one of the affected apps, so printing our books has become a pain.

At first I thought this was a bug that would be quickly fixed, but I learned [here](https://forum.support.xerox.com/t5/Printing/Unable-to-print-with-accounting-on-Mac-OS-Mojave/td-p/219346) that it is due to an intentional change in the way Apple handles printer drivers. Many brands are affected. In the case of our printer, the manufacturer lists their 2016 driver as fully compatible, so it doesn't seem like they intend to change anything.

Can anyone recommend me a good multifunction booklet printer that fully supports Mojave?

The requirements:
- Color laser.
- Copier with flatbed and auto document feeder.
- Scan to email.
- 4 paper trays, cardstock capable, sizes up to 11x17.
- Booklet printing with center staple & fold.
- Support for all printer features on all Apple apps, including Pages and Preview.

Many thanks!