teleren/devto huggingface dataset:
React in 20 minutes
Tags: react
Published: 2021-02-08 19:57:27

Developers new to react can take these steps to get started. 

**Prerequisites** 
- Install Visual Studio Code (VSC)
- Install Node 

**Get Going**

- Create a folder named "source"
- Open VSC to that folder. 
- In VSC click on Terminal then New Terminal
- Type this in the new terminal to install react: 

```javascript

npm i react
```
- Create a react project, from the terminal.

```javascript
 npx create-react-app my-app
```
This command says "from the node_modules folder (npx), call the command 'create-react-app' and name the project my-app.

- In VSC type in File/Open Folder and select the folder my-app.

The project should look like this:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dpi75u1xqkifcb1lh6kt.jpg)

- Start the application:

```javascript

npm run start

```

That's it, Congratulations! for installing and seeing your first react application.


This is what the App.js file contains:

```javascript
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

```

JWP2021 React
Coding Diary 1: Time zones and Python datetime
Tags: python, programming
Published: 2021-02-08 19:49:47

After a decade of surviving without understanding time zone properly, I've managed to learn about the topic today. I also learnt how to use Python datetime with timezone information.

I had always thought that time zones were something like UTC+7. Turned out it was wrong. It's a time offset, and time offsets are different from time zones.

A time offset is a number of hours before or after UTC. In some case an offset can be a number of hours and minutes. Examples of offsets are UTC-0500, UTC+0600, etc. With your time zone's offset, you can translate between UTC time and your time. Let's say you're living in Seattle summer, your offset will be UTC-0700. That means at UTC 00:00, you're still in the previous day at 17:00. When you're at 00:00, the UTC time is 07:00.

A time zone is a region on Eeath where every one shares a same clock. A time zone contains a location-related name or an identifier, and usually one offset. In some case a time zone can contain multiple offsets. I call those "umbrella" time zones, as they contain multiple time zones. Pacific time zone is such an "umbrella" one. It contains PDT and PST. Examples of time zones are "Central Standard Time", "Pacific Daylight Time", etc.

The West like complicating things so they change their time zone every 6 months.

There are a couple of time zone databases. The standard one, that is implemented in Linux, Mac, and most programming languages, is IANA/Olso Time Zone Database, AKA the TZ database. Identifiers in this database is super familiar, such as "America/Los_Angeles". The other database is a Microsoft one and I've decided to ignore it for now.

## Python datetime
The Python datetime class, `from datetime import datetime`, can be either 'naive' or timezone-aware. By default, `datetime` objects are naive, as they don't contain any timezone information. We can make it aware of time zones by setting non-null `tzinfo` attribute to the objects. `pytz` is a common implementation of `tzinfo`.

Following code shows that, by default, `datetime` objects are "naive":
```
>>> from datetime import datetime
>>> now = datetime.now()
>>> print(now)
2021-01-30 21:58:20.419069
>>> print(now.tzinfo)
None
```

We can make it timezone-aware:
```
>>> now_with_tz = datetime.now(tz=pytz.timezone('America/New_York'))
>>> print(now.hour, now_with_tz.hour)
21 1
>>> now_with_tz.tzinfo
<DstTzInfo 'America/New_York' EST-1 day, 19:00:00 STD>
```
@Appstorage in SwiftUI
Tags: swift, ios, swiftui
Published: 2021-02-08 19:43:24

---
title: @Appstorage in SwiftUI
published: true
description: 
tags: #swift #ios #swiftui
//cover_image: https://direct_url_to_image.jpg
---
<!-- wp:paragraph -->
<p><strong><a href="https://developer.apple.com/documentation/swiftui/appstorage">Appstorage</a></strong> is a property wrapper for getting stored values from <strong><a href="https://developer.apple.com/documentation/foundation/userdefaults">UserDefaults</a></strong> in SwiftUI. We use <strong>@Appstorage</strong> too reload our body view property whenever the value changes of our <strong>UserDefaults</strong>. This keeps our view up to date with the data that we have stored. Let's take a look at an example on how we can use <strong>@Appstorage</strong> in our SwiftUI project.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>import SwiftUI

struct ContentView: View {
    @AppStorage("isCookieTime") var isCookieTime = false
    
    var body: some View {
            Toggle("Cookie time", isOn: $isCookieTime)
        .padding()
    }
}</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>In the example above we have a Toggle view for "Cookie time" 🍪. We use our <strong>@AppStorage</strong> property to watch our <strong>isCookieTime</strong> variable. If the value changes it is then stored in our <strong>UserDefaults</strong>. Now our toggle will show the stored value depending on the <strong>@AppStorage</strong>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p> A example of where I use <strong>@AppStorage</strong> is for storing things like a users settings options in a settings screen of an app. I hope this helps explain how to use <strong>@AppStorage</strong> in SwiftUI. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Thanks for reading and happy coding.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":1502,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://swifttom.com/wp-content/uploads/2021/02/storageFull.jpg" alt="" class="wp-image-1502"/></figure>
<!-- /wp:image -->
setUrl() for WP endpoints

Published: 2021-02-08 19:22:05

### What it is?
A little js function to pass a wp endpoint url that updates itself if you upload from your local - to your live website!
### Why?
Lately I did that and forgot to update my local - to my live endpoint url. The result was that when navigating on my live I ended up on my local and what is not intended. Also, on chrome it invalidated my ssl certificate too!
#### The code:
```javascript
async function setUrl(namespace, endpoint){
    if((namespace !== null) && (endpoint !== null))
        return `https://${location.hostname}/wp-json/${namespace}/${endpoint}`;
    else
        return console.error('enter a namespace and/or an endpoint');
}
```
#### Example: 
```javascript
const response = await fetcher.fetchData(await setUrl('my/namespace','my_endpoint'),{ //other stuff });
```
#### Note:
I'm using a js class here for this example and is out of scoop of this post.
Also, feel free to use this little snippet, for sure without any warranty or reliability!
The Myth of Multitasking: Why Fewer Priorities Leads to Better Work
Tags: productivity
Published: 2021-02-08 19:17:28

I know you don’t want to hear it. But multitasking isn’t effective. In this day and age of extreme busyness and “how much can we get done in a day” mentality, everyone is trying to do more — all at once.

[Read full story](https://blog.doit.io/the-myth-of-multitasking/)
Getting along with Git & Github
Tags: beginners, github, productivity, webdev
Published: 2021-02-08 19:07:53

A no non-sense reference for developers by a developer. Read [here](https://medium.com/katte-io/getting-along-with-git-github-e1fb7e25d059?source=friends_link&sk=50f0fab75e5bebade84161e0af702a7e)
MongoDB: Connect to the Mongo Driver - Series #07
Tags: mongodb, javascript, database, express
Published: 2021-02-08 19:02:25

## Intro

This is our lowest level code for establishing a connection to the Mongo database.


```js
import { MongoClient } from "mongodb";
import env from "@root/mid-libs_node/bl/envs/processEnv";


const opt = {
  useNewUrlParser: true,
  useUnifiedTopology: true,
  connectTimeoutMS: 60000,
};


/*
@func
get a connection obj to atlas mongodb

@return {Promise<MongoClient> | null}
*/
const mongoAsync = async () => {
  try {
    return await MongoClient.connect(env.mongoUriAtlas, opt);
  } catch (err) {
    console.error("mongoAsync: CATCH: err.stack... ", err.stack);
    return null;
  }
};

export default mongoAsync;
```


## Notes

1.
We import the npm library, which is the Mongo Driver software that allows us to establish a connection to Mongo

2.
We import our database credentials from the git-ignored ".env" file.

3.
We set our options.
The first two options removing warning flags.
I set the connection timeout a little higher to facilite the pushing of multi-megabyte catalogs and corpora (the plural of corpus) of data.

4.
This wrapper func returns the Mongo client object, which gives your code full power.

5.
The responsibility is on the client code to close the connection.
(I'll show the idiom for that later in the series)

6.
"Atlas" is the name of the MongoDb company's DBaaS (Database as a Service) offering.

7.
That's about it. It's really just a simple wrapper.


## What's Next

If you have any questions let me know.

Next I'll show you a couple example of using this wrapper around the Mongo Driver; so you can write fast—sometimes single-line—database queries.
Named Parameters in Dart, Swift and Python
Published: 2021-02-08 18:27:02

---
title: Named Parameters in Dart, Swift and Python
published: true
description: 
tags: 
//cover_image: https://source.unsplash.com/AgIQYZNtrEE/1600x900
---

In software development, we optimize for readability since code is read more than its written. Named parameters are one way to improve code readability. Let's say we have a function that calculates the distance between two points. Let's take two-point `Point` class instances representing the start and end positions. When calling the functions, using positional arguments it's not very clear what is being referred to.

In Python:

{% gist https://gist.github.com/lenniezelk/d80e6e2bbf9ab513654aa97e43f37fc6 %}

In Dart:

{% gist https://gist.github.com/lenniezelk/9edb982793fda8440be6d22219f96129 %}


In Swift:

{% gist https://gist.github.com/lenniezelk/100a5abd8670331750435a8b0ff719de %}

On the other hand, using named parameters makes function calls more expressive, it's clear to the reader what the arguments represent. This becomes helpful particularly as the number of arguments grows. Let's add one more argument. In the examples below when calling the functions it's not very clear what the third argument is when it's being read.


{% gist https://gist.github.com/lenniezelk/fa6f6cd79647c97c2997160a0998d028 %}

{% gist https://gist.github.com/lenniezelk/18d19b34c43454518b3195f704d0576f %}

{% gist https://gist.github.com/lenniezelk/694317b02b1abb74cd322fadb8f795a0 %}

Using named parameters is really helpful in such a situation. In the three languages, it's possible to specify that the parameters should be passed as named parameters. In Python, we can add a `*,` before the parameters, in dart we can add curly braces around the parameters, and in swift, we can remove the underscore before the parameter names.

{% gist https://gist.github.com/lenniezelk/1ca8b8c2615e45b779d074c4a57bd7c7 %}

{% gist https://gist.github.com/lenniezelk/dfe21e1755ca663ec82b2ea8bf017778 %}

{% gist https://gist.github.com/lenniezelk/19c64a6b97bc7c6be70cf8d9f6e508d6 %}
One Liner to Create and Move into a Directory (combining mkdir + cd)
Tags: bash, zsh, cli, productivity
Published: 2021-02-08 19:01:10

Almost every new project seems to start with the same thing:

```sh
$ mkdir new-project
$ cd new-project
```

In a GUI we would be stuck; but in the command line, we can make this one command instead of two!

Let's make a little function called `mcd` (for make and change directory). First we need to make the directory:

```sh
mcd() { mkdir "$@" }
```

The `"$@"` refers to all the arguments given to `mcd` when it is used. At this point, we've basically made a round about `alias` for `mkdir`. So how about adding the `cd` part now?

```sh
mcd() { mkdir "$@" && cd "$@" }
```

And this _kind of_ works. The problem is `mkdir` can receive a whole bunch of flags and even multiple directories to create at once, but `cd` really only expects one argument, the directory to move into. The good thing about how these commands are structured is `mkdir` expects the last argument to be a directory, which makes it easy for us to pick out the one directory that was created (or if many were created, pick out the last one created) using `"$_"`, which refers to the last argument of the previously executed command.

```sh
mcd() { mkdir "$@" && cd "$_" }
```

And we could be done here, but I added one more thing. If `mkdir` prints errors, they will all be written in terms of `mkdir`. But that makes little sense to someone who just ran a command called `mcd`. I fixed that with `sed` and some redirection:

{% gist https://gist.github.com/kallmanation/2027bb23242e59cb90141c803ffe2703 file=mcd.sh %}

For more examples of how this is used, check out [my gist](https://gist.github.com/kallmanation/2027bb23242e59cb90141c803ffe2703).
Improving readability of Python code
Published: 2021-02-08 18:36:23

---
title: Improving readability of Python code
published: true
description: 
tags: 
//cover_image: https://source.unsplash.com/x2Tmfd1-SgA/1600x900
---

Readability of code as defined in Wikipedia:
```
In computer programming, readability refers to the ease with which a human reader can comprehend the purpose,
control flow, and operation of source code
```
Python is one of the most readable programming languages out there but we can still improve this more by the following software
development best practices and tools provided by Python core language and the Python community. By software development best practices
I am referring to writing clean code. Watch things like:

* Use good descriptive variable and function names
* Follow SOLID principles
* Keep functions short
* Follow coding conventions for your programming language e.g PEP8

For Python, type hinting is also a good option since version 3.5. This will be my main focus for this article.

In this article I am only going to refer to tools specific to Python, later I will add another article on SOLID with examples in Python.
Python uses duck typing to determine the type of a variable. This usually leads to criticism where people say it reduces
readability and I agree with them. I have been using Python for the past five years and it's annoying having to read a
function body in order to know the type of parameters passed in. If it's a dictionary passed in or tuple it's worse because you
have to look through the code to know the type of keys and values of the `dict`. I've had to add print statements to determine
the type being passed in.

```
#!python
def check_status(project, date):
    pass
```

In the code above `project` and  `date` could be anything. Proper naming of the variables helps but still, `project` could
be an `int`, the project database id, or a user-defined class instance. `date` could be an `int` or `datetime.date` object.
This is the problem typing module was added to solve. I don't think types within the function body are a huge deal since
you can usually determine this from the context, even in Kotlin you don't have to specify the type when declaring a variable
it can usually be inferred from the context.

With Python's type hints, you can specify the parameter being passed to a function.

```
#!python
from datetime import date

from .projects import Project

def check_status(project: Project, date: date):
    pass
```

I'm a huge fan of namedtuples, they have a smaller memory footprint compared to classes and are more descriptive than tuples. Typing
takes their descriptiveness to a new level. You can specify the type for the field names.

```
from typing import NamedTuple

class Truck(NamedTuple):
    num_wheels: int
    num_axles: int
```
Setting up Dart for Local Development
Published: 2021-02-08 18:33:00

---
title: Setting up Dart for Local Development
published: true
description: 
tags: 
//cover_image: https://source.unsplash.com/acNPOikiDRw/1600x900
---
I've been learning Flutter for mobile development lately. I like the journey so far and I'm going to be posting stuff I learn along the way. First, I'll show how to set up Dart for local development. I use `asdf` for managing different versions of language runtimes on my local machine. I found out about it when trying to set up different Python versions. My dev machine comes with Python 3.7 but at work, we use Python 3.6 and I like having the exact version in use. What to do? `asdf` to the rescue. `asdf` has a plugin system that allows the installation of different language runtimes for example you can install Python 3.5, 3.6, and 3.8 on the same machine and switch between them. A lot of languages are supported you can find these [here](https://asdf-vm.com/#/plugins-all).

To setup `asdf` run:

```
#!shell
git clone https://github.com/asdf-vm/asdf.git ~/.asdf --branch v0.7.2`
```

Replace `0.7.2` with the latest version which you can find [here](https://github.com/asdf-vm/asdf/releases). Next add `asdf` to your shell like so:

```
#!shell
echo -e '\n. $HOME/.asdf/asdf.sh' >> ~/.zshrc
echo -e '\n. $HOME/.asdf/completions/asdf.bash' >> ~/.zshrc
```

Remember to replace `.zshrc` with your shell-specific config file e.g .bashrc. Reload your config file `source .zshrc`. You are good to go.

Now let's set up dart. We begin by installing the dart plugin:

```
#!shell
asdf plugin-add dart
```

Now we can install dart sdk and tools by running:

```
#!shell
asdf install dart 2.3.1
```

Replace 3.2.1 with the latest version or the version you want. You can find these [here](https://github.com/dart-lang/sdk/releases). You need to choose a global version. This is the version that will be run when you type `dart` in any shell. You can do this by:

```
#!shell
asdf global dart 2.3.1
```

You can also set a version to be used only in the current shell:

```
#!shell
asdf local dart 2.3.1
```

Happy darting.
Free video course: Learn the new Visual Studio 2019 Git experience, Part 1, local Git repos
Published: 2021-02-08 18:32:02

As an occasional independent developer, I spent countless days trying to learn Git. Nearly all of the videos, blogs, and books assume you know a whole lot about software development and Git. I knew enough to get by, so most of the training went over my head.

A few years ago, I finally decided to stop trying to learn Git and instead write my code and figure Git out along the way. Most importantly, I did not want to use the command line. I decided that command-line experience would come over time, so I wanted to use Visual Studio 2019's user interface as an intermediary for Git. So far, it has worked out great, and I even created a video series to teach you how to use the product.

In the latter half of 2020, Microsoft released their _New Git User Experience_, so I figured it was time to refresh the video training series, so without further ado, let me introduce you to the first course.

## Course #1: Learn how to use Git locally
Please do not allow the length of this video to be too daunting. I take things nice and slow so you can follow along, hopefully without constantly pausing and rewinding.

{% youtube gkDASVE_Hdg %}

### Outline
In this video, I show you all the basic steps needed to get up and running with Git source control using Visual Studio 2019. Specifically, the _New Git User Experience_ Microsoft introduced in the year 2020.

### Experience required
You should have some working experience with the Visual Studio 2019 user interface.

### Learning objectives
1. How to configure Visual Studio to use Git source control
2. Create a project and add it to a local Git repo
3. Create a branch to fix a bug or add new features
4. Learn how to find important files, like `.gitignore` and `.gitattributes`
5. Modify code and commit those changes for testing
4. Merge branches back to the mainline, so my code has the new features or bug fixes

Even if the terminology I use above is unfamiliar to you right now, you will learn it in this video. Most importantly, I only edit one, maybe two lines of code, and it will be changing some basic Hello World text.

I create these videos as a hobby and hope to make a little money off ads. You would be doing me a big favor if you subscribe to my channel, sign up for notifications, like the video, and finally, leave a comment if you feel so inclined.
How to Run A Flutter App on Genymotion
Published: 2021-02-08 18:30:51

---
title: How to Run A Flutter App on Genymotion
published: true
description: 
tags: 
//cover_image: https://source.unsplash.com/zLJMOjUr61k/1600x900
---
To run flutter apps for android development you have the option of running the app on android studio AVDs or genymotion. I prefer genymotion since I find more lightweight and I can run vagrant boxes usually for the backend of the application. This is not possible with AVDs. Flutter fails to recognize the devices created using genymotion. After searching around the internet I could not find a solution so I'm going to post what worked for me.

Ensure you have installed the Android SDKs for the target platforms. You can do this from the SDK manager in Android Studio. Launch Genymotion. On the menu bar go to: `Genymotion > Settings`. This will launch a dialog box. Select `ADB` in the dialog. Enter the path to your Android SDK folder. For example on my local setup this is `/home/lk/Android/Sdk`. Restart Genymotion and launch your devices. I had some problems with devices I had created before I made these changes. In this case I deleted and recreated them. When you run `flutter devices` your launched device should appear now. Run `flutter run` to launch the app. Happy fluttering.