teleren/devto huggingface dataset:
Migrating from WordPress to DEV Community
Tags: wordpress, markdown, medium
Published: 2021-01-31 06:18:50

# WHAT? Why?

In addition to what I explained [here](https://jdrch.wordpress.com/2020/12/06/what-the-hell-happened-to-this-blog/) I've been so spoiled writing in Markdown on GitHub and Reddit that WordPress' syntax was becoming a hindrance. I can also easily copy and post raw DEV posts to Reddit, which is not the case with WordPress. 

Also, WordPress' editor UI changes of late have been, in a word, disastrous. Whereas before you had clearly discoverable features, WordPress now presents the user with a blank slate they must somehow figure how to use, but *without* any easy syntax like Markdown.¹

WordPress doesn't understand that minimalism without intrinsic structure (read: a plain text interface with no syntax) actually increases workload and cognitive overhead. And no, I don't want to hear any nonsense about reducing distractions. If you find editor UIs distracting you need [medication](https://en.wikipedia.org/wiki/Attention_deficit_hyperactivity_disorder#Medication), not a new UI.

So anyway, now there's pretty much no way to tell what the WordPress editor is actually capable of *a priori*. 

# OK, so?

Well, I created an IFTTT applet to post everything here to WordPress, so if you want to stay in WordPress, by all means continue to do so.

Everyone else: just pull the RSS feed from my DEV profile. I'll still get notifications at WordPress you can comment and interact here or there.

¹ FWIW, this is why I never considered Medium as a destination either.
Learn How to make animated Fab-Button using HTML | CSS | pure JavaScript.
Tags: html, css, javascript, webdev
Published: 2021-01-31 05:58:43

<p>If you're learning HTML, CSS, and JavaScript be sure to like and subscribe to my <a href="https://www.youtube.com/channel/UCzv-_oMxjX5yuq7CJxZYQmA">channel </a>and never miss tips like this. 👇</p>

<p>You can find the <a href="https://youtu.be/ot8wq0KBDO4">tutorial </a> on my YouTube Channel: <a href="https://www.youtube.com/channel/UCzv-_oMxjX5yuq7CJxZYQmA">WeeklyTipsWithShahir</a></p>

{% codepen https://codepen.io/shahirhossaini/pen/QWGwNqG %}
Smarter state management with Redux Toolkit (RTK)
Tags: redux, javascript, react, reactnative
Published: 2021-01-31 05:34:17

[Redux](https://redux.js.org/) is one of the most sought-after tools for state management in React and React Native applications.

But one of the major issues developers especially beginners face is the amount of boilerplate and unnecessary code that is required to set up Redux in a project.

While looking for answers, the React team found a solution for the **three common concerns of Redux**

- "Configuring a Redux store is too complicated"
- "I have to add a lot of packages to get Redux to do anything useful"
- "Redux requires too much boilerplate code"

Enters [Redux Toolkit](https://redux-toolkit.js.org/)...

Which according to the documentation is,

> The official, opinionated, batteries-included toolset for efficient Redux development

RTK not only removes a lot of complications in Redux but also offers enhancements giving a better development experience in the process.

It uses Redux core for state management, [Reselect](https://github.com/reduxjs/reselect) as a selector library, [Immer](https://github.com/immerjs/immer) which gives the functionality to directly mutate the state and [Redux Thunk](https://github.com/reduxjs/redux-thunk) for async tasks.

In this post, we will set-up RTK for the good ol' Counter Application.

To begin with we need to install the required dependencies.
```
npm install react-redux @reduxjs/toolkit
```

### Store Configuration

We will create our store in `store/index.js`.

```
// src/store/index.js

import {configureStore, getDefaultMiddleware} from '@reduxjs/toolkit';

import reducer from './counterSlice';

const middleware = getDefaultMiddleware();
const store = configureStore({
  reducer,
  middleware,
});

export default store;
```

### Creating the Slice

Gone are the days of creating separate files for Reducers, Actions, Action Creators, and those lengthy switch-cases to handle these Actions in our reducers.

RTK provides us with a `createSlice` function which takes in a single object with the name of the slice, initial state, and all of our reducers.

```
// src/store/counterSlice.js

import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  counter: 0,
};

const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      ++state.counter;
    },
    decrement: (state) => {
      --state.counter;
    },
  },
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;
```
As you can see we are mutating the state directly instead of returning a new object, RTK uses Immer under the hood to handle immutability in the store.
We are exporting the `counterSlice.reducer` object which is provided by the `createSlice` method. This is the reducer that we imported and passed to `configureStore` earlier in `store/index.js`.
RTK also automatically generates our actions for us, which are available in the `counterSlice.actions` object.

That's all folks. With just two files and a few lines of code, we are able to bootstrap RTK in our application.

Watch this space for more!!
Main differences between the two common ways of passing in a functional based prop-value in React with respect to buttons.
Published: 2021-01-31 05:21:09

Note: for this article, we will be using the button and its onClick property aka attribute or prop.

The main difference between passing in a function to be executed on an operation based(e.g: on button click) and invoking it to executed at render time in React is that "one waits for an action to execute it" and "one executes itself at render time" e.g:  

       <button onClick ​={func()}>Button</button> : this will execute at render time then the essence of click event will be abused which is not what you want. 

       <button onClick ​={func}>Button</button> : this will be executed when a button click is triggered.

 Note: this is a pure JavaScript thingy and has nothing to do with react.

 This is a similar behavior below:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2qa3iklhy2ha1g77cl02.png)

    To rewrite this <button onClick ​={func()}>Button</button> in the case of  legacy code:

    <button onClick ​={()=>func()}>Button</button> /***what is actually happening here is pure javascript logic which means:

    1. A function can only run when its invoked and the anonymous  function of the button which is “()=>” will only run when the invoker(the click event is the invoker) invokes it.
    2. It's only when a function is invoked that the internal operation will be executed, meaning it's only when the anonymous function runs that it will execute the "func()".**/


    So thank you for stopping to read this ☕️ 👨🏿‍💻🙂

Meanwhile let me give you a little clue as my appreciated follower: So i haven't been releasing articles for a while now because i started contributing to an open-source javascript/react library during my freetimes/weekends after work. So the clue is that,you should get ready to use alot of wonderful and mighty open-sourced projects which will be coming your way soon from "elegant-ui library" a library with contributors from Sony-ericsson, check24,Twilio,myself and....🍾 🍻
A Three Step Recipe for using Gomobile
Tags: gomobile, mobile, go
Published: 2021-01-31 05:02:05

---
title: A Three Step Recipe for using Gomobile
published: true
description: 
series : Gomobile
tags: [#gomobile,#mobile,#go]
---

This post was originally published in [blog.koundinya.xyz](blog.koundinya.xyz)

In my earlier [post](https://dev.to/_tink3r/introduction-to-gomobile-19af), we saw different ways in which we can use Gomobile. In this post I'll try illustrating how to incorporate Gomobile into a mobile application using the `bind` command.

#### Prerequisites
1. Ensure that you've setup Go and Gomobile in your machine

2. Install NDK (If you are generating a Android library)

#### Three Step Recipe

##### Step 1 - Write a Go Package

1. Create a go package in `$GOPATH/src/github.com/$username/gomobile_contact`

2. Create the following files

<script src="https://gist.github.com/koundinya/a0d18ba4b830e3bb86f65aced026acbe.js"></script>

In the above linked files I've made a network request, parsed the response and unmarshalled it into a Contact object and returned the first Contact's name. This is an example of a simple business logic component that can be written in Go and ported as a library.


#####  Step 2 - Generate libraries

Use the following commands to generate libraries for iOS / Android applications

````
    gomobile bind --target=ios #ios
    gomobile bind --target=android #android
````


#####  Step 3 - Import library into Application

Gomobile generates a .aar/jar for Android and .Framework for iOS

Import the packages into your application and call the `FetchContactName()` method which returns the first contact's name.

Voilà! You've succesfully generated a library using Go and integrated into your application :)

<br>
Checking whether there are any two numbers that will sum up to a given number
Tags: array, javascript, algorithms
Published: 2021-01-31 05:00:28

In this article I'll discuss the solution for a common JavaScript interview algorithm:

``` 
// In an unsorted array, check whether 
// there are any two numbers that will 
// sum up to a given number. Example:

// sumFinder([6, 4, 3, 2], 9) = true 
// (because 6 + 3 equals 9.)

// sumFinder([6, 4, 3, 2], 2) = false 
// (because nothing in the array plus 
// another number in the array equals 2.) 
```

# JavaScript Implementation
 
```javascript
function sumFinder(arr, num) {
  let obj = {}
  let diff

  for (let i = 0; i < arr.length; i++) {
    diff = num - arr[i]

    if (obj[diff]) {
      return true
    } else {
      obj[arr[i]] = true
    }
  }
  return false
}

let sumFinderResult = sumFinder([6, 4, 3, 2], 7)
// returns true

let anotherSumFinderResult = sumFinder([6, 4, 3, 2], 1)
// returns false
```

# Short Explanation of the Solution

**_If the difference between the function's given target number (the number provided by itself in the arguments list) and an element in the array is equal to another element in the array, return true. Else, return false._** 

# Longer Explanation of the Solution

* For each element in the array, get the difference between the given number (the number provided by itself in the arguments list) and the current element in the array.
* Put the current element into an object as a key. 
* If any element in the array (if any key in our object) matches the difference between the given number and the new current element, return true. 
* Else, return false.

# An example of the solution using concrete numbers

Let's say `sumFinder` was called with two parameters: an array of [6, 4, 3, 2], and a given number of 7: 

```javascript
sumFinder([6, 4, 3, 2], 7)
```

First, according to the above code implementation, an empty object is created, and a diff variable is declared. Then, a `for` loop is created that loops through each index of the array. The first index points to `6`. The line:
```javascript
diff = num - arr[i]
```
now translates to: 
```javascript
diff = 7 - 6
// diff is now assigned 1
```
Since a key of 1 doesn't yet exist in our object, we will insert `arr[i]`, or `6` as a key in our object. 

Now on the second loop iteration, our `num` is `7` (the `num` never changes). The `arr[i]` is `4`, and the `diff` is therefore `3`. Since `3` is not yet a key in our object, we will add `arr[i]`, or `4` as a key in our object. 

On the third loop iteration, our `num` is `7`, the `arr[i]` is `3`, and the `diff` is therefore `4`. This time, `4` is a key in our object, so we return `true`. We return true because we have successfully figured out that there are two numbers in our array (`3` and `4`) that will sum up to our given number (`7`).
Make Copyable Code Block For Your Blog
Tags: webdev, react, javascript, blog
Published: 2021-01-31 04:46:28

A couple of days ago I implemented a feature to allow viewers on [my website] to easily copy code blocks on my website. Personally, it is quite a useful feature
for a technical blog.

In this article, I'm going to share how you can implement the same for your sites - applicable to all React-based sites.

## `useCopyableRef` hook

Thanks to React hook functionality, I've encapsulated the logic into an easily understandable and reusable hook:

```tsx
import { useRef, useState } from "react";
import copyToClipboard from "copy-to-clipboard"; // You'll need this package: `yarn add copy-to-clipboard`.

const useCopyableRef = <T extends HTMLElement = HTMLElement>(
  delay: number = 4 * SECONDS // You may want to change this to 4000, or define SECONDS somewhere in your application.
) => {
  const ref = useRef<T>(null);

  const [isCopied, setCopied] = useState(false);
  const copy = () => {
    if (isCopied) return;

    if (!ref.current) throw new Error("Ref is nil.");
    copyToClipboard(ref.current.textContent || "");

    setCopied(true);
    setTimeout(() => setCopied(false), delay);
  };

  return { ref, isCopied, copy };
};

export default useCopyableRef;
```

It's simple, right?

## Usage in UI components

`useCopyableRef` is similar to `useRef`, additionally, it returns `isCopied` and `copy` props, which you'd need to implement your UI components.

Implementing your UI components can be as simple as the following example:

```tsx
import useCopyableRef from "~/hooks/useCopyableRef";

const CodeBlock = (props: React.HTMLProps<HTMLPreElement>) => {
  const { ref, isCopied, copy } = useCopyableRef<HTMLPreElement>();
  return (
    <>
      <pre ref={ref} {...props} />
      <button onClick={copy} disabled={isCopied}>
        {isCopied ? "Copied!" : "Copy"}
      </button>
    </>
  );
};

export default CodeBlock;
```

That's it, don't forget to style your components however you want to!

<!-- Links -->

[my website]: https://phuctm97.com
Have You Ever Got Ranked on Google?
Tags: google, ranking, design
Published: 2021-01-31 04:41:30

##### **Sorry for Off-Topic

**Ranking on Google** is an exciting thing for a smart person in 2021. Everyone knows that **Google** is a top-ranked Tech Giant and widely used Search Engine.

Over a billion people use **Google**'s products and services.

So when a special keyword ranked on Google about your or about your company/organization/whatever else, it might make you happy and joyous!

Then, anybody from anywhere in the world can learn about you and can get connected with you by searching using the special keyword.

####Today I'm not gonna talk about "How to Rank on Google".

One of my special keyword **[alnahian2003](https://www.google.com/search?q=alnahian2003)** got ranked on google recently, and it's showing up all my activities, social networks, etc.

Though I already have a [Portfolio Website](http://alnahian2003.github.io/me) , but the ranked keyword helped me a lot to reach more people, more clients.

Here's one of my designs that I've done last night, by chance if any of your keywords get ranked on google,
then simply you can use my design to showoff yourself or advertise/promote yourself on social networks or to your clients! (Kidding :P There's no bound to use the design)

**Note: You need at least Adobe Photoshop CS6 version, if you don't have any then use online Photoshop called, Photopea.com**

Visit **[Find Me on Google Mockup](https://www.behance.net/gallery/112507777/Find-Me-on-Google-Mockup-For-Photoshop)** To Download The PSD File (100% Free to Use)

#####Thank You So Much. Stay With Dev.to Community
How to understand pseudocode
Tags: javascript, programming, algorithms
Published: 2021-01-31 04:08:04

Back in freshman year during undergrad, I remember being in my professor's office hours asking for help with an algorithm. I still don't  remember what the algorithm was, but what I recall was how I didn't understand how I was supposed to properly format and code the algorithm. All of this was preparation for an exam. I asked him how I was supposed to do all of this during a test in which I would have to write it by hand. His response sticks with me to this day, "Never memorize anything. Understand how tools work, understand the order of operations, and go from there."

Pseudocode is a great way of using English in order to understand code.

          Alloc mem for int userInput;
          If(userInput > 5){
            OUTPUT("Larger than 5");
          }

The above line of pseudocode would never compile on any ide in any language, but would be easy for humans to simply understand. 

Allocate memory for an integer variable.
-If that integer variable is larger than 5
  -Print to the console

In terms of pseudocode "syntax," there really isn't any method of writing it properly. It's mostly just minimal language that allows the programmer to understand exactly how to format the code:
  -What order each operation needs to be placed in
  -Where loops or logic statements need to be placed
  -How to structure algorithms 
  -Where to place variables for certain formulas

Recently I created a mini-site in which I implemented pseudocode in order to help me better construct the logic behind the classic FizzBuzz problem. The version of FizzBuzz I completed takes two numbers below 100 as input. It will print fizz for all the numbers that are divisible by the first number, and buzz for all the numbers that are divisible by the second. It will print FizzBuzz for all numbers divisible by both numbers. 

//loop over every number between 1 and 100
For(variable being accessed){

  //print fizzbuzz if the number is divisible by both user inputs 
  If((varElement % fizzNum)== 0 AND (varElement % buzzNum)== 0)
        OUTPUT("FizzBuzz")

  //print the number if the number isn't divisible by both user 
  //inputs
  If((varElement % fizzNum)!= 0 AND (varElement % buzzNum)!= 0)
        OUTPUT( var )

  //print fizz if the number is divisible 
  If((var % fizzNum)==0)
        OUTPUT("Fizz")

  //print buzz if the number is divisible by the buzz number
  If(((var % buzzNum)== 0)
        OUTPUT("Buzz")
}

Of course, you would have to have an understanding of the mod operator and equality operator to understand the code above, but the pseudocode mixed with the comments are enough to get a basic understanding of the algorithm.

Understand the tools you have to work with, the problem needed to be solved, then use pseudocode to format the algorithm.
Scrolling to Elements with JavaScript
Tags: javascript
Published: 2021-01-31 03:47:29

There are a few different ways to scroll to an element using JavaScript.

One way is to simply use `element.scrollIntoView()`; the other is to use `container.scroll()` or `container.scrollTo()`; there's no difference between these two methods from my understanding.

With `element.scrollIntoView()`, each scroll bar will be used to reach the element we call the method on; this is the simplest solution, however, we don't always want to use every scroll bar.

With `container.scroll()` or `container.scrollTo()`, we can pass optional arguments to determine where precisely we want the containing element (the scrollable element) to scroll to.

Below is an example which uses `container.scrollTo()` to scroll to various elements on the page. Using `element.scrollIntoView()` in this scenario will cause the scroll bar of the blog post to scroll in conjunction with the scroll bar of the embedded CodePen to reach each element.

{% codepen https://codepen.io/brandonmweaver/pen/dyOPGdd %}
Re-ordering git commits using IntelliJ
Tags: intellij, git
Published: 2021-01-31 03:42:56

In the "Log" tab of the "Git" tool window, select and right click the revision prior to commits to re-order. Choose "Copy revision number":

![Screenshot 2021-01-30 183520](https://dev-to-uploads.s3.amazonaws.com/i/etqacguc2jd3pfqy9k97.png)

Use the "Git -> Rebase" menu.

![Screenshot 2021-01-30 184014](https://dev-to-uploads.s3.amazonaws.com/i/ic5c8awx254rzh4gcl75.png) 

Paste the revision into the text field.

![Screenshot 2021-01-30 183940](https://dev-to-uploads.s3.amazonaws.com/i/gzow07ncjkdsfkgdcyk6.png) 

Remove any other options enabled and add `--interactive` option:

![Screenshot 2021-01-30 184043](https://dev-to-uploads.s3.amazonaws.com/i/dtdctr1efa3gcvwk0zeg.png) 

Use up/down button to re-order the commits where the commits are ordered top-to-bottom, oldest-to-newest:

![Screenshot 2021-01-30 184119](https://dev-to-uploads.s3.amazonaws.com/i/bmgtjbnyangm36vmcf8g.png) 

Click "Start rebasing". You will be prompted to resolve any conflicts that might occur due to the re-ordering.

> [Check out the IntelliJ documentation for more information](https://www.jetbrains.com/help/idea/edit-project-history.html#interactive-rebase)
What does this error mean??? 
Tags: react, graphql, apollo, mern
Published: 2021-01-31 03:31:23

I created abMutation,
and added it as:
...createCoffee.Mutation

At first, it dosnt work, unless I comment it out, start the servers abs then un comment it out..... then the mutation shows on the GraphQL editor, but, it dosnt exactly work when I click on “create coffee” on the client side of the form I made 
‘’’

46 | // Constructs an instance of ApolloError given a GraphQLError
  47 | // or a network error. Note that one of these has to be a valid
  48 | // value or the constructed error will be meaningless.
> 49 | constructor({
     | ^  50 |   graphQLErrors,
  51 |   networkError,
  52 |   errorMessage,

‘’’
And also: 
‘’’

  self.cache.removeOptimistic(mutationId);
  234 | }
  235 | self.broadcastQueries();
> 236 | reject(
      | ^  237 |   new ApolloError({
  238 |     networkError: err,
  239 |   }),
Dynamic Behaviour of the JavaScript Program
Tags: news, research, technology, dynamicbehaviour
Published: 2021-02-03 18:52:12

---
title: Dynamic Behaviour of the JavaScript Program
published: true
date: 2021-01-31 03:30:00 UTC
tags: News,Research,Technology,dynamicbehaviour
canonical_url: https://centocode.com/dynamic-behaviour-of-the-javascript-program/
---

JavaScript became a general-purpose computing platform with office applications, browsers, and development environments for its dynamic behaviour.

The post [Dynamic Behaviour of the JavaScript Program](https://centocode.com/dynamic-behaviour-of-the-javascript-program/) appeared first on [CentoCode.com](https://centocode.com).