teleren/devto huggingface dataset:
jquery-particles v1.10.3 released
Tags: javascript, showdev, github, opensource
Published: 2020-03-17 08:08:00

# New jquery-particles version released, 1.10.3.

Github [here](https://github.com/matteobruni/jquery-particles)

--

Checkout the new FontAwesome demo here:

{% codepen https://codepen.io/matteobruni/pen/QWbrLoK %}

---

Checkout the demo here: <https://particles.matteobruni.it>

Do you want to replace the old, outdated and abandoned particles.js?
You're in the right place!

---

Here are some demos!

## Characters as particles

[![Particles chars demo](https://media.giphy.com/media/JsssOXz72bM6jGEZ0s/giphy.gif)](https://particles.matteobruni.it/#chars)

---

## Mouse hover connections


[![Particles mouse connections demo](https://media.giphy.com/media/XzvZThpVbxHxMYz5xt/giphy.gif)](https://particles.matteobruni.it/#connect)

---

## Polygon mask

[![tsParticles Polygon Mask demo](https://media.giphy.com/media/lNRfiSgaMFbL4FMhW6/giphy.gif)](https://particles.matteobruni.it/#mask)

---

#### Background Mask particles

[![tsParticles Background Mask demo](https://media.giphy.com/media/dWraWgqInWFGWiOyRu/giphy.gif)](https://particles.matteobruni.it/#background)

---

#### COVID-19 SARS-CoV-2 particles

[![tsParticles COVID-19 demo](https://media.giphy.com/media/fsVN1ZHksgBIXNIbr1/giphy.gif)](https://particles.matteobruni.it/#virus)

**Don't click! DON'T CLICK! OH NO IT'S SPREADING!!!!**

*COVID-19 is not funny. It's a serious world problem and we should prevent its spreading. If you are in a risky area please STAY AT HOME*

--

## GitHub repo
<https://github.com/matteobruni/tsparticles>

##npm
<https://www.npmjs.com/package/tsparticles>

##yarn
<https://yarnpkg.com/package/tsparticles>

##jsDelivr
<https://www.jsdelivr.com/package/npm/tsparticles>

---

Feel free to contribute to the project!
Pick the best parts of an object
Tags: javascript, beginners
Published: 2020-03-17 08:06:01

When you simply want to pick parts of an object. No matter how complex.

Q: I asked my self... I want the value of that's properties - property. How can I get that?

A: Destructuring an object.

Resources: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring.

```
const object = {price: 42, qId: true};
const {price, qId} = object;

console.log(price); // 42
console.log(qId); // true 
```

The above example is a simple one. The one below is slightly more complex.

```
let object = {price: 42, qId: {rate: {sId:"foo"}, tracked:false}, uId: 10};
let {price, qId:{rate:{sId} } }= object;

console.log(price); // 42
console.log(qId); // {rate: {sId:"foo"}, tracked: false}
console.log(rate); // {sId:"foo"} 
console.log(sId); // "foo"
```

If you have any destructuring 🧰 tips, share them below.
Making Your Rails Console Interesting..
Published: 2020-03-17 08:05:41

Link: 
https://blog.joshsoftware.com/2020/01/20/making-your-rails-console-interesting/
As a Rails developer, every time we work on a Rails project we heavily use rails console for development. I love the rails console as much as any Rails developer. It is the best place to experiment or validate your logic but…!
useEffect hook functional component in reactjs
Tags: react, javascript, webdev, codenewbie
Published: 2020-03-17 08:02:48

```javascript
import React, {useState,useEffect} from "react"
import randomcolor from "randomcolor"

function App() {
    const [count, setCount] = useState(0)
    const [color, setColor]=useState(randomcolor())    
    function increment() {
        setCount(prevCount => prevCount + 1)
    }
    
    function dibs() {
        setCount(prevCount => prevCount *2)
    }
    
  
  //Callbacks for useEffect for changing color
  useEffect(()=>{
            setColor(randomcolor())
},[count])
  
    return (
        <div>
            <h1 style={{color: color}}>{count}</h1>
            <button onClick={increment}>Increment</button>
            <button onClick={dibs}>Doubly</button>
        </div>
    )
}
export default App
```
**This codeSnippet doing follwing things when we increment then number increment with color changing and for doubling also same🔼
incrementing number by 2 and by using effect callbacks hooks i studied useEffect hooks here hope you guys also get it **

[GithubGistLinks](https://gist.github.com/krishnadevz/28616f5d4bf080b0c061e7226b7d2083)
Why should you be a web developer?
Published: 2020-03-17 07:36:37

The world is now digital and everything herein. Internet of things rocks and sooner internet will be everywhere!. Yea.
At the heart of this revolution is the web. It controls all IoT.
If you're not a web developer, you're missing out on this giant stride. You should be a web developer because;
•Web development skills enable innovation and entrepreneurship — 
•The cheapest way to launch a new business is often through a web presence. Web developers have high rates of job and career satisfaction, and this is promoted through the flexible and accommodating employment policies of many tech companies.
•the joy you derive from connecting the world through the web is super!

You should consider a web development skill today.
Why you should be a WEB developer
Published: 2020-03-17 07:27:51

Here are five reasons why you need to be a web developer
1-web developers skills enable innovation and entrepreneurship.
    The cheapest way to launch a new business is often through a web presence.

2-web developers have high rate of job and career satisfaction and this is promoted through flexible and accommodating employment policies of many tech companies

3-web developers are in high demand
     Employers struggle to find qualified web developer and the demand keeps growing . Average junior  web developer in Nigeria earn #104,000 and average senior web developer in Nigeria earn #120,000 monthly.

4-web developers are constantly evolving
    The technology industry moves quickly and web developers are constantly learning and advancing in their career.

5-web developers are shaping the future
   From self-driving cars to the "Internet of things", developers are changing the way technology and world works.

Reference: www.medium.com,www.careerfoundry.com
mycontribution - View Your Contribution Graph From the Terminal
Tags: github, git, bash
Published: 2020-03-17 07:09:33

I wrote a script for fun, that brings your contribution graph to the terminal:

![GitHub](https://dev-to-uploads.s3.amazonaws.com/i/9ubg7ih0tvijxz084hg3.png)

The code ([GitHub link](https://github.com/MarounMaroun/mycontribution)):

```bash
#!/bin/bash

username=$1
symbol=${2:-▣}
if [[ -z $username ]]; then
    echo "Usage: mycontribution <username>"
    exit 1
fi

declare -a months=("   J a n" "  F e b" "M a r" "  A p r" "   M a y" "  J u n" "   J u l" "     A u g" "   S e p" "     O c t" "  N o v" "    D e c")
currentMonth=`date +%-m`-1
months=("${months[@]:$currentMonth}" "${months[@]::$currentMonth}")

declare -a graph=($(curl -s https://github.com/"$username" | grep '<rect class="day"' | grep -oP '(?<=fill=").*?(?=" )'))

if [[ -z "$graph" ]]; then
    echo "User $username doesn't exist"
    exit 1
fi

# print months
echo
for month in "${months[@]}"
do
    printf "%s" "$month"
done

printf "   "
printf " %s" ${months[0]}

# print contribution graph
echo
i=0
while [[ "$i" -le 6 ]]; do
    for (( n="$i";n<${#graph[@]};n+=7 )); do
        if [[ "${graph[$n]}" == "#c6e48b" ]]; then
            printf "\\e[38;5;71m$symbol\\e[0m|"
        elif [[ "${graph[$n]}" == "#7bc96f" ]]; then
            printf "\\e[38;5;64m$symbol\\e[0m|"
        elif [[ "${graph[$n]}" == "#239a3b" ]]; then
            printf "\\e[38;5;22m$symbol\\e[0m|"
        elif [[ "${graph[$n]}" == "#196127" ]]; then
            printf "\\e[38;5;238m$symbol\\e[0m|"
        # no contribution
        elif [[ "${graph[$n]}" == "#ebedf0" ]]; then
            printf "\\e[38;5;252m$symbol\\e[0m|"
        fi
    done
    echo
    (( i++ ))
done
echo
printf "Less \\e[38;5;252m$symbol\\e[0m|\\e[38;5;71m$symbol\\e[0m|\\e[38;5;64m$symbol\\e[0m|\\e[38;5;22m$symbol\\e[0m|\\e[38;5;238m$symbol\\e[0m More"
echo
```

Enjoy :)
What's the best solution to build easy extensible components in React?
Tags: react
Published: 2020-03-17 06:48:37

Hello, everyone. My site contains many tables but it's so different with normal tables which are provided by some React UI frameworks like Material Kit UI. I tried with Material Kit UI for the first time, but it was so complicated for me to customize table components as I wanted. I tried to make the tables from scratch but it was big time consuming and really difficult. If someone could suggestion the best solution, it would be great help for me. I want a underlying and power library which can build the components whatever I want and save my time. Specially, table is important in my site. I used react-bootstrap-table, but it seems like not perfect in styling and customization.
CombineExt: An open-source collection of operators and custom publishers missing in Apple's Combine framework!
Tags: ios, swift, opensource, computerscience
Published: 2020-03-17 06:44:13

CombineExt provides a collection of operators, publishers and utilities for Combine, that are not provided by Apple themselves, but are common in other Reactive Frameworks and standards.

https://github.com/CombineCommunity/CombineExt

The original inspiration for many of these additions came from my journey investigating Combine after years of RxSwift and ReactiveX usage.

All operators, utilities and helpers respect Combine's publisher contract, including backpressure.

### Operators
* `withLatestFrom`
* `flatMapLatest`
* `assign`
* `materialize`
* `values`
* `failures`
* `dematerialize`
* `partition`

### Publishers
* `AnyPublisher.create`
* `CurrentValueRelay`
* `PassthroughRelay`
Remote Mob Programming
Tags: teams, remote, corona
Published: 2020-03-17 06:02:58

---
title: Remote Mob Programming
published: true
description: How teams can fight Corona by social distancing
tags: Teams,Remote,Corona
---

My team was practicing mob programming for some time and since we are now forced to work from home, we have to do it remotely.

For anyone who wants to try mob programming or wants to know how, I wanted to share this great resource:

https://www.remotemobprogramming.org/

They have assembled a list of best practices and tools that work well remotely.

Stay healthy! 🦄
HOW TO WRITE MAINTAINABLE CODE
Tags: react, redux, functions, hooks
Published: 2020-03-17 06:00:26

---
title: HOW TO WRITE MAINTAINABLE CODE
published: true
description: Guidelines for writing maintainable code especially on the frontend 
tags: React, redux, functions, hooks
---

Frontend guidelines

Prefer small, simpler functions and components over longer ones. Bigger functions and components can always be decomposed into smaller parts.
Why? Bigger Functions/components are harder to follow/read.  They can also introduce complexities into your type declarations and testing.

Ideally, Functions should hardly be longer than 20 lines (humans have short attention spans) and keeping things more focused can help keep others reading your code engaged. When it’s getting longer than that, start thinking of how you could break down the complexity and abstract more specific logics out into other functions, inline with Single Responsibility of the SOLID principle.  

It is okay not to know every underlying implementation details of each sub-function just the same way we utilize helpers from third party libraries and not worry about their implementation details.  Testing increases the confidence of a codebase and smaller functions enable easier testing. 

React Components should hardly be longer than 100 - 200 lines. Rather than having several logics in a component, abstract the logic into normal helper functions or hooks if the logic relies on other hooks. 

Prefer at most 5-10 custom properties for your react component. Having more custom properties might be a sign that you need to break down the component into smaller parts and group them into a logical shared folder

Avoid passing props beyond one level. Prop drilling can often make debugging harder and also make it difficult for others to follow your code. When you need to pass props beyond one level, prefer using Context API with hooks. This combined with typescript greatly simplifies things

Be mindful of premature optimizations with React’s memoizing functionalities as React is quite fast. Memoizing introduces complexities into your codebase, hence, you want to be sure that you are reaping the benefits

Use more specific descriptive names for variables, functions, components and types e.g getEntireStudentsSummerData  over getData

Prefer pure functions whenever possible

Avoid big reducers as they are just like every other function. Reducers can always be split into subReducers.
The React ecosystem has moved from HOC/Props towards more functional hooks, hence, we should try to move towards that as they are simpler, easier to type and debug
Hello Job.
Tags: mycareersftuture, mcf, init, introduction
Published: 2020-03-17 05:53:20

You've probably [seen us in the news](https://www.straitstimes.com/business/economy/better-matching-more-listings-on-government-job-portal), read about us [from other places](), or even [the factsheet if that's your kinda thing](https://www.wsg.gov.sg/content/dam/ssg-wsg/wsg/ag-tg/jobseekers/Factsheet_on_MyCareersFuture.sg.pdf). Now here's what goes on behind the scenes.

If you hadn't found the willpower to click any of the links above... (that's dissapointing, but,) We're the technical team behind the MyCareersFuture platform. MyCareersFuture is a jobs portal product created in collaboration between Workforce Singapore and GovTech to support the careers of Singapore residents.

Our initial focus was on Professionals, Managers, Executives, and Technicians (PMETs) in later stages of their careers, and we're gradually widening that focus to support any resident in any stage of their careers.

It's often easy to see the glamourous side of things as the media tends to like to portray it (sponsored or otherwise), but behind every awesome product - not saying we're there yet, but we will be - is a team in the depths of the engine room that truly believes in the product and who are often very invisible.

This blog was created to tell that story (and more), so if tech's your kinda thing, MyCareersFuture happens to be built in-house, and you should (please?) follow us if you'd like to get the latest from real humans on the ground.

If you're interested, other pieces by the technical team can be found at:
- [A hire calling: Making MyCareersFuture an inclusive platform](https://www.tech.gov.sg/media/technews/hire-calling-making-mycareersfuture-inclusive)
- [MyCareersFuture: As Told By The Technical Team](https://blog.gds-gov.tech/mycareersfuture-as-told-by-the-technical-team-3ae36802c973)

See you in a post soon!

P.S. We're also hiring, if you consider yourself talented enough, discounting any Dunning-Kruger effects you're aware of, and would like to join us/GovTech in general, you may hit me up at joseph_goh@tech.gov.sg 😊
Use this Free Angular Bootstrap Template
Tags: angular, bootstrap, opensource
Published: 2020-03-17 05:27:58

I was looking for a starter angular bootstrap template for free, but I couldn't found. So i build my own, and thought of sharing it with the people.

The template is made with Angular CLI version 9.0.3.

### Packages used

angular: ~9.0.2
bootstrap: ^4.4.1
jquery: ^3.4.1

### Layouts available
3 Home page layouts




### Source code
{% github https://github.com/aatifhussain/angular-bootstrap-template %}
useState hook functional component in reactjs
Tags: react, hooks, javascript, webdev
Published: 2020-03-17 05:07:58

**this the simple explanation/codeSnippet for useState hook in reactjs**
```javascript
import react,{useState} from "react"
function App(){
const [answer]=useState("yes lovely")
return(

  <div>
  
  <h1>Are you coming{answer}</h1>
  </div>
  
)
}
export default App
```
#if anyone having something please drop comment we add or merge your thing that'sall
Check gist if you want https://gist.github.com/krishnadevz/ac301ae23a7060800e87ab95159454cd
Designs I like — Swiggy’s popup driver map
Tags: ux, design, swiggy, uber
Published: 2020-03-17 04:40:58

Who doesn’t order food online these-days, swiggy is a popular food delivery app in India. After ordering the food, I keep looking at my mobile freq, but why? becoz I am hungry mate… I need my food right away. I need to know where my delivery guy is, i would like to call him if he takes a wrong turn, tell him some shortcuts, know how long it would take for him to handover so that I can eat something else in the meanwhile ;)

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

I need to do all the above and then more, all the while using other apps. That’s where I find this pop-up map design very much helpful.
This is an awesome design and flexibility from android for letting app developers do this intuitive and helpful design.

Swiggy’s user empathy, in this regard, is better than Uber’s I would say.
Though this is a common design in 2019, Uber for some reason doesn’t have this. One reason would be Uber’s driver arrival is supposed to be quicker and the passenger is expected to be ready while booking the cab. Is it?

In real world, many a times Uber arrivals are easily > 15m and also there are scheduled rides. Consumers play 30s games these days to kill boredom so 15m is way too much for a ask, uber cannot argue about being quicker than swiggy. What do you think can be uber’s reason for not having this feature?
Day 6 [D&D Character Sheets]
Tags: 100daysofcode
Published: 2020-03-17 04:31:56

# Report

Today I did some some research to stay on the right side of the law. In general it's easy to forget about things like copywrite and trademark law when the project is a tinkle in your eye. Keeping those things in mind I learned that about the SRD, or systems reference document, a set of  D&D rules provided under the open gaming license.

The SRD was created to give DMs the ability to write and publish content for D&D, but license also grants access to an interested developer (do not take legal advice from a blog post). 

Once I knew where my data was coming from I could reshape my schema to include the relevant data for a character sheet. I also began writing a seeder to transfer the data into the database. For now the process is done by hand so it's time-consuming, in the future I should automate this or investigate whether anyone has already done this for me! 

# Project

{% github ApproachingApathy/100days-dnd-character-sheets %}

The First project will be an app to keep D&D character sheets.

## Stack

I'll be using Node.js and building a full-stack Express app with MongoDB.
### Requirements
#### Minimum Viable 

- [ ] Investigate automating or finding a source for the data in the SRD.
- [ ] Present a D&D Character Sheet
    - [ ] The sheet should display all the same info as the first page of the 5e Official sheet.
- [ ] Users should be able to log in and create player-characters.
- [ ] Users should be able to edit character sheets.
- [ ] Users should be able to organize character sheets into groups (parties/tables)
- [ ] Sheets should auto calculate basic stats like ability modifiers.
    - [ ] Support Proficiency Bonuses 

### Cake
- [ ] Extend character creation to allow the user to use any of the three common stat gen methods.
    - [ ] Point Buy
    - [ ] Standard Array
    - [ ] Roll
- [ ] Extend the character sheet to all the info in the 5e official sheet.
- [ ] Allow for image uploads for character portraits.
- [ ] Allow for extended descriptions/backstories.
    - [ ] Characters should have nice full page backstories.
    - [ ] Preferably use a markdown editor.
Should Web API be limited to RESTful?
Tags: restful, webapi, graphql
Published: 2020-03-17 03:26:34

Actually, should Web API be limited to RESTful?

I remember in 2008, it was more like custom-made API made by our backend team, and it can be anything.

But around 2010, it was RESTful every where, and it seemed all Web API was RESTful.

Today in 2020, GraphQL tend to be "custom-made" or "anything".

Should we design Web API today as RESTful or just "anything" or "custom made"?  Can we have an API that is partly RESTful and just about anything?  Then it will be RESTful together with something similar to GraphQL that can return custom data.
Uncaught TypeError: Cannot read property "state" of undefined
Tags: react, opentok, javascript, help
Published: 2020-03-17 03:04:07

Hi,

I am wondering why the console reports the error at line 36. Thanks for your help.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/p3mi9puowqxy35wgb18m.png)
Accessing OmniFocus Link in iOS
Tags: sirishortcuts, ios, omnifocus
Published: 2020-03-17 01:57:39

Kourosh Dini's "Creating Flow with OmniFocus" recommends adding OmniFocus (referred to as OF from hereon) links to the note section of actions. This helps separate projects and the actual task required to complete the project. This segregation also helps with decluttering Forecast perspectives, because you can add a due date to the task associated with the project instead of a due date on the project. This means that your Forecast perspective won't be cluttered with 15 actions (which all live inside a project) all being due at once. 

This workflow was made easier due to OF3's 'Copy as OmniFocus Link' feature in the context menu. However, it is not as easy to do on iOS. While you can press the 'Share' function on any project or action and copy its OF link, any OF project or action can share up to 5 different outputs.  This means there are a lot of taps required just to access its link.

In response to this, I created a shortcut that has served me well. It only has 4 actions, so I feel comfortable writing out the steps here (in the future, I may include screenshots. For now, I feel lazy).

Get OmniFocus Link:
1. Accepts `Text and URLs`
2. Get `Item at Index` `4` from `Shortcut Input`
3. Show notification `Copied Text "Item from List"`
4. Copy `Item from List` to clipboard

While Step `3` may be considered redundant, I feel reassured I'm getting what I want every time I invoke the shortcut. It would be awkward if the shortcut was to break one day and I didn't know what content I was yanking to my clipboard.

Sometimes, the best shortcuts are utility shortcuts. They don't do anything profound, but aid immensely with the creation of new shortcuts. I was only able to achieve Step `2` because of a meta-shortcut called 'Output Inspector'. It previews the type and content of items being shared in the share menu. I will discuss its function in another post.
Poll: Do you know in JavaScript, what `a == null` is for, exactly?
Tags: poll, javascript, discuss
Published: 2020-03-17 01:41:38

Poll: what does `a == null` do exactly in JavaScript?

1. I know exactly what it does.
2. I have some ideas, but not exactly.
3. I don't know exactly what it does.
4. I don't know exactly what it does before today.

you can add what it does in the answer as well.
DEV.TO writers, what MD tools do you use?
Tags: discuss, writing, productivity
Published: 2020-03-17 01:12:14

I started using markdown as my primary document format, but the tools I'm using are very rudimentary. I use VS CODE + MD ext + Grammarly. I wrote a few scripts for cleaning up folders and committing text and images to GitHub. Then I have to copy the text to DEV.TO and other platforms, manually upload images, replace their URLs, preview, etc, etc. It feels harder than it needs to be.

Does anyone have any suggestions on how to make it more streamlined?