teleren/devto huggingface dataset:
React Native Code Snippets with Styled Components
Tags: reactnative, javascript, beginners, tutorial
Published: 2021-03-23 14:12:33

In this series you will learn how to build the React Native mobile app UI which can be worked as code snippets. You also can use the examples for save time building native mobile apps for android and iOS using React Native.

[![Watch the video](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4cujbhar2nn7owdpheaf.png)](https://youtu.be/HDqIpx36uUs)

- Design: https://www.behance.net/gallery/55462459/Wires-free-wireframe-kits-for-Adobe-XD
- Source Code: https://musicoding.com/tag/snippets/
- Software Used: VSCode, Expo
- Social Media:
  Facebook: https://www.facebook.com/musiccoding
  Twitter: https://twitter.com/musicoding

Thank you for watching! Make sure to like and subscribe my youtube channel https://bit.ly/39g9MWs for more videos like this!
Should I listen to music while coding?
Tags: productivity, webdev, programming, javascript
Published: 2021-03-23 14:08:20

When I was a teenager, I used to be a die-heart fan of 80's rock and roll music. I had maintained a handwritten lyrics book of all popular rock songs back then. From AC/DC to Eagles, Bon Jovie to Led Zeppelin, and Metallica to Guns N Roses, I used to have my phone loaded with hundreds of rock ballads. 

I was quite obsessed with rock and roll. It used to be a source of dopamine to me. I used to get motivated and energized by those songs. 

Now the time has changed, there has been a shift of paradigm. But the love for music is still the same. Starting my day with a simple workout with beast mode workout music is my hack to keep myself motivated to do more exercise. Even during the day while programming, I mostly wear headphones to keep myself focused and to stay away from disturbances.

But a few months back I stumbled upon an article online explaining why listening to music while coding is not a great idea. The logic is that when you are coding you are using your energy on different things - staring at the screen, solving a problem, and listening to music. You are losing energy through the eyes, ears, and, brain. You cannot close your eyes and neither you can turn off your problem-solving background job. One thing you can do is stop listening to music. 

I advise using noise-canceling headphones if you want to get rid of background noise. Avoiding music while coding will help you put more energy into solving a programming problem and will make you more productive. If you do not agree with me yet, think about why people meditate with their eyes closed? They save energy doing so; which helps them to use that energy in the brain.

Trying to solve every algorithmic problem in O(logn) is not only the trait of a good programmer, trying to optimize your everyday algorithm crucial too.
How to export CSV file in angular
Tags: angular, csvexport
Published: 2021-03-23 14:01:28


There are 2 ways to export(download) the CSV on the web.
1. Generate at the server-side and then provide a link to download
2. Generate at client-side through angular

So today we will discuss the client-side through angular

### Installation 
We will use `angular2-csv` package to generate the CSV at the client-side(browser)
Please run this command at your project root <br/>
```javascript
npm install --save angular2-csv
```


### Setup
Please include the below code in you `app.module.ts` and in the child module where you want to implement the download functionality 

```javascript
// file name app.module.ts
import { Angular2CsvModule } from 'angular2-csv';
```
<br/>

### - Add in imports section of the `app.module.ts file`
```javascript
imports: [
  BrowserModule,
  AppRoutingModule,
  Angular2CsvModule
],
```

<br/> 

### - Add the download button
In your `app.component.html` file or your html file where you want to add the download button,

```html
<angular2csv [data]="data" filename="test.csv" [options]="options"></angular2csv>
```

<br/>

### - in your `app.component.ts` add this or you can replace by it
```javascript
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  // option veriable
  options = {
    fieldSeparator: ',',
    quoteStrings: '"',
    decimalseparator: '.',
    showLabels: false,
    headers: [],
    showTitle: true,
    title: 'asfasf',
    useBom: false,
    removeNewLines: true,
    keys: ['approved','age','name' ]
  };
  
  // This data will be generated in the csv file
  data = [
    {
      name: "Test, 1",
      age: 13,
      average: 8.2,
      approved: true,
      description: "using 'Content here, content here' "
    },
    {
      name: 'Test 2',
      age: 11,
      average: 8.2,
      approved: true,
      description: "using 'Content here, content here' "
    },
    {
      name: 'Test 3',
      age: 10,
      average: 8.2,
      approved: true,
      description: "using 'Content here, content here' "
    }
  ];
}
```

### Demo
You can check the demo from [Here](https://hopeful-mahavira-ad5563.netlify.app/)  and can get the code from the [Github repo](https://github.com/akshay-s-770/export-csv-in-angular-10)

Please give it a try and I will be happy to answer your queries on my Twitter handle [Twitter](https://twitter.com/eavnitech)
Linux bash for loop
Published: 2021-03-23 14:00:34

 

This type of for loop is characterized by counting. The range is specified by a beginning (#1) and ending number (#5). The for loop executes a sequence of commands for each member in a list of items. A representative example in BASH is as follows to display welcome message 5 times with for loop:


```

#!/bin/bash
for i in 1 2 3 4 5
do
   echo "Welcome $i times"
done

```
Sometimes you may need to set a step value (allowing one to count by two’s or to count backwards for instance). Latest bash version 3.0+ has inbuilt support for setting up ranges:
```
#!/bin/bash
for i in {1..5}
do
   echo "Welcome $i times"
done
```
This is from   [Bash For Loop Examples In Linux](https://www.howtouselinux.com/post/bash-for-loop-examples)

Bash v4.0+ has inbuilt support for setting up a step value using {START..END..INCREMENT} syntax:
```
#!/bin/bash
echo "Bash version ${BASH_VERSION}..."
for i in {0..10..2}
  do 
     echo "Welcome $i times"
 done

```
Sample outputs:
```
Bash version 4.0.33(0)-release...
Welcome 0 times
Welcome 2 times
Welcome 4 times
Welcome 6 times
Welcome 8 times
Welcome 10 times

```
MVC vs Flux vs Redux 
Published: 2021-03-23 13:56:25

►Architecture:

■MVC Architecture:
MVC is well-known for its three-layer development architecture and it divides applications into three components:

Model: Maintains the data and behavior of an application
View: Displays the model in the UI
Controller: Serves as an interface between view & model components
Whenever the controller receives the request from the user, it uses the appropriate Model & View and generates the response sending it back to the user.

■Flux Architecture:
After learning a few highlights regarding the instability and complexity of the MVC architecture, the Facebook development team made some important changes in the system and released Flux as an alternative to MVC architecture. The Flux architecture is based on the following components:

Store/ Stores: Serves as a container for the app state & logic
Action: Enables data passing to the dispatcher
View: Same as the view in MVC architecture, but in the context of React components
Dispatcher – Coordinates actions & updates to storesFlux Architecture
In the Flux architecture, when a user clicks on something, the view creates actions. Action can create new data and send it to the dispatcher. The dispatcher then dispatches the action result to the appropriate store. The store updates the state based on the result and sends an update to the view.

■Redux Architecture:
However, Dan Abramov felt that this architecture could be simpler. Consequently, Dan Abramov & Andrew Clark developed Redux in 2015.

Redux is a library, which implements the idea of Flux but in quite a different way. Redux architecture introduces new components like:

Reducer: Logic that decides how your data changes exist in pure functions
Centralized store: Holds a state object that denotes the state of the entire appRedux Architecture
In Redux architecture, application event is denoted as an Action, which is dispatched to the reducer, the pure function. Then reducer updates the centralized store with new data based on the kind of action it receives. Store creates a new state and sends an update to view. At that time, the view was recreated to reflect the update.

►Data Flow Direction:

■Mvc Architecture:
→Follows the Bidirectional flow

■Flux Architecture:
→Follows the Unidirectional flow

■Redux Architecture:
→Follows the Unidirectional flow

►Where Business Logic resides?

■MVC Architecture:
→Controller handles entire logic

■Flux Architecture:
→Store handles all logic

■Redux Architecture:
→Reducer handles all logic
Dump PHP 7.1+ opcodes
Tags: php, zendengine
Published: 2021-03-23 13:39:35

If you are working on PHP internals and you need to know which opcodes are generated for a given script, here is the command you can use to dump them.

Assume the file `index.php`

```
<?php

echo "hello";
```

You can dump opcodes running the command

```
$ php -n -d zend_extension=opcache.so -d opcache.enable=1 -d opcache.enable_cli=1 -d opcache.opt_debug_level=0x10000 index.php
```

- `-n`: [optional] disable all extensions, you will enable only the ones you are interested in;
- `-d zend_extension=opcache.so`: load the `Zend OPcache` extension;
- `-d opcache.enable=1`: enable the `Zend OPcache` extension;
- `-d opcache.enable_cli=1`: enable the `Zend OPcache` extension for the CLI SAPI (required for the command line);
- `-d opcache.opt_debug_level=0x10000`: disable opcodes optimization - [docs](https://www.php.net/manual/en/opcache.configuration.php#ini.opcache.opt_debug_level).

The output of this command is
```
$_main: ; (lines=2, args=0, vars=0, tmps=0)
    ; (before optimizer)
    ; /var/www/html/public/index.php:1-10
L0:     ECHO string("hello")
L1:     RETURN int(1)
```

Originally, inspired by the excellent Nikita Popov's [post](https://www.npopov.com/2017/04/14/PHP-7-Virtual-machine.html) about the PHP 7 virtual machine.
Material Design for the latest Bootstrap 5
Tags: webdev, opensource, javascript, bootstrap
Published: 2021-03-23 13:32:32

MDB 5 was the first-ever UI Kit created for the **fifth version of Bootstrap**.

Download Material Design for Bootstrap 5 [here](https://mdbootstrap.com/docs/standard/).

-----

## What MDB 5 contains?

✔️ Latest Bootstrap 5 & Material Design 2.0
✔️ 500+ material UI components
✔️ Super simple, 1-minute installation
✔️ Detailed docs & multiple practical examples
✔️ Lots of tutorials
✔️ Plenty of free templates
✔️ Huge and active community
✔️ **Plain javascript (but also works with jQuery)**
✔️ **MIT license - free for personal & commercial use**

-----

## Quickstart

Watch this quick tutorial & get started right away.

{% youtube biwC8jK7YYY %}

-----

## Working with MDB

- [Installation](https://mdbootstrap.com/docs/standard/getting-started/installation/)
- [Quick start](https://mdbootstrap.com/docs/standard/getting-started/quick-start/)
- [Design Tools](https://mdbootstrap.com/docs/standard/tools/)
- [Changelog](https://mdbootstrap.com/docs/standard/getting-started/changelog/)
- [Migrate from Bootstrap 4 to Bootstrap 5](https://mdbootstrap.com/docs/standard/getting-started/migration/)
- [Visual Studio Code extension](https://mdbootstrap.com/docs/standard/getting-started/vsc-snippets/)
- [RTL support details](https://mdbootstrap.com/docs/standard/getting-started/rtl/)
- [WebPack starter](https://mdbootstrap.com/docs/standard/getting-started/webpack-starter/)
- [Free Bootstrap templates](https://mdbootstrap.com/freebies/)
- [UI Kit for React Bootstrap 5](https://mdbootstrap.com/docs/b5/react/)
- [UI Kit for Angular Bootstrap 5](https://mdbootstrap.com/docs/b5/angular/)
- [UI Kit for Vue Bootstrap 5](https://mdbootstrap.com/docs/b5/vue/)

-----

## Useful resources

Learn web development with our **learning roadmap**:
**[:mortar_board: Start Learning](https://mdbootstrap.com/docs/standard/getting-started/)**

Join our mailing list & receive **exclusive resources** for developers
**[:gift: Get gifts](https://mdbootstrap.com/newsletter/)**

Join our private FB group for **inspiration & community experience**
**[👨‍👩‍👧‍👦 Ask to join](https://www.facebook.com/groups/682245759188413)**

**Support creation of open-source packages** with a STAR on GitHub
[![GitHub Stars](https://img.shields.io/github/stars/mdbootstrap/mdb-ui-kit?label=Star%20now&style=social)](https://github.com/mdbootstrap/mdb-ui-kit/)
Use FastAPI to create a desktop application (no Electronjs)
Tags: python3, fastapi, gui, electron
Published: 2021-03-23 13:23:03

---
title: Use FastAPI to create a desktop application (no Electronjs)
published: true
description: 
tags: python3, FastAPI, gui, electron
//cover_image: https://direct_url_to_image.jpg
---

Not only JS folks can do it we can do it too!

First, install [this library](https://github.com/ClimenteA/flaskwebgui):

``` py
pip install flaskwebgui
```

Next add the following code in a `main.py` file:
```py
#main.py

from fastapi import FastAPI
from flaskwebgui import FlaskUI # import FlaskUI

app = FastAPI()
ui = FlaskUI(app) # feed app and parameters

@app.get("/")
def read_root():
    return {"message": "Works with FastAPI!"}

if __name__ == "__main__":
    ui.run()

```
Alternatively, next to `main.py` create a file called `gui.py` and add the following contents:

```py
#gui.py

from flaskwebgui import FlaskUI
from main import app

FlaskUI(app, width=600, height=500).run()
```
Next start the application with:
```py
python main.py 
#or
python gui.py #in case you created gui.py 
```
Fastapi will be served by `uvicorn`.  

And that's all!
Flask for creating desktop apps (no Electronjs)
Tags: python3, flask, pyside, electronjs
Published: 2021-03-23 13:14:39

---
title: Flask for creating desktop apps (no Electronjs)
published: true
description:
tags: python3, Flask, pyside, electronjs
---

Yep, you read that well desktop applications using Python and web technologies.

First, install [this library](https://github.com/ClimenteA/flaskwebgui):

``` py
pip install flaskwebgui
```


Bellow you have the usage of flaskwebgui:

```py
#main.py

from flask import Flask  
from flask import render_template
from flaskwebgui import FlaskUI # import FlaskUI

app = Flask(__name__)
ui = FlaskUI(app, width=500, height=500) # add app and parameters


@app.route("/")
def hello():  
    return render_template('index.html')

@app.route("/home", methods=['GET'])
def home(): 
    return render_template('some_page.html')


if __name__ == "__main__":
    # app.run() for debug
    ui.run()
   
```
Alternatively, next to `main.py` create a file called `gui.py` and add the following contents:

```py
#gui.py

from flaskwebgui import FlaskUI
from main import app

FlaskUI(app, width=600, height=500).run()
```
Next start the application with:
```py
python main.py 
#or
python gui.py #in case you created gui.py 
```
Application will start chrome in app mode, flask will be served by `waitress`.  


And that's all!
Beryl Corporate Gatsbyjs Theme
Tags: agencywebsite, corporatewebsitetheme, gatsbyjstemplate, gatsbyjswebsitetheme
Published: 2021-03-23 13:12:51

Beryl is a fast, clean, lightweight theme powered by Gatsbyjs and Graphql. It is best suited for Digital Agencies, Corporate Companies and Startups. Beryl is fully responsive and looks stunning in all types of devices.  Buy now https://beryl.reactrepo.com/
CSS variable chapter seven "inheritance" 🛵️
Tags: css, todayilearned, tutorial, codenewbie
Published: 2021-03-23 13:05:36

Hello party people👋

First of all, thank you for your love and support till this moment, now we have 1K follows at this DEV community🧑‍🤝‍🧑

![Thank you](https://media.giphy.com/media/fdzT52sqSyvHBG5BO2/source.gif)

In the last dev post, we have learned about "how we can use CSS variable in responsiveness" and in this post, we are going to understand a short confusion of CSS variable which is inheritance🌺

☃️ So to understand inheritance, let's create a CSS global variable named ":root" which like this.


```
:root
{
	--red: red;
	--blue: blue;
	--yellow: yellow;
}
```

we can add or create a new CSS variable based on existing CSS variable like 🥑

```
--duplicate-red: var(--red);
```

So our final variable looks something like this🥞

```
:root {
    --red: #ff6f69;
    --beige: #ffeead;
    --yellow: #ffcc5c;
    --duplicate-red: var(--red);
}
```

If you understand CSS variable, you know that we can use **--duplicate-red** property as a **---red** color property🥘

But now when I will try to override our **--red** variable at our navbar selector like this.

```
#navbar 
{
    --red: orange;
}
```


it will not work :( because at this position our **--duplicate-red** property is resolved as the value of **--red** . It means we can't reinitiate or override the **--red** property.

But we can override our **--duplicate-red** like this
```
#navbar 
{
    --duplicate-red: orange;
}
```

And it will work well because our computer machine read it like a new variable.


🧭 At this stage of the post I recommend you to play around with this codepen project, it will help your muscle memory to understand.

{% codepen https://codepen.io/atulcodex/pen/MWbNzGE %}

That's all for this post and if you have any queries please comment below I love 💖 to hear from you 🙅🏻‍♂️
Enhance your career on  ServiceNow HR Service Management Training Online
Published: 2021-03-23 13:03:11

Description:
 ServiceNow's HR Service Managment Training arrangement improves fulfillment, commitment, and profitability of an association's HR division by offering a shopper such as self-administration gateway for representatives. The present labor force expects customer grade administration encounters. With ServiceNow HR Service Management, you can rapidly and effectively give representatives admittance to the administrations they need, alongside asking for and satisfying measure computerization.

About HKR Trainings: 
HKR Trainings excel at providing you the best online classes with high quality facilities at a low price without any compromise on quality. What can you expect from us? A dedicated learning platform with 24*7 support, best in class training materials to help you learn advanced techniques and practical knowledge of all IT Technologies.
Our courses are specifically curated for both professionals as well as job-seekers. Online classes conducted by the best knowledgeable and certified trainers helps you earn certification at your convenience.
ServiceNow HRSM Course Overview:    
ServiceNow enables you to assemble an exceptionally adaptable and powerful application utilizing progressed improvement procedures. It is possible that you are an understudy or a working proficient adding this servicenow HR administration the executives abilities as far as anyone is concerned base will help your market interest. You will actually want to fabricate a strong stage or simply improve your current application adding another capacity. 
HKR conveys the best business situated ServiceNow HR administration the board course that is in accordance with the certificate test. This course gives you inside and out information on the substance needed for the powerful usage of the ServiceNow HR administration the executives into the HR office exercises of the associations. During the preparation time frame, you can get full help and continuous venture help from experienced experts. Enlist today at HKR for acknowledging the new demands to make the best result out of our ServiceNow HR administration the executives web based preparing.
 
ServiceNow HRSM Course Content: 
1) Introduction to serviceNow Hr Service management
2) Introduction about HR management Lifecycle
3) Viewing the dashboards and reports
4) capabilities of the HRSM solutions, etc
COURSE FEATURES:
* 30 Hrs of instructor led training
* Learn on your own timeline
* Certification pass guaranteed
* Trainers 24*7 Support
* Flexible Payments

Contact Info:
PlotNo-8,Ground Floor Aparajitha, near Lal Bungalow, Alwyn Housing Colony, Hyderabad
India : +91-9711699759
info@hkrtrainings.com
40640 High Street Fremont, Illinois, Chicago.
USA : +1 (872) 231 0447
Website:-  https://hkrtrainings.com/servicenow-hr-service-management-training
Don't Forget About Books
Tags: growth, reading, books, motivation
Published: 2021-04-20 06:53:51

---
title: Don't Forget About Books
published: true
date: 2021-03-23 12:51:22 UTC
tags: growth,reading,books,motivation
canonical_url: https://x-team.com/blog/dont-forget-about-books/
---
Ray Bradbury's 1953 novel [Fahrenheit 451](https://www.goodreads.com/book/show/13079982-fahrenheit-451) depicts a future where books are outlawed and firefighters have to burn any books they find. In a [2007 interview with LA Weekly](https://www.laweekly.com/ray-bradbury-fahrenheit-451-misinterpreted/), Bradbury said that his novel is widely misunderstood. It's not about government censorship (as many believe it is) but about his fear that television would kill books.

And what do you know? It's 2021 and [everyone is reading fewer books](https://www.washingtonpost.com/news/wonk/wp/2018/06/29/leisure-reading-in-the-u-s-is-at-an-all-time-low/). We're not burning books, but we're gradually forgetting about them. Instead, we watch Netflix and YouTube, play games, scroll social media feeds, and read news articles that come and go faster than a dayfly.

While none of these activities are inherently wrong (and I indulge in quite a few of them) they should never entirely replace reading books. The benefits of reading books are simply too big and too many to discard them:

- They [make you](https://www.yorku.ca/mar/Mar%20et%20al%202006_bookworms%20versus%20nerds.pdf)[more empathetic](https://www.yorku.ca/mar/Mar%20et%20al%202006_bookworms%20versus%20nerds.pdf).
- They [build your vocabulary](https://pubmed.ncbi.nlm.nih.gov/21772058/).
- They [help you sleep](https://www.mayoclinic.org/healthy-lifestyle/adult-health/in-depth/sleep/art-20048379).
- They [inspire](https://x-team.com/blog/cultivate-curiosity/).

Books are often the best introduction to a topic and the best way to dive deep into a topic. They bring something new and fresh into your world, and they do so with the elegance and nuance that we desperately need in this fast-paced, click-driven world.

The trick to building a sustainable reading habit is to make it easy for yourself. While I love a good paperback, I own a Kindle that I carry with me wherever I go. I also have the Kindle app on my phone and sometimes use the [Kindle web app](https://read.amazon.com/) for reading on my laptop. My books are always close by.  

Additionally, I never have to search long for what I want to read next, because I have a list of [400+ books I want to read](https://www.goodreads.com/review/list/25816074-thomas?shelf=to-read) tagged on Goodreads. If you want to kick-start your reading list, feel free to take some of my books or browse the [50 book recommendations from X-Teamers](https://x-team.com/blog/book-recommendations/) across a wide range of categories.

Much of reading more comes down to simply doing it. Don't agonize about the perfect strategy or the most efficient way or the best time to read a book. You'll figure that out as you go along. Don't allow modern distractions to flood your information intake. Read books instead.