teleren/devto huggingface dataset:
Invest in your home office
Tags: health, remote, lifestyle
Published: 2020-11-23 16:22:05

Working from home the past couple of years (especially this one) has really made me glad that I invested in my home office. It's the place I spend the majority of my day in. It's the place I do my thinking, my planning, and my working. 

It's also the place where my health can quickly deteriorate to a point of *almost* no return. I wonder how many people have gained/lost an unexpected amount of weight this year?

As a developer not only is that a concern, but so is the health of my wrist and hands. If I lose that, my career becomes much harder to pursue. 

So the way I invested was by doing three things:

1. I bought an adjustable standing desk [from ikea](https://www.ikea.com/ca/en/p/bekant-desk-sit-stand-white-s29022520).
2. I bought an ergonomic mouse [from logitech](https://www.amazon.ca/dp/B07FNJB8TT/ref=cm_sw_r_cp_api_fabt1_BRYUFbKCHBYCP)
3. I bought a treadmill you can put under the standing desk [from lifespan](https://www.lifespanfitness.com/tr1200-dt3-under-desk-treadmill)

> I actually got the treadmill idea from a streamer who bought it to stay healthy while grinding in Classic WoW. He wanted to get Rank 14, a prestigious title that requires playing for around 14 hours a day for *at least* 3 months

With this, my home office life has been really great. I'm able to stay healthy while I work and preserve my body for when I retire (hopefully early 😌).

There’s more I’d like to do as well. I’ve got plans on buying more plants since it’s apparently really good for you.

The next big save would be for an ergonomic chair, since those set you back quite a bit.

Try not to be stingy with your health, we've only got one body after all.
|CSS| CSS: The Very Basics
Tags: javascript, html, css, webdev
Published: 2020-11-23 16:28:49

---
title: |CSS| CSS: The Very Basics 
published: true
description: 
tags: javascript, html, css, webdev
//cover_image: https://direct_url_to_image.jpg
---


              -What is CSS
              -Color and Background-Color Properties
              -Color Systems: RGB and Named Colors
              -Color Systems: Hexadecimal
              -Common Text Properties
              -Font Size Basics with Pixels
         
            

###What is CSS
CSS is a language for describing how documents are presented visually - how they are arranged and styled. 
CSS stands for cascading style sheets. 
CSS uses Rules. 

###Color and Background-Color Properties
The color CSS property sets the foreground color value of an element text and text decorations. 

The background color property sets the background color value of an element text and text decorations. 

###Color Systems: RGB and Named Colors
CSS has specific names for colors that can be used and memorized. 
However, the colorful names may be limited in scope. To gain access to even more colors an RGB system is in place. 
It is possible to pick up to 3 color values for red, green and blue to make up colors to use for web pages. 



###Color Systems: Hexadecimal

It is possible to use hexadecimals to create colors in CSS. 
Hex uses red, green, and blue channels similar to RGB color system. 
Each ranges from 0-255 but the colors are represented with hexadecimal values that are combined with 0-9 and A-F. 



###Common Text Properties
text-decoration sets the appearance of decorative lines-height sets the height of a line box. It is commonly used to set the distance between lines of text. 

###Font Size Basics with Pixels
Changing the font-size with CSS sets the size of the font. Changing the font size also updates the size of the font size-relative length units such as em, ex and so forth. 

There are relative and absolute values to change the font size. 

Relative em, rem,vh,vw,%, and moar 
Absolute px, pt, cm, in, mm 

Absolute Units are absolute because they are the end result, px are the most used. It is not recommended for responsive websites.
Designing a Snacking Bear Puzzle
Tags: puzzle, stream, design
Published: 2020-11-23 16:20:35

---
title: Designing a Snacking Bear Puzzle
published: true
description: I'm designing another single puzzle. This time I've found some cute, and hungry, hipster bears.
tags: puzzle, stream, design
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/529mye04b3wdfwzieq60.png
---

In this stream I design a snacking bear puzzle. Watch my, sometimes painful, process of assembling graphics, thinking about a puzzle, and putting it together.

First, the puzzle:

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

[Check you answer](https://edaqasroom.com/singles/snacking-bears)

Now, the stream:

{% youtube _GFN5wobNUQ %}
Ag
Tags: leadership, process, agile, manifesto
Published: 2020-11-23 16:18:31

Ag is a philosophy of technological development and how to best go about it. Ag provides thoughts, but little concrete activities or prescribed mechanisms to achieve the goals Ag touts (in fact, rigid prescriptions would go against one of Ag's tenets). Ag cannot be achieved through a chain of command hierarchy; nor can it be realized without the support of everyone following Ag thinking leadership.

There are four tenets of Ag, each stated as one thing amplifying another:

1. People amplify Process
2. Demonstrations amplify Specifications
3. Collaboration amplifies Negotiation
4. Iterations amplify Intentions

The word `amplify` has been specifically chosen. Without the latter things, the former things have nothing to work on, lending to an effervescence without forward progress. Without the former things, the latter are hollow; mere fractions of their potential value.

Both are needed for successful development. Prioritize the things to the left, but do not neglect the things to the right.

---

Follow this series to expand on each of these four tenets:
Revert git reset --hard 🚑 TIL
Tags: git
Published: 2020-11-23 16:07:43

> Do note that this does not apply if you did not commit your changes before you did `git reset --hard` Thanks [jessekphillips](https://dev.to/jessekphillips)!

1 day, you are updating your branch...

```bash
git pull origin/branch_name
# got merge request? Hmmm... I wonder why 🤔
```
And you saw that you have newer changes after merging it, compared to the origin.
So you want to just reset it to the same state as the origin, then you did
```bash
git reset --hard origin/branch_name
```
.
.
.
OH MY GOD!!! 😱
You realize that you got the merge request because you actually committed some changes! God knows when 😵.

So here's the git command that gonna save you!

__Introducing `Git reflog`!__
```bash
git reflog

some other commits...
39386b35 HEAD@{8}: some commit message
18cb2ce7 HEAD@{9}: the commit that I want to revert back to!
f9386b35 HEAD@{10}: some commit message
some other commits...

git reset HEAD@{9}
```
AND I just save your day! Just kidding, here's [the answer](https://stackoverflow.com/questions/31777531/git-how-to-reverse-git-reset-hard-origin-master/31777657) that actually save our day!
UI Dev Newsletter #32
Tags: html, css, javascript, webdev
Published: 2020-11-23 16:04:15

- [A Deep Dive Into CSS Grid minmax()](https://bit.ly/3nJ9wH2)
Ahmad Shadeed writes a complete guide about minmax() plus some real-world use-cases.


- [A user’s guide to CSS variables](https://bit.ly/2J00NRS)
Lea Verou writes a complete guide about CSS Variables, its support, fallback, and more.


- [A Complete Guide to CSS Gradients](https://bit.ly/35Q35Mj)
Geoff Graham makes a complete guide to CSS gradients with many useful resources.


- [What's New In DevTools (Chrome 87)](https://bit.ly/3fjOzzA)
Jecelyn Yeen shows updates from Chrome DevTools, including new CSS Grid debugging tools.


- [Responsive Snakes! And what they can teach you about CSS 🐍](https://bit.ly/35SJwTy)
Vitor Paladini shares insights about CSS from creating responsive snake, a silly webdev meme.


- [Label in Name in WCAG 2.1](https://bit.ly/35SJvis)
Todd Libby writes about the benefits of using matching text labels with the corresponding accessible name.


- [Dev Fonts](https://bit.ly/35Slqbo)
Mostafa Gaafar makes a list of the best fonts for coding with live preview.


- [10 Inspiring Ideas for Your Next Front-End Project](https://bit.ly/3lTH0Cf)
Simon Holdorf gets inspired by these 10 great examples from CodePen.



Happy coding!

[Subscribe to the newsletter here!](https://bit.ly/34155z3)
5 great Python resources 
Tags: beginners
Published: 2020-11-23 15:45:33

Hey! I wanted to share a few resources for learning Python.

🐍 Sololearn app: for the basics

🐍 Learn Python in one video from Derek on YouTube: https://youtu.be/H1elmMBnykA

🐍 Python beginner projects: https://youtu.be/1HHRWg--Ce4

🐍 A nice Python cheatsheet on Github: https://t.co/BNcwtc5FrD

🐍 Python automation: https://automatetheboringstuff.com

What are your favorite resources for learning Python? Happy Monday.😊
Apenas um post de teste :)
Tags: oi, ola, javascript, css
Published: 2020-11-23 15:32:20

---
title: Apenas um post de teste :)
published: true
description: Criando um blog com Next.js + DEv.to
tags: oi, ola, js, css
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/9f8owfj9zsyqausscc22.jpg
---

# Amigo estou aqui.

Embed
{% gist https://gist.github.com/joaoalberto-pixelwolf/67d3f103e50f2f05daab35df24e7ce4d %}

## Hum

```
console.log("Código");
```
Should I take Cloud Practitioner or go direct to Associate Certification?
Published: 2020-11-23 15:29:12


I discuss what cloud practitioner is and also why you should take it before the popular AWS SOLUTIONS ARCHITECT - ASSOCIATE.

Taking the CCP help lessen the risk and prepares you fully into the full path of certification. If you cant pass the CCP, how much likely will you pass any of the Assoc Level? 

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

Video Discussion Here:
https://youtu.be/K60zJo5IK-w
Django refactoring game - can you fix all the Models anti-patterns?
Tags: django, python, webdev
Published: 2020-11-23 15:22:00

[Play the game](https://django.doctor/challenge?utm_campaign=quiz-models&utm_medium=social&utm_source=devto)

{% youtube 55_ocs-Q8T8 %}

It's a tech demo for what https://django.doctor is capable of doing in Pull Requests when it reviews your code.

[Django Doctor](https://django.doctor/) is a code improvement bot you can add to GitHub to review your PRs
React 17, JSX Transform & IntelliJ IDE
Tags: react, typescript, intellij
Published: 2020-11-23 15:16:12

If you're using IntelliJ IDE to developing your react app, you can found a few issues after upgrade React to version 17.

Typically you followed instruction, enable react-jsx and your IDE scream on you `Cannot use JSX unless the '--jsx' flag is provided`.

OK, where's problem?

React 17 comes with the support of a new version of the JSX transform. More info can be found on the official [blog post](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html)

As a default, IntelliJ IDE doesn't use a TypeScript version which is located at your project `node_modules` folder.

The latest IDE builds (EAP 2020.3) uses TypeScript v4.0.2 but new JSX Transform require TypeScript v4.1.0 or newer.

You need to change the bundled TS version to the TS version which is using your app:

`Preferences -> Language & Frameworks -> TypeScript -> TypeScript`
(https://dev-to-uploads.s3.amazonaws.com/i/lagjwnj86lowlxair6i3.png)

Now you can enable JSX Transform at your `tsconfig.json` (more info: https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#removing-unused-react-imports)
```
...
"jsx": "react-jsx",
...
```

and optimize your imports by [official instruction](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#removing-unused-react-imports).

Thank's to the github user `codepiyush` for the hint: https://github.com/facebook/create-react-app/issues/9868#issuecomment-732016066
Learning Svelte by Converting a React Example
Tags: svelte, javascript, tutorial
Published: 2020-11-23 14:53:31

To experiment with Svelte I decided to take some React demo code and re-implement it in Svelte. The goal was to re-implement the functionality using my current Svelte knowledge. It took a bit of reading around to get it right. Overall it took me 3 to 4 days on and off. Now that I have the experience under my belt, I can probably rebuild everything in 3 to 4 hours :slightly_smiling_face:.

[The original React app](https://react-projects-2-tours.netlify.app/) was created by John Smilga, a web developer from Los Angeles. BTW [you really should check out his awesome React tutorial at youtube](https://www.youtube.com/watch?v=4UZrsTqkcW4). 

The app presents a listing of tours, I can imagine it being used as a component for a tour company.

Here's what my version looks like:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0c2qc18xl04pj2y0wrbk.jpg)

To save time and setup, I used the Svelte online Repl to create my version. You can [interact with the live demo and source code through the Repl](https://svelte.dev/repl/971eab9bc7574a3bafa466af86043997?version=3.29.7 ).

My version takes advantage of Svelte's [reactive declarations](https://svelte.dev/tutorial/reactive-declarations), [custom stores](https://svelte.dev/tutorial/custom-stores) and [context API](https://svelte.dev/tutorial/context-api).
I used Svelte stores to store and modify the array of tours. 
To dynamically manage the read more/show less button, I took advantage of Svelte's reactive declarations. Finally, I used Svelte's [context API - setContext, getContext](https://svelte.dev/tutorial/context-api) to pass information between components.

So far Svelte has been easy to think about. I like that it uses way less syntax than some of the competing approaches out there. I will do some more experimentation to decide if this is for me.

But first, I hope to do a bit more work on this project to implement fetching from the API. Once I'm done, maybe a video tutorial? Who knows?
What's your favorite dev.to merchandise? 👚☕️🎽
Tags: discuss, watercooler
Published: 2020-11-23 14:53:12

---
title: What's your favorite dev.to merchandise? 👚☕️🎽
published: true
description:  Show off your dev.to merchandise
tags: discuss, watercooler
//cover_image: https://direct_url_to_image.jpg
---

I was lucky enough to receive a lot of gift cards from Dev.to and Bought a lot of stuff from Dev Shop. But by far this Cup is my personal favorite of all.

{% tweet 1308967410125492225 %}


What's your favorite Dev.to merchandise? Send a picture 😊
Array (অ্যারে)
Tags: cpp, computerscience
Published: 2020-11-23 14:47:47

আগে গল্প , মনোযোগ দিয়ে শোন -তোমাকে বলা হল ২ জন ছাত্রের  ল্যাপটপ এর ব্যাটারি এর ক্ষমতার গড় বের করতে ইনপুট নিয়ে তাদের গড় বের করতে। তুমি a, b নামের দুইটা int type এর ভ্যারিয়েবল ডিক্লেয়ার করলে। এরপর তাতে ইনপুট নিলে নিচের মত করেঃ

scanf(“%d”, &a);
scanf(“%d”, &b);

এরপর এদেরকে যোগ করে ২ দিয়ে ভাগ করে গড় বের করলে। এ পর্যন্ত করাতে কোন সমস্যা নাই।

সমস্যা শুরু হবে যদি বলি কোন ক্লাসের সবার ল্যাপটপ এর ব্যাটারি এর ক্ষমতা ইনপুট নিয়ে স্টোর কর। তাদের ল্যাপটপ এর ব্যাটারি এর ক্ষমতার গড় বের করে প্রিন্ট কর। তখন ১০০ জন ছাত্রের জন্য a,b,c,d,……….পর্যন্ত এত্তগুলা variable declare করে এরপর তাতে ইনপুট নিয়ে যোগ করে গড় বের করা কিন্তু কোন সহজ কাজ নয়।

চিন্তা করো, যদি এমন একটা সিসটেম করা যেত যে একটা ভ্যারিয়েবলের নাম রাখব ধরো Laptop_ battery. এই Laptop_ battery এর সাথে ছাত্রদের রোল নম্বর দিয়ে যার যার ল্যাপটপ এর ব্যাটারি এর ক্ষমতার ইনপুট দিয়ে রাখ। অর্থাৎ প্রথমে যেই কাজটা করতে চাচ্ছিলাম সেটাই করব তবে অটোমেটিক ভাবে। a,b,c,……. আলাদা আলাদা ভাবে ডিক্লেয়ার করে আলাদা আলাদা লাইনে ইনপুট নিতে হবে না। এই সিসটেমটার নামই হচ্ছে অ্যারে (Array).

Array: A Linear Data Structure (অ্যারে: একটি রৈখিক ডাটা স্ট্রাকচার)
দুই ধরণের ডেটা স্ট্রাকচার রয়েছে। একটা হচ্ছে Linear Data Structure, আরেকটি হচ্ছে Nonlinear Data Structure.

লিনিয়ার ডেটা স্ট্রাকচার হচ্ছে এমন এক ধরণের স্ট্রাকচার যা মেমরিতে sequence অনুযায়ী স্টোর হয়। এই স্ট্রাকচারের ডেটাগুলো একটার পর একটা সিরিয়াল্যি সাজানো থাকে। এই লিনিয়ার ডেটা স্ট্রাকচারের দুই ধরনের representation রয়েছে। একটা হচ্ছে Array. সোজা সাপটা ভাবে একই ডেটা টাইপের (int, float, double, char) ডেটাগুলো লাইন ধরে সাজানো থাকে অ্যারের মধ্যে। আরেকটা রিপ্রেজেন্টেশন হচ্ছে, লিস্টের element-গুলোর মধ্যকার সম্পর্ক। এর উদাহরন হচ্ছে Linked List.

নন লিনিয়ার ডেটা স্ট্রাকচারের উদাহরণ হিসেবে উল্লেখ করা যায় Tree স্ট্রাকচারের কথা। Tree-তে অ্যারের মত সিরিয়াল্যি ডেটা সাজানো থাকে না বা সম্ভবও না। কারণ এখানে root, শাখা-প্রশাখা ইত্যাদির হিসাব-নিকাশ রয়েছে।

অ্যারেকে এক কথায় সংজ্ঞায়িত করতে চাইলে এভাবে বলা যায়, নির্দিষ্ট সংখ্যক ডেটা স্টোর করার জন্য একটা স্ট্রাকচার যেখানে শুধুমাত্র এক ধরণের ডেটাই সংরক্ষণ করা যায়। অর্থাৎ অ্যারের একটা নির্দিষ্ট সাইজ থাকবে। এই সাইজের চেয়ে বেশি ডেটা কোন অ্যারে স্টোর করতে পারবে না। আর একই ধরণের ডেটাই স্টোর করতে হবে। int type ডেটা স্টোর করতে চাইলে সেই অ্যারেতে শুধুমাত্র int type এর ডেটাই স্টোর করা যাবে। সেখানে int, float, double, char ইত্যাদি মিক্স করে স্টোর করা যাবে না। যদি int type একটা ১০০ সাইজের অ্যারে ডিক্লেয়ার করি তাহলে এই অ্যারেতে সর্বোচ্চ ১০০ টা int-ই স্টোর করা যাবে।

যে কোন ডেটা স্ট্রাকচারেই data insert, traverse, update, delete, searching, sorting এর মত ব্যাসিক কিছু কাজ থাকে। এই পোস্টে অ্যারের Declaration, Insertion, Traverse এই অপারেশনগুলো দেখানোর চেষ্টা করা হবে। সিরিজ আকারে।
82: The Mentorship is Optional  
Published: 2020-11-23 14:46:01


1. There is no need of looking for a perfect mentor to fill your weakness, in my case, I always lose assurance. According to an article that I was concerned about having a mentor, this comment was on the point! 

A mentor is not necessary at all. Many people have learned programming all by themselves. Although a mentor can be nice to have. While I'm not self-taught, I learned to program in university, I still had a mentor during the first few months. He was a senior student at the university and he taught me a lot. The way we did code review was that I would do a small project, finish it by myself. If I was completely stuck I would ask for help. And then when it was done I sent him my code and he looked through it. Then we met up (either at school or voice call) and we went through the code together and he suggested ways to improve it or make it cleaner. If we did it over voice call I would share the code using VSCode LiveShare so both could edit the files.

NO WORRY, THERE IS NO TESTING TO PROVE A CLEAN CODE. I love the fact that all we need to do is developing forever, and learning the failures. Some people even made fun of me for my learning-attitude. Well, then, I am born to become a programmer.

* The Flexibility
* The Patience
* The Creativity

These three keywords made me such a code-fool. :P
Drush, a useful insight
Tags: php, programming
Published: 2020-11-23 14:35:24

Taking a cue from a project I recently did for a client, today I'm talking about a very useful tool for Drupal 8: **Drush**.

# What's Drush?

From official [guide](https://www.drush.org/)
> “Drush is a command line shell and Unix scripting interface for Drupal.
Drush core ships with lots of useful commands for interacting with code like modules/themes/profiles. Similarly, it runs update.php, executes sql queries and DB migrations, and misc utilities like run cron or clear cache.”

I had some problems installing it, I chose to install it via composer, then importing it as a project dependency into *composer.json* (in root of our Drupal folder installation)
![Drupal Composer](https://dev-to-uploads.s3.amazonaws.com/i/tbtt4b1mqp1rexpnjupp.png)

Then run
> composer install

Now in vendor directory have drush directory like this
![Drush into Vendor](https://dev-to-uploads.s3.amazonaws.com/i/cg2jqozg8uqsvor6hxcb.png)
 
Drush will be executable run

> ./vendor/bin/drush 

## The importance of the cex and cim commands

How many times have you had to manually carry over changes to some configurations, for example bringing some new developments from a test environment to production?
Frustrating, right?

Drush comes to our rescue by introducing two very useful commands, **cex** and **cim**.

Whenever we make a change to the site settings, such as:
* creation / modification / deletion of content types
* creation / modification / deletion of a user role
* creation / modification / deletion of a new language
* enabling / disabling modules
* tons of other configurations

To enjoy all the potential of the two commands, however, it is necessary to set a new setting in the settings.php file, here an example:
> $settings['config_sync_directory'] = 'sites/default/config';

where *sites/default/config* will be the path to the folder where the configuration files will be placed.

Run 
> ./vendor/bin/drush cex

there will be many new files in the yml format that correspond to all the exported configurations (if you have already done other exports, the exported files will be only the updated files), below an example: 
![Drush CEX](https://dev-to-uploads.s3.amazonaws.com/i/qn92pjixch6v7zzkn6ew.jpg)

Synchronizing these files in the folder of other environment (for example, in production) and after run
> ./vendor/bin/drush cim

and we will have the configurations **aligned between different environments**.

Very useful, right?
What is Vuex
Tags: beginners, vue
Published: 2020-11-23 08:34:49

#Introduction

vuex is a [state management library](https://vuex.vuejs.org/guide/state.html#single-state-tree) for [vue](https://vuejs.org/) that makes it less cumbersome to share and distribute data within the vueJs application.

#Prerequisite

Basic knowledge of `Vue` is required

#What next
Without `vuex`, we can simply distribute data between components using `props`, but as the application gets larger, managing data can be quite a handful.

To solve this problem, we make use of the vuex, here we have a centralized store, and from that store our components can access our state directly.

A typical `store` folder looks like this


```js

  import Vue from 'vue'
  import Vuex from 'vuex'

  Vue.use(Vuex)

  export const= new 
  Vuex.Store({
   state:{
   },
   getters:{
   },
   mutations:{
   },
   actions:{
   }
})
```

**Store** : This holds out state in our application, and this can be accessed using 

```js
this.$store
```

**State** : This is the data that will be shared in the application. so instead passing it via props. we can simply have it in our store and have our components access them directly.

**Getters**: [According to the Vuex documentation](url), we think of getters as the computed property for store and it has an helper , which is the `mapGetters Helper` that simply takes out store getters to out component computed property.

**Mutations**: State can only be changed in a vuex store by commiting a mutation. A mutation cannot be called directly. Inorder to do so, you need to use `store.commit`. Instead of committing a mutation in a component methods, we simply  dispatch an action on the mutation.

**Actions** : Action commits a mutation using the `contex.comit`and dispatch the action using `store.dispatch`. We also have the mapAction helpers.


Understanding the basic concept of vuex can help us structure and maintain our code effectively

For further reading , [check out the vuex documentation to read more on the core and advance concepts of vuex](https://vuex.vuejs.org/#what-is-a-state-management-pattern)

Original article was published on my [blog](https://judyblogbeta.netlify.app/2020-what-is-vuex/)