teleren/devto huggingface dataset:
A month down...
Tags: taskforce, awesomitylab, codeofafrica, webdev
Published: 2021-03-28 06:44:46

Greetings,

It’s been a month at task-force, this week was as interesting as the past ones.

I gained a lot of experience and skills this week, starting the week with a team building session was fun, it was more like a warm up for the whole week. After a few, Lionel reached out to us (interns), telling us we will be working on projects of our preference. I was very excited because I took the opportunity and applied most of the skills I have gained in past weeks, me and my partner Issa we tried our best to find out the problems the community may be facing right away, we came up with two options which we later on used our critical thinking skills to decide the one we have to implement. After deciding the idea, we designed a sprint with stories of features to implement using the project management skills we gained in the last week then we started coding the features for the rest of the week.

This week, we talked about the do’s and don’ts in remote communication. I really enjoyed the session personally because most of the time I have been working remotely since I came in software engineering. I found there were mistakes without having a clue.

We have had an interesting session with Olaf teaching us about design thinking even though the whole team seemed not focused due to the ongoing projects but I really enjoyed the session, as a software engineer I have to put myself into the client’s shoes and use different personas to deliver solutions of the best quality and keep testing them.

In my career I have been looking for a challenging place to help me grow my career, I found it, it’s with Code Of Africa and Awesomity Lab. Looking forward to more challenges, experience and skills in the coming weeks.
Swap two number using Bitwise operators without using third variable.
Tags: java, algorithms
Published: 2021-03-28 06:39:35

28 Mar ・1 min read
Bitwise operators are always more efficient than mathematical operators.

And reason behind this is, Bitwise operators directly work on bits that's why.

So going with Bitwise operators will be good.

https://www.javaoneworld.com/2020/03/swap-two-numbers-using-bitwise-operator.html?m=1
Don't use float
Tags: beginners, css
Published: 2021-03-28 06:36:23

### Of course you can use float don't be silly, but use it wisely because you have to pay it with clearfix 🙀
here what I mean
```
<div style="
    background: blue;
    display: block;
    clear: both; // put clear here for extra protection if there are any float before this element 😔
    overflow: hidden; // put this too 😭
"><p>container here </p>
    <div style="background:red;float:left;height: 100px;width: 100px;">child 1</div>
    <div style="background:red;float:left;height: 100px;width: 100px;">child 2</div>
    <div style="background:red;float:left;height: 100px;width: 100px;">child 3</div>
</div>
```
when we make a website, sometimes we have to create two div that divided equally to container width, our approach usually something like this 
```
    <div class="container">
        <div style="
            float: left;
            width: 50%;
            background: red;
        ">
            div a
        </div>
        <div style="
            float: right;
            width: 50%;
            background: blue;
        ">
            div b
        </div>
    </div>
```
it's fine but when this element getting more complex, it's hard to make it proper unless you put `clear` at your container, to solve this issue use `flex` instead

```
<div class="container" style="
    display: flex;
    justify-content: space-evenly;
">
    <div style="background:red;width: 50%;">div a</div>
    <div style="background:blue;width: 50%;">div b</div>
</div>
```
Latest Jobs Online in India
Published: 2021-03-28 06:19:03

Sarkari Result 2021 - सरकारी रिजल्ट : Sarkari Results Info provide the latest SarkariResult or free job alert of government Job, Sarkari Exam, Admit Card, Online Form, Admission, Syllabus and all other details related to the government sector.

<a href="https://sarkariresult.co.com/">sarkariresult</a>
<a href="https://sarkariresult.co.com/">sarkari result</a>
What is Code Designing Technique and how to use it
Tags: tutorial, beginners, productivity, programming
Published: 2021-03-28 05:54:45

Hello everyone, hope you are doing well and staying safe.

Today, I would like to talk about something that I feel can be a great technique for programmers but we are rarely told about it in any tutorial, so there are very low chances, it becomes a part of our workflow. This technique is inspired by the Rubber duck Debugging technique.


##Designing the Code:
```Writing at least minimal steps required to solve a problem or developing a feature before starting to write the program, is Designing the code in my observation.```


`By Code design, I don't mean Pseudo Code.`



Imagine, we start coding a website with CSS/HTML without making the design in a Design tool like Figma/XD/Sketch. You would agree, we are most likely to come up with a poor quality design after all the coding, also, we are going to take pretty long to do it. That is because we have to think about multiple things while designing the website that way.

The same can be applied in Problem Solving/Feature Development (usually backend development). If we can write/design at least minimal steps required to develop the feature, it helps a lot.


###Here are few benefits of Designing the code.

* It keeps us on track
* It helps us to split the problem into multiple pieces, so while coding, we focus on the task at hand only
* It helps us to think very clearly.
* It is super helpful in debugging, you are going to spend 1/3rd time debugging if you apply this technique.

## Code design in Feature Development

Let's say, we need to create a program that can calculate the numbers.

```
Goal: 
We need to write a program that can multiply the two numbers, Add them, subtract them.

Steps:
* Create multiply method
* Create subtract method
* Create add method

```

Just writing these few lines will help you a lot.


## Code design in Debugging
Recently, I was having a hard time fixing an issue in my code, As soon as I explained the issue in writing, It was super clear to me, like what I need, what I need to do, etc. Just writing it helped me, solving the issue within 30 mins, that I was struggling with for 20 hours at least.

```
Goal:
* We want to update the URL as soon as someone goes to the next page on the pagination
* When a user clicks on the back button, he should be redirected to the previous page from pagination instead of the entirely different web Page.

Steps:
* When a user clicks on Next Page
* Change the URL and reload the page

```

All we are doing here is explaining things to us.



> If you cannot explain it simply, you don't understand it well enough - Albert Einstein



I know, it looks like a super simple trick and not very useful, but I would highly suggest you try it for at least 1 week and compare the results.


Suggested Tools for this Technique: SimpleNote, Drafts(Mac only)
ใช้ reflect package ช่วยเพื่อ Set Zero value ของ type ใดๆ ของ Go
Tags: go
Published: 2021-03-28 05:44:51

มีคำถามในกลุ่ม facebook [Golang Thailand](https://www.facebook.com/groups/584867114995854/permalink/1912375158911703/) ว่า

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ww74jjhiczkilr06d40.png)

ซึ่งสำหรับข้อแรกนั้นเราใช้ [reflect](https://pkg.go.dev/reflect) package ช่วยได้

ซึ่งโค้ดที่ได้เป็นแบบนี้

```go
package main

import (
	"fmt"
	"reflect"
)

func SetToNil(a interface{}) {
	v := reflect.ValueOf(a).Elem()
	v.Set(reflect.Zero(v.Type()))
}

func main() {
	n := 10
	a := &n
	fmt.Println(a)
	SetToNil(&a)
	fmt.Println(a)
	
	s := "Hello"
	ss := &s
	fmt.Println(ss)
	SetToNil(&ss)
	fmt.Println(ss)
}
```

เราประกาศ parameter เป็น `interface{}` ซึ่งแน่นอนว่าจะส่งค่าอะไรมาก็ได้ แต่อย่างไรก็ตาม ถ้าเรายังต้องการแก้ไขค่าของตัวแปรที่ส่งมา ยังไงตอนเรียกใช้ก็ต้องส่ง address ของตัวแปรที่ส่งมา คือ pointer นั่นเองเช่นผมเรียก `SetToNil(&a)` ถึงทำงานได้ ถ้าส่งแค่ `SetToNil(a)` จะทำให้แก้ไขค่าของตัวแปร `a` ไม่ได้แน่นอนเพราะไม่รู้ address

ส่วนกลไกของ reflect ที่ใช้คือเราใช้ `reflect.ValueOf` function ในการแปลงค่าเป็น `reflect.Value` แล้วจึงเรียก method `Elem()` เพราะ `a` เป็น addressable (pointer) value ทำให้ Elem คือการอ้างถึง address ที่โดนชี้อยู่ด้วย pointer a (เหมือนเราใช้ operator `*a` แบบนี้)

จากนั้นจึงใช้ method `Set` เพื่อเซตค่าใหม่ ส่วน Zero value เราได้มาโดยใช้ฟังก์ชัน `reflect.Zero` แล้วจึงส่งค่า type ให้โดยใช้  type ของ `v` โดยใช้ method `v.Type()` นั่นเอง

## ขอฝาก Buy Me a Coffee
สำหรับท่านใดที่อ่านแล้วชอบโพสต์ต่างๆของผมที่นี่ ต้องการสนับสนุนค่ากาแฟเล็กๆน้อยๆ สามารถสนับสนุนผมได้ผ่านทาง Buy Me a Coffee คลิ๊กที่รูปด้านล่างนี้ได้เลยครับ

<a href="https://www.buymeacoffee.com/weerasak" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>

ส่วนท่านใดไม่สะดวกใช้บัตรเครดิต หรือ Paypal สามารถสนับสนุนผมได้ผ่านทาง PromptPay โดยดู QR Code ได้จากโพสต์ที่พินเอาไว้ได้ที่ Page DevDose ครับ https://web.facebook.com/devdoseth

ขอบคุณครับ 🙏
Enable Hermes in React Native Project (>0.64)
Tags: reactnative, javascript, ios, android
Published: 2021-03-28 05:36:11

Hermes is an open-source JavaScript engine. For many apps, enabling Hermes will result in improved start-up time, decreased memory usage, and smaller app size. At this time Hermes is an opt-in React Native feature, and this guide explains how to enable it.

**ANDROID:**

Edit your android/app/build.gradle file and make the change illustrated below: This is applicable for React native version >0.62.

```
  project.ext.react = [
      entryFile: "index.js",
-     enableHermes: false  // clean and rebuild if changing
+     enableHermes: true  // clean and rebuild if changing
  ]
```

Now rebuild the android project and you can see the changes.


**iOS:**
Hermes opt-in on iOS (Hermes support on iOS is still early stage) 
This is applicable for React native version >0.64
To enable Hermes on iOS, set hermes_enabled to true in your Podfile and run pod install.

Replace:
```
  use_react_native!(:path => config["reactNativePath"])
```

with:
```
use_react_native!(
   :path => config[:reactNativePath],
   # to enable hermes on iOS, change `false` to `true` and then install pods
   :hermes_enabled => true
)
```
Instagram Clone Using React.Js
Tags: react, tailwindcss, showdev, discuss
Published: 2021-03-28 05:22:26

Guys,

I've been working on creating Instagram clone using React and Tailwind CSS from a tutorial on YouTube. Please checkout the live demo [**here**](https://instagram-clone-a159b.web.app/login) and let me know your thoughts.

Demo credentials
> Email : gg@gmail.com
> Password : P@ssw0rd

If you like it or wanna contribute to some more features/enhancements, checkout the [**GitHub repo**](https://github.com/gauravgupta98/instagram-clone). **Don't forget to star the repo :)**

### Also, let's discuss on some projects which you guys are working on or have worked on?
Removing console.log from React Native app in release (production) using yarn and npm for performance improvement.
Tags: javascript, reactnative, performance
Published: 2021-03-28 05:17:07

##<u>Remove Console Statements</u>
Using console.log statements is one of the most common patterns to debug in JavaScript applications in general, including React Native apps. Leaving the console statements in the source code when publishing React Native apps can cause some big bottlenecks in the JavaScript thread.

One way to automatically keep track of console statements and remove them is to use a third-party dependency called babel-plugin-transform-remove-console. You can install the dependency by running the following command in a terminal window:

**Library Installation:**
```
npm install babel-plugin-transform-remove-console --save-dev
                         OR
yarn add babel-plugin-transform-remove-console -D
```

**Integration**
Edit `babel.config.js`

```
module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  env: {
    production: {
      plugins: ["transform-remove-console"],     //removing consoles.log from app during release (production) versions
    },
  },
};
```
OR `.babelrc`

```
{
  "env": {
    "production": {
      "plugins": ["transform-remove-console"]
    }
  }
}
```
Add custom fonts to react-native. Simple Latest Steps:
Tags: reactnative, javascript
Published: 2021-03-28 05:08:05

1)Get/Download the font files needed for your project. You need to obtain the required font files either in .ttf or .otf format and rename like this format 'Ubuntu-Bold.ttf'.


2)Create a configuration file **react-native.config.js** in the root project directory and add the code below:
```
module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: ['./src/assets/fonts'],
};
```
*assets path is where you have put your font files*


3) Link the newly added asset by running the command:
`npx react-native-asset`

4)All fonts will be linked and you can see that in terminal.
You can use it in react native text component as 
**fontFamily: 'Ubuntu-Bold'**

> Note:
> Follow this [link](https://github.com/facebook/react-native/issues/39321#issuecomment-1710634874) if font does not reflect in iOS.
Don't run `sudo npm install -g` -- the simplest way to make it work
Tags: npm, node
Published: 2021-03-28 05:06:33

When we do

```bash
npm install --global something
```
we may get permission errors.  Some solution is to use `sudo` with that line, but it can be dangerous to let go of the full control of your computer to some `npm` install process.

## There is one simple solution

```bash
mkdir ~/.my-npm-global
npm config set prefix '~/.my-npm-global'
```

and then, add this line to both your `~/.profile` and `~/.bashrc`:

```bash
# add to both .profile and .bashrc
export PATH=~/.my-npm-global/bin:$PATH
```
and then, either quit the Bash shell or just start a new one by typing `bash`.

And now we can do the installation line above, the shorthand:

```bash
npm i -g something
```
## Some notes

1. We actually should only add to `.profile`, instead of `.bashrc`. But if we don't care about remote login, that's ok.  We can even just add it to `.bashrc` in that case. (see reference 2 below)
2. Otherwise, if we care of make it all perfect, then that line should be only added to `.profile`, but then we will need to reboot our computer
3. Or we can add it to our `.bashrc` also, and then remove it next time after a reboot

## Reference: 
1. https://stackoverflow.com/questions/33725639/npm-install-g-less-does-not-work-eacces-permission-denied
2. https://superuser.com/questions/183870/difference-between-bashrc-and-bash-profile
Install Go on Raspberry Pi OS (Shortest Tutorial)
Tags: raspberrypi, go, linux
Published: 2021-03-28 04:35:33

This may be the shortest tutorial on how to install Go on Raspberry Pi OS.
```
# Connect to your Raspberry Pi terminal using Putty / UART / connecting a monitor & keyboard into your Pi
cd ~/

# If you are on different architecture of linux, see download page at https://golang.org/dl/
wget https://golang.org/dl/go1.15.3.linux-armv6l.tar.gz

sudo tar -C /usr/local -xzf go*

echo 'export PATH=$PATH:/usr/local/go/bin' >> .bashrc
# Or you can use 
# sudo nano .bashrc
# To add the line "export PATH=$PATH:/usr/local/go/bin" at the bottom of the file

source ~/.bashrc
go version
```
First Sinatra Project
Tags: sinatra
Published: 2021-03-28 04:09:59

I've just completed my first MVC ruby project with Sinatra. And the most important thing I learned during the process was to plan plan plan. My biggest mistake was jumping straight into the project, wanting to satisfy my coding itch, without first considering what it was exactly I was trying to build.

I gave the project requirements a quick read over and basically knew that I had to build an MVC app that gave one of my models the full CRUD capability. So I jumped in and started coding. At first my project was to have a list of video games where users could add, edit, or delete from the central community list. But what value was there in that? Why would users simply add a video game to a community library? Wouldn't it be more valuable for users to edit their personal library, and maybe share that list with the community? And did it make sense that any user could add whatever they wanted to that central list of video games? Expectedly, I started second guessing my idea. But maybe because of some sunken cost fallacy, I felt like I needed to continue with that initial idea since I had already begun coding.

That night when I went to bed, I was finally away from my computer and it gave me the time to think more about the project. I started thinking it all through in my head and began realizing that I needed to add another feature to the app where individual users could actually own and interact with their personal contributions, and have it be well coexistent with the overall community members' contributions in the app.

Reviews! That's it. The app will list a ton of games, and users will be able to review each game and read the reviews of other users.

Although this new idea was related to the original one, I did have to do some significant back-tracking. But once I had that clearer goal in mind, the overall building of the app was much easier.

I was confidently able to declare ActiveRecord associations between the models, seed the database with realistic records, and build out each of the routes tactically.

I definitely would have myself a ton of time and stress if I started slow and thoroughly planned my project.

In the end it all worked out :). Users are now able to submit reviews of any game on the list. If you want to check it out, I've copied the github repo below. 

https://github.com/sallyman128/salmaan_sinatra_mod_project
8 Tips on Custom Drupal Migrations with Drush
Tags: webdev, drupal, migration, lando
Published: 2021-03-28 03:37:52

In a gambit to migrate some of our more complex Drupal content from D7 to D9, I finally tried a command-line migration with Drush. 

Here is my story thus far along with eight tips.

https://medium.com/codex/8-tips-for-custom-drupal-migrations-with-drush-4038ed5a18ff

The main impetus for trying this was an emerging need to migrate a type of content bundle known as the Paragraph. This does not migrate naturally using the Drupal UI, so a custom approach is necessary.

After the documentation scavenger hunt, I tried to write the article I wish had been available at the outset of my journey.

If you are a web developer who wants to learn more about Drupal migrations and has not yet set up a custom migration workflow, this is a good primer.
What are class components or ES6 classes?
Tags: webdev, react, programming, javascript
Published: 2021-03-28 03:04:38


In the last, we discussed the <a href="https://rahulism.tech/article/what-are-functional-components-in-react">Functional Components</a>. In this post, we will know about the class component or ES6 Classes.

--- 

### Intro👋

Class components are ES6 classes. Class components optionally receive props as input ad renders JSX. It can also maintain the private internal state of a particular component. 

Example: 

```javascript
class welcome extends Components{
    render()
    {
        return <h1>Hey, {this.props.name}</h1>
    }
}
```

The component should always start with **capital** letter and the props should never be modified. 

---

### Drawbacks ❎

- Class components are slight *slower* than their functional counterparts. The performance difference increases when the number of components in the app increases. 

- Class components involve a lot more coding on the programmer's side making them slightly more inefficient to use. 

---

#### Related Posts

- <a href="https://rahulism.tech/article/what-are-props-in-react">What are props in React</a>
- <a href="https://rahulism.tech/article/states-in-react">What are states in Rect</a>

---

😫Thanks For Reading | Happy Reacting😴
Encrypt your notes with GnuPG
Tags: linux, security
Published: 2021-03-06 02:10:53

How many times did you want to put something on a text file, but didn't want to leave it there just waiting to be read by anyone?

How many times you were searching for a password manager and during that search you didn't have any place to store your secrets? (more on the password manager later)

There's a quick and easy way to do that: using GnuPG.

GnuPG is usually installed with every linux distribution by default. And if it isn't, in case you're using a minimal image, chances are you will need to install it even to perform some basic operations with your distribution like adding new repositories (for example).

Very often we come across the terms PGP, OpenPGP, GnuPG when searching for this subjects and it can be confusing sometimes.

Resuming:
- PGP ( Pretty Good Privacy ) was the first implementation, by Phil Zimmermann, acquired by Network Associates Inc (NAI). 
- OpenPGP is the open standards version of PGP (which was by then owned by NAI.
- GnuPG is an (complete and free) implementation of the OpenPGP standard.

More about PGP and OpenPGP can be read on the [History of OpenPGP](https://www.openpgp.org/about/history/) while GnuPG information can be found on [The GNU Privacy Guard page](https://gnupg.org/)

To take advantage of this, make sure you have gnupg installed on your system (yes, this is debian (/based) only but it exists on other distros):
```
sudo apt install gnupg2
```

Generate your key (if you already haven't got one). It will ask your Name, Email and a Passphrase. Don't forget that despite all of the security that GPG provides, if you choose a weak passphrase, you'll be weakening all the process.

```
gpg2 --generate-key
```

And put this little script (let's call it gvim) somewhere on your $PATH (like ~/bin/gvim for example and don't forget the chmod u+x ~/bin/gvim):
```
#!/bin/bash
srcfile=$1
tmpfile=$(mktemp -p ${HOME})
# remember the email you used during key generation?
email="_PUT_YOUR_Email_HERE" 
if [ $? -nq 0 ]; then
    echo "error creating tempfile"
    rm $tmpfile
    exit 1
fi
gpg2 -d $scrfile > $tmpfile
vim $tmpfile
#this will actually wait for vim to exit

#and overwrite the original file with the new encrypted version
gpg2 -e -r $email < ${tmpfile} > $srcfile
```
Next, let's setup an easy way to read those files.
It's simple to type gpg2 -d <filename> but it's simpler to create an alias (and put it on your .bashrc)
```
alias gcat='gpg2 -d  2>/dev/null'
```

So, now, we can just use
`gvim` to create a new encrypted note and `gcat` to read it anywhere.

That is just a basic script. It doesn't really backup or ensure you don't lose your original data. I started to do some backups of all my notes, but that's really up to you.

And last but not least, since I've mentioned the password manager, we can also use this [awesome password manager](https://www.passwordstore.org/) which takes advantage of GPG and is very simple to use!
React Native Code Snippets - Messaging UI Example with Styled Components
Tags: reactnative, javascript, tutorial
Published: 2021-03-28 02:22:08

Hey guys! Hope you all are doing well! 
New react native code snippet - Messaging UI example. 

https://youtu.be/WYikF2TU-eY

Thank you for watching! Make sure to like and subscribe for more videos like this!


[![Watch the video](https://musicoding.com/content/images/size/w2000/2021/03/react_native_code_snippets_messaging.png)](https://youtu.be/WYikF2TU-eY)