teleren/devto huggingface dataset:
ICYMI: IBM Hacktoberfest Workshops!
Published: 2021-10-26 18:09:18

#Welcome back to Tutorial Tuesday!

**Have no Fear, Workshops are Here**! In case you missed it, you can watch the **Hacktoberfest** workshop replays below at your leisure. As [Hacktoberfest](https://hacktoberfest.digitalocean.com/) comes to a close, I want to wish you all a very **Hacky Hacktoberfest** and encourage you all to continue hacking away on projects, even ones you've let sit since last year! Also, make sure to officially register for [Hacktoberfest](https://hacktoberfest.digitalocean.com/) on [Digital Ocean's Hacktoberfest](https://hacktoberfest.digitalocean.com/) site so you can join the challenge, contribute to Open Source projects, and win some cool swag (**super special Hacktoberfest swag**)!  I love to spend the Holidays working on a new project and certifications since work is always so quiet. It's always a good time to learn something new, so keep going! **I'll be here to support you in any way I can**. 

###[[HACKTOBERFEST] IBM Code Engine 101 & 201 Workshop Replay](https://www.crowdcast.io/e/ibm-code-engine) 
[**Workshop Slides**](https://ibm.biz/ibm-code-engine-201-slides)
[**GitHub Repo**](https://github.com/IBM/CodeEngine)
[**IBM Cloud Sign-Up**](https://ibm.biz/ibm-code-engine-201)
![IBM Code Engine 101 & 201 Crowdcast Event](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dkahpp1qfnvnnsp2bt4w.png)

&nbsp; 

###[[HACKTOBERFEST] Enable Flawless Logistics with IBM Code Engine x SiB Solutions Workshop Replay](https://www.crowdcast.io/e/ibm-ce-sib) 
[**Workshop Slides**](https://ibm.biz/ce-sib-slides)
[**GitHub Repo**](https://github.com/jritten/ibm-x-sib)
[**IBM Cloud Sign-Up**](https://ibm.biz/ce-sib-2-cloud)
![IBM x SiB Solutions Code Engine Crowdcast Event](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h39k52aqocruwjsaljqi.png)

&nbsp; 

###[[HACKTOBERFEST] Add Google/Facebook OAuth to a React App & Deploy to OpenShift Workshop Replay](https://www.crowdcast.io/e/appid-openshift)
[**Workshop Slides**](https://ibm.biz/appid-openshift-slides)
[**IBM Cloud Sign-Up**](https://ibm.biz/appid-openshift)
![React App w Google/Facebook OAuth on OpenShift Crowdcast Event](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7h5wigj6pgs9u4jmhi9g.png)

&nbsp; 

##NOW GET OUT THERE AND HACK TOGETHER SOMETHING AMAZING!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/18jfnp4tbjwyygexin2z.gif)

**Connect w Me!**
**https://linktr.ee/jritten**
The 4 things I recommend to everyone on the developer job search in 2021
Tags: webdev, career, beginners, twitter
Published: 2021-10-26 18:06:17

# Finding a job in 2021 is about being prepared and responsive to the right opportunities on LinkedIn, Twitter, and in your email inbox.

Four main things to have ready...

## 1️⃣. Do you have the demonstrable work to show on the ready? 🏗

For devs, is your code:

- Front-facing, especially if it's on a large-scale enterprise app, is that on the ready?

- On a live site for non-techie peeps?

- Linked in a repo so tech peeps can see your commits and logic?

## 2️⃣. Do you have your portfolio and resume easily accessible? 💼

For devs, are your apps:

- easily found on your portfolio page? Assuming you have one — make one from https://html5up.net/

- including thorough descriptions of what you contributed

- can anyone download your updated resume from your portfolio

## 3️⃣. Do you have your calendar open and ready to schedule a video call? 📆

As a dev, are you good at:

- scheduling zoom calls, then creating a google calendaring

- only doing zoom calls for initial meetings to build a rapport

- making a Calendly account that automatically does it

## 4️⃣. Do you ask good questions❓

As a dev, have you:

- found out a little about the recruiter, not just the role and the salary

- gained an understanding of what the company does and what its mission is

- discovered if the role is full-time or contract to hire

To piggyback off of number 4. I highly recommend these free guides from Taylor Desseyn. 

https://www.taylordesseyn.com/freeguides

Be ready to ask your own unique questions, but it's great food for thought.

I definitely have asked many of these questions during the first meetings or tech interviews.

## All the best on your job search and drop a comment.
Nextjs v12 is here....
Tags: react, nextjs, javascript, webdev
Published: 2021-10-26 18:01:48

### yee, Nextjs v12 has just been released! It is one of my favorite frameworks😍

<br>

**New Features**:
- ~3x faster Fast Refresh and ~5x faster builds
- Enabling full flexibility in Next.js with code over configuration
- Native Next.js APIs are now supported, as well as Suspense
- Opt-in for 20% smaller images
- Bot-aware ISR Fallback: Optimized SEO for web crawlers
- Aligning with the standardized module system
and many more.

For details: [https://nextjs.org/blog/next-12](https://nextjs.org/blog/next-12)
Is your GitHub empty?
Tags: webdev, beginners, productivity, github
Published: 2021-10-26 17:48:12

# 🟩 As a developer, your lack of GitHub contributions does not necessarily indicate that you aren't good at coding, but it can be a wasted opportunity to confirm that you're passionate and good. 🟩

To help change this, here are four ideas to contribute more to GitHub. 💡

## 1️⃣. Private repos

Create a private repo and add at least 1 sentence of what you studied/worked on into a readme at least every weekday. 🟩

Make it your own little journal. 📓

I did not do this but heard of others who have. 

It would be good practice for #100DaysOfCode or studying algorithms.

## 2️⃣. Committing often

Make a small commit often during the time you code (3 hours a weekday at minimum is best)

Get something to finally work? Commit 🟩

Ending the day? Commit a WIP (work in progress) 🟩

Branching off and trying something that might break the app? Commit working code first 🟩

## 3️⃣. Issues

Create issues for projects 👍

See something that needs to be developed❓ 

Click "New Issue" and fill in the details. 🟩

Keep tasks small — think "Is it doable in a sprint or two?"

Web devs work with an issue every day, e.g. "feat: create responsive navbar with bootstrap"

## 4️⃣. Perspective

Remember that your GitHub graph is not you or where you find your value, but it doesn't give a good impression if it's completely empty. ⬜️ 😬

When your graph is on fire, then people see you as someone who shows up and knows GitHub and git concepts.🔥

At best, you're a competent professional rather than a novice that must be guided, or worse you're just lazy.

Take initiative and do something to show what you know, especially if you're self-taught. 

## Conclusion

This list isn't exhaustive. There are many ways to contribute like forking a repo, making a pull request, reviewing code, etc.

Activity on GitHub is a great way to showcase your expertise and allow them to cut past questions about what you do and don't know.

Recruiters and hiring managers do look at it, so why not leave a great impression because guess what? It costs you nothing to be active on GitHub.

I would highly suggest improving your graph with these small steps first, then branching out. 🌳

Pun intended. 😉
[Video] Exploring distributed tracing with ASP NET Core 6
Tags: csharp, dotnet, aspnetcore
Published: 2021-11-05 08:26:24

---
title: [Video] Exploring distributed tracing with ASP NET Core 6
published: true
date: 2021-10-26 17:45:00 UTC
tags: csharp,dotnet,aspnetcore
canonical_url: https://blog.codingmilitia.com/2021/10/26/exploring-distributed-tracing-with-aspnet-core-6/
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9gajov8sqazme7hr1918.jpg
---

Hey folks!

In this video, let’s take a look at distributed tracing and how to get it working with ASP.NET Core 6.

Distributed tracing isn’t a new subject by any means, but there are some more recent developments, namely in terms of standards like W3C Trace Context and OpenTelemetry, that are worth a look.

{% youtube l1_i8p2hVlE %}

Here come a bunch of related links:

- [GitHub repository](https://github.com/joaofbantunes/ExploringDistributedTracingWithAspNet)
- [W3C Trace Context](https://www.w3.org/TR/trace-context/)
- [OpenTelemetry .NET reaches v1.0](https://devblogs.microsoft.com/dotnet/opentelemetry-net-reaches-v1-0/)
- [OpenTelemetry](https://opentelemetry.io/)
- [OpenTelemetry .NET](https://github.com/open-telemetry/opentelemetry-dotnet)
- [Seq](https://datalust.co/seq)
- [Jaeger](https://www.jaegertracing.io/)
- [Zipkin](https://zipkin.io/)

Hope this video/post helps in understanding how these things work and why they’re useful, as well as how they integrate with our .NET and ASP.NET Core projects.

Thanks for stopping by, cyaz!
Top 7 Featured DEV Posts from the Past Week
Tags: top7
Published: 2021-10-26 17:44:35

---
title: Top 7 Featured DEV Posts from the Past Week
published: true
description: A round up of the most-read and most-loved contributions from the community this past week.
tags: icymi
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sfwcvweirpf2qka2lg2b.png
---
_Every Tuesday we round up the previous week's top posts based on traffic, engagement, and a hint of editorial curation. The typical week starts on Monday and ends on Sunday, but don't worry, we take into account posts that are published later in the week._ 


## Prettifying GitHub

@yuridevat is here with some fantastic tips for making your GitHub profile as unique and wonderful as you are.

{% link https://dev.to/yuridevat/how-to-create-a-stunning-github-profile-2mh5 %}

## Red Light, Green Light 😱 

STAY CALM. @0shuvo0 has created a simulation of Squid Game's Red Light, Green Light game using JavaScript. 🎭 

{% link https://dev.to/0shuvo0/i-made-squid-game-with-javascript-10j9 %}

## A Well-Shaped Codebase (without sacrificing efficiency)

@nikmilson has loads of great advice about how to refactor your codebase without sacrificing efficiency. 

{% link https://dev.to/s2engineers/how-to-refactor-without-overtime-and-missed-deadlines-351e %}

## Dev Freelancing Takeaways

This whole series by @saifullahusmani is worth taking a look at if you've ever considered freelancing as a software developer — especially as a self-taught developer. 

{% link https://dev.to/saifullahusmani/what-i-learned-in-freelancing-as-a-self-taught-developer-n2j %}


## Finding Joy as a Dev

As @dvddpl says, **coding is hard** — But that doesn't mean you need to sacrifice your enthusiasm about your career. 

{% link https://dev.to/dvddpl/my-jobs-is-boring-and-everything-sucks-or-not-1lnp %}

## 1. Make the buttons look like buttons.

... and more simple but valuable button design tips from @imiahazel!

{% link https://dev.to/imiahazel/7-design-tips-for-perfect-buttons-2720 %}

## Mastering the Art of Googling

Most of us here use Google very frequently — if not daily. That said, there are many things you can do to be an expert-level Googler. @ruphaa serves up a few. 👀 

{% link https://dev.to/ruphaa/14-tips-to-google-like-a-pro-14jo %}



_That's it for our weekly wrap up! Keep an eye on dev.to this week for daily content and discussions...and if you miss anything, we'll be sure to recap it next Tuesday!_
Contributing to Mozilla
Tags: opensource, hacktoberfest, webdev, mozilla
Published: 2021-10-26 17:39:39

A recent Hacktoberfest contribution I made came from finding this [issue](https://github.com/mozilla/bedrock/issues/10255) while browsing the Mozilla [Github page](https://github.com/mozilla). [Bedrock](https://github.com/mozilla/bedrock) is the repo for the [mozilla.org](https://www.mozilla.org/) website and Mozilla provides very good [documentation](https://bedrock.readthedocs.io/en/latest/install.html) to get started. Thanks to Docker I was able to install and run **bedrock** with no issues in just one command.

### The problem
The arabic version of the [webpage](https://www.mozilla.org/ar/firefox/developer/) for the **Firefox Browser (Developer Edition)** had an issue where the main image of the browser would not scale down on mobile devices, resulting in horizontal scroll.

The issue was filed on June 8th and one person tried to solve it but was not successful and so it remained silent since July 26th.

Based on the comments in the issue page, it seemed like the problem was related to the 'bidi' sass [@mixin](https://sass-lang.com/documentation/at-rules/mixin) used by Mozilla. The [docs](https://protocol.mozilla.org/docs/contributing.html#bidi) explain it like this:
>The bidi mixin (short for “bi-directional”) is used to declare both left-to-right and right-to-left values for a CSS property together, and output appropriate declarations for each.

### The fix
After many failures trying to solve this issue by changing the bidi values, I was ready to drop it and move on. I then realized that I was really trying to solve an easy issue in a complicated way. The main problem was in the CSS and adding `overflow: hidden;` to [`.intro-image`](https://github.com/menghif/bedrock/blob/65cce9c9dadcb50e66747a0306bee085bbc8f478/media/css/firefox/developer/includes/intro.scss#L46) did the trick!

This is how the website looks now (Notice no more horizontal scrollbar):
<img width="728" alt="Screen Shot 2021-10-12 at 4 14 40 PM" src="https://user-images.githubusercontent.com/53121061/137023314-0ec5d9e3-1c51-4c05-98e7-316206e0a48e.png">

---

The [PR](https://github.com/mozilla/bedrock/pull/10583) was quickly merged. Even though this was a one line fix, I am proud of the fact that I was able to contribute to an organization such as Mozilla. This contribution made me realize that sometimes, when I am stuck, I need to take a step back and look for the simplest solution to the problem.
How to create simple microservice using Mezon Framework
Tags: lambda, mezon, microservices, rest
Published: 2021-10-26 17:24:47

Hi! In this article I shall show you how to create simple micro service with [Mezon Framework](https://github.com/alexdodonov/mezon-service)

To be honest it is quite simple. First of all you need to create htaccess (if your are using Apache, or just skip this step otherwise):
```bash
# use mod_rewrite for pretty URL support
RewriteEngine on

RewriteRule ^(.*).html$ $1.html [L]
RewriteRule ^(.*).png$ $1.png [L]

RewriteRule ^cron/(.*)$ cron/$1 [L]
RewriteRule ^include/(.*)$ include/$1 [L]
RewriteRule ^Res/(.*)$ Res/$1 [L]
RewriteRule ^vendor/(.*)$ vendor/$1 [L]

RewriteRule ^data/files/(.*)$ data/files/$1 [L]

RewriteRule ^Res/Images/(.*)$ Res/Images/$1 [L]
RewriteRule ^([a-z0-9A-Z_\/\.\-\@%\ :,]+)/?(.*)$ index.php?r=$1&%{QUERY_STRING} [L]
RewriteRule ^/?(.*)$ index.php?r=index&%{QUERY_STRING} [L]
```

Next run:

```bash
composer require mezon/service
composer require mezon/service-logic
```

Then create simple class for business logic implementation:

```php
<?php
namespace Lambda;

use Mezon\Service\ServiceBaseLogic;

class Logic extends ServiceBaseLogic
{

    public function helloWorld(): string
    {
        return 'Hello world!';
    }
}
```

Then we need to asseble our service in index.php:

```php
// here we use MockProvider for no authentication or authorization
$securityProvider = new MockProvider();

// here we decide to use REST transport
$serviceTransport = new ServiceRestTransport($securityProvider);

// here we create object of the business logic
$serviceLogic = new Logic($serviceTransport->getParamsFetcher(), $serviceTransport->getSecurityProvider());

// setup transport and set that we need to use `helloWorld` method for router '/hello-world/' and GET method
$serviceTransport->setServiceLogic($serviceLogic);
$serviceTransport->getRouter()->addGetRoute('/hello-world/', $serviceLogic, 'helloWorld');

// create service object ...
$service = new ServiceBase($serviceTransport);

// ... and then simply run service
$service->run();
```

Pretty simple yeah? )

Do you have any proposals how to improve Mezon Framework? Then use [GitHub](https://github.com/alexdodonov/mezon-service) to submit your feature request.
One major key that will amplify your coding prowess.
Tags: programming, beginners, react, webdev
Published: 2021-10-26 17:21:42

#OnChange vs OnClick within React:
When traversing through one of the advanced deliverables in my 2nd coding challenge at Flatiron school I realized there is a big difference between OnChange and OnClick. The deliverable asks you to create a sorting feature with a checkbox that changes the orientation of how certain cards are organized. This seemed simple at first to be an OnChange event since the page was changing its state however, the onChange event did not work. 

#Why did this happen? 
The state of the page changes yet on onChange did not work. This is due to the special events that happen under the hood of react. The method that was called was .sort() and onChange causes the page to lose focus of the event that you are calling. When an onClick event occurs it allows for the .sort() to happen on the event that you are calling. 

#This ties into the difference between setting state and calling that state. 
When setting the state we use a const variable and set it to  this. const [variable, setVariable]= useState(true). This setVariable is what we use when we want to call the state of the page and in this situation we set it to true. This page will automatically have everything rendered until we set a onClick or onChange to our components. 

Once we call that OnChange event to our page it attempts to find the state of the page and change it order for the change to occur. However, the detriment to this is that the when it changes and attempts to find the state of the page again it fails. Again as previously said it is because onChange loses the focus of what it is changing. The onChange event fires with the old value still attached to the checkbox where onClick triggers setting the new value and changing it and setting the focus back to the checkbox.

In conclusion, whenever you need to sort a page through a checkbox it is critical to use onClick however, some other programmers have gotten onChange to work, but it requires more effort and more coding. Knowing the differnce between these two OnChange and OnClick gives insight into how both work and how they interact with useState.


[Here is the link to a Stack Overflow when encountering this issue.](https://stackoverflow.com/questions/4471401/getting-value-of-html-checkbox-from-onclick-onchange-events)
Remembering the button
Tags: html, css, javascript, button
Published: 2021-10-26 17:18:30

Wednesday night is Survivor night which means us and the population of people who still have cable sit down to watch a show that's older than everyone in the apartment. But this also means it's the convention of the nerds.

Because I've been falling behind in literally all of my classes because I've been applying to internships, I took last Wednesday to sit down, relax, and work on the card we're developing for IST 402. And ask my comp sci friend for help. Thank god, I got an internship offer just yesterday, so maybe I'll be able to get my shit together. All I can say is that I'm a cybersecurity major and will be doing cybersecurity related things. Because I'm falling behind on everything, this blog post is also two days late.

Anyway, buttons. We made one a while ago, published it to npm, and now we're using it in our card project. This process really made me realize how import reusability is. 

This is how I slotted the button in:
```
<div slot="button" class="buttonContainer"><cta-button icon="subject" title="${this.type}" style="--psu-background-color: ${this.bannerColor};"></cta-button></div>
```
Notice how "--psu-background-color" was a called variable.
This allowed the button color to mutable when a type was applied to the card.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7407ejd6azgsgm6m98f7.png)

But because I didn't think ahead... the button reverts to the colors it was when it's hovered over.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cbh5c3ejopkxto1rvup0.png)
 
When I was creating the button, I didn't think about all the different states I should make accessible. Being able to apply the button to the card has not only helped learn about slots but the considerations that should be made with creating a web component. 

The current card project can be accessed at:
{% github runtimeErrorsMadeEasy/project2 no-readme %}

And always, here's the song of the week:
{% spotify spotify:track:3koAwrM1RO0TGMeQJ3qt9J %}
Generate HTML, CSS, JS project using Python
Tags: python, css, javascript
Published: 2021-10-26 17:01:40

### Introduction

Hey peeps, I'll like to show you a simple Python code that generates a folder, puts in your Html, css and javascript into that folder and also adds a little boilerplate code that you can start with.

### Requirements

You'll need to have Python3 installed on your PC if you want to test out this code.

### Let's get started.

First of all you will need to create a folder with the .py extension. Example "htmlcssjsgen.py".

Inside the file, type:
![First Image](https://res.cloudinary.com/dae4sosbl/image/upload/v1635267610/1.png)

Line 1 and 2 imports sys and os inbuilt module. We use os on line 6 to get path, current working directory, etc.

The sys is used on line 4, 6, 9, etc to get the second argument passed to python after the file name argument on command line. That second argument will serve as the folder name for your HTML, CSS and JavaScript files. You will get to know how it is used in a minute.

Line 13, 15 and 17 creates the HTML, CSS and JavaScript files into the folder with the name you passed as an argument during when you'll run this script.

Then, add this:
![Second Image](https://res.cloudinary.com/dae4sosbl/image/upload/v1635267610/2.png)

This obviously writes html sample code into the index.html file previously created.

Final set of codes to type:
![Third Image](https://res.cloudinary.com/dae4sosbl/image/upload/v1635267610/3.png)
This also writes sample css into the style.css file and writes sample javascript function into style.js file we previously created.

line 52, 53 and 54 closes out those files that we just wrote into.

Save and run. Youll run it this way "python3 <pythonfilename>.py <folder name to be created>".

I saved my script as "scafoldHTMLCSSJS.py" and ran "python3 scafoldHTMLCSSJS.py myproject".

"myproject" is gotten from sys.argv[1].

The result will be:
myproject/index.html
myproject/style.css
myproject/script.js

### Conclusion

This script should help you in times when you want to quickly create a HTML, CSS and JS project automatically.
1 line of code: How to remove all duplicates from an Array
Tags: javascript, webdev, productivity, codequality
Published: 2021-10-26 16:55:53


```javascript
const removeDuplicates = arr => [...new Set(arr)]; 
```
Assumes that the given argument is an Array and removes duplicate entries, keep in mind that it works only for entries with primitive values (string, number, bigint, boolean, undefined, symbol, and null). Preserves the order of the entries and returns a copy of the array.  



---

## The repository & npm package

You can find the all the utility functions from this series at [github.com/martinkr/onelinecode](https://github.com/martinkr/onelinecode)
The library is also published to [npm as @onelinecode](https://www.npmjs.com/package/@onelinecode/onelinecode) for your convenience.

The code and the npm package will be updated every time I publish a new article.

---

Follow me on [Twitter: @martinkr](http://twitter.com/_martinkr) and consider to [buy me a coffee](https://www.buymeacoffee.com/martinkr)

Photo by [zoo_monkey](https://unsplash.com/@zoo_monkey) on [Unsplash](https://unsplash.com/s/photos/fuji)

---