teleren/devto huggingface dataset:
Expanding the idea of open source contribution
Tags: opensource, codenewbie, tutorial, 100daysofcode
Published: 2020-07-08 20:14:26

For whatever reason, people are fixated on the rigid idea that open source contributing means writing code that gets merged into a code base. That's not true.

Here are other ways you can contribute!

## `Make a feature request`

Maintainers largely build their product around the suggestions of the community. If you're using something and you have an idea for a new feature, please vocalize. 

## `Make an issue request`

Maintainers need your help to spot new issues. If you find an issue, please don't ignore them. Report them! Everyone's going to thank you.

## `Testing`

There's tons of room to contribute in this area because many projects are quite liberal with their testing standards. If you find an area you want to test, please write tests for them. I have rarely seen a test-related PR get rejected.

## `Improve docs`

Yes, they are not perfect. Sometimes, they can even be incomprehensible. It's your chance to raise the issue and improve the documentation.

## `Translate Docs`

It is true: the React core team does not know 26 different languages (😂). If you know a language other than English, great! You can improve the accessibility of the project.

## `Teaching`

Teaching IMO is the most underrated way of contributing to an open source project. All of these activities go under teaching:

- Answering a question on StackOverflow
- Writing a blog post
- Recording a tutorial on YouTube
- Speaking at a meet-up
- Going on the help section of a Slack channel and answering any questions

> The grand take-away is that you probably contributed to an open source project, but you haven't noticed because of an antiquated view that contributing means writing code that gets merged. You are all contributing in one way or another, and I appreciate you all for doing so. Keep it up, and happy coding (🥳)!

Warmly,
DH
DLLs or Shared Objects
Tags: todayilearned, c
Published: 2020-07-09 01:18:41

---
title: DLLs or Shared Objects
published: true
description: 
tags: #todayilearned #c
//cover_image: https://direct_url_to_image.jpg
---

I’ve been discovering the C language in my spare time. Today, I learned how to create .dll and .so files that I can dynamically load at runtime. 😁 As a teenager, I thought .dll files existed simply for me to pull an all-nighter trying to reinstall Windows because of corrupted .dll files. It’s nice to know that they aren’t some kind of computer voodoo that is meant to cause pain & suffering 🤣. Learning C is giving me a better understanding and deeper appreciation for those that created the digital 🌎 we live in.
A Monsoon Hackathon - the story of quarantine, opensource and the 2020 uncertainties of student life.
Tags: career, codenewbie, hackathon
Published: 2020-07-09 06:56:39

When we first started reaching out to the student community in India in early May, we at [QikPik](https://qikpik.store) quickly realised that, especially for final year students hoping to start a new career, the initial euphoria of a surprise "holiday" from the pandemic quarantine had melted into solitary despair and uncertainty about the future. 

Students being ever the innovators, we noticed that they were self-organising online, with lots of meetups and talks. But we noticed that there were few focused meetups where specific skills related to immediate career opportunities after college/University were being addressed.

Since most of us have solid Opensource backgrounds, and appreciate how much that did for our careers, we decided to combine our marketing efforts with opensource and student career building.

A quick search on the internet will tell you that frontend app development presents a really quick and low barrier for entry into the world of work. Good frontend developers are not just programmers - they are also mindful of design and workflow and user experience. Frontend developers not only need to be software engineers, they need to be good communicators and empathetic to the needs of users. At QikPik, we have a specific [Student Ambassador](https://qikpik.store/#partners) partner role which requires these skills - and we felt that the research we had put into that role could be repurposed into helping find the right audience for fronted developer skills - empathetic students with an entrepreneurial touch.

Entrepreneurs are perpetual optimists. We see the Pandemic Quarantine as an opportunity to enjoy the Monsoon from Indoors and learn something new. So we're [hosting](https://qikpik.store/hackathon/) the QikPik Monsoon Opensource Hackathon for Frontend development. We reached out to our opensource friends, and many of them have graciously offered to mentor the various tracks for absolutely no reward! The hackathon is thus a real opportunity to learn from empathetic, selfless [individuals](https://qikpik.store/hackathon/#mentors) who WANT to share their knowledge.

Here's the announcement on twitter {% twitter 1280899722408980481 %}

If you're in a hurry, apply here: https://qikpik.store/hackathon/#apply

See you on the other side!
What is thehiddenwiki.org??
Tags: webdev, security
Published: 2020-07-09 15:24:24

https://thehiddenwiki.org is a website that provides you the onion links.
Now what is an onion link??
Onion links are the links that you can access only using tor (The Onion Router)browser.Tor browser makes sure that you remain anonymous while surfing the web whereas other browsers keep track of you while surfing.
You can access thehiddenwiki.org from any browser but the onion links in this website can only be accessed using tor.
BONUS => You cannot post comments on instagram containing "thehiddenwiki.org".
I started learning Java
Tags: java, beginners
Published: 2020-07-10 00:19:17

I downloaded Java <a href="https://www.oracle.com/java/technologies/javase-jdk14-downloads.html"> here:  </a>

And then i am using Intellij IDE from Jetbrains.
<a href="https://www.jetbrains.com/idea/"> Download here </a>

I wrote my first Java program 2 days ago. I am doing this with the #100DaysOfCode on Twitter. To track my progress. 

<strong>What i have learnt so far. </strong>

<ul><li> Every Java program must have at least one function. 
</li>
<li> The functions don’t exist on their own. It must always belong to a class. </li>

<li> A class is a container for related functions. </li>

<li> Every Java program must have at least one Class that holds the main function </li>
<li> Then we need Access modifiers in Java.</li>
</ul>

<strong>What are access modifiers? </strong>
They help set boundaries to the scope of a class, constructor , variable, or method. 

For my first Java program. I will only be interested in the "Public" access modifier. 

```
package com.codewitedison;

public class Main {

    public static void main(String[] args) {
System.out.println("Welcome to my first Java Program);
    }
}

```

Intellij makes it really easy. So it came with the Java boilerplate that set the <strong>public class main and the public static void main lines</strong>. I only added the <strong>System.out.println and print message</strong>. <strong>System.out </strong> is a way to print results to the terminal.
Decent ways of dealing with bad posture during lockdown that's other than getting a good chair?
Tags: discuss, watercooler, ergonomics, posture
Published: 2020-07-09 22:40:30

---
title: Decent ways of dealing with bad posture during lockdown that's other than getting a good chair?
published: true
description: 
tags: discuss, watercooler, ergonomics, posture
//cover_image: https://direct_url_to_image.jpg
---

Been to the doctor complaining about chest pains. Thought it was coronavirus or worse, but turns out to be inflammation caused by bad posture (Yay and nay!!!).

So the easy mode way to deal with this is to get a decent office chair for home. But to keep the discussion interesting, what are some other good posture tips that are beyond getting a good chair?
gRPC Talk at netPonto
Tags: grpc, aspnetcore, speaking
Published: 2020-07-12 19:32:28

---
title: gRPC Talk at netPonto
published: true
date: 2020-07-09 20:32:03 UTC
tags: gRPC,ASPNETCore,Speaking
canonical_url: http://wildermuth.com/2020/07/09/gRPC-Talk-at-netPonto
---

![gRPC](https://wilderminds.blob.core.windows.net/img/pipes.jpg)I had great fun today talking with the [netPonto User Group](http://netponto.org/) on Zoom. It was a fun group who had great questions about gRPC.

In this talk I talk about my view that gRPC is a great solution for certain scenarios and would normally be mixed with REST, GraphQL and SignalR. As promised here are the slides and code.

> [Slides](https://www.slideshare.net/shawnwildermuth/grpc-in-aspnet-core-236766170)

> [Code](https://github.com/shawnwildermuth/PresentationDemos/tree/master/NetPorto/2020)

If you missed the talk or just curious, you can view the talk here:

<iframe src="https://www.youtube.com/embed/3wUtQb6C7to" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>

Thanks for inviting me!

[![Creative Commons License](http://i.creativecommons.org/l/by-nc-nd/3.0/88x31.png)](http://creativecommons.org/licenses/by-nc-nd/3.0/)

          This work by [Shawn Wildermuth](http://wildermuth.com) is licensed under a [Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License](http://creativecommons.org/licenses/by-nc-nd/3.0/).  
          Based on a work at [wildermuth.com](http://wildermuth.com).

* * *

If you liked this article, see Shawn's courses on [Pluralsight](http://shawnw.me/pscourses).
 ![](http://feeds.feedburner.com/~r/ShawnWildermuth/~4/mi1z0BgSDMI)
FINEST WEB DESIGN INSPIRATION AWARDS GALLERY
Tags: webdesign, cssgallery
Published: 2020-07-10 07:18:21

The world-wide viewers of Top CSS GALLERY website always esteem the selected contestant’s websites with their inventive features and sophisticated functionalities. Top CSS GALLERY judge the best aesthetics, engaging functionalities, the finest user experience, and unique images to make their choice in the best website gallery. The Top CSS GALLERY is a real living archive of web design inspiration, web designer portfolio collections which are making history with the latest trends and promoting website design winners creative as well as corporate website awards work style.
Started Developing a Game in Unity For Android (RocketJump)
Tags: unity2d, anroid, game, develop
Published: 2020-07-10 08:23:25

This is the first episode of my new game `RocketJump`,

Will be my first game for Mobile, you will control space ship and should avoid obstacles and get to the last platform 

{% youtube lNXSN0fkrJg %}

> Like this post? 
> Support me via [Patreon](https://www.patreon.com/eranelbaz)
> Subscribe to my [YouTube Channel](https://www.youtube.com/channel/UCVUNeBGM5wZJKcOx0QwAaTA?sub_confirmation=1)
Take Control of your Typography with Capsize
Tags: webdev, design
Published: 2020-07-10 09:15:59

## The Problem

Pixel-perfecting a design can be tough, especially when the font you're using won't play nice.

Fonts can be opinionated. They can house margins and line heights you didn't expect. And they often behave differently in a design tool to the browser.

Have you ever coded a screen using one font, then switched out the font for another? Prepare for a painful hour or two adjusting all the margins and line heights so they fit the design again.

## The Solution

{% twitter 1281468073061478404 %}

Capsize is a new tool from Seek (makers of [Playroom](https://github.com/seek-oss/playroom) and [Braid](https://github.com/seek-oss/braid-design-system)) which helps fonts behave predictably.

It helps you adjust line spacing and font size _exactly_ to the pixel, so you can match your design ideas one-to-one.

![The Capsize font resizer tool](https://dev-to-uploads.s3.amazonaws.com/i/bwktqk6xhnojwpari8b2.png)

It removes implicit line heights from fonts with some smart CSS:

```css
.capsizedText {
  font-size: 67.51648351648352px;
  line-height: 76px;
  padding: 0.05px 0;
}

.capsizedText::before {	
  content: "";	
  margin-top: -0.19442545572916664em;	
  display: block;	
  height: 0;	
}

.capsizedText::after {	
  content: "";	
  margin-bottom: -0.22176920572916664em;	
  display: block;	
  height: 0;	
}
```

[Check out Capsize here!](https://seek-oss.github.io/capsize/) What do you think? Have you tried it yet? What were your experiences?
New Drash Tutorial Videos!
Tags: deno, drash, typescript, webdev
Published: 2020-07-11 01:55:48

Today, Edward and Eric made videos on serving static paths and handling application/x-www-form-urlencoded request bodies in Drash. Have a look!

Don't know what Drash is? Drash is a REST microframework for Deno's HTTP server. Start your journey here: https://drash.land

## Serving Static Paths

{% youtube oTH8WZbRC8w %}

## Handling URL Encoded Bodies

{% youtube bsvEy5uEo1I %}
How to structure code
Tags: technology, structuredcode, codenewbie, codequality
Published: 2020-07-11 02:42:40

Coding can be easy by practice but Structure Code require practice + knowledge + Experience.

actually doing structured code is a crucial part of the coding.

if You are going to write code you should have to write structure code from the day first.

The code can be structured by…

1- Proper thinking (Think Twice code once) 
2- Understanding of Design Patterns 
3- And Experience

Why Structuring of the code is important?

structured code can be easy to understand, and it increases the readability of the code.

1- Naming Convention or code convention :-

A major piece of organizing your code has to do with code convention.Code shows are an unquestionable requirement have for each undertaking.With coding conventions, your code will turn into indistinguishable chaos in a short time.

2- Follow design pattern

Follow this beautiful blog on How to Structure Code .

https://www.javaoneworld.com/2020/06/how-to-structure-code.html
My second React Native Project
Tags: react, reactnative, banks, oppongsbank
Published: 2020-07-11 15:53:39

---
title: My second React Native Project
published: true
description: this is the beginning of my second react native project, a fake Bank
tags: react, reactnative, banks, OppongsBank
---

This will be basically a copy of the Scotia Bank application when updated, I thought it looked cool, so here is my journey and trying to copy it.

https://is5-ssl.mzstatic.com/image/thumb/Purple114/v4/26/34/8b/26348b86-5515-9142-9a29-0abae9fb418a/pr_source.png/392x696bb.png
PHP - Nullable types vs. Parâmetros opcionais
Tags: ptbr, php, braziliandevs
Published: 2020-07-11 16:15:33

[Nullable Types](https://wiki.php.net/rfc/nullable_types) é um recurso adicionado a partir da versão 7.1 do PHP, ele serve para permitir que um parâmetro possa receber nulo além do tipo definido como type hinting. A função `printName` a seguir espera um parâmetro do tipo `StdClass`, só que o ponto de interrogação (?) antes da declaração do tipo define esse parâmetro como nullable type.

```php
<?php

function printName(?StdClass $user)
{

    if(!is_null($user)){
        echo sprinf('Meu nome é %s', $user->name), PHP_EOL;
        return;
    }
    
    echo 'Nenhum nome!', PHP_EOL;

}

```

Como o parâmetro é nullable type, ele pode ser executado de duas formas: passando o tipo esperado ou passando um valor nulo.

```php
<?php

$user = new \StdClass;
$user->name = 'Usuário da Silva';

printName($user); // Imprime 'Meu nome é Usuário da Silva'
printName(null); // Imprime 'Nenhum nome!'

```

Isso difere o recurso de nullable types dos parâmetros opcionais, pois quando um parâmetro opcional é definido, significa que a função pode ser chamada sem nenhum parâmetro. Segue o código:

```php
<?php

// Agora o parâmetro é opcional
function printName(StdClass $user = null)
{

    if(!is_null($user)){
        echo sprinf('Meu nome é %s', $user->name), PHP_EOL;
        return;
    }
    
    echo 'Nenhum nome!', PHP_EOL;

}

$user = new \StdClass;
$user->name = 'Usuário da Silva';

printName($user); // Imprime 'Meu nome é Usuário da Silva'
printName(null); // Imprime 'Nenhum nome!'

// É possível executar a função sem parâmetro.
printName(); // Imprime 'Nenhum nome!'

```
Como é possível perceber na terceira execução da função, nenhum parâmetro está sendo passado, isso é possível porque o parâmetro foi declarado como opcional. Essa é a diferença principal, já que no nullable type não dá para omitir um parâmetro, pois é necessário que ele receba um valor nulo explicitamente (além do tipo esperado, é claro).
🙋‍♂️ Can Anyone Explain Twitter Cards to me?
Tags: webdev, help
Published: 2020-07-11 21:05:05

---
title: 🙋‍♂️ Can Anyone Explain Twitter Cards to me?
published: true
date: 2020-07-11 03:00:00 UTC
tags: webdev, help
canonical_url: https://waylonwalker.com/blog/explain-twitter-cards/
cover_image: https://waylonwalker.com/explain-twitter-cards.png
---

Can someone explain how or why twitter cards render differently from device to device? I understand that twitter cards a built from meta tags, the full list can be found in their [docs](https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/markup).

---

Posted on the same day, here is a great article by @ranaemad that outlines how to get social cards to work.

{% post ranaemad/make-your-website-social-media-card-able-on-twitter-facebook-and-more-35la %}

---

On to my issues with social cards.

## Rendered on Mobile

Mobile Looks fine.

![rendered card](https://waylonwalker.com/twitter-card-rendered.png)

## Not Rendered on Desktop

On Desktop it is not picking up the image.

![not rendered card](https://waylonwalker.com/twitter-card-not-rendered.png)

## Twitter Card Validator

The Validator renders the card correctly. I tried the official [twitter card validator](https://cards-dev.twitter.com/validator), as well as [heymeta.com](https://www.heymeta.com/url/waylonwalker.com/latest), and [metatags.io](https://metatags.io/). All look good.

![rendered card with validator](https://waylonwalker.com/twitter-card-validator.png)

## Can Cards be updated?

_even with a redirect?_

I tried setting up a pinned tweet that uses a netlify redirect to always keep my latest post up to date. This one looks good in the validator and even updates properly.  On desktop it doesn't render the image. On mobile it renders only the original image.

I have heard that you need to hit the card validator to update cards? I am not sure if this is true, but for me, this is not even updating the card.  I am not sure if its the redirect or even updating the image.


{% twitter 1282000623299371008 %}


## Help

* Why doesn't it render on Desktop?
* Can I update the card using a redirect?

* * *
  
👀 see an issue, edit this post on [GitHub](https://github.com/WaylonWalker/waylonwalkerv2/edit/main/src/pages/blog/explain-twitter-cards.md "edit this post")  
<!--
* * *

<a href='https://www.buymeacoffee.com/bBdtMQO'>
  <img src='https://cdn.buymeacoffee.com/buttons/lato-violet.png' width='200px' />
</a>
* * *

I have been writing short snippets about my mentality breaking into the tech/data industry in my newsletter, 👇 check it out and let's get the conversation started.

 

[![Sign up for my Newsletter](https://res.cloudinary.com/practicaldev/image/fetch/s--uOcrEpdd--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://waylonwalker.com/waylon-walker-newsletter.png)](https://waylonwalker.com/newsletter)
-->
ELI5: Why was Deno necessary when we had Node.js
Tags: deno, node, explainlikeimfive, javascript
Published: 2020-07-11 17:46:58

Can anyone explain to me like I'm five - Why deno was created when nodejs existed?

Consider me as a beginner who has written 3-4 server-side programs in node.

P.S. - Please don't post a link to Ryan Dahl's video
@nxtend/ionic-react 3.0.2
Tags: ionic, react, nx, webdev
Published: 2020-07-11 18:07:20

---
published: true
title: '@nxtend/ionic-react 3.0.2'
cover_image:
description:
tags: ionic, react, nx, webdev
series:
canonical_url: https://nxtend.dev/blog/ionic-react-3.0.2/
---

This is a minor update to fix a bug where the user was forced to manually install the `@nxtend/capacitor` plugin before generating an application with `@nxtend/ionic-react`.

## Bug Fixes

- properly initialize Capacitor plugin

The `@nxtend/capacitor` plugin was not being initialized properly with the `@nxtend/ionic-react:init` schematic. This resulted in an error being thrown if an Ionic React application was attempted to be generated if `@nxtend/capacitor` had not been added to the users workspace manually.

This change ensures that the `@nxtend/capacitor` plugin is added to the users `package.json` and is initialized before generating an application with Capacitor enabled.

Unit and e2e tests have also been added to ensure this functionality doesn't break in the future.

For information on upgrading the plugin, visit the [nxtend upgrades documentation](https://nxtend.dev/docs/nxtend/upgrades).
3 HTML tags you’ve never heard of or used before
Tags: html, tags, webdev
Published: 2020-07-12 19:04:42

HTML does have some strange code sometimes. Let's look at the 3 most uncommon tags that are rarely used and what their purpose is.

<h3>1. var tag</h3>
As far as its usage goes, its meant to simply denote to a browser that a mathematics variable will go inside the tag, so its not so useful but here's how we can use it.
```html
<p>The area of a triangle is: 1/2 x <var>b</var> x <var>h</var>, where <var>b</var> is the base, and <var>h</var> is the vertical height.</p>
```

<h3>2. samp tag</h3>
The samp tag is used to define sample output from a computer program. So its usage is similar to the var tag. Here's an example of how we can use samp.
```html
<p>Message from my computer:</p>
<p><samp>File not found.<br>Press F1 to continue</samp></p>
```

<h3>3. kbd tag</h3>
The kbd tag is used to define keyboard input. The content inside is displayed in the browser's default monospace font. Here's an example:

```html
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text (Windows).</p>
<p>Press <kbd>Cmd</kbd> + <kbd>C</kbd> to copy text (Mac OS).</p>
```

So there you have it, 3 obscure html tags that are not the most useful but will probably make you look more professional when used in the proper context (at work, for demo purposes).
write more flexbox code to query document element.
Tags: javascript, ticks
Published: 2020-07-12 02:37:03

---
title: write more flexbox code to query document element.
published: true
description: 
tags: javascript, ticks
---

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


Sometimes you need check if HTML element present in **document**, special your dom load from remote server and dynamic add to document. 

If you code query **DOM** when document loaded, firt time the **DOM** maybe present you can queried it.

But if your **DOM** load from server, you query code clound not found it anymore. becuase you query code execute before  **DOM **add to document

How reslove it?  show me code to you

```javascript
const awaitSomethingReady = (condition, maxCount = 500) => {
  return new Promise((resolve, reject) => {
    let getTestIntervalId = null
    const maxCheckCount = maxCount || 500
    let currentCheckCount = 0
    getTestIntervalId = setInterval(() => {
      currentCheckCount += 1
      if (maxCheckCount === currentCheckCount) {
        clearInterval(getTestIntervalId)
        reject()
      }
      if (condition()) {
        clearInterval(getTestIntervalId)
        resolve()
      }
    }, 50)
  })
}
```

I just want to check if **div** with calss **toolbar** present so use `awaitSomethingReady`

```javascript
awaitSomethingReady(document.querySelector(".toolbar")).then(()=>{
  console.log("found toolbar")
}).catch(()=>{
  console.log("will found toolbar continue ...")
})
```

That all you will write more flexible code 

another way to quickly use npm [live-query](https://github.com/ihavecoke/live-query)

Hope it can help you