teleren/devto huggingface dataset:
SVG Splash. A beautiful Electron-based SVG painting app.
Tags: react, showdev, discuss, javascript
Published: 2020-04-11 12:02:50


![website-screenshot](https://puu.sh/FD5E4/1576d52658.png)
www.svgsplash.com

This is my first dive into Electron and writing desktop apps. I chose Electron due to my existing familiarity with JS and React.js. The documentation is excellent but I found most things required trial and error to get working, especially around the menu. Getting started is fast and if you know React, it's pretty easy to build electron apps.

I followed this excellent guide to get started - https://www.freecodecamp.org/news/building-an-electron-application-with-create-react-app-97945861647c/.

The only real dependencies were SASS, fontawesome and React.js (and Electron of course). The main application logic was in a single file.

The app, while written in React, uses a lot of vanilla DOM manipulation for the SVG part. Due to the nature of rendering SVGs, I had to use an `<object>` element, which actually caused me a lot of issues.

Some of `<object>`'s gotchas include not being able to setup event listeners (meaning when you clicked the SVG, the object got focus and you're window listeners would never fire), how to export the SVG structure in a nested document hierarchy and global shortcut communication between the main and renderer threads in electron.

Happy to discuss anything I've learned, the build or the code in general. It's not open source but will always remain free.

Feel free to leave some feedback.
Daily Developer Jokes - Saturday, Apr 11, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-04-11 12:00:07

---
title: "Daily Developer Jokes - Saturday, Apr 11, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Saturday%2C%20Apr%2011%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e12591b4fccd.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ Why don't parents teach their kids about regular expressions?

___A:___ Because they don't want them playing with matches
 -->
Shopping cart state saved in database or cookie for guests?
Tags: discuss, security, privacy
Published: 2020-04-11 11:40:29

Hi, everyone

How would you save the shopping cart of a guest user that has left the page and wants to come back later to finish the checkout? (a database with an auto-generated `UUID` or create a profile with `nulls` for `username` and `password` and update once they create an account)

Avoid using `local storage` because if they switch to another device all their cart will be empty but it will contain items on the device they used(EX: has 3 items on PC but 0 on mobile for the same user). 

Even though these are not very sensitive information like a user's credit card or a user's address some guest shoppers may feel like their privacy is invaded by such features. To save their cart to a database, but at the same time, they would feel that your website is lacking if they come later and find an empty cart.

Also leaving the e-commerce site may come down to some problems they didn't expect like, an electrical problem or an urgent problem came up.

How are you dealing with these dilemmas?(problems)

Thanks for any opinions and discussions on this subject
Simple hook to deal with async function calls
Tags: react, reacthooks, javascript
Published: 2020-04-11 11:33:51

---
title: Simple hook to deal with async function calls
published: true
description: 
tags: react, react-hooks, javascript
---

For smaller react projects I wanted something simple to deal with asynchronous function calls like fetch API. Rather than littering the component with useState for dealing with loader, error and response I wrote a really simple hook

```javascript
import { useState, useCallback } from 'react';

function useAsync(handleAsync, initialResponse = {}) {
  const [isLoading, setLoading] = useState(false);
  const [error, setError] = useState(false);
  const [response, setResponse] = useState(initialResponse);

  const fetchValue = useCallback(
    async (options) => {
      setLoading(true);
      setError(false);

      try {
        const apiResponse = await handleAsync(options);
        setResponse(apiResponse);
        setLoading(false);
      } catch (error) {
        setError(true);
        setLoading(false);
        setResponse(error);
      }
    },
    [setError, setLoading, setResponse, handleAsync]
  );

  return {
    response,
    isLoading,
    error,
    fetchValue,
  };
}

export default useAsync;
```

So I can use this as follows

```javascript
const { response, fetchValue, isLoading, error } = useAsync(signupUser);

const handleSubmit = useCallback(() => {
  fetchValue({ email, password });
}, [email, password, fetchValue]);
```

```javascript
export const signupUser = async ({ email, password }) => {
  const response = await fetch(`dev.to/signup`, {
    credentials: "include",
    method: "POST",
    headers: {
      "Content-type": "application/json",
    },
    body: JSON.stringify({
      email,
      password,
    }),
  });

  if (!response.ok) {
    throw new Error(response);
  }

  return response.json();
};

```

[react-async](https://docs.react-async.com/getting-started/usage) does provide something similar but it had lot of other functionality that I won't need. So going with a simple hook instead of a complete library just for this alone seemed like a better choice for me.
Git: Ignore files locally
Tags: git
Published: 2020-04-11 08:51:12

> **TL;DR**
>
> 1. Navigate to `.git/info`, in the project folder
> 2. Open the `exclude` file in your editor
> 3. Put in the files you want to ignore locally (path must be relative to  root of project)
> 4. Run the following command in the terminal (in your project folder) :  `git update-index --skip-worktree <path-names>`

All projects have some configurations that are meant to be private. When you’re working on a project in a private repository, there may be many configurations specific to the production or staging environment for-example, the database connection information.

But these relate to the environment on the server. What if you want to change the configurations for local development? You can’t push these local changes, and putting these configuration files in the .gitignore file is also a no-go as these files need to be tracked by git.

Turns out you can ignore local files using the power of Git! If you navigate to the `.git` folder, there is a folder in there called `info`, which should have one file inside called `exclude`. Edit this file and add all the local files you want to locally ignore (this file follows the structure of the root .gitignore file, so the path of files should be relative to the root project folder as is the case with the .gitignore file).

This will ignore any new files you want to ignore, but what about the files already being tracked by git (like the db connection information) ? To do that we’ll need to update the git cache to ignore these files. To do this, we can run the command: `git update-index --skip-worktree <path-names>`.

To bring these files back to being tracked by git (in the case that you need updated configurations from the repository), simply run `git update-index --no-skip-worktree <path-names>`. For more information about the update-index command, follow [this](https://git-scm.com/docs/git-update-index) link.
Need Help in fixing a error
Published: 2020-04-11 11:31:13

AttributeError: partially initialized module 'pandas' has no attribute 'plotting' (most likely due to a circular import)
Please help me in fixing this error
from apps import app
from flask import  jsonify,render_template, request
import time,xlrd
import pandas as pd


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

@app.route("/index1")
def index1():
   return render_template("layouts/index1.html")   

@app.route("/index2")
def index2():
   return render_template("layouts/index2.html")

@app.route("/api/info")
def api_info():
    file_location = "C:/Users/chand/Downloads/SUMMARISED.xlsx"
    workbook = xlrd.open_workbook(file_location)
    sheet= workbook.sheet_by_index(3)
    sheet.cell_value(0,0)
    sheet.nrows
    sheet.ncols
    data = [[sheet.cell_value(r,c) for c in range(sheet.ncols)] for r in range(sheet.nrows)]
    type(data)
    gini_value_oot = data[13][3]
    gini_value_trn = data[13][2]
    status = gini_value_oot - gini_value_trn
    return jsonify(status) 

@app.route("/api/ks")
def api_ks():
    file_location = "C:/Users/chand/Downloads/SUMMARISED.xlsx"
    workbook = xlrd.open_workbook(file_location)
    sheet= workbook.sheet_by_index(3)
    sheet.cell_value(0,0)
    sheet.nrows
    sheet.ncols
    data = [[sheet.cell_value(r,c) for c in range(sheet.ncols)] for r in range(sheet.nrows)]
    type(data)
    ks_value_trn = data[13][7]
    ks_value_oot = data[13][8]
    status_ks = ks_value_oot - ks_value_trn
    return jsonify(status_ks)

@app.route("/api/risk")
def api_risk():
    file_location = "C:/Users/chand/Downloads/SUMMARISED.xlsx"
    workbook = xlrd.open_workbook(file_location)
    sheet= workbook.sheet_by_index(3)
    sheet.cell_value(0,0)
    sheet.nrows
    sheet.ncols
    data = [[sheet.cell_value(r,c) for c in range(sheet.ncols)] for r in range(sheet.nrows)]
    type(data)
    risk_rank_oot = data[13][12]
    risk_rank_trn = data[13][13]
    status_risk = risk_rank_oot - risk_rank_trn
    return jsonify(status_risk)

@app.route('/data', methods=['GET', 'POST'])
def data():
    if request.method == 'POST':
        file = request.form['upload_file']
        data= pd.read_excel(file)
        return render_template('layouts/data.html', data=data.to_html())
My First CLI Tool
Tags: cli, javascript, webdev, philippines
Published: 2020-04-11 11:25:47

## Philippines Stock Exchange Tracker CLI
<p align="center"><img src="https://raw.githubusercontent.com/ianvizarra/pse-tracker-cli/master/.doc/demo.gif"/>
</p>

I created my first CLI tool using JavaScript/TypeScript. It ain't much, but it's honest work :)

Philippines Stock Exchange Tracker CLI Tool: Display the current Stock Price by Symbol in your terminal.

Install by running this command: 
`npm install -g pse-tracker-cli`
<p align="center"><img src="https://raw.githubusercontent.com/ianvizarra/pse-tracker-cli/master/.doc/install.gif"/>
</p>
Usage Example:
`pse JFC`
 
Source Code: https://github.com/ianvizarra/pse-tracker-cli
API Source: https://github.com/edgedalmacio/phisix
Asteroid App: Phase Two
Tags: twiliohackathon, javascript, node
Published: 2020-04-11 11:15:04

For the Twilio Hackathon, I'm doing an automated WhatsApp account to which you can ask information about the closest asteroid to Earth at a particular date.

## Done So Far

I came across some issues using Sanctuary. It doesn't really support promises well. Looking through the issues, somebody suggested using [Fluture](https://github.com/fluture-js/Fluture), which looks interesting, but I don't really have a lot of time to put in it now, so it'll have to wait until a fluture project. There was also some suggestions about defining a specific type for promises, but I couldn't seem to get it to work. In the end, I thought it was more trouble than it was worth and decided to switch to Ramda instead.

I have written a module that parses the user's request and returns and object with the `result: 'ok'` and the start and end dates of the request if successful and simply `result: 'notOk'` otherwise. For now, it will only return the current day as both start and end dates if the request includes the words "asteroid" and "close". It isn't very customisable, yet, but it returns something.

Because Sanctuary didn't work well with promises and its Maybes were a bit weird, I decided to change the approach and do something more Elixir-like. The parser function will return a result of `ok` or `notOk`. Based on that, the next function will either send a request to NeoWs or to Cat Fact API (did you know that a healthy cat's body temperature is between 38 and 39ºC?). Then I created an object with `ok` and `notOk` keys to simulate some sort of pattern matching.

Finally, I put together a README based on [Twilio's example](https://github.com/twilio-labs/sample-template-nodejs/blob/master/README.md). I'm not sure if it follows the guideline of having clear setup instructions yet, but hey, it's a beginning.

The code is now public on [my github repository](https://github.com/SavagePixie/asteroid-app).

## Next Steps

The basic structure of the app is almost done. For the next phase, I plan on accomplishing the following:

- Plug the node API to Twilio, so that when a user sends a message to the WhatsApp number it'll actually get processed by asteroid app.

- Tidy up the code a bit. Right now it's quite messy.

After that is done, I'll want to look into making the requests for data more customisable. At the very least, I want to make it possible to ask for one specific date. But I would also like to allow a date range and expressions like "last week" or "in two weeks". We'll see how I manage.
4 Simple CSS Transform Properties
Tags: webdev, css, html, beginners
Published: 2020-04-11 10:56:20

CSS Transforms are a great way to add more interesting elements or animations to your website. You will be able to resize things, move them and even provide different perspectives for your website tags.

{% youtube y9M0GoiYRcI%}
<strong>[Youtube: CSS Transforms Tutorial](https://youtu.be/y9M0GoiYRcI)</strong>

To learn some simple CSS transforms, we will be using its properties to modify the layout and sizing of an image. We will cover:

* CSS transform <strong>rotate</strong>
* CSS transform <strong>translate</strong>
* CSS transform <strong>skew</strong>
* CSS transform <strong>scale</strong>

```css
/* Rotate in degrees */
transform:rotate(360deg);

/* Translate across X, Y axis */
transform:translate(50px, -50px);

/* Skew */
transform:skew(45deg);

/* Very complicated matrix transform of perspective */
transform:scale(1.5);
```
This should give you all the building blocks to understand how to transform CSS properties work. Let me know if there are any other items you wish me to cover.

## Follow and support me: 
Special thanks if you subscribe to my channel :)
* [🎞️ Youtube](https://www.youtube.com/channel/UCvM5YYWwfLwpcQgbRr68JLQ?sub_confirmation=1)
* [🐦 Twitter](https://twitter.com/adrian_twarog)

## Want to see more:
I will try to post new great content every day. Here are the latest items:
* [Adobe XD to Fully Responsive WordPress Site](https://dev.to/adriantwarog/adobe-xd-to-fully-responsive-wordpress-site-16e0)
* [Adobe XD to HTML Full Process](https://dev.to/adriantwarog/adobe-xd-to-html-full-process-ao6)
* [Full Tutorial on how to use SASS to improve your CSS](https://dev.to/adriantwarog/full-tutorial-on-how-to-use-sass-to-improve-your-css-57on)
* [Creating a Mobile Design and Developing it](https://dev.to/adriantwarog/creating-a-mobile-design-and-developing-it-5c4o)
Twitter for login to dev.to
Tags: functional
Published: 2020-04-11 10:51:18

#Well no offence, may be not the ideal 'newbie' post on the site :) 

When I try to signup using Twitter its asking for super powers over my Twitter account. This can be corrected on the Twitter app itself I guess? Sorry if its the default behavior from Twitter, have not used it for web site authentication before. 

### #JustWondering #

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7jcwo2vjzfveajcv7xeh.JPG)
Convert any Visual Studio Code Theme to Sublime Text 3 or IntelliJ IDEA
Tags: opensource, vscode, typescript, javascript
Published: 2020-04-11 10:45:07

Today I wanted to share my work in progress open-source project [`code-theme-converter`](https://github.com/tobiastimm/code-theme-converter).

Working with Visual Studio Code is a daily routine. Still, there are moments where I prefer to use other editors like Sublime Text 3 or WebStorm.

Opening these editors without using my themes was a huge bummer for me. 
To solve this problem, I've created this package to "easily" convert themes to Sublime Text 3 or IDEA IDE's.

Currently supported is only converting a theme to a Sublime color scheme, with more to come soon.
Scrolling effect ⛳
Tags: codepen, html, css, javascript
Published: 2020-04-11 09:32:50

---
title: Scrolling effect ⛳
published: true
tags: codepen, html, css, javascript
---

Simple scrolling effect with just a few lines of code 😷

{% codepen https://codepen.io/atulcodex/pen/bGNQgOa %}
CSS Multiple Colors Scrollbar
Tags: css, html, webdev, beginners
Published: 2020-04-11 09:25:21

The scrollbar is come’s after when you have large data. So here we have to modify the scrollbar with colors.



In this element, we used custom colors in a scroll and also modify the border-radius color. Here also we used width in the scroll bar side and commonly used background color in content. Here we used some popular color in a Y scrollbar and here we used hidden properties in the X scroll side.

Make it yours now by using it, downloading it and please share it. we will design more elements for you.

[Download Source code](https://w3hubs.com/css-multiple-colors-scrollbar/)
Install terraform on ubuntu
Published: 2020-04-11 09:17:52

**OS info**
>vagrant@ubuntu-xenial:~/downloads$ cat /etc/*release*
>DISTRIB_ID=Ubuntu
>DISTRIB_RELEASE=16.04
>DISTRIB_CODENAME=xenial
>DISTRIB_DESCRIPTION="Ubuntu 16.04.6 LTS"
>VERSION="16.04.6 LTS (Xenial Xerus)"

**Download zip file**
`wget https://releases.hashicorp.com/terraform/0.12.24/terraform_0.12.24_linux_amd64.zip`

**Unzip it**
`unzip terraform_0.12.24_linux_amd64.zip`

**Export PATH**
`export PATH="$PATH:<Path to terraform unzip file>"`

**Reflect new path**
`source ~/.profile`

**Test**
`terraform --version`
Block COVID global virtual innovation camp with blockchain and tech experts
Tags: blockchain, programming, techtalks, news
Published: 2020-04-11 09:14:19

The dramatic spread of the COVID-19 pandemic has disrupted lives, communities and businesses worldwide. If you wondered what you could do to help, consider joining the [Block COVID](https://www.blockcovid.org/) global virtual innovation camp where you could contribute ideas and work on innovative solutions that solve problems for “the new normal”, while learning from thought leaders in blockchain and across diverse industries. 

*Block COVID is a month-long virtual open innovation camp to activate anyone anywhere to build COVID-19 solutions on the blockchain and more. By providing a collaboration platform, mentorship, subject-matter expertise, and technical support, the program aims to inspire and catalyze implementable products to address societal challenges arising from the COVID-19 pandemic by the end of the month.*

Organized by [TryCrypto](https://trycrypto.com/) and [WEF Global Shapers](https://www.globalshapers.org/hubs/san-francisco-hub), the innovation camp will be joined by some of the best and brightest in the technology, design, and social impact community. Leading blockchain projects such as  [Truffle](https://www.trufflesuite.com/) and [Sia](https://sia.tech/) will also be part of the program.  

![Alt text of image](https://pbs.twimg.com/media/EVFmYvsU8AEuQxH?format=png&name=900x900)



Block COVID will provide an opportunity for participants to:

  •	Learn new tools to ideate, design, build, and implement innovative solutions, such as creating service design frameworks and shipping blockchain applications

  •	Hear from thought leaders across diverse industries and put their top tips into practice

  •	Connect with other developers, designers, entrepreneurs, students, industry experts, and more!

  •	Make a difference in the world!


**Details:** 
https://blockcovid.org
Join the [Block COVID Slack channel](https://join.slack.com/t/blockcovid/shared_invite/zt-d66uozjr-xQ_bWSy2Up4vfacaRhmS_w) to connect with other participants and stay updated with the program.
Live web scrapping with JS
Tags: web2os
Published: 2020-04-11 09:02:11

Despite the popular clam (irony) after my previous post of **live debugging with nodelive**, I will keep sharing the software I wrote.

First, install `web2os`.

```sh
$ npm i -g web2os
```

And then, write your first scrap, to... (muaaahahahaha!!) Google search:

```js
require("web2os")
 .create()
 .open("https://www.google.com")
 .onWeb((done, error) => {
   done(document.title);
 })
 .onOs((done, error, data) => {
   require("fs").writeFile(
     "Google title.txt", data, "utf8", ()=> done()
   );
 })
 .run(() => {
   console.log("DONE!");
 });
```

Then we have to run it. We need `electron` for that. If you have it installed, proceed (otherwise, install it and proceed):

```sh
electron scrap.js
```

A Chrome browser will open and (muahahahahaha) start to obey your code.

Happy coding.
CSS: bad parts
Tags: programming, css, webdev
Published: 2020-04-11 10:05:29

---
title: CSS: bad parts
published: true
date: 2020-04-11 09:01:25 UTC
tags: programming,css,webdev
canonical_url: https://stereobooster.com/posts/css-bad-parts/
---

There is a famous book (at least it was some time ago), by the person who brought us JSON - JavaScript: good parts. It basically teaches which part of the languages are nice to use and won’t get you in a trouble. Book was published way before ES6 and recent goodness. It was helpfull at the time.

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

(Image source: [reddit](https://www.reddit.com/r/ProgrammerHumor/comments/621qrt/javascript_the_good_parts/))

I had a thought: what if we can write down bad parts - things that you should avoid - for CSS.

- **Global styles**. Whenever I use styling based on tag names or use nested selectors I find conflict in styles eventually. Instead we can use unique class names for each element. This approach requires some tooling (for example, CSS Modules) or atomic styles.
- **Margins**. See [Margin considered harmful](https://mxstbr.com/thoughts/margin).
- **Z-index**. Whenever you start using z-index, eventually you will get `z-index: 999999999` or conflicting items (for example, custom select vs modal). Instead we can rely on order of elements in the DOM. See [Z Index Wars](https://reacttraining.com/reach-ui/dialog/#z-index-wars).

by [Evgenia Milcheva](https://dev.to/emilcheva/comment/nk82)

- **Inline styles** (Editor note: I would say use only external styles or only inline styles, never mix)
- `!important`

**What else would you recommend to avoid**?