teleren/devto huggingface dataset:
Create a attractive GitHub Profile README
Tags: github, beginners
Published: 2020-07-16 17:58:17

GitHub recently released a feature that allows users to create a profile-level README to display prominently on their GitHub profile. This article walkthrough how to access this new feature.

The GitHub profile-level README feature allows more content than the profile bio, supports markdown which means you can play around with the content more visually and the README is significantly more visible as it is placed above pinned repositories and takes up as much space above the fold of the webpage as you like.

**How do I create a profile README?**
The profile README is created by creating a new repository that’s the same name as your username. For example, my GitHub username is rekid46 so I created a new repository with the name rekid46.
*Note*: at the time of this writing, in order to access the profile README feature, the letter-casing must match your GitHub username.

**STEPS TO FOLLOW:**
1.Create a new repository with the same name (including casing) as your GitHub username: https://github.com/new

2.Create a README.md file inside the new repo with content (text, GIFs, images, emojis, etc.)

3.Commit your fancy new README!

4.If you're on GitHub's web interface you can choose to commit directly to the repo's main branch (i.e., master or main) which will make it immediately visible on your profile)
Push changes to GitHub (if you made changes locally i.e., on your computer and not github.com)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/44d3t2kstggooinv0sse.png)
GitHub Arctic Code Vault
Tags: github, opensource, git
Published: 2020-07-16 17:53:37

While going through my GitHub profile I saw this today. A **Highlights** section has been appeared with a tag **Arctic Code Vault Contributor**.

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

## What is Arctic Code Vault?

* **Svalbard** is an archipelago in the town of Longyearbyen near the Arctic circle.
* It contains a **Seed Vault** which contains seeds and have been stored there for saving the diversity of plant genes.
* So GitHub has set up a similar kind of vault for open-source projects and chose the projects/repository which have been public before 2nd February 2020.
* The open-source projects have been stored on silver halide films which is claimed to store it fore next 1000 years. 

I glad to be a part of it!

For more Read: https://archiveprogram.github.com/
Why and How I moved from OSX to Windows 10
Tags: wsl, windows, linux
Published: 2020-07-16 17:51:55

Hello everyone, Today I want to share my experience with you on why and how I moved from OSX to Windows 10

## **First, Let's start with "Why?"**

Back in February 2019, I decided to buy a MacBook air to learn on it programing, And yes, that was a wrong decision.

Over time I have been using the Mackbook air, I faced so many problems, with the hardware I used to use two monitors. Therefore the CPU turn into a stove to the degree that the WiFi will not work correctly and become very slow, so I decided to use one monitor, which was okay until last April. When things got awful with the laptop, overheating, lousy WiFi, slow.

So it was time to use my Gaming PC For Programing, so I sold the Macbook Air and upgraded my pc even more.

So yeah, I had a horrible experience with The MacBook air (2018).

## **Now Let Move on To "How?"**

Since I came from an OSX background, and I used to use the Terminal with programming, I searched for a similar experience in Windows 10, and this what I came up with.

WSL stands for **Windows Subsystem for Linux,** is a compatibility layer for running Linux On Windows 10, WSL version 1 was introduced In May 2019, and WSL version 2 was released In May 2020.

And in this guide, we will use WSL 2

### Requirement:

- Running Windows 10, updated to version 2004, Build 19041 or higher.

And you can check your windows version by pressing The Windows log key + R, then type **winver.**
Or 
By Opening the Command Prompt And Typing **ver.**

---

### **Step 1 - Install the Windows Subsystem for Linux:**

First You need to enable " Windows subsystem for Linux" by opening the PowerShell and Enable the 'Virtual Machine Platform' by Typing this :

```jsx
dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart
```

**Installing WSL2:**

Enable the 'Virtual Machine Platform' optional component:

```jsx
dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart
```

After That Restart Your Machine to complete the installation.

Set WSL 2 as your default version:

Open the PowerShell and enter the next command to set WSL 2 As default when you installing a new Linux.

```jsx
wsl --set-default-version 2
```

---

### **Step 2 -** Install your Linux :

Now you need to open Microsoft Store and search for Linux.

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

Set up Linux:

Now, After installing your version of Linux, you need to open it, and it'll ask for a new user name and password.

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

---

### Step 3 - Install Terminal (optional):

And My advice to you is to Install Terminal you'll find it in Microsoft Store.

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

And by that, we are Done.
Now You have Linux and windows in your system at the same time.
Thank you for Reading, And I hope that was useful for you, And if you have any questions, leave it in the discussion below.
OpenPGP identity proof 
Published: 2020-07-16 17:28:17

This is an OpenPGP proof that connects [my OpenPGP key](https://keyoxide.org/b498e2e410902f8aec108f4f5bdc557b496bdb0d) to [this dev.to account](https://dev.to/skorotkiewicz). For details check out https://keyoxide.org/guides/openpgp-proofs

[Verifying my OpenPGP key: openpgp4fpr:b498e2e410902f8aec108f4f5bdc557b496bdb0d]
DOM Manipulation - The Driving Force Behind the Internet
Tags: beginners, javascript, codenewbie, dom
Published: 2020-07-16 17:20:52

To understand the power of the DOM we need to understand the technologies that it is built upon. The technologies are HTML, CSS, and JavaScript.

DOM or the Document Object Model is responsible for how we perceive the internet. It defines the logical structure of how a web document is accessed and manipulated. 

The content of how we perceive comes from HTML. HTML is responsible for the structure of the page. An input field, button, text area, paragraph everything is all provided by HTML. The structure in itself is plain content and may not be eye-catchy, CSS is used to beautify it. To bring some interactivity and manipulating the DOM in a way so that it gets converted to the web application from static web page JavaScript is used. Each technology in itself is useless, combined they are responsible for the way our browser loads any website. 

DOM Manipulation is thus handled by CSS and JavaScript. Interactivity is the feature that makes JavaScript the most valued among all(It drives all the businesses). By making use of JavaScript we can create games, handle dropdowns, validate forms.

For making changes we need to select the element that needs to be changed.

```
document.getElementById()
document.getElementsByClassName()
document.getElementsByTagName()
document.querySelector()
document.querySelectorAll()

where **document** denotes the whole web page
```

By selecting the elements by the above methods we can change their content, style, and even add event listeners to them.

```
Demo.html
...<style>
  .warning{
   color : "red";
}
</style>...

Demo.js
var tag = document.querySelector("h1");
tag.classList.add("warning");   // warning class gets added to the tag h1
```

The above was an example of how style can be changed. The power of DOM manipulation steps further when we add this feature to DOM events. This can be achieved by function addEventListener() that executes another function on any event like click or change.

```
Considering the above example and modifying it further

var tag = document.querySelector("h1");
tag.addEventListener("click", function(){
   tag.classList.add("warning");
});   //warning class gets added to h1 only if user clicks h1
```

This is a brief explanation of the DOM as per my understanding. For more information please refer to the internet and other resources. If you have any doubts or want more information please ask in the comment section.
Laravel Livewire
Tags: laravel, livewire, php, javascript
Published: 2020-07-16 17:20:01

Livewire is a full-stack framework for Laravel framework that makes building dynamic interfaces simple, without leaving the comfort of Laravel.

If you are using livewire with laravel then you don't worry about writing jquery ajax code, livewire will help to write very simple way jquery ajax code using php. Without page refresh laravel validation will works, form will submit etc.

Laravel Livewire release adds the following:

Turbolinks integration

Alpine JS integration

Support for wire:model listening for “input” events dispatched by AlpineJS: $dispatch(‘input’, ‘foo’)

Support for wire:custom-event="foo" receiving params from an AlpineJS dispatch: $dispatch('custom-event', 'bar').

Livewire custom-tag syntax

What it does ?

Livewire renders the initial component output with the page (like a Blade include), this way it’s SEO friendly.

When an interaction occurs, Livewire makes an AJAX request to the server with the updated data.

The server re-renders the component and responds with the new HTML.

Livewire then intelligently mutates DOM according to the things that changed.

To get started please follow below link :

https://laravel-livewire.com/docs/quickstart/
It can be hard to understand serverless
Tags: serverless, aws, newrelic, webdev
Published: 2020-07-16 17:03:50

---
title: It can be hard to understand serverless
published: true
description: AWS X-ray and New Relic Serverless, together at last
tags: serverless, aws, NewRelic, webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/ruqss3i6svqyqzz6p8eh.jpg
---

Serverless is a dream. To be truly “serverless” there must be a perfect boundary between all the technical concerns that matter to your business and all the arbitrary, fiddly, un-fun platform hosting worries that you can leave to a vendor to handle. 

The actual real-world products that are labeled “serverless” only approach this dream, and still leave you manually controlling details that in a perfect world would be automatic, handled by a vendor, and work perfectly for every user. 

The problems that users face with serverless are often inherent to the design: issues with security configuration, cold starts, and observability. They’re the same problems you’d expect to have when most but not all details of running code are left to the vendor. 

Anyway, it can be really hard to understand what's going on inside serverless stacks. [AWS X-ray](https://aws.amazon.com/xray/) is an attempt to see how your requests travel through your stack, and [New Relic Serverless](https://newrelic.com/products/serverless-aws-lambda) has its own set of tools to give you insight.

Starting today, [New Relic imports your X-ray data](https://blog.newrelic.com/product-news/aws-x-ray-integration/), and that's probably pretty useful.

*cover image description: Three Parisian women watching the solar eclipse of 8 April 1921 on the Cour du Havre, published by Agence Rol*
Flutter localization gotcha with iOS Emulator
Tags: flutter, ios, internationalization
Published: 2020-07-16 16:52:42

## Problem

When you use the [intl](https://pub.dev/packages/intl) package to get the current locale, it will always return English or 'en', when you use the iOS simulator.

Even when you set the language and region in the iOS settings, it will always return 'en'.


```dart
// This retrieves the current local
Intl.getCurrentLocale();  // returns 'en' using iOS Simulator
```

## Solution

Came across this [github issue](https://github.com/flutter/flutter/issues/14128). 

And the solution was [found](https://github.com/flutter/flutter/issues/14128#issuecomment-598011056).

Edit `info.plist` found in `ios/Runner` and add two configurations:

1. `Localizations` 

Add your supported languages or any languages that you need to test.

2. `Localized resources can be mixed` 

Set to YES.

For good measure, `flutter clean` and rebuild.
Novo Recurso do GitHub - README no Perfil
Tags: github, readme, showdev
Published: 2020-07-16 16:51:12

Nos últimos dias o GitHub disponibilizou um novo recurso na plataforma onde os usuários podem adicionar um readme e deixar em destaque no perfil. Vou mostrar o passo a passo de como adicionar.

Primeiro você terá que criar um repositório com o mesmo nome do seu usuário. Por exemplo meu username é Elisangelamsilva ao adicionar aparecerá isso aqui:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4baem0htd3v7z4y7ia5p.png)
É necessário deixar público e marcar na opção de inicializar com o README.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/v3okysv90ywue307ogg3.png)
Visualização do perfil: 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/66rggwu66kg3yfm465vf.png)
Agora você já pode personalizar como quiser, como exemplo adicionei apenas o ícone com link para o meu perfil no Linkedin.
O próprio GitHub disponibiliza alguns exemplos do que pode ser adicionado, mas isso é por 
sua conta. Use com sabedoria e configure do seu jeito.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3jpmimdlryezme4u6nb9.png)

Segue alguns links úteis para você deixar seu readme personalizado:

1. [Emoji Markup](https://gist.github.com/rxaviers/7360908?fbclid=IwAR19cyZ-fYj5isZXcoGaf_06WaHv_HaogQRAXYCiA7UZZCRZ7x5BWNJHqe0)
2.[Conversão de imagens](https://shields.io/?fbclid=IwAR1i_ORxVrmutODDj2HpXI3-iq4M7jyBMj7Cr0-_jWrOzg42-71OXBgvfEA)
60 : Growing Queerness
Tags: devpride
Published: 2020-06-24 13:35:04


#**HONESTY** 
I want to be sure about my solution, didn’t even recognize that I acutally like to think how to solve every single of my problems, I am socialized to be feminine lol, to be productive, It is time for me to process in order, I need this!

My goal is not aiming for becoming a ‘software engineer’ anymore, I want to know what my logic is, how I figured out, why I do, and figured out studying DS and algorithms can be the most helpful way to learn how to think, so I can think one thing and make the correct result, this is my first time, now I need the necessity, just one year ago, I only followed my intuition and it was super hard to organize, now everything is getting organized in order, feel like this is a big puzzle!


--- 
#**QUEERNESS**

Where I live (South Korea) is not opened to Queer people, we are usually invisible, and I was afraid of getting a job at as a web developer, do not want to be seen as a girl, because of my physical appearance, and at the same time, I was thinking Why not connecting a bigger supporting circle for queer developers? 

--- 
###**HAPPY PRIDE MONTH!** 🏳️‍🌈✊✊🏻✊🏼✊🏽✊🏾✊🏿🏳️‍🌈
I'm proud to be myself, came out last year, WHOEVER YOU ARE, YOU ARE LOVED, AND LOVE WINS!

**I'm proud of...**
choosing to study my front-end engineering journey no matter what, whoever you are, and respecting my true sexual orientation, learning the difference among the community! 


**Equality in tech looks like...**
binary world, not happy to be seen as a girl, in the beginning, want to be the example out of the rainbow spectrum, for the people who have a variety of backgrounds, including ME!  


**I find support in...**
my lovely queer friends, I could survive as I am, and so lucky to have them in my life!
Animation Container
Tags: flutter, beginners, codepen
Published: 2020-07-16 16:46:15


Flutter Animation is a great way to start with Animations because it is easy to work with flutter animation. In Flutter, there are two types of Animations-
1. Explicit Animations
2. Implicit Animations

How to know which Animation to choose from these?

Sort out, what are your requirements. If you want the animation to stop, play, repeat, then explicit animation is the answer. In major cases, explicit animation rules it. I have recently started exploring flutter animation and made this small project in animation. In this, you will learn - 
 1. AnimationContainer
 2. Random Function
 3. setState function

{% codepen https://codepen.io/geeky-star/pen/oNbPJpy %}
Mid Meet Py - Ep.16 - Interview with Sandrine Pataut
Tags: python, datascience, chat, irl
Published: 2020-07-16 16:37:58

---
title: Mid Meet Py - Ep.16 - Interview with Sandrine Pataut
published: true
description: WE meet in the middle of the day, in the middle of the week to chat about Python. This week we have Sandrine Pataut - Pythonista, Data Scientist with us.
tags: Python, DataScience, chat, irl
---
PyChat:

  [Pytest 6.0 is coming](https://twitter.com/pytestdotorg/status/1281954639684857856)
  [GitHub -> Slack bot for pyladies](https://twitter.com/mariatta/status/1281739430554787840)
  [Registrations for PyConAfrica2020 are open](https://twitter.com/pyconafrica/status/1282709212028600320)
  [EuroPython 2020 will start on Thursday next week](https://twitter.com/europython/status/1282618451799023617)
  [PyLadies Dublin Virtual Meetup July](https://www.meetup.com/PyLadiesDublin/events/271327497/)

Mid Meet - Hall of Fame:

  Sandrine Pataut - Pythonista, Data Scientist
  Follow Sandrine on [Twitter](https://twitter.com/SPataut)

PyPI highlights:

  [Marshmallow](https://marshmallow.readthedocs.io/en/stable/)
  [AffectInTweets](https://github.com/erayyildiz/AffectInTweets)

[Listen to MidMeetPy podcast](https://anchor.fm/midmeetpy)
YouTube Video | HTML Crash Course - 2
Tags: html, webdev, youtube, showdev
Published: 2020-07-16 16:34:43

I had decided to create a HTML tutorial for absolute beginners. This video is for those who are just starting in Web-development. After this video, you can take the code in this tutorial and treat as as your little cheatsheet for HTML.

Here is the second part of the series.
{% youtube F-9j-ZVtR6k %}

Please do like it and [Subscribe](https://www.youtube.com/channel/UCRf7mazcufqZxd2pR3oQJuQ?sub_confirmation=1) to my channel for more videos.
Can you rate my React package?
Tags: react, javascript, npm
Published: 2020-07-16 16:31:11

---
title: Can you rate my React package?
published: true
description: I created a ReactJs package, I want to you rate my package and show me my mistakes! 
tags: #discuss #react #js #npm
//cover_image: https://i.ibb.co/28G6dL7/darkmode.gif
---

Hi everyone,

my guess was about npm package is like magic when I was trying to install a third-party package, but when I feel compatible with the ecosystem and all about reactjs, I thought it's and can be made with javascript, so I created my first reactjs package for dark mode toggling, what I expect from you is to find an issue, terrible code and if you like please just give me one star to push me forward as you pretty much know!

![image](https://i.ibb.co/28G6dL7/darkmode.gif)

git repo: https://github.com/lifeeric/react-darkmode-toggler
npm: https://www.npmjs.com/package/react-darkmode-toggler


Thanks for supporting me!
XML Parsing in PHP
Tags: php, xml, parsing
Published: 2020-07-16 16:30:58

XML stands for EXtensible Markup Language which is a markup language that is both human-readable and machine-readable.

PHP has provided inbuilt function simplexml_load_string() to process XML and fetch information from it. This function was introduced in PHP in version 5.

simplexml_load_string ( string $data [, string $class_name = “SimpleXMLElement”  [, int $options = 0 [, string $ns = “” [, bool $is_prefix = FALSE ]]]] ) : SimpleXMLElement

Where-
string $data : XML data in string format.
string $class_name : optional parameter. It will return an object of the specified class (if any).
int $options : Optional parameter. It specifies additional Libxml parameters.
string $ns : Optional parameter. It specifies a namespace prefix or URI
bool $is_prefix : Optional parameter. Returns TRUE if ns is a prefix, FALSE if ns is a URI. The default is FALSE.

for more detail information check this link

https://programmingdive.com/understanding-xml-parsing-using-php/
JS File upload: Detect Encoding
Tags: javascript, angular, characterencoding, beginners
Published: 2020-07-16 16:25:07

I'm currently stuck on this same issue but in Angular 6, where I have to determine the file encoding type which can vary from csv to csv. I've found an npm package called [jschardet](https://www.npmjs.com/package/jschardet) but it only detects after the file is read. Along with a few others that seem to have the same issue. I've found something that mentioned the upload stream but I'm still looking into what this is. I also went to google and I was able to find my exact issue but with no clear solution. I feel like the stackoverflow explains it a little better though. So here I am, at the mercy of the internet. What can I do? 
{% stackoverflow 48885304 %}
JOIN CODERSRANK AND GET HIRED
Tags: jobs, codenewbie, remotejobs
Published: 2020-07-16 16:11:42

Turn Your Code Into Your Digital Developer Profile & Get Hired Faster!
Join <a href="https://bit.ly/2NbSVLS">CodersRank Now </a> And Let Your Work Speak For Itself, CodersRank helps you find your dream job and grow as professional!