teleren/devto huggingface dataset:
Day 86 Of 100DaysOfCode: Wrote Blog For Project
Tags: womenintech, codenewbie, 100daysofcode, beginners
Published: 2021-03-25 16:03:41

Today is my 86th day of #100daysofcode and #python learning journey. Talking about the today's progress keep learning from [DataCamp](https://campus.datacamp.com/courses/supervised-learning-with-scikit-learn/classification?ex=3). Start writing blog for project. I think it will take 2 to 3 day. Finally I created virtual environment.
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Day 86 Of <a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a> and <a href="https://twitter.com/hashtag/Python?src=hash&amp;ref_src=twsrc%5Etfw">#Python</a> <br>Today&#39;s progress are,<br>* Wrote Blog for project<br>* Created Virtual Environment<br>* Keep Learning from [DataCamp](<a href="https://t.co/Nm5rZOCe1e">https://t.co/Nm5rZOCe1e</a>)<a href="https://twitter.com/hashtag/WomenWhoCode?src=hash&amp;ref_src=twsrc%5Etfw">#WomenWhoCode</a> <a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a> <a href="https://twitter.com/hashtag/CodeNewbie?src=hash&amp;ref_src=twsrc%5Etfw">#CodeNewbie</a> <a href="https://twitter.com/hashtag/DEVCommunity?src=hash&amp;ref_src=twsrc%5Etfw">#DEVCommunity</a> <a href="https://t.co/X3r352gffk">pic.twitter.com/X3r352gffk</a></p>&mdash; Durga Pokharel (@mathdurga) <a href="https://twitter.com/mathdurga/status/1375113653582635013?ref_src=twsrc%5Etfw">March 25, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Building a React Cine World - Movie Application using typescript
Tags: typescript, react, javascript, css
Published: 2021-03-25 15:56:06

This blog post is about will give you complete knowledge about how to start with React & Typescript and the common view component 

Keep in mind that if you get stuck on any step, refer to the [Github repo](https://github.com/selvaece25/react-cine-world-ts-app)

To find the completed project, [Demo link] (https://nlxgq.csb.app/)

### This is what we are going to create:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rkk99fsg33u33fursw40.gif)

### Our project's structure:

Before we begin let's talk about how our project is going to be organized.
 
Once we create our React app using create-react-app, we will have our base React app. Once inside that application, we will create a component pattern and Our folder structure will look like the following:

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

### Our goal today is to:

1. Create a new React cine world Movie App
2. Have [Themoviedb Api](https://www.themoviedb.org/documentation/api) account setup and generate API KEY
3. Using React Routing, be able to navigate our app

#### Generate project with CreateReactApp:
I often (to not say always 😁) use Create React App to initiate my React projects.

In order to generate our project run :
```javascript
npx create-react-app my-app --template typescript
```
#### API :
The frontend will have to fetch the data from an API, I choose Themoviedb 🎬 : It's free, we just create an account to get your API key

let's start coding. 

#### Building our React components

In this application, we are going to have fives pages for templates:

* All Movies List with Filter
* All Movies List with Sorting
* Movie details with Production companies list

Let’s create those files. In the src/ folder, create the following folder: src/pages. Within that newly created folder. 

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

#### Setting up React Router:

To get React Router going, we are going to need to install our dependency. In the project, run the following command:
```javascript
npm install --save react-router-dom
```

create router.ts file, copy and paste this code :

```javascript
import * as React from "react";
import { Route, BrowserRouter } from "react-router-dom";
import Header from "./components/header";
import { ListController } from "./pages/movie-page/movie-listing-container";
import { ItemController } from "./pages/movie-page/movie-details-container";

export const Routes = () => {
  return <BrowserRouter>
    <React.Fragment>
     <Header />
      <Route path="/" exact={true} component={ListController} />
      <Route path="/:movieId" component={ItemController} />
    </React.Fragment>
  </BrowserRouter>;
};
```



#### Putting it all together
Now that we have our components set up, we can head on over to “localhost:3000” and see all pages get render.

Feel free to ask questions in any area you don't understand.

To be continued ...
Using cmd switches with pytest to share data between tests
Tags: python, pytest, selenium, testing
Published: 2021-03-25 15:52:29

I'm kind of new to using Python Selenium with pytest and I needed to pass in come custom cmd line options when running tests with pytest. Specifically I needed the ability to pass in a custom url, hostheader, email and password value to my tests so they could run in different environments. I would think that everyone needs this for CI/CD tests today!

After lots of Googling for solutions I found that the suggestions on how to use switches were all over the place! I finally figured out to use the *conftest.py* file with the *pytest_addoption* method. Now there seems to be a lot of discussion on where to place the conftest.py file. I placed it above my \Tests folder, I haven't figured out the other complexities of it yet. Here's the content of conftest.py:

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

Note that in the *pytest_addoption(parser)* function I set default values for the switches that are for my most common test environment. The *params(request):* function is the key to returning an array of the params to the tests.

So how do you access the data in your tests? Really easy! Just pass *params* into your test functions and reference the *params* using *params['MyParam']*

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

Running the tests: 

I can run my tests using only the *pytest* command because it has default values for the command line switches or I can substitute values by adding the actual switches themselves. Now you can run the tests anywhere in your CI/CD environment by substituting environment vars for the command line switches :)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/133z0qfutl994fie9a2w.png)
Gatsby.js Browser APIs Explained: wrapPageElement vs wrapRootElement
Tags: gatsby, javascript, react
Published: 2021-03-25 15:51:24

[Gatsby.js](https://gatsbyjs.com) is a powerful and flexible [React](https://reactjs.org) framework that's focused on generating static pages and content from various external data sources at build time. It has a suite of powerful browser and node apis to manipulate data and create any page you might need.

Today I'm going to explain in-depth the difference between two fundamental  browser apis that you should know, [wrapPageElement](https://www.gatsbyjs.com/docs/reference/config-files/gatsby-browser/#wrapPageElement) and [wrapRootElement](https://www.gatsbyjs.com/docs/reference/config-files/gatsby-browser/#wrapRootElement).

Both of these browser apis are typically defined in the `gatsby-browser.js` file in the root of the project, but you can export both functions from `gatsby-ssr.js` as well in some cases without having to duplicate the code.

## wrapPageElement is for layouts
First, the **wrapPageElement** api is ideal for base layouts that every page has. It's not necessary to use this function, but if you don't want to have to add your base layout component to every page of your site, then using this api is a good way to save some typing. Under the hood, this is what [gatsby-plugin-layout](https://www.gatsbyjs.com/plugins/gatsby-plugin-layout/) is using, so now you can remove that unnecessary plugin. 

## wrapRootElement is for providers
Finally, the **wrapRootElement** api is designed for wrapping your core application with all of your various providers. In the example source code below, I am using the [react-alert](https://www.npmjs.com/package/react-alert) NPM package, which provides a convenient provider for us to demonstrate this api's usage. React Alert is a user-friendly library which provides hooks for customizing and displaying various alerts and notifications to the user.

To sum up, Gatsby has plenty of other browser apis, but wrapPageElement and wrapRootElement are the two you will probably be using most often in your sites. If you just remember that wrapPageElement is for layouts and wrapRootElement is for providers, you will be on your way to being a Gatsby expert in no time!

### Source Code
```jsx
import React from "react"

// Base Layout
import { Layout } from "./src/layouts/"

// react-alert
import { transitions, positions, Provider as AlertProvider } from "react-alert"
import AlertTemplate from "react-alert-template-basic"

const alertOptions = {
	position: positions.TOP_RIGHT,
	timeout: 5000,
	offset: "30px",
	transition: transitions.FADE,
}

export const wrapPageElement = ({ element }) => <Layout>{element}</Layout>

export const wrapRootElement = ({ element }) => (
	<AlertProvider template={AlertTemplate} {...alertOptions}>
		{element}
	</AlertProvider>
)
```
http.get - different data structure
Published: 2021-03-25 15:41:28

Hey, 

I'm trying to download data from a server using http.get.

For testing I'm using the tour of heroes tutorial. I changed the url to another local source.
The data looks like this:
{
    "current":1, "total":2,"rows":[
        {"field1":1000,"field2":"test1"},
        {"field1":1001,"field2":test2"}
        }
Of course, the code cannot run like this. How can I tell angular to use the rows? Is there a option in the http.get? In the tutorial the command was:
  getHeroes(): Observable<Hero[]> {
    return this.http.get<Hero[]>(this.heroesUrl)
  }

 Another possibility could be to adjust the data later. Perhaps here:
  getHeroes(): void {
    this.heroService.getHeroes()
        .subscribe(heroes => this.heroes = heroes );
  }

Thank you very much for your help in advance :).

Melanie

edit: 
Received following message in the browser (Entwicklungtools):
core.js:6162 ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed

The datatype may not be right?
Hardest Language I never learned 
Published: 2021-03-25 15:39:44

This week I had the pleasure of developing my first web application. Guess what that app was coded in? You guessed it, Javascript! Learning this starting off was almost like any other language so I felt pretty confident about grasping the concepts early on in my process. Going into my project I was excited to see what I was made of. The beginning was full of wonder and curiosity mixed in with a little experimentation. Then when I finished the functionality of my app, then it came time for me to tie it to my backend. 

This is where it seemed like everything I thought I knew was not enough. It was like I did not learn anything in 3weeks of labs and mini code exercises. I could not put it all together. I would spend so much time reading up on concepts and following along then when it came time to put code down I was like whaaaaaa?!!

Through perseverance I very slowly but surely got to where I feel is the below basic standard of knowledge. I spent weeks learning and coding and I still feel like I know nothing. It is like a language I never learned.
Quick Test Your Bash Shell
Tags: devops, bash, cloudopz, test
Published: 2021-03-25 15:27:09

## Challenge Yourself

## See following bash code and answer what the output is without running it
https://github.com/vumdao/bash/blob/master/bash_test/wq.sh
```
#!/bin/bash
set -e

mutex_test() { return -23; }

mutex_test

echo $?

echo "Done"
```

<h3 align="center">
  <a href="https://dev.to/vumdao">:stars: Blog</a>
  <span> · </span>
  <a href="https://github.com/vumdao/">Github</a>
  <span> · </span>
  <a href="https://vumdao.hashnode.dev/">Web</a>
  <span> · </span>
  <a href="https://www.linkedin.com/in/vu-dao-9280ab43/">Linkedin</a>
  <span> · </span>
  <a href="https://www.linkedin.com/groups/12488649/">Group</a>
  <span> · </span>
  <a href="https://www.facebook.com/CloudOpz-104917804863956">Page</a>
  <span> · </span>
  <a href="https://twitter.com/VuDao81124667">Twitter :stars:</a>
</h3>
#CodepenChallenge Monochromatic Confetti🎉 Button
Tags: codepen, react, showdev, javascript
Published: 2021-03-25 15:21:09

<h1>Monochromatic Confetti🎉 Button</h1>

<h2>Description</h2>

<p>The color palette I used at the background, button, and confetti itself in this pen is purple, because I love the purple color.</p>

<p>This button is made in ReactJS, and GSAP.</p>

<p>I used React Hooks <code>useState</code> for state handling of this functionality.</p>

<p>I used GSAP timeline for the stretching of button, and normal GSAP animation for the confetti.</p>

<h2>What does this do</h2>

<p>This is an example showy UI of a button.</p>

<p>When you click on the button, it will pull down, then explode like a confetti.</p>

<p>Maybe, this is useful when the user does something that was successful, example registration on the website.</p>

<h2>Resources</h2>

<h3>Javascript:</h3>

<p><a href="https://reactjs.org">ReactJS</a> for the functionality, and action.
<a href="https://greensock.com">GSAP</a> for animation.</p>

<h3>Font used:</h3>

<p><a href="https://fonts.google.com/specimen/Fredoka+One">Fredoka One from Google Fonts</a></p>

<h2>Live Demo</h2>

{% codepen https://codepen.io/takaneichinose/pen/mdRdgaV %}
Get A Real Value of Your Home with Us
Tags: homeforsale, oldhouse, virginiahomeforsale
Published: 2021-03-25 15:21:06

We <a href="https://megacashforhomes.com">Buy house</a> in ALL Cash Money with Fast closing and No Brokerage. That’s right YOU PAY for NOTHING, YOU DONT Have to FIX ANYTHING, You PAY ZERO Realtors fees, ZERO Closing Costs, and NO Brokerage Compensations. This WILL SAVE you TENS of THOUSANDS of DOLLARS! NO inspections, NO appraisals, NO financing contingency, NO contingencies of any kind. Visit us today and have a cash offer in your inbox in minutes.
Zephir 0.13.0 Released
Tags: phalcon5, zephir, release
Published: 2021-03-31 18:34:20

---
title: Zephir 0.13.0 Released
published: true
date: 2021-03-25 15:20:11 UTC
tags: phalcon5,zephir,release
canonical_url: 
---

We are happy to announce the immediate release of Zephir 0.13.0.<!--more-->

Along with several enhancements, interface checks and bug fixes, Zephir 0.13.0 offers support for PHP 7.4 and PHP 8.0, which is a big milestone!

This release aligns with our goals for Phalcon and the upcoming v5 release which will support only PHP 7.4 and PHP 8.0

### Changelog

### Added

- Added support of PHP `8.0` [#2111](https://github.com/zephir-lang/zephir/pull/2111), [#2165](https://github.com/zephir-lang/zephir/pull/2165)

### Changed

- Dropped support of PHP `<= 7.4` versions [#2111](https://github.com/zephir-lang/zephir/pull/2111)
- Removed call of `generate` command inside `compile` call [#2150](https://github.com/zephir-lang/zephir/pull/2150)
- Removed call of `compile` command inside `install` call [#2150](https://github.com/zephir-lang/zephir/pull/2150)

### Fixed

- Fixed parameters type detection in methods/functions (PHP `>= 8.0` only)
- Fixed not adding all build directories [#2144](https://github.com/zephir-lang/zephir/pull/2144)

Also in versions 0.12.21 and 0.12.20, the following issues were resolved:

### Fixed

- Fixed path separators in generated `config.m4` file on Windows [#2153](https://github.com/zephir-lang/zephir/issues/2153)
- Fixed missing kernel directory at build time [ice/framework#271](https://github.com/ice/framework/issues/271)
- Fixed stubs generation for case with array declaration with square brackets in params
- Fixed parameters positioning for `implode()` php function [#2120](https://github.com/zephir-lang/zephir/issues/2120)

### Added

- Added supports void type return value for stubs[phalcon/ide-stubs#50](https://github.com/phalcon/ide-stubs/pull/50)[#1977](https://github.com/zephir-lang/zephir/issues/1977)

A huge thank you to the community and contributors!

_Cross posted from the [Zephir Blog](https://blog.zephir-lang.com/post/zephir-0-13-0)_
Coding In 2021, Major Shift
Tags: beginners, javascript, womenintech, webdev
Published: 2021-03-25 15:13:36

<em> Where to start? What made me get into software development? </em>

<h1> THE BEGINNING OF THE PROCESS </h1>

I have been through many careers... banking, wasn't too fond of sitting and staring at a screen. Front end restaurant worker, cool, but still quite wasn't what I was looking for. Not to mention, I even tried out construction seeing as it is hands on and mentally stimulating. Yet, I craved for a challenge, something that would cause my brain to think. A career where I can invent things, and something we use in every day life, which brought me to software development. I have a close friend who has his very own business designing logos for businesses and constructing websites, and soon I discussed with him his daily workload. He showed me how he constructs a site from start to finish and the many problems he may encounter, and right then I knew this a journey I want to start!

![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gw0p0mkcbpuktwrw2rbn.png)
 
I've always had a passion for computers, and executing codes, and trouble-shooting issues with computers. So in a nutshell software development combines everything I love in one career. Since starting, I have been in and out of the "pit of despair", enjoying some moments... like the love for html structure; and not enjoying other moments, such as CSS but overall happy I chose to start!

![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uwy33bu3s7z12t6001tg.png)

<h1> Future Goals, #WomenInTech</h1>

I plan to eventually open up my own business designing websites, logos, pretty much bring anyone's ideas to life. I hope to absorb as much information I can although I know there is always something to learn! I could also see myself expanding and merging software development with cybersecurity to possible work for the FBI or a private firm down the line. The opportunities are honestly endless... and that is what I love about becoming a software developer. 

![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/un8v1bluhdcxnneubo9u.png)
CoScreen exits stealth to bring multi-user screen sharing and editing to remote engineering teams
Tags: javascript, firebase, showdev, news
Published: 2021-03-25 15:04:44

https://venturebeat.com/2021/03/25/coscreen-exits-stealth-to-bring-multi-user-screen-sharing-and-editing-to-remote-engineering-teams/

CoScreen has exited stealth, Windows & Mac clients are generally available:
https://www.coscreen.co/
Getting started with AWS Chime.
Tags: webdev, aws, tutorial, programming
Published: 2021-03-25 14:59:30

Hey devs,

In today's tutorial, I would like to get you started with AWS Chime. 

**The Amazon Chime SDK provides a set of real-time communications components that developers can use to add audio, video, and screen sharing sessions to their own applications. The Amazon Chime SDK can be used to build solutions like full unified communications (UC) applications, distance learning solutions, telehealth applications, and simple one-to-one video interaction with customers.**

When you log into AWS Dashboard search for AWS Chime.

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

# Pricing

Before digging deeper into any AWS Product it is always wise to know the pricing. Cloud platforms are great but your monthly billing can rise if you don't understand the product pricing.

- Connection to the Amazon Chime SDK meeting session is **USD 0.0017**

Read more about the pricing [https://aws.amazon.com/chime/chime-sdk/pricing/](https://aws.amazon.com/chime/chime-sdk/pricing/).

Below is an architecture of AWS Chime.

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

There are a lot of benefits one gets by using AWS Chime SDK. I have assembled different articles and demos that can get you working with AWS Chime. 

For your tutorial and practice use the WebRTC application and configure it with AWS Chime. [https://main.d37i78548hx7uj.amplifyapp.com/](https://main.d37i78548hx7uj.amplifyapp.com/)

- To get started with AWS Chime SDK in your project.

```javascript
npm install amazon-chime-sdk-js --save
```

The Github Repo for AWS Chime SDK [https://github.com/aws/amazon-chime-sdk-js](https://github.com/aws/amazon-chime-sdk-js).

- Here is a sample meeting application [https://aws.amazon.com/blogs/business-productivity/building-a-meeting-application-using-the-amazon-chime-sdk/](https://aws.amazon.com/blogs/business-productivity/building-a-meeting-application-using-the-amazon-chime-sdk/)

- Here is a sample classroom application [https://aws.amazon.com/blogs/business-productivity/building-a-virtual-classroom-application-using-the-amazon-chime-sdk/](https://aws.amazon.com/blogs/business-productivity/building-a-virtual-classroom-application-using-the-amazon-chime-sdk/)

- Here are the documentation for AWS SDK [https://aws.amazon.com/chime/chime-sdk/?nc=sn&loc=0](https://aws.amazon.com/chime/chime-sdk/?nc=sn&loc=0), [https://docs.aws.amazon.com/chime/latest/dg/meetings-sdk.html](https://docs.aws.amazon.com/chime/latest/dg/meetings-sdk.html)

I have been preparing a course that will go through in-depth most of the Technologies I have been teaching.

We will discuss the following:
- WebRTC
- AWS WebSocket
- AWS Cognito
- Kinesis Video Streams  
- AWS Chime
- Lambda
- IAM
- CloudWatch

We are going to use two different projects and implement them using different approaches. By the end of the tutorial, you will have a great understanding.

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

Thank you and have a great weekend
Bad Habits to Avoid for Web Developers | Podcast
Tags: webdev, beginners, podcast, productivity
Published: 2021-03-25 14:46:45

{% spotify spotify:episode:4x7318aB6lqqvCTIp6dQuO %}

## What is HTML All The Things

HTML All The Things is a [web development podcast](https://podcast.htmlallthethings.com/) and [discord community](https://discord.com/invite/jweMCx9) which was started by Matt and Mike, developers based in Ontario, Canada. 

The podcast speaks to web development topics as well as running a small business, self employment and time management. You can join them for both their successes and their struggles as they try to manage expanding their Web Development business without stretching themselves too thin. 

## Whats This One About?

In this episode Matt and Mike discuss some of the bad habits that many web developers develop over time. Habits including procrastination, Tutorial Hell, and overengineering. These, among others, can slow down and even stop a web dev project in it's tracks - impacting your growth as a developer and "stealing" precious projects from your portfolio. Luckily, there are ways to help mitigate and correct these bad habits into good ones.


## Show Notes

2:20 - What are habits?

11:10 - Procrastination

22:20 - Over documenting or not documenting code

27:50 - Being afraid of new technology

43:15 - Getting stuck in 'tutorial hell'

53:25 - Overengineering

1:01:55 - Being obsessed with efficiency 

1:12:40 - Not reaching out for help or joining a community

##Key Takeaways

* 80/20 Rule allows you to explore new technology/ideas while still remaining consistent with your main stack
* Habits are built up slowly, this is not a one step process. The same applies to removing bad habits, it's a deliberate process that you have to actively work on. One slip up does not mean you fail. 

##Social Links

You can find us on all the podcast platforms out there as well as

[Instagram (@htmlallthethings)](https://www.instagram.com/htmlallthethings/)
[Twitter (@htmleverything)](https://twitter.com/htmleverything)
[Facebook (Html All The Things)](https://www.facebook.com/htmlallthethings)