teleren/devto huggingface dataset:
First Udemy Certificate!
Tags: a11y, webdev
Published: 2021-07-31 00:44:54

True, it is just a 3.5 hour course, but I've suspected a lot of us have fallen down the [Udemy](https://www.udemy.com/) rabbit hole. It looks like I'm at about a 30-38% average completion rate, so hitting that 100% was a little more exciting than I realized it would be :) 

The course I completed was Creating Accessible Websites by [Stefany Newman](https://stefanywebdesign.info/). Why did I chose that one? Can't quite recall. Would I choose this one again? Can't quite answer that, either. But it's not because it wasn't good. I just truly don't have much to compare it to at this early stage of my accessibility learning. 

Not long ago, I was able to chat with an accessibility auditor, and one of the main points I came away with is that making accessible tech can include interpretation at times. There are a lot of guidelines. That doesn't make them hard and fast rules everywhere 100% of the time. But a person has to start somewhere! And that is what I am doing.

Taking this course makes me want to learn more. I want to see where those guidelines tend to fall given various circumstances. If much bias might even exist within areas of the field (bias likely exists everywhere, right?) 

This course made me excited to learn more. To figure out how to get the screen reader to pronounce my first name in english and my last name in dutch (even though according to how I understand the rules of english, the screen reader is still somehow messing up). I would like to figure out how to add alt text to the image of the gray and white rabbit at the top of this screen! 

Ultimately, I would like to say, thank you, Stefany Newman, for making me even more excited about learning about accessibility. 

Photo by <a href="https://unsplash.com/@gavla?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Gavin Allanwood</a> on <a href="https://unsplash.com/s/photos/rabbit-hole?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Open graph scrapper & Vercel
Tags: vercel, microservices, webscrapping
Published: 2021-07-31 00:00:31

![Timur Nurislamov on Dev.to](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jv5jz1oysoalx525lv52.png)

I'm developing pet project which operate with links and I need to show preview of website like in social networks.
I found great [project](https://github.com/jshemas/openGraphScraper) on GitHub but I didn't want to put parser in project code so I created microservice which deployed on Vercel.

[og-parser on GitHub](https://github.com/tn/og-parser)
How to add a comment or a remark for a user in Linux?
Tags: resource
Published: 2021-07-31 00:00:00

---
  title: How to add a comment or a remark for a user in Linux?
  published: true
  tags: Resource
  date: Sat Jul 31 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/add-comment-or-remark-for-user-linux
  cover_image: https://melvingeorge.me/_next/static/images/main-12796c99dfac070e460c1f1ea18a5645.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/add-comment-or-remark-for-user-linux)
  
To add a comment or a unique remark for a user, you can use the `usermod` command followed by the `-c` (comment flag), then followed by the comment in quotes, and then specify the name of the user to add the comment in Linux.

For example, let's say we have a user called `john` who is the system administrator. So we can add a comment of `Administrator` for the user `john` in Linux.

To do that we can use the `usermod` command like this,

```bash
# Add a comment for a user
sudo usermod -c 'Administrator' john
```

- Sometimes you may need to use the `sudo` command before the `usermod` command to obtain the correct privileges to execute the command.

Now if you look at the output of the list of all users using the `cat /etc/passwd` command in Linux, you can see that the `john` user has a comment called `Administrator` attached to the user.

It may look like this,

```bash
# Output of the /etc/passwd file
# ...
john:x:975:975:Administrator:/:/usr/bin/nologin
# ...
```

Try executing the above command in this [online terminal](https://copy.sh/v86/?profile=archlinux) to see the result.

### Feel free to share if you found this useful 😃.

---
Responsive Web Design Test Tool
Tags: design, webdev
Published: 2021-07-30 23:55:57

Creating a website is not just making it. You also have to be able to adjust the appearance of your website to be responsive on all devices (such as laptops, tablets, mobiles and others), so that users can feel comfortable when opening your website.

Here I have a recommended online responsive web design testing tool:
1. [responsivedesignchecker.com](https://responsivedesignchecker.com/)
2. [ami.responsivedesign.is](http://ami.responsivedesign.is/)
3. [responsivetesttool.com](http://responsivetesttool.com/)
4. [responsinator.com](https://www.responsinator.com/)
5. [websiteresponsivetest.com](https://websiteresponsivetest.com/)

Don't forget to visit [Codelapan](https://codelapan.com) to read articles about [web development](https://codelapan.com/category/web-development), [laravel tutorial](https://codelapan.com/tag/laravel), [web design](https://codelapan.com/category/web-design), [software testing](https://codelapan.com/category/software-testing) and others.
STOCK SIM v0.1 - v0.19
Tags: python, gamedev
Published: 2021-07-30 23:43:31

![Screenshot of game](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bnttvk645s6ukzmwdtm7.png)

--ADDED--
added NPC next to fountain
added achievement image
added rich skin
added egg [f, dev skin]
added hidden achievements, [f, click fish], [f, click achievement], [f, unlock dev skin], [f, complete all achievements]
added materials stocks
added bank
added ATM
added banker NPC
added music
added bank, gains money every 30 seconds, upgradable interest
added pixel coins
added icons for currencies
added new city with dev statue as monument
added bank art
addded donating to the statue
added clouds
added animation to NPCs
added player animation while still
added a stock market in dev town
added fountville sign

--CHANGED--
changed screen width to 1000
changed top bar to drop down
changed sleeping achievment threshold
changed bank to Devtown
changed achievement names to acount for statue
changed the stocks so a category per stock market
changed so you have to buy rich skin for pixel coins
changed some things on title screen
changed stock market to have graph of old prices
changed second stock market to also have this graph
changed graph to have lowest value be the lowest that stock can go
changed top bar to be translucent
changed clouds to be translucent
changed player skin art
changed all art
changed music

--FIXED--
fixed bug where you couldn't walk the entire distance of the screen
fixed glitch with fish achievement
fixed last achievement
fixed issue with being able to go to other cities while in a building, resulting in the player ending up in the void
fixed glitch with shop void
fixed glitch with fountain fish
fixed changing skin bug accidently when added animation to player
fixed stock bug
fixed cloud
fixed market glitch
fixed shop glitch
New adventures as DevRel 🤓
Tags: startuplife, devrel, devjournal, jobs
Published: 2021-07-30 23:25:07

*Hello world!*

*Updates: I am excited to be complementing my passions for tech and building community!
Although, I have been involved in tech communities since 2014, and formerly started leading and building communities since 2018, I am excited to share that these last months, I have been working as Developer Relations (also known as Developer Advocated, evangelist for others!) 🥑*

## Being a DevRel is not always easy or smooth while planning different activities, but it is fun, for sure. Moreover being a DevRel at a startup has extra levels of difficulty, however it is an interesting challenge!

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gk7t897omzhyrm2h7yu5.png)

This July, I am excited for joining [Qovery](https://www.qovery.com/) ! A great startup that is helping tons of devs to deploy better and faster! 🌪️ Let’s make the cloud simple again! 


*Qovery* has a vibrant community! devs are engaged sharing their projects, questions, suggestions! I feel super happy to hangout with such energetic people!
And also this week, we hold the community call 📲
I do really appreciate when a startup (or any business, entrepreise) is open to teach/listen from first hand to its community!



Also, having so many resources for the community is very motivating! 🤓 From [blogs](https://www.qovery.com/blog), to [forums](https://discuss.qovery.com/), this [community call](https://www.qovery.com/community-call), also the [ambassadors program](https://hub.qovery.com/docs/community/become-an-ambassador/), the meetings/chat in [discord](https://discord.com/invite/Bed5FRa), and more more!


I am really excited for this new challenge! 🙌 also for learning more about tech: cloud technologies, deployment, data science, as well as engaging with community, tech blogging, live coding 🤓

## To infinity and beyond 🚀


Some interesting resources for DevRels:
* Sam Julien’s content https://www.samjulien.com/
* DevRel resources https://devrelresourc.es/
* Alex Lakatos https://alexlakatos.com/about/
perlbrew improved
Tags: perl, git, perlbrew
Published: 2021-07-30 23:03:59

I like to keep all my builds of perl under the control of `perlbrew`, so I can easily switch between them. I occasionally need to build a version of perl that hasn't been released yet, and maybe hasn't even been merged into `blead` (which is what the perl5 project calls the `master` branch). That's fine, perlbrew can just build from a git checkout. However, you need to give it some extra arguments to avoid confusion (you generally don't want it to build something called 'perl-5.35.3' when that's just the latest version to have been released in the repo, but not what you're actually building) and to help you remember which build is which. So, as is traditional for a Unixy gentleman with a problem to solve, I wrote a small shell script.

Source [this](https://github.com/DrHyde/configurations/blob/master/bash/dot-bash_functions.d/perlbrew-git-install) into your shell after loading perlbrew and if you then say `perlbrew git-install` from the root of a git repository it will build a perl called `git-$reponame-$branchname-$commit`.
🎬Creative Our Team Section Using Glassmorphism | HTML CSS✨
Tags: html, css, webdev, beginners
Published: 2021-07-30 22:11:10

Hey DEVs in today's video we will create from scratch a “Creative Our Team Section Using glassmorphism”, a new design trend that is currently very popular. 

You'll see it all over websites such as Dribble, and even big companies like Apple and Microsoft are using it.

---
{% youtube serCnYVPZD0 %}
---

 Essentially, the main aspect of this trend is a semi-transparent background, with a sublime shadow and border.
We also have a blur on it so that whatever is behind the background is beautifully "morphed" into the element itself.


📚Resources
Sound | Fonts | Pics used in this Project: https://bit.ly/3rHKDPl

---
Day 420 : The Virus
Tags: hiphop, code, coding, lifelongdev
Published: 2021-07-30 21:59:52

_liner notes_:
- Professional : Another week flew by! Spent a lot of the day working on a community question. Did an application to reproduce the issue and showed it to the team A lot of brain power was used on this. haha Didn't get as much as I wanted done on the blog post. I'll probably work on it Sunday during my live study group.

- Personal : Got the videos page on the website https://untilit.works/videos to display from newest to oldest. I'm able to upload to Vimeo from the dashboard. I can generate the thumbnail from the archived video from the dashboard and store in the database. It came out pretty good. Looking forward to see if everything works automatically during the live show, if not, there's always the dashboard. haha. Watched an episode of "Fire Force" and some Japanese learning videos on YouTube.

![Aerial view of Lassen Volcanic Nat'l Park, CA, USA with a lot of beige-orange mounds with sparse green trees.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nnxhtj0zd8kckpd3b5m3.jpg)

Going to eat dinner and watch another episode of "Fire Force". After that, there is something I need to verify that it works on https://untilit.works. There's a speech to text / closed captions thing on the site, but there was an update to a library that kind of changes some things, so I want to make sure it still works, if not, fix it. I also want to put together this week's radio show and some stories to talk about. Sidenote: it's amazing how the virus has really shown where a country's leaders priorities are.

Have a great night and weekend!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube 4_5VAKdHMek %}
React Context API - why do we pass a defaut value to React.createContext()?
Tags: react
Published: 2021-07-30 21:38:11

I was refreshing on [React's Context Api](https://reactjs.org/docs/context.html) today. It works like:

- You create a Context: `export const TestContext = React.createContext(defaultValue)`
- You add a provider: `<TestContext.Provider value={whenever: "whatever"} />`
- You grab the value passed via Context in whatever nested Component: `const value = React.useContext(TestContext)`. `value` will be `{whenever: "whatever"}`.

So, we grab the value passed in the `TestContext.Provider` value prop. What about the `defaultValue` we passed in `React.createContext(defaultValue)`? Well, it turns out that is pretty much useless unless the nested component does not have a `TestContext.Provider` above it. It is explained [here](https://reactjs.org/docs/context.html#reactcreatecontext).

Try it out: pass `{whenever: "whoever"}` as default value in createContext, like `React.createContext({whenever: "whoever"})`, and remove the `<TestContext.Provider />`. The `value` from `useContext` will be `{whenever: "whoever"}`. 

Another cool thing that I realised in the [React & Typescript course in Frontend Masters](https://frontendmasters.com/courses/react-typescript/context-api/) is that I can create a wrapper for the `<TestContext.Provider value={whatever} />`. It goes like:

```
export const ThemeProvider = ({children}) => {
     return <TestContext.Provider value={{whenever: "whatever"}}>{children}</TestContext.Provider>
}
```

In your App.js, you just need to import and add `<ThemeProvider></ThemeProvider>`.
FIXING THE CORE-JS ERROR
Tags: node, nodemodules, corejs, javascript
Published: 2021-07-30 21:33:53

The core-js error is usually caused by an update or change in the current core-js version. A quick fix is usually to change the core-js version in package.json to the latest which is @3.15.2 or whichever is right now. 
quick fixes you can do
1. copy the code in this [github repo](https://github.com/zloirock/core-js/blob/v3.4.1/packages/core-js/modules/es.regexp.exec.js) and paste in the file directory in node modules.

## If the error still persists
2. run npm clear cache. Add --force add the end if necessary.
3. Close all IDE instances if any error still persists.
4. run npm i **core-js@3.15.2**


Hope this helps.
React Page Crashes on Error
Tags: react, webpack
Published: 2021-07-30 21:11:55

I'm creating a website using React. I'm using webpack to bundle my imports. Unfortunately, when I hit certain errors while working on the site, it crashes, preventing me from seeing what caused the error. I have a screenshot showing what this looks like (ignore the specific error). This only happens for certain types of errors -- I think it's when the error happens in something I imported (it's nerdamer, a JavaScript CAS) as opposed to the code I wrote.

How do I ensure the error just comes up in the console as opposed to crashing the site?

Thank you!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o8wxzy45qs6vp5ul2j05.png)
Countdown: Runtime code maps at GitLab Commit 2021
Tags: webdev, productivity, ruby, python
Published: 2021-07-30 20:51:08

GitLab commit is just a few days away, and I'm excited to talk about how to ["Upgrade your development workflow with runtime code maps"](https://gitlabcommitvirtual2021.sched.com/event/kuJp/upgrade-your-development-workflow-with-interactive-code-maps). Attendance is free; visit https://gitlabcommitvirtual2021.com/ for details. My talk is on Tuesday August 3 at 9:40 AM PDT. I'll be around online after the talk to chat and answer questions.

In anticipation of the talk, we've added support for GitLab to AppMap, our open source project which records your code, in your local dev environment, to create and share visual code maps. 

In this brief video, you can see how to:

* Record AppMaps in your code editor (VSCode or JetBrains) or with a Chrome browser extension.
* View AppMap visual dependency map and execution trace in the code editor.
* Upload AppMaps to the AppMap Cloud - a place to store and  share them - logging in with GitLab.
* Attach links to AppMaps stored in AppMap Cloud to your GitLab merge requests.

You can use this workflow to find out exactly what code, web services, dependency services, and SQL is used in any use case or test case, and how all that code and data fits together. 

Then you can share AppMaps with your dev team so that they can see exactly what you see. For example, exactly how you spotted and fixed a bug.

Check it out, and I hope to see you at GitLab Commit 2021!
Class and Constructor
Tags: beginners, codenewbie, javascript
Published: 2021-07-30 20:13:51

Ohh man! Just when I thought I was getting the hang of Ruby, here comes another language to learn. JavaScript. I don't know if it's because of that reason that JavaScript seemed so hard to learn or simply because my brain could not grasp the new concepts. I choose to believe it's because I felt completely drained and needed a little break to recover. 
anyways... *sings* "I'm back and I'm better" 🗣


for this project refactoring my code into a class and a constructor had me questioning my abilities. And isn't it so funny that 99.9% of the time it's something as small as a misspelled word? *(I.did.not.do.that)* :>

**The first** thing I did was to create a separate JS file. Since I will now be having two JS files, I went ahead and put them both in a source folder. Shown below. 

![SRC JS Files](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5h18f1gj6jevb48xhsqf.png)


**The second** thing I did was link my new JS file to my index.html file using a script tag. I also had to update my current script tag from `<script src='index.js'></script>` to  `<script src='src/index.js'></script>`

so far, not so bad 

**Next** in my new JS file I create a class *Snack* and inside that class a constructor.

![class Snack](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gnslrye6sh0yrsyvwm69.png)
 
The constructor contains the initial data needed to create new instances on the snack class and because I used a constructor function, I will need to pair it with the `new` keyword which I included in my index.js file

![New Keyword](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gb9kgo5antxnzgomnsw8.png)

If you are still confused on what classes and constructors do, this next paragraph really helped putting it into perspective. 

> What we really want to say is something like "Hey, constructor function, when you run, create a new copy of yourself, leaving the original unchanged and on that particular copy, set the properties based on the arguments passed into the function. The keyword new tells the constructor function to do exactly that. 

*The `this` keyword is used to reference the instance created.* 

**Lastly**, I created a render card that would show the attributes included in the constructor with the updated user input information. 
For today, that is all. 

![HAPPY CODING](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zp1iybs27d14rk2dtfsv.gif)
What was your win this week?
Tags: discuss, weeklyretro
Published: 2021-07-30 20:10:29

---
title: What was your win this week?
published: true
description: Got to all your meetings on time? Started a new project? Fixed a tricky bug?
tags: discuss, weeklyretro
cover_image: https://cl.ly/188e843c2985/download/Image%202019-02-15%20at%202.36.37%20PM.png
---

Hey there!


**Looking back on your week, what was something you're proud of?**

All wins count — big or small 🎉

Examples of 'wins' include:

- Starting a new project
- Fixing a tricky bug
- Scheduling some time off... or whatever else might spark joy ❤️ 

---

Wishing you more wins to come!

![Tony the Tiger High Five](https://media.giphy.com/media/6yKquSnGwI5Ak/giphy.gif)
Introducing FARM Stack - FastAPI, React, and MongoDB
Tags: mongodb, javascript, webdev, html
Published: 2021-07-30 19:56:52

When they got programming Technologies, the LAMP (Linux, Apache, MySQL, PHP) stack—and its variations—ruled supreme. They used WAMP at work, DAMP at home, and deployed there customers to SAMP. But now all the stacks with memorable acronyms seem to be very JavaScript forward. MEAN (MongoDB, Express, Angular, Node.js), MERN (MongoDB, Express, React, Node.js), MEVN (MongoDB, Express, Vue, Node.js), JAM (JavaScript, APIs, Markup), and so on.

As much as they enjoy working with React and Vue, Python is still my favourite language for building back end web services. They wanted the same benefits , they got from MERN—MongoDB, speed, flexibility, minimal boilerplate—but with Python instead of Node.js. With that in mind, they want to introduce the FARM stack; FastAPI, React, and MongoDB.

What is FastAPI?
The FARM stack is in many ways very similar to MERN. They've kept MongoDB and React, but we've replaced the Node.js and Express back end with Python and FastAPI. FastAPI is a modern, high-performance, Python 3.6+ web framework. As far as web frameworks go, it's incredibly new. The earliest git commit they could find is from December 5th, 2018, but it is a rising star in the Python community. It is already used in production by the likes of Microsoft, Uber, and Netflix.

And it is speedy. Benchmarks show that it's not as fast as golang's chi or fasthttp, but it's faster than all the other Python frameworks tested and beats out most of the Node.js ones too.

Getting Started
If you would like to give the FARM stack a try, They have created an example TODO application you can clone from GitHub.
July 26 - August 02 Weekly Status
Published: 2021-07-30 19:52:01

This week I implemented changes to the scene change algorithm and made [pull request](https://github.com/xiph/rav1e/pull/2765) to github repository. Main analysis can be seen in [this blogpost](https://dev.to/aleksandrgushchin/threshold-experiments-for-scene-change-detector-2hbp).
* I increased threshold for the fast version
 * It is increased F score by 0.1502 up to 0.7441
* I applied numerical differentiation to metric values to make the peaks of the metric more distinguishable for the threshold
* I reduced threshold for the slow version
 * It is increased F score by 0.1056 up to 0.8081

Overall, I improved F score of the fast version by 0.1454 and slow version by 0.1512
Day 8 Training: Birthday-lucky react app
Tags: javascript, react
Published: 2021-07-30 19:40:30

Yesterday was my Day 8 Training at Ryaz. The objective was to make a Is-your-birthday-lucky app in react.

* Take user's complete birthday
* And his/her lucky number.
* Now, find out if sum of digits of birthday is divisible by the lucky number.
* Show the result to user with some graphics.
* Create this as a website, put a privacy notice. Say that you're not storing data.


<img width="100%" style="width:100%" src="https://media.giphy.com/media/QPZRRbo2HsmUAHGFzz/giphy.gif">

This was very time tasking project not because of logic but because of designing. After a day on working on this I had to take a small help from Material UI regarding the alert boxes and Icons. Rest I had to dig up the CSS from internet. In short I'm totally exhausted by this project :)

The Live project is up at [code sandbox](https://7vsin.csb.app/?#mainSection)

Code for this project is updated on my [Github](https://github.com/SuryanshChopra/is-your-birthday-lucky)

AND THAT'S ALL!