teleren/devto huggingface dataset:
Do you deliver 100% every day?
Tags: work, life, balance
Published: 2019-12-12 11:28:36

---
title: Do you deliver 100% every day?
published: true
description: Protect your passion, or it may be your last deadline.
tags: work, life, balance
---

### What is considered professional?
I have been grinding in technical debt for some months on end and with some uninspiring user-stories on my plate. This happens now and then, how cool your project may be, there's always some stuff that nobody wants to do, but it just needs to happen.

But now that I'm working on fun user-stories again, and in a greenfield side-project, my level of code quality, attention to detail and willingness to have 100% test coverage and all these little things are so much easier and come more natural than when I'm working in a codebase with technical debt. So I guess that means the joy you get from the work, directly influences a big part of the quality standard of the code. Is that professional of me?

### Protect your passion
I guess no, that's actually not really professional of me, but can you really expect an employee to deliver 100% quality, 100% of the time? I doubt there's a profession out there where an individual would be performing 100% all of the time, however passionate he or she may be. Passion is not a guarantee that you'll be 100% happy and productive every single day. Passion just keeps you going. And Passion is a finite resource, if you burn yourself out, your passion may be gone forever. So actually yes, I would say it is professional of me to protect my passion and wellbeing. I think it's normal that the percentage of quality an employee delivers can fluctuate over the year. It's up to you to respect your boundaries and take breaks, talk with someone, maybe change up the stuff you're working on for a little while, even if a deadline is creeping closer. The deadline isn't the only important thing for a software product to be successful, it's also the people that need to stay passionate, happy and productive.

### Your last deadline
I think passion is especially an important aspect of this line of work, sometimes you really need to grind deep, and you can't expect to work in the cleanest codebases all the time, so it's that passion that can keep the engine running through those muddy roads. The last thing you want is to lose your engine in the middle of a swamp, it can be lost forever, then what did you accomplish by making that deadline? It will be your last deadline. Protect your sanity and speak up when you need a change.

So next time you're in a rut, or you just can't manage to get to that 100% standard, talk to people, try to change it up. The fact that your V8 engine is running like a beaten-up Chevy isn't going to contribute to any good causes in your company. It'll just bring a mountain of consequences for you and the people around you. So be professional and steer your own ship. That's what I'll be doing from now on. Or try harder at least.
I made a BAT explorer in Vue.js
Tags: tutorial, vue, crypto, ethereum
Published: 2019-12-12 16:24:44

Over the past 18 months, I have been really getting into cryptocurrency and all the space has to offer. I work with it in my day job and also now have taken it upon myself to explore certain tokens and coins to see what else the crypto space has to offer me as a consumer and developer. The technology behind the blockchain is super fun to explore and at first quite hard to grasp.

So what is BAT and why did I choose it? Ok so BAT is the token behind BRAVE, the adblocking, cross-traffic trackers browser being pioneered by Brendan Eich, the man who gave us Javascript and Mozilla. Brave's goal is to have a private browsing experience and still allow content creators to get paid and those who view that content to also get paid. That's where BAT (Basic Attention Token)comes in. Built into Brave is a wonderful way for you to Tip sites that sign up to there creator program. So how do you earn BAT? Well, the browser will send you a number of ads per hour and you can choose if you wish to see them or disregard them. Every time you choose to view and ad you get some BAT! Perfect!

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

So this is an early-stage version of the build, but right now I think it does the main functions. 

View a transaction 
View an address
View the ledger 
Search for a Transaction 
Search for an address

The Tech behind the site is Vue CLI using Axios requests to make HTTP calls to a third party API to get all the information. With the token being part of the ethereum network the next stage is to really start having some drilled down data on the coin and pull some more information out. 

I hope you can look at the site and any budding UI designers out there with any tips on how to structure the data, maybe get a good user experience in the next update I would certainly welcome.

https://bat-explore.com/
A supply and demand marker clustering with React and Leaflet.
Tags: css, react, leaflet, maps
Published: 2019-12-12 16:16:46

A supply and demand marker clustering concept. The idea is to quickly indicate which area that are short of supply and which that has more.

Created with React, Leaflet and OpenStreetMap Tilemap by Carto.

https://codepen.io/hazmi/full/rNaxQNQ
7 projects, 12 months
Tags: goals, webdev, portfolio
Published: 2019-12-12 16:09:23

So originally I was planning to do a 12 projects, 12 months year-long project. I only had two ideas and one is a bigger one. Someone gave me the idea of doing sprints for it and develop it in different phases.

But I still want to do other projects along the way so I decided to switch off months, or do a couple months of sprints and then switch to a different project but I’ve decided to talk about some projects exactly I want to do.

I honestly haven’t decided all of them but getting started on these will take me through September so I’m sure I’ll have more ideas later.

<h2>PROJECTS TO BE COMPLETED:</h2>
<strong>Workout Calendar</strong>- This is going to be my larger project. I’m hoping to do six different sprints in order to get it up and running and quality. I’m hoping to have it to at least a usable state by April at the latest. I also want to create this as an app which I have never done before. If anyone knows if there is an android equivalent to <a href="https://approadmap.io">this site</a> let me know.

<strong>Color picker that changes site colors</strong>-  I saw <a href="https://jackharner.com"> Jack </a> do this on his portfolio site. Basically he takes into account the color contrast for accessibility and when you choose a new focus color it’ll update the rest of the site to maintain color contrast. I thought that was super awesome so I want to try it out.

<strong>Build a react component</strong>-  This seems like something that will be really quick but I want an idea for something I will reuse time and time again to do it for. I don’t necessarily care if it’s been done before but everything I’ve coded before are complete projects so I want to try to do something that can be put in multiple.

<strong>Breakout</strong>- This is one of those games I loved playing as a kid. I want to recreate this using C++ so that I have more experience instead of just lessons. Break out of the tutorial stage… get it? I’ll see myself out.

<strong>WordPress theme</strong>- I’ve wanted to create my own theme for a while now. Granted I do love my current one I do want something personalized.

Basically I want my GitHub to be a lot more entertaining than it was this year. I think this year I was stuck in a “I don’t know what I want to create.”

And who knows what 2020 will bring. If I get selected for the second part of the scholarship I’ll be doing 5 projects with the Nanodegree.

<h3>What projects do you have planned for 2020?</h3>

Originally published : https://jkimexploring.wordpress.com/2019/12/12/7-projects-12-months/
5 Useful Javascript Tricks
Published: 2019-12-12 15:51:26

Some of these tricks may seem like standard operating fair but remember there was a time you were not aware of some of these javascript features. These are features that when discovered made our lives easier and our love of javascript grow fonder. 

# 1 - Object Destructuring

Sometimes you get very large objects with lots of data thrown at you like event objects with onclick or onchange events or request objects when dealing with http requests.

Object destructuring gives us an easy way to parse properties out of a large object into its own stand alone variable. Here is a video on the subject.

https://www.youtube.com/watch?v=6M5FzuqHpcc

# 2 - The Ternary Operator

While this is a feature of pretty much all programming languages, it's great to reduce the bulk of if/else statements for simple processes. Mix this with object destructuring you have a way of switching the value being used by a process between similar objects with ease. Below is a video on the topic.

https://www.youtube.com/watch?v=L9TSy0yu35U

# 3 React: Passing components as props

There are many ways to pass down information between components whether it be context, prop drilling, props.children or passing a child component as its own prop (or if needed, you can bring out the big guns and setup redux). Passing down JSX/Components via props can be an awesome way to limit prop drilling in basic situations that don't warrant context or redux.

Here is a video on the subject

https://www.youtube.com/watch?v=xp6OR0ghJ2I

# 4 Anonymous Functions

Whether it be lambdas in python or arrow functions in javascript, anonymous functions allow us to separate the functions processes from the variable that contains it. So we can create arrays of functions, objects filled with functions. Arrow functions make all of our days better:).

const helloWorld = () => console.log('hello world');

# 5 filter array method

Sometimes you just need some of the items in an array but you still need the original array so popping, shifting and splicing your away may not be an option, enter the filter method. With filter, you can run a test on all items of an array and return a new array with those that pass the test.

//Find all even items in an array

const newArray = oldArray.filter(value => return value%2 == 0)
Display search in Google results
Published: 2019-12-12 15:40:02

0

I wrote this JavaScript code for users to write your brand name on Google The search form will be displayed to users Users only need to type in your brand name to display this search and it is most commonly used on the homepage. To use this code copy the JavaScript and paste it at the bottom of the last line of the main content, and don't worry the JavaScript code will not be displayed to users and will only appear in Google results.

<script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "WebSite",
        "url": "https://coolernew.com/",
        "potentialAction": {
            "@type": "SearchAction",
            "target": "https://query.example.com/search?q={search_term_string}",
            "query-input": "required name=search_term_string"
        }
    }
    </script>
Django News - Issue 1
Tags: django, python, drf, djangocon
Published: 2019-12-13 19:36:43

---
title: Django News - Issue 1
published: true
date: 2019-12-12 15:35:42 UTC
tags: django, python, drf, djangocon
canonical_url: https://django-news.com/issues/1
cover_image: https://images.unsplash.com/photo-1481622254766-0f0a35bf6e77?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80
---

### News

#### [Django 3.0 Released](https://cur.at/ciqWMHh?m=rss)

3.0 is a major new release and includes the beginning of async support for Django, official support for MariaDB, and more.

[djangoproject.com](https://cur.at/ciqWMHh?m=rss)

#### [Django REST Framework 3.11 released!](https://cur.at/fthmbdD?m=rss)

Django REST Framework 3.11 brings support for Django 3.0, Open API schema improvements, and an improved API for validators/defaults requiring the serializer context.

[django-rest-framework.org](https://cur.at/fthmbdD?m=rss)

#### [2020 DSF Board Election Results](https://cur.at/r7plqlb?m=rss)

The Django Software Foundation is the non-profit that manages the financial/legal matters for the project.

[djangoproject.com](https://cur.at/r7plqlb?m=rss)

#### [Announcing DjangoCon Africa](https://cur.at/V4HK72W?m=rss)

The inaugural DjangoCon Africa is happening in November 2020 in Addis Ababa, Ethiopia.

[djangoproject.com](https://cur.at/V4HK72W?m=rss)

#### [Django 2.2.8 and 2.1.15 Released](https://cur.at/xWt9FRy?m=rss)

Security release!

[djangoproject.com](https://cur.at/xWt9FRy?m=rss)

### Projects

#### [django-stubs](https://cur.at/OaHkRvj?m=rss)

Adds static type checking to Django.

[github.com](https://cur.at/OaHkRvj?m=rss)

#### [django-controlcenter](https://cur.at/wNeaUa6?m=rss)

django-controlcenter makes adding widgets and dashboards including charts to the Django Admin.

[github.com](https://cur.at/wNeaUa6?m=rss)

### Videos

#### [Password validation in Django](https://cur.at/ZPfm0pD?m=rss)

Sasha wrote much of the password authentication code for Django and in this video explains how to configure it properly.

[youtu.be](https://cur.at/ZPfm0pD?m=rss)

----

Thanks to [@TimMossholder for making this photo available freely on @unsplash](https://unsplash.com/photos/ZYBl6VnUd_0)
I cannot understand the concept of JavaScript frameworks.
Tags: explainlikeimfive, javascript
Published: 2019-12-12 15:30:36

Hi there,

Pardon me for asking, but I can't understand the concept of using JavaScript frameworks, and why/when one would/should use them. Can some kind soul please explain to me something about them, and give me some advice? React, Vue, Angular, etc.

I apologize if the question sounds stupid.

Regards,
Ahmad S.
Haye.cr: Expressive string syntax to Array/Hash and Vice-Versa parser for Crystal. Based on the javascript version.
Tags: crystal, javascript, opensource
Published: 2019-12-12 15:29:12


I have published the Crystal version of Haye: An expressive string syntax to Array/Hash and Vice-Versa parser for Crystal. Based on the [javascript](https://github.com/poppinss/haye) version.

GitHub repo: https://github.com/krthr/haye.cr

Here is an example:

## Usage

```crystal
require "haye.cr"
```

#### Pipe -> Array

```cr
expression = 'required|email:unique,users'
parsed = Haye.fromPipe(expression) # Haye.fromPipe(expression, Haye::PresenterTypes::Array)
```

Output (`Haye::Presenters::Node[]`)
```
[
  #<Haye::Presenters::Node:0x7f11fd891e40 
    @name="required", 
    @args=[]
  >, 
  #<Haye::Presenters::Node:0x7f11fd891de0 
    @name="email", 
    @args=["unique", "users"]
  >
]
```

#### Pipe -> Hash

```cr
expression = 'required|email:unique,users'
parsed = Haye.fromPipe(expression, Haye::PresenterTypes::Hash)
```

Output (`Hash`)
```cr
{
  "required" => [], 
  "email" => ["unique", "users"]
}
```


I hope you enjoy!
Two Yarn Commands That Saved My Life Today & You Should know
Tags: productivity, todayilearned, yarn
Published: 2019-12-12 15:27:14

I have a project that need to re-use for another project, I cloned it from my old repository then start to develop my project.

When I think the project was done, the last think that I have to check is the dependencies, its still up-to-date?

And I use command `yarn outdated` to check my outdated dependencies, and it show me as below:

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

It's amazing, yarn give us nice information about the outdated package. You can check the affect from the colour green, yellow, or red.

Then the next thing to do is to upgrade, use command `yarn upgrade-interactive`  to upgrade all or several of packages. It's almost same with `yarn upgrade` command. But this give us interactive ui that we will able to choose which one to be updated and not.

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

You might already know about this, but I too excited to share it because save a lot of my time 🤠.
Coding skills turned into X-mas gifts 🎁
Published: 2019-12-12 15:22:58

Recently I’ve stumbled on this [awesome post about creative X-mas gift ideas](https://dev.to/joehobot/simple-christmas-gift-ideas-using-your-skills-4ji4) on Dev.to. Since [SashiDo](http://www.SashiDo.io) is a platform that enables developers to build any API they need in no time, I thought that what we offer can definitely help to make some of those ideas come true! 

If you want to use your coding skills this year to make your loved ones happy, here are just a few ideas to think about:

* **Build a simple native app for a family member** to help them with a repetitive task.
* Help a friend to **make their dream come true of having their own website**. 
* Do a quick **MVP of a web or mobile app** for a Charity organization.

I’m sure you can think of quite a few more gifts like that, so why don’t you get started working on them with [SashiDo](http://www.SashiDo.io) for FREE? Here is how you can do that:

1. [Sign up for our 45-day Free Trial](https://dashboard.sashido.io/register) **by the 31st of Dec**.
2. Send us an e-mail at team@sashido.io with the subject **“Xmas gift”**.
3. Share your ideas with us and receive a **special bonus**.

Looking forward to having you onboard and Merry Christmas! 🎄

Sincerely yours,
Team SashiDo
NPM vs. YARN
Tags: javascript, react, npm
Published: 2019-12-12 02:40:21

In this blog, I’m going to compare and contrast two well-known JavaScript package managers.

__NPM__ stands for _Node Package Manager_. It is:
- the default package manager that comes with the Node.js 
- an online repository of javascript packages and modules.
- a command-line utility works with said repository to manage packages.

__Yarn__ is an alternative JavaScript package manager that uses npm’s registry, giving you access to the same packages as npm. It was developed under the leadership of Facebook and supported by Google, Exponent and Tilde engineers to address the problems that they were dealing with npm. 

##__lock file:__
In npm versions 3 and earlier, many developers faced a dependency versions problem where the app broke when moving a project from one machine to another. Npm did have a shrinkwrap command in an earlier version that created a lock file. The problem with this was that the file could not be generated automatically, you had to always update it yourself. To fix this problem, yarn automatically installs (updates) a yarn.lock file that contains the exact same version of the dependency that should be installed on every device. After yarn, Npm 5 introduced the package-lock.json file to replace npm-shrinkwrap.

##__Package Installation:__
NPM installs packages one by one, waiting for the first package to be installed before beginning the next. Yarn, by  contrast, speeds up the process by installing multiple packages at the same time. Additionally, yarn stores the package to your disk such that for the next installation, the package is immediately used instead of waiting for an HTTP request to get it. 

##__CLI Commands:__

- After creating a React app by using the following command:
```javascript
npx create-react-app my-app-name
```
   We can create a package.json file by using:
```javascript
npm init //or
yarn init
```

- The following commands are used for adding/updating/deleting packages

```javascript
//using npm
npm install <package..>
npm upgrade <package..>
npm uninstall <package..>

//using yarn
yarn add <package..>
yarn upgrade <package..>
yarn remove <package..>
```
create-react-app component library mode
Tags: react
Published: 2019-12-12 15:00:57

---
title: create-react-app component library mode
published: true
description: 
tags: react
---

How, after all these years, does create-react-app not have a "component library" mode?

# It's been a huge pain point for a lot of people for a long time

That's why there are a ton of libraries and articles about how to do it, which are drastically different from one another.

All it needs is this
• Full endorsement from the react team
• Use the same webpack configuration as create-react-app
• ...Except the entrypoint needs to NOT have a hash in the js filename

What doesn't work
• Anything built on rollup, because it's not the same configuration
• Anything that's "manual" because it will have to be manually updated by the author when cra updates
• Anything that doesn't have community support because no one new can find it (terrible developer experience)
Day 22 of⚡️ #30DaysOfWebPerf ⚡️: Bundle analyzers
Tags: webperf, webdev, performance, javascript
Published: 2019-12-12 14:45:03

{% twitter 1205136161406160898 %}


---

This article was originally published on [sia.codes](https://sia.codes/). Head over there if you like this post and want to read others like it, or sign up for my [newsletter](https://buttondown.email/sia.codes) to be notified of new posts!
Giving Thanks for Diversity in Tech: Pariss Athena
Published: 2020-01-07 00:29:55

---
title: Giving Thanks for Diversity in Tech: Pariss Athena
published: true
date: 2019-12-12 14:45:00 UTC
tags: 
canonical_url: https://www.thisdot.co/giving-thanks-for-diversity-in-tech-pariss-athena
---

![unnamed](//images.ctfassets.net/zojzzdop0fzx/67odJtT9Pi0G0q5Ewbnnlr/3147802d1cd7645d4445b53bdf8da53f/unnamed.jpg)

Pariss Athena is a React and React Native engineer who works as a Hiring Team Member for G2i, and is also the founder of Black Tech Pipeline- a platform which offers resources, opportunities, and a community for Black technologists and supporters.

Having a very active presence on social media, Pariss is the creator of the #BlackTechTwitter hashtag and movement, which supporters use to share information, resources, and build social/professional networks online.  A major voice in the conversation about diversity and inclusion in tech, Pariss would define an inclusive event or product as, “something that was designed to appeal to everyone, so that it is relatable, comfortable, equitable, and welcoming to all people.”

When asked more about her work with diversity based initiatives, Pariss had a lot to share about her Black Tech Pipeline initiative: “The tech industry has lacked Black representation and called it a pipeline problem forever. Since creating the #BlackTechTwitter hashtag, I realized that the pipeline problem didn't actually exist. I had a new supportive community filled with incredibly skilled techie's, who looked like me, form together in a matter of hours to prove it. When the #BlackTechTwitter thread went viral, employers and conference organizers began partnering with me to hire and extend opportunities to the #BlackTechTwitter community. Soon after, I founded Black Tech Pipeline as a platform where #BlackTechTwitter could continue to communicate and collaborate in a safe space. Also, where I could better extend opportunity to Black technologists and work with opportunity extenders.” 

Pariss shares not only her passion for strengthening tech communities, but also her rich technical knowledge by speaking at conferences, having recently delivered a talk on  the low and high level differences between React and React Native at React Native EU in September. She will also be giving talks at several upcoming conferences, including Boston CSS, React Summit Amsterdam, and RenderATL.

Although extremely active, Pariss is also very family oriented, and loves spending time with her immediate family, including her son.  She is a poet, actor, filmmaker, and editor, and loves to learn new things about cooking, hair, and makeup from Youtube.

To learn more about Pariss and her social media initiatives, you can follow her on Twitter, [@ParissAthena](https://twitter.com/ParissAthena).