teleren/devto huggingface dataset:
Orchestrating animations with Framer Motion in React.js [Step By Step Tutorial with Examples]
Tags: javascript, react, webdev
Published: 2020-01-12 21:26:50

Framer Motion is an open-source motion library, which drives Framer X’s animations and gesture capabilities in React.js projects. If you are familiar with Popmotion, Framer Motion is the successor to the popular Pose animation library. Both libraries provide declarative API, which makes creating and orchestrating animations in React.js projects easy to implement.

In this tutorial, I want to demonstrate how to orchestrate animations with Framer Motion in React.js projects. We will implement animations in a declarative and imperative way. The output of this tutorial is a layout with sidebar menu, which we will animate with its elements.

For more [**click here**](https://andrejgajdos.com/freelance-react-developer-checklist/).
Learning React
Published: 2020-01-12 20:43:53

---
title: Learning React
published: true
description: The beginning of my journey into learning React JS
tags: 
---

This week at the VetsWhoCode cohort, we started learning React. One of our homework assignments? To create this post.  A post in which we were tasked with describing our newly-acquired knowledge of this library.  So I started where anyone else would: dev.to,  where I found a post titled "Explain React.js Like I'm Five". The post can be found [here](https://dev.to/tiffanywismer/explain-reactjs-like-im-five--2606).

A benefit of using React over vanilla Javascript is the ability to re-use components. Components are snippets of code used in various portions of the application. With React, these components are imported into multiple pages, allowing them to be re-used.  Not only does this cut down on development time, but eliminates duplicate required if using vanilla Javascript.  When building complex web applications, these components become very useful for maintaining the state of a page, and handling the way data is managed and passed down through elements. React uses these components to manage state; by using these components effectively, the data is passed down to each component.  Effective state management is a key aspect of using React.

Another benefit of using React is the Virtual DOM. React is built for better DOM management, and calculates the necessary changes needed, and refreshes only what is needed. React uses reconciliation to build the web page in virtual memory. Updates are run, and only the necessary changes are rendered in the browser. React uses a diff to check what changes need to be made to the HTML DOM, and then compares the collected diffs to update only the parts of the DOM indicated by those diffs.  In this way, the rendering process is faster, because React only has to change or update a small part of what could be a large DOM.
When Things Get Rough
Tags: career
Published: 2020-01-12 20:28:44

In 2019, a new side project came my way. It required me to hire 5 to 7 people for at least three months. Here's what I learned. 

1) There was no possible way to know the length of project at the start.

2) Not knowing the duration meant we didn't really know how many people we needed.

3) We should have designated a tech lead from start. Instead we tried the everyone is equally responsible style.

4) We trusted skillsets reported to us by those we hired. Virtually none had what they claimed.

5) We had to redo shoddy work too many times.

6) We had to fire some people.

7) We overshot both the budget and duration.

8) We learned many did not have strong work ethics.

**Outcome:**

We are languishing to complete, 2 months over budget and down to two workers.  We had cycled through 12 people. 

Next time we will vet skills in a major way, hire just one tech lead to start. The lead will collaborate with me and new hires picked after vetting and only when needed. The tech leader will make most decisions e.g. who to hire and when; who to fire and to do the low level design.

No fixed job bidding to the customer. 

**Summary**

Project was small enough to recover. Not a total failure, but close. Almost all issues were that I did not manage things closely. Instead I trusted too much.
Easy Accessibility: <button> vs <a>
Tags: html, a11y, webdev, beginners
Published: 2020-01-12 20:12:27

<p>Hello, I'm back with another quick accessibility tip! This time, it's a bit of HTML semantics.</p>

<p>A lot of times, front-end developers will use < a > and < button > interchangeably. The truth is, this is completely wrong! Using the correct tag is very important for a11y, since the expected functionality is incredibly different between the two, and screen readers will give different hints to users based on the type of tag. Additionally, I find that using proper semantic HTML makes your code much easier to read as well!</p>

<h2>When do I use the < a > tag?</h2>

<p>The < a > tag should be used for links, and links only! If it takes you to a different page or scrolls you to a different part of the page, it's an < a > tag.</p>

<p>A good rule of thumb: if you aren't using a meaningful href attribute, use a button!</p>

<h2>When do I use the < button > tag?</h2>

<p>The < button > tag should be used for an element which will execute a script when it is clicked. A good example is having a < button > which will open a modal on click. </p>

<p>This could obviously be a billion things, but often times, developers will use < a > tags when they should use < button >s since they want it to be styled like one. However, the< button > element can very easily be styled to look exactly like an < a > tag, so there is no excuse for using it where you shouldn't be! </p>
node server side rendering (SSR)
Tags: node, ssr, javascript
Published: 2020-01-12 19:52:11

there seem to be plenty of articles on node server side rendering (SSR) of HTML & CSS but what about SSR of JS ?

https://ssr.vuejs.org/#what-is-server-side-rendering-ssr

https://dev.to/gophobic/solving-the-eternal-seo-problem-and-providing-ssr-for-modern-javascript-websites-without-writing-a-single-line-of-code-1ll7

https://dev.to/coderdannn/5-issues-i-encountered-while-converting-a-create-react-app-to-ssr-and-how-i-solved-them-4lje
NextJS Boilerplate
Tags: nextjs, react, serverless
Published: 2020-01-12 19:51:26

I've gladly uploaded ReactSSR with NextJS boilerplate to Github 
https://github.com/mohammadou1/nextjs-boilerplate

it contains many nice features to make it easier to start on your next NextJS project 

if you don't know what is NextJS
it's react server-side framework that is very powerful

this boilerplate contains the following:

1- Multi-language support, RTL and LTR support.
2- Authentication HOC, to redirect visitor from protected routes and to prevent authenticated user from visiting pages such as login.
3- Reactstrap, Google analytics, SCSS, import from root, layout and locale switcher.

please feel free to suggest new features to add them.
Hopefully it will help you in the future.

didn't add any store management such as redux or mobx in case you wanted to implement your own. but might do that according to your suggestions.
Simple GraphQL API with Express and MongoDB
Tags: replit, node, express, graphql
Published: 2020-01-12 19:49:38

After learning GraphQL and building my first ever GraphQL API (check out https://twentyfourseven.margaiwangara.me for react app) by consuming the TMDB REST API using Express and creating an interface using React.js, I decided to challenge myself to see if I could utilize the same concepts and combine it with my knowledge of MongoDB and Express to create a database and perform a single CRUD operation. Finally, this is what I was able to achieve in a few minutes.

To run the app and try it out, check out the index file in my 'models' folder and add the MongoDB connection string.


{% replit @margaiwangara/ForcefulAuthenticEngineer %}
Downloading GAL as individual vCards using OWA
Tags: javascript, owa, gal, vcard
Published: 2020-01-12 19:30:21

Some time ago, a friend asked me about syncing Exchanges's GAL (Global Address List) with a mobile phone. So I started looking into Exchange Web Services, but as it turns out I need GAL id in order to query it.  And to get it I need either more privileged access to Office 365 tenant or snoop OWA's traffic as described in the article: https://gsexdev.blogspot.com/2013/05/using-ews-findpeople-operation-in.html

Looking at the network log in a browser I figured that I could effectively do everything within a browser ran from Puppeteer and send it to Radicale CardDAV server.

But as it turned out, one required field, "Pager", was not present in Exchange's Persona object. So good old "copy everything from GAL into Contacts" worked, at least for one-off sync, and this idea was abandoned.

Here is JavaScript PoC that can be used to download GAL as vCard files. Bear in mind that it doesn't have any error handling and might not work in every browser. It works in Chrome. Generated vCards are not 100% by specification since I'm serializing whole persona object into it, but I haven't had any issue opening it in Windows (People app), Outlook or on iOS/Android phones.

Before posting this I just cleaned up code a bit and replaced XHR with fetch. 

How to use in 5 steps:
1. Open https://outlook.office365.com/people/ in a browser and sign in with your O365 account
2. Open browser's console
3. Paste this script
4. Run one of the functions, suggestion is to test with OwaGalExtractor.downloadGal(null, 5)
5. Look at a bunch of file being downloaded (chrome might ask you to allow multiple file download) 


{% gist https://gist.github.com/milolav/11f41263f3c9653a97b3530d42bafccd %}
Register your Raspberry Pi as a Managed Instance on AWS
Tags: aws, raspberrypi
Published: 2020-01-12 19:14:53

---
description: "Configure your Raspberry Pi so that you can manage it via AWS"
tags: aws, raspberrypi
---

## Prerequisites
* Access to a Raspberry Pi
* An AWS account

## Contents
1. [Create a Managed Instance Activation](#create-a-managed-instance-activation)
2. [Install SSM Agent on your Raspberry Pi](#install-ssm-agent)

## Create a Managed Instance Activation
Log into the AWS online console. Navigate to the Systems Manager console by clicking on 'Services' and searching for 'systems manager'. The console should look similar to this:

![Systems Manager Console](https://thepracticaldev.s3.amazonaws.com/i/tmqy8me1yspy44p1cnp8.png)

On the left sidebar, scroll under Instances and Nodes and click on **Hybrid Activations**. Click **Create an Activation**.

In the 'Create Activation' page, fill out the following fields:

**Instance Limit** - The number of Rasberry Pies you want to register using this particular activation.

**IAM Role** - Use default role

**Activation Expiry Date** - Any expiration date in the future. If you want to register more devices after the activation has expired, you will need to create a new activation.

**Default Instance Name** - Raspberry Pi

![Create activation page](https://thepracticaldev.s3.amazonaws.com/i/ahe4iu3hsmdgt8uxgwpr.png)

Click 'Create activation'. When you are redirected to the Activations page, **record the Activation Code and Activation ID** that is provided to you.

![Activation code and activation id](https://thepracticaldev.s3.amazonaws.com/i/7nwxie18qczpig9op644.png)

## Install SSM Agent

Make sure your Raspberry Pi is up to date:
```bash
sudo apt-get update
sudo apt-get upgrade
```

Install Amazon SSM Agent:
```bash
sudo curl https://s3.amazonaws.com/ec2-downloads-windows/SSMAgent/latest/debian_arm/amazon-ssm-agent.deb -o amazon-ssm-agent.deb
sudo dpkg -i amazon-ssm-agent.deb
# remove amazon-ssm-agent.deb once package is installed
rm amazon-ssm-agent.deb
```

Register your Raspberry Pi as a managed instance!
```bash
sudo service amazon-ssm-agent stop
sudo amazon-ssm-agent -register -code "activation-code" -id "activation-id" -region "region"
```
Replace *activation-code* and *activation-id* with the activation code and id you recorded earlier. Replace *region* with a region name, such as `us-east-1`. Start amazon-ssm-agent again so it can communicate with AWS.

```bash
sudo service amazon-ssm-agent start
# You may find yourself stuck in the logs that follow once you 
# run this command. Ctrl + C will get you out of this,
# and won't close your pi's connection to AWS.
```

Return to the AWS Systems Manager console. In the sidebar, navigate to **Managed Instances**. You should now see your Raspberry Pi registered as a managed instance!

![Raspberry Pi registered as a managed instance in console](https://thepracticaldev.s3.amazonaws.com/i/rbys4l7f7glxe8fkaskg.png)
My Setup
Published: 2020-01-12 18:47:17

---
title: My Setup
published: true
description: My setup
tags: 
---

## Editor

* Editor: [Visual Studio Code](https://code.visualstudio.com/)
* Theme: [Dark-Dracula](https://marketplace.visualstudio.com/items?itemName=gerane.Theme-Dark-Dracula) with some color customizations
* Font: [Roboto Mono](https://fonts.google.com/specimen/Roboto+Mono)
* Extensions:
  * [Beautify](https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify) (for HTML & CSS formatting)
  * [Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)
  * [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
  * [Bracket Pair Colorizer 2](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2)
  * [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
  * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)
  * [Markdown All in One](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one) (for shortcuts like ctrl+b for bold)
  * [Markdown Preview Enhanced](https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced) ([customize CSS](https://shd101wyy.github.io/markdown-preview-enhanced/#/customize-css) to keep my editor dark but preview light)
  * [markdownlint](https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint)

## Gear

* Keyboard: [Aukey Mechanical Keyboard with Blue Switches](https://www.amazon.com/gp/product/B01IRASQA0/ref=ppx_yo_dt_b_search_asin_title?ie=UTF8&psc=1)

* Mouse: [VicTsing MM057 2.4G Wireless Mouse Portable Mobile Optical Mouse](https://www.amazon.com/gp/product/B013WC0P2A/ref=ppx_yo_dt_b_search_asin_title?ie=UTF8&psc=1)

* Monitors: [Acer S241HL BMID 24-Inch Widescreen LCD Monitor](https://www.amazon.com/gp/product/B00CBNIXHQ/ref=ppx_yo_dt_b_search_asin_title?ie=UTF8&psc=1)

## Productivity

* To-Do List:
  * [Todoist](https://todoist.com/) for my dump of to-do items.
  * A notebook to write my top things that need to be done, and any other notes throughout the day as needed.
* Calendar:
  * [Google Calendar](https://www.google.com/calendar) for scheduling events for home
  * Microsoft Outlook for tracking time and scheduling meetings for work
clean code is over rated
Published: 2020-01-12 18:44:47

---
title: clean code is over rated
published: true
description: 
tags: 
---

I read this article: https://overreacted.io/goodbye-clean-code/

I have a tendency to write dirty/ugly code almost always. I tend to go for simple stupid. Mainly with the thought that I will need to work on it at 2:00 am after no sleep.

There is a spot where cleaning up code makes sense. Usually if I have some number (2 or more) of the same code I start looking to bring it together. Even then it is a judgement call.

Sometimes it is pain based development. Does having 2 copies of this code cause me pain? Or have I put bugs in PROD because of the duplication? Then I should look to simplify the code.

One other thing from the article that you can learn is always talk to a maintainer if you are removing duplicated code. There might be reasons it is there. They may love your changes too. Be polite and ask.
How to start another activity on button click using Kotlin
Tags: beginners, kotlin, android, 100daysofcode
Published: 2020-01-12 18:44:43


In this tutorial you will learn how to start another activity when a button is clicked. We will begin from scratch(starting a new android studio project)

##  Start a new Android Studio Project
 


![](https://thepracticaldev.s3.amazonaws.com/i/iehgs0uyhkjdjl47gjjk.png)




On the activity_main.xml add a textView and a button. Here is is what you can use
      





    <TextView
        android:id="@+id/textView"
        android:layout_width="292dp"
        android:layout_height="63dp"
        android:layout_marginEnd="60dp"
        android:text="Click on the button to open another activity!"
        android:textSize="18sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.446"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.459" />

    <Button
        android:id="@+id/button"
        android:layout_width="159dp"
        android:layout_height="63dp"
        android:text="Click Me!!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView"
        app:layout_constraintVertical_bias="0.197" />

 
![](https://thepracticaldev.s3.amazonaws.com/i/dc769gt4kv3fm614cv2p.png)

## Create a new second activity

app>>java>>new>>activity>>Empty activity

![](https://thepracticaldev.s3.amazonaws.com/i/hagojonz6oclqmz2ccq0.png)

 From the second activity you can add an imageView and textView

  You now have two activities, the main activity and the second activity. Now all we have to do is to add functionality to the button in the (MainActivity.kt)




    


    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val button = findViewById<Button>(R.id.button)
            button.setOnClickListener{
                val intent = Intent(this, second::class.java)
                startActivity(intent)
            }
    }





    
Now run your app on your emulator or hardware device
 
You will get something like this

![](https://thepracticaldev.s3.amazonaws.com/i/gslq49haee69kjq02j91.png) ![](https://thepracticaldev.s3.amazonaws.com/i/tnxjv0cs7rjzwrj5un16.png)


Check out the Source Code on [GitHub](https://github.com/carolinemusyoka/demo)

That’s a wrap for this post. We have learnt how to start another activity on button click for our app’s first time users. 

My ‘images’ don’t quite match with the ones you see on the Drive app :smile:. But I’m sure you can come up with something better! Drop ’em in the comments below.
The Swift Programming Language Companion: Control Flow
Tags: swift, ios, beginners
Published: 2020-01-12 18:21:13

This article is part of a series on learning Swift by writing code to The Swift Programming Language book from Apple.

Read each article after you have read the corresponding chapter in the book. This article is a companion to [Control Flow](https://docs.swift.org/swift-book/LanguageGuide/ControlFlow.html). 

### Set up a reading environment

If you are jumping around these articles, make sure you read the [Introduction](https://dev.to/loufranco/the-swift-programming-language-companion-introduction-4k0a) to see my recommendation for setting up a reading environment.

### Exercises for Control Flow

At this point, you should have read [Control Flow](https://docs.swift.org/swift-book/LanguageGuide/ControlFlow.html) in _The Swift Programming Language_. You should have a Playground page for this chapter with code in it that you generated while reading the book.

#### Sections

The chapter covers loops and conditional statements.

For these exercises, we are going to continue using the Reminders app as inspiration for examples. We already saw `for` loops for many of those examples—now we'll take them further.

In your Playground write code to do the following:

Copy the `todo` and `done` arrays that you made in the [previous chapter](https://dev.to/loufranco/the-swift-programming-language-companion-collection-types-2kko).

1. Add more elements to both arrays and then recreate the `itemDict` so that it has all of the elements.

1. Use a `for in` loop to print out the values in the `todo` array

1. Use a `for in` loop with a `(key, value)` to iterate over the `itemDict` and count the number of items that are done.

1. Use a `while` loop to print two items from the `todo` array. 
   Hint: start with:
      `var itemsToPrint = 2`
      `var i = 0`
   and use `i` as an index into the `todo` array. You will use both `itemsToPrint` and `i` in the `while` conditional.

1. Write that same loop using `repeat-while`.

1. Change `itemsToPrint` to `3` and note what happens to each loop. Now change it to `0` and note what happens.

1. Write the same loop using `for in` on `todo` and `break` when you have printed enough items.

1. Write the same loop using `for in` on `itemDict` and `break` when you have printed enough items. Remember, we just want the `todo` items (the keys with their associated value set to false)

1. Write the same loop as above, but use `continue` when you encounter a `done` item (check for that first).


### Next: 

The next article will provide exercises for the [Functions](https://docs.swift.org/swift-book/LanguageGuide/Functions.html) chapter.
How to reduce your redux boilerplate by up to 80% - reduxios
Tags: redux, react, axios, restapi
Published: 2020-01-12 17:48:21

---
title: How to reduce your redux boilerplate by up to 80% - reduxios
published: true
description: Simplify redux logic for data fetching - reduxios
tags: redux, react, axios, REST API 
---

# `reduxios`- Reduce your redux boilerplate by 80% in 4 simple steps

**This library provides utility functions specifically for handling reducers and actions related to data fetching which helps to decrease redux data fetching code by about 80%**

## Installation
```
npm install reduxios
# or
yarn add reduxios
```

## Example Usage in 4 simple steps

- **Generate the helper with the basename for action types**

```ts
import { reduxios } from "reduxios";

export const booksStoreFetcher = reduxios<Book[]>("FETCH_BOOKS");
```

-  **Create the Reducer, which will handle various Fetch states.
    It takes the initial data as an argument**

```ts
export const booksReducer = booksStoreFetcher.createReducer([]);
```

-  **Makes the action hook for Fetching your data or calling the API.**

```ts
import axios from "axios";

export const useFetchBooks = () => {
  return booksStoreFetcher.useResource({
    axiosInstance: axios, // This can also be an axios instance created
    method: "get",
    url: "/books"
  });
};
```

- **Use the action hook and state in your component. No need to dispatch the action.**

```tsx
const BooksList: FC = () => {
  const fetchBooks = useFetchBooks();
  const { data, fetchState, axiosErrorResponse } = useSelector(
    (state: RootState) => state.books
  );

  useEffect(() => {
    fetchBooks();
  }, []);

  return (
    <div>
      <h1>My Book List</h1>
      <ul>
        {data.map(book => (
          <Book key={book.id} book={book} />
        ))}
      </ul>
    </div>
  );
};
```

**That's it! No need to manually write out action creators, type declarations, reducers and data fetching attempt/success/failure/reset handling. You get everything out of the box!**

## Want More Detailed Explanation?

[Check the Github Repository here](https://github.com/Oyelowo/lib-steroids/tree/master/packages/reduxios-only)