teleren/devto huggingface dataset:
Get Directory of the current python script 
Tags: python, tutorial, scripting, directories
Published: 2020-02-16 19:18:36

using Python os module, we can get the current directory of python scripts and change the directory. The os module is included in the standard library, so no additional installation is required. This module provides a portable way of using operating system dependent functionality. 

Here the following contents will be described.

**Get the current working Directory**
     os.getcwd() returns the absolute path of the working directory where python is currently running as a string.

```
import os
currentDirectory = os.getcwd()
print("Current Working Directory")
print(currentDirectory)
```


**Change the current working directory**
     We use chdir() to change the directory. 

```
import os
os.chdir("D/python")
print("Directory Changed")
print(os.getcwd())
```

I hope this will help you to understand about directories and python.
Still checking beginners resources?
Tags: discuss
Published: 2020-02-16 19:14:46

---
title: Still checking beginners resources? 
published: true
description: 
tags: #discuss
---
Do you still checkout books/courses for beginners, even if you're over it? 

I still do check them, What about you? **Why do we do it** (supposingly I'm not alone 😅)
JavaScript beginner help
Tags: javascript, beginners, help
Published: 2020-02-16 18:58:03

Hey guys,

I have been studying JavaScript for 3 weeks already. I'm stuck with function and these 3 tasks. If anyone could help me I would really appreciate it:

1. Write  **_sum_** function that returns the sum of cubes of numbers from n to m.
Call the function and print its result in the console.

2. Write function **_year_** that passes the Birth parameter.
Birth year parameter represents the birth year of a person. The function should return how old a person is.
The number of years a person has calculated based on their birth year and the current year that you can pull from your computer.
Call the function and print the result in the console.

3. Write function **_divisible_** by passing three parameters n, m and k. The function on the screen should print the number of numbers n to m that is divisible by k. Call the function
I created a template for an SaaS/Admin webapp using React and Material-UI:

Tags: react, showdev, javascript, webdev
Published: 2020-02-16 18:54:57

Features:
- Created with Create React App
- Features a landing page, a blog, an area to login/register and an admin-dashboard
- Fully routed using react-router
- Lazy loads components to boost performance
- Components for statistics, text with emoji support, image upload and much more...

https://github.com/dunky11/react-saas-template
DEV Questions 2: Per-OS customization in cross-platform apps and games
Tags: design
Published: 2020-02-16 18:00:34

Post 2 in a running series of questions for DEV!

How do you tailor your native/web apps for quirks of each OS/browser they might run on? For native apps/games, shortcut conventions are different enough between OSes, so if you want to use the standards, you have to first figure out what OS you're on. (Notice that I didn't say "keyboard shortcuts", because of things like long-press on mobile OSes.) Likewise, browsers support a different set of web features differently, for which feature detection is usually used (in JS, anyway). What adaptations and/or techniques have I not thought of? What do YOU use personally?
[HELP REQUEST] I'm looking for barebones alternatives to Twig, Smarty, Dwoo for implementing strings as templates in PHP
Tags: php, wordpress, wpchat, buildwithheart
Published: 2020-02-16 17:49:58

Hi there 👋, I'm looking for barebones alternatives to Twig, Smarty, Dwoo for implementing strings as templates (not files) https://stackoverflow.com/q/60228693/323434 --- can anyone here help?
D3js fundamentals Part 5 Joins And Enter/Exit
Tags: javascript, webdev, d3js, tutorial
Published: 2020-02-16 17:17:16

Last article we learnt about scales which help in converting our data as data point for svg.

{% post https://dev.to/saikiran/d3js-fundamentals-part-4-scales-18og %}

Data visualization means working with data. We want to access the data we want in efficient way. Joins helps us to bind data to the DOM element in efficient way.

To join data to DOM you just need to call `.data()` on the selected d3 element and pass your data as parameter. In the below example we have 5 circles elements. Select all the elements and call `.data()` by passing the data to it.

{% codepen https://codepen.io/krngd2/pen/MWWdxvB default-tab=js,result %}


`.data()` function will loop through the data and will bind data to each node one by one. Press F12, reload the page and check the logs. You will find the list of nodes that we selected and expand the first element scroll down to bottom where you can see `__data__` which has the  respective data bonded to the element which you can access whenever you `select` that particular element.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/bk82p3gcym25wgxcngp0.png)

If you have observed or not, our data is only 4 in length but we have bonded that data to 5 selected elements. Check the fifth element from the same logs, there will be no `__data__` property to it.
D3 gives us easy way to adjust the DOM elements to the data with the help of `.enter()` function for adding data and `.exit()` function for removing the data. Both fucntions returns the extra data but `.enter()` followed by `.append()` will add extra elements and `.exit()` followed by `.remove()` will remove the extra elements.

### Remove Example 
{% codepen https://codepen.io/krngd2/pen/JjjqVGG default-tab=js,result %}

### Append example 
{% codepen https://codepen.io/krngd2/pen/xxGVXON default-tab=js,result %}

Every function will get the bonded data as the call back parameter with which we can do verity for tricks. Like changing the values of its attributes and css properties. 

In the example below we are changing the fill color of the circle elements based on its radius. If it is less than 35 its fill color should be of red and otherwise orange. Note here that condition applies to only extra elements as we used the condition after the enter statement. We need again select all the circles in order to make the condition for all. 

{% codepen https://codepen.io/krngd2/pen/ExjKwZJ default-tab=js,result %}
Adding values to an empty list
Tags: python, lists
Published: 2020-02-16 17:14:06

Fam, help me!...i'm new to python and currently trying to write a function that adds values to an empty list. it should return true when i add values and false, if i add a value that already exists in the list.

The issue is when i add a value that already exists, it still prints it out when the function is called instead of given the designated error message. I know something's wrong, i just don't know where exactly.

I'd appreciate your input (pun intended).


This is the code i came up with:

myUniqueList = []

def addToMyUniqueList(x):
    if x != myUniqueList:
        print("My unique list:")
        print(myUniqueList)
    else:
        print("Error; item already exists!")
addToMyUniqueList(myUniqueList.append(3))

output:
My unique list:
[3]

addToMyUniqueList(myUniqueList.append(3))

output:
My unique list:
[3, 3]
An Easy, Effective Instrument Cluster-Style Gauge Chart using Angular8, CSS3 and SVG
Tags: angular, svg, dashboard, chart
Published: 2020-02-16 17:01:20

An interesting dynamic take on instrument-panel style / tachometer gauges using SVG.

It's not as dynamic as it could be and you may see that I'll update it to do some things automatically.

The idea was to create a gauge chart with progressive segments.  That means the portion of the chart up to 100% comprises 70% of the chart itself.  From 100-500% is about 20% and from 500%-5000%+ is 10%.

At the initial development, I was feeding this directly from an API, but it made more sense to make it a component and feed it the title and numbers (GIT REPO coming soon).

Anyhow, this is my first swing at it.

The current size is a little large, but since this is SVG, you can just change the scaling of the container with a css transform and watch the magic.   It's working nicely in current Edge, Chrome and FF.   Have not tested with MSIE11.

Enjoy and thanks for any respectful feedback.

https://stackblitz.com/edit/svg-guage-chart
INSPINIA - Responsive Admin Theme
Tags: bootstarp, css, html, javascript
Published: 2020-02-16 17:00:23

<a href="https://wrapbootstrap.com/theme/inspinia-responsive-admin-theme-WB0R5L90S?ref=chotu_1995">INSPINIA - Responsive Admin Theme</a>

INSPINIA Admin Theme is a dashboard template with flat design concept. It is fully responsive admin dashboard template built with latest Bootstrap 4.x Framework, HTML5, CSS3 and Javascript. It has a huge collection of reusable UI components and dozens third party libraries integrated for special features.

Bootstrap 4.3.1
HTML5 Full Version
HTML5 Seed Project
.NET Core 3.0 MVC Full Version (VS 2019)
.NET Core 3.0 MVC Seed Project (VS 2019)
Ruby on Rails (6.0) Full Version (Sprocket assets pipeline)
Ruby on Rails (6.0) Seed Project (Sprocket assets pipeline)
Landing Page
Utilities

Documentation
LESS, SCSS
PSD Files (more than 50 main views and components full layered)

For more templates visit <a href="https://wrapbootstrap.com/?ref=chotu_1995">wrapbootstrap.com</a>
Admin Panel
Tags: react, angular8, vue, laravel
Published: 2020-02-16 16:55:10

<a href="https://wrapbootstrap.com/theme/color-admin-6-admin-template-4-frontend-WB0N89JMK?ref=chotu_1995">Color Admin - 6 Admin Template + 4 Frontend</a>

Color Admin is the new premium and fully responsive admin template. Concept of design for Color Admin is based on the FLAT design and finally it comes out with a clean and neat design. It is built on top of the popular Bootstrap Framework. Besides that, it is bundled with a lot of third party plugins and useable elements such as buttons, thumbnails, media objects and much more...

<b>Features:</b>
Built with Bootstrap Bootstrap 4
AJAX + HTML + ANGULAR + ANGULAR 8 + VUE.JS + REACT.JS Version
6 Admin Theme (Flat + Material Design + Apple Design + Transparent + Facebook + Google Design)
4 Front End Template
12 Admin Color Scheme
2 Admin Header Color Scheme
2 Admin Sidebar Color Scheme
Unlimited Admin Page Options
Gulp + SCSS Support
Full RTL Support
2 Admin Content Color Scheme
Local Storage Panel
Modern & Old Browser Compatibility
Compatible with DataTables & 9 DataTables Extension
Unlimited Nav Tabs
Smooth Mobile / Tablet Scrollbar Implementation
Vector Icons - FontAwesome v5.7
Vector Icons - Simple Line Icons
Vector Icons - Ionicons (600++ Icons)
Vector Icons - Google Material Icons
Fully Responsive HTML5 Markup & CSS3
JShint & HTML5 Valid
Easy to understand HTML Structure, CSS Classes & Javascript markup
Contrast Colors
Well Documented

For more templates visit <a href="https://wrapbootstrap.com/?ref=chotu_1995">wrapbootstrap.com</a>
How to understand the CSS specificity with the help of Visual Studio Code
Tags: css, webdev, vscode
Published: 2020-02-16 15:20:01

Most people start writing CSS code without know correctly what is the concept called specificity in the CSS language.

First, we should understand what is *specificity*. When the browser renders the elements on the screen, he has a logic for prioritizing styled elements of DOM.

For calc the specificity number, the browser considerer the list selectors type:

- **Type elements:** a, h1, p
- **Class elements:** .wrapper
- **ID elements:** #example

To better understand how the calc works, go to know what is the number and what they represent for us.

## X-0-0
Consider that X is the number of ID selectors in the selector

## 0-Y-0
Y represents the number of class selectors, attribute selectors, and pseudo-classes

## 0-0-Z
Z represents the number of type selectors and pseudo-elements

> *, +, >, ~ not increasing specificity


Is important to remember that of force is more powerful of left to right, so, X > Y > Z


## Example 1: specificity 0-0-1

```css
div{

}
```

## Example 2: specificity 0-0-2

```css
div p{

}
```

## Example 3: specificity 0-0-5

```css
div p a ul li{

}
```

## Example 4: specificity 0-1-0

```css
.wrapper{

}
```

## Example 5: specificity 0-1-1

```css
.wrapper p{

}
```

## Example 6: specificity 1-0-0

```css
#user{

}
```

The most powerful elements in the browser, that may destroy all specificity in your stylesheet is the *inline* styles, in the next example does not matter what is determinate in the class selector `.link`, the style is more powerful in the specificity.


```html
<a class="link" style="color: black;">Read more</a>
```

Another way is the `!important`, it can destroy all your specificity because he is the strongest.

## Using the VS Code for visualizing the specificity
Maybe you don't know that if you point your mouse of the selector CSS, the VS Code let show you the calc of specificity, is super simple, try it.


I hope you liked this, share with your friends.


Read more about:
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Amazing examples of this:
https://specifishity.com/
Why do we ❤️ Oracle Linux 7 and node 10 ?
Tags: gnulinux, node, yum
Published: 2020-02-16 15:08:49

Why do 'we' ❤️ Oracle Linux 7 and node 10:

* You can network install 2 [VMs locallly](https://fsse8info.wordpress.com/2020/02/15/oracle-linux-7-network-install/) or run 2 [Cloud VMs for FREE](https://www.oracle.com/uk/cloud/free/)
* You can [login as root WITHOUT getting errors](https://fsse8info.wordpress.com/2020/02/16/oracle-linux-7-the-distro-you-can-login-to-as-root-without-getting-errors/) 
* You can [install VirtualBox Guest Additions](https://vizz8info.wordpress.com/2020/02/16/oracle-virtualbox-oracle-gnu-linux-7-guest-install/)
* You can [install node 10](https://fsse8info.wordpress.com/2020/02/16/oracle-linux-7-node-nodejs-10-howto/)
* Disk Usage Analyser installed OOTB
* AND its only $100 to get FULL support

Come on Canonical/Debian/Ubuntu its high time you stop ignoring all those bug reports and catch up with a true enterprise linux !

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/us0vk0qzize02a86cpdb.png)
Reading Snippets [47 => This] 👉
Tags: javascript, beginners, codenewbie
Published: 2020-02-16 15:05:41

"This" is used differently in JavaScript from how it is used in most other programming languages. 

The five ways "This" can be used in JavaScript include:

- In a global scope to refer to the global object

- To refer to the global function when calling a function

- Calling a method

- To refer to a newly created object when calling a constructor

- Explicit setting to the first argument of a corresponding function call


<kbd><small>Source:<a href="http://bonsaiden.github.io/JavaScript-Garden/">JavaScript Garden
</a></small></kbd>
Quicklink, loads your links at the speed of light ⚡
Tags: optimization, webdev
Published: 2020-02-16 15:04:48

This library analyzes all the links on your website that appear in the browser's viewport and therefore can be clicked by the user, once analyzed, it makes a preload of the content to which these links point, so that when the user clicks on any of them the content will load almost instantly, thus giving the user a feeling of immediate loading.

## How it works

Quicklink attempts to make navigations to subsequent pages load faster. It:

- Detects links within the viewport (using Intersection Observer)
- Waits until the browser is idle (using requestIdleCallback)
- Checks if the user isn't on a slow connection (using navigator.connection.effectiveType) or has data-saver enabled (using navigator.connection.saveData)
- Prefetches URLs to the links (using <link rel=prefetch> or XHR). Provides some control over the request priority (can switch to fetch() if supported).

## Weight

Around (<1 KB minified / gzipped)

## Usage

We add Quicklink to our project:

```
<!-- Include quicklink from dist -->
<script src="dist/quicklink.umd.js"></script>
<!-- Initialize (you can do this whenever you want) -->
<script>
quicklink.listen();
</script>

```

It is recommended to add it once the DOM load is finished:

```
<script>
window.addEventListener('load', () =>{
  quicklink.listen();
});
</script>
```

ES Module import:

````
import { listen, prefetch } from "quicklink";

```

The above options are best for multi-page sites. Single-page apps have a few options available for using quicklink with a router:

- Call quicklink.listen() once a navigation to a new route has completed.
- Call quicklink.listen() against a specific DOM element / component.
- Call quicklink.prefetch() with a custom set of URLs to prefetch.


Once configured Quicklink will perform the operation automatically.

## Documentation

For more information consult the official documentation [Quicklink]( 
https://github.com/GoogleChromeLabs/quicklink)

It also has a package for the Angular framework [ngx-quicklink](https://github.com/mgechev/ngx-quicklink)


Thanks for reading me. 😊
Creating a Zoomable Line Chart – Using React (Hooks) with D3
Tags: react, d3, reacthooks, zoom
Published: 2020-02-16 15:02:11

{% youtube dxUyI2wfYSI %}

Code on GitHub:
https://github.com/muratkemaldar/using-react-hooks-with-d3/tree/16-zoomable-line-chart

Hi, this is part of the "Using React (Hooks) with D3" video tutorial series, and in this one, we add a zoom functionality to line charts using D3.

Enjoy!
Machine freezing while developing react app
Tags: react, webdev, hardware, bash
Published: 2020-02-16 14:41:30

last week my machine start hanging while I'm  developing react app.

Machine specifications  
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rbdglb4g5anap7fe2nb1.png)

I thought this happening because :-

1) I'm using PHPSTORM (for the back end) and webstorm (for frontend) so I restarted my machine and didn't open any of those IDEs and started the application via chrome / Firefox but also freezed.

2) My coworker asked me to install https://www.npmjs.com/package/gtop and check the processes, also we checked the pc cooling system but also freezed.

3) I disabled all chrome extensions using this extension https://chrome.google.com/webstore/detail/disable-extensions-tempor/lcfdefmogcogicollfebhgjiiakbjdje but also freezed.


Today (first work day)
3) I write down this script  https://gist.github.com/MoatazAbdAlmageed/10af8fb6e587dcd9b2039fd8f4ff1c85 to  kill chrome if available memory less than 1GB and when I start developing I found chrome hanging and closed when I pressed a button 

Finally I noticed that I typed bad reducer behavior that made like an  infinity loop :) that's it 
 

I think this can help in cases like this https://github.com/facebook/react/issues/5375
Daily Challenge #189 - Convert Number into Reversed Array
Tags: challenge
Published: 2020-02-16 14:30:16

---
title: Daily Challenge #189 - Convert Number into Reversed Array
published: true
series: Daily Challenge
description: Implement a function that will reverse a number and convert it to an array. 
tags: challenge
---
###Setup
Write a function that takes a random number as input and converts it into an array with the digits of that number appearing in reverse order. 

###Example
`convertNtA(348597)` => `[7,9,5,8,4,3]`

###Tests
`convertNtA(6581554)`
`convertNtA(123456)`
`convertNtA(987123)`

Good luck!~ 
***
_This [challenge](https://www.codewars.com/kata/5583090cbe83f4fd8c000051) comes from emporio on CodeWars. Thank you to [CodeWars](<https://codewars.com/>), who has licensed redistribution of this challenge under the [2-Clause BSD License](<https://opensource.org/licenses/BSD-2-Clause>)!_

_Want to propose a challenge idea for a future post?  Email **yo+challenge@dev.to** with your suggestions!_
Build a Web Console with ASP.NET and SignalR
Tags: devops, webdev, javascript, dotnet
Published: 2020-02-16 14:06:11


{% codepen https://codepen.io/dalbir-burhm/pen/PoqNGKw %}

## What is it?

Web consoles are often featured on AWS and Azure. They offer meaningful feedback via output messages while executing time-consuming tasks.

I had to build something similar for a client recently and did some prototyping using ASP.NET with SignalR.

There are many articles on the web describing how SignalR works - and some useful examples that involve creating a chat server/client. Rather than getting bogged down in the details, I think it would be helpful to see SignalR in action.

I've uploaded my 'web console' prototype project to Github, which is a simpler implementation of SignalR with ASP.NET.

If you work with ASP.NET and are curious about web consoles feel free to download and have a play. 

Documentation can be found within the *Readme* on GitHub. 😉

{% github dalbir-burhm/signalr-web-console %}
Explain FlexBox Like I'm Five
Tags: explainlikeimfive, css, webdev
Published: 2020-02-16 14:05:03

---
title: Explain FlexBox Like I'm Five
published: true
tags: explainlikeimfive, css, webdev
---

Hi Devs, I am PHP/Laravel (Backend) Developer most of my time. Started learning CSS few days ago. Now I am trying to understand FlexBox in CSS. 

Any kind of help in understanding the FlexBox concept or making the learning easier would be much appreciated. 

Share your thoughts, resource links for learning. Anything.
Object – JavaScript Series – Part 22
Tags: javascript, tutorial, beginners, codenewbie
Published: 2020-02-16 13:55:00

Today we are going to learn about a new javascript type. This called Object

In object type we can store multiple types of data. Like – numbers, string, arrays etc.

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

See what we got in the `characterDetails`

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

We can easily change the values of the object

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

Do you know we can write function inside of object ?

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

See the result

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1o64ixkzb6xpjha66iut.png)

Can you initial a object now ?

Are you enjoying this tutorial ?

You can see the graphical version here
{% instagram B8nexRqgNPm %}

Source Codes - { Check commits }
{% github nerdjfpb/javaScript-Series %}

Originally it published on [nerdjfpbblog](https://blog.nerdjfpb.com/javascript-part-22/). You can connect with me in [twitter](https://twitter.com/nerdjfpb) or [linkedin](https://www.linkedin.com/in/nerdjfpb/)!
How do I use Amazon Linux 1 image on Vagrant?
Tags: vagrant, amazonlinux
Published: 2020-02-16 13:17:58

Sometimes, I want to use Amazon Linux 1 image on Vagrant. it because Our team uses Amazon Linux 1 image on development and production. So, I'd like to introduce how do use Amazon Linux 1 image but so simple.

Environment
```
Mac OS 10.14.5
vagrant --version
Vagrant 2.2.4
virtualbox 6.0.4 r128413 (Qt5.6.3)
```

Please install vagrant and VirtualBox before install command.
Let's install.

```
vagrant init mvbcoding/awslinux
vagrant up
```
It's super simple, right?
I read this blog.
[Vagrantでお手軽にAmazon Linuxの仮想マシンを立てる](https://techblog.recochoku.jp/5048)
Svelte with TypeScript
Tags: svelte, typescript
Published: 2020-02-16 13:15:25

Recently I implemented [svelte-draft](https://github.com/mistlog/svelte-draft), which is another way to add complete typescript support to svelte. I rewrote almost all examples in https://svelte.dev/tutorial and the result is repo [svelte-draft-tutorial](https://github.com/mistlog/svelte-draft-tutorial).

The solution is different from others in that it's in language level, instead of writing tools such as preprocessor, svelte-draft itself is implemented in [TypeDraft](https://github.com/mistlog/typedraft), which is a superset of typescript with built-in support for DSL extension, code transformation and literate programming.

Any feedback is welcome! :)