teleren/devto huggingface dataset:
Daily Developer Jokes - Friday, Aug 21, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-08-21 12:00:00

---
title: "Daily Developer Jokes - Friday, Aug 21, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Friday%2C%20Aug%2021%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1259a37a785.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
A new database query walks into a bar.

The server says "Sorry, cache only."
 -->
Choosing udemy course for learning REACT 
Tags: react, javascript, help
Published: 2020-08-21 11:59:30

Hello everyone! 
I'm really happy to join this amazing comunity! Working with app is really enjoyable.
I'm familier with js and now, i want to learn a framework of it.
And that is REACT. I doubt between this three udemy's courses! 
1. Maximilian React course
2. Andrew mead
3. Stephen grider
4. Anything you say
I want to know about your experience and idea about this courses(or maybe another).
Generally, share your learning methode and all realated to me! 
TIA :)
How to create a hero image
Tags: css, flexbox, webdev, tutorial
Published: 2020-08-21 11:40:45

### Here's what we'll be creating
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jexc6c3ihkg7e66lmlg9.png)
Hey!👋

I hope you enjoyed my previous post where we build the Navigation using Flexbox. 

In this post, we are going to code the Hero Section.

#### HTML:
```html
<main>
        <div class="hero-img">
            <div class="container">
                <div class="inside-container">
                    <div class="hero-content">
                        <h2>Start something that matters</h2>
                        <p>Stop wasting valuable time with projects that just isn't you.</p>
                        <a href="#">Learn more start today</a>
                    </div>
                    <div class="icons">
                        <li><i class="fab fa-facebook-square"></i></li>
                        <li><i class="fab fa-instagram"></i></li>
                        <li><i class="fab fa-twitter"></i></li>
                    </div>
                </div>
            </div>
        </div>
    </main>
```

#### CSS:
```css
.hero-img{
    background-image: url(images/Macbook.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 100vh;
    width:100%;
    position: relative;
}
.inside-container{
    display: flex;
    height: 100vh;
    justify-content:flex-start;
    align-items: center;
}
.hero-content{
    color:#fff;
    line-height: 1.5;
    position: relative;
    z-index: 2;
}
h2{
    font-weight: 400;
    font-size: 3.25rem;
    letter-spacing: 1px;
}
p{
    font-weight: 400;
    font-size: 1.25rem;
    letter-spacing: 1px;
    margin-bottom: 2.25rem;
}
.hero-content a{
    text-decoration: none;
    color:#000;
    font-weight: 400;
    border: 1px solid transparent;
    background-color: #CCCCCC;
    padding:15px 25px;
    font-size: 1rem;
    margin: 0;
    display:inline-block;
    letter-spacing: 1px;
    text-transform: initial;
}
.hero-content a:hover{
    background-color: #fff;
}
.hero-img::after{
    content: "";
    background-color: rgba(0, 0, 0, 0.342);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
}
li{
    list-style-type:none;
}
.icons{
    display: flex;
    color: #fff;
    font-size:25px;
    position: absolute;
    z-index: 2;
    color: #CCCCCC;
    bottom: 0;
    padding:25px 0px;
}
```
If you have any questions feel free to ask.

Happy Coding!🙌
Hello New World
Tags: hello, world, hugo, personal
Published: 2020-08-21 11:19:12


Hello! This is my first post in Hugo. In the past, I had a blog in the same domain that used WordPress and it had some posts that I don't want to migrate here because it's a good opportunity to start a new blog.

I choose Hugo because I don't want to maintain WordPress and I don't want to do an update every week. I don't feel comfortable right now with WordPress. I prefer the freedom of Hugo and I can practice the new cloud methodology that I learned in the last months.

In this new stage, I will try to write posts in English, (don't forget that my native language it's Spanish) , and I will try that the topic is going related to cloud and networking.

Thanks for reading me and we'll see you in the next post.
libsctp-dev with sctp.h on alpine ... where is it?
Tags: alpine, tutorial
Published: 2020-08-21 11:17:24

Took me more than 10 seconds to find on google, hence this note to myself thingy...

If you need `libsctp-dev` to build some stuff on debian distros, you probably want `lksctp-tools-dev` package on alpine ...

```
apk info -L lksctp-tools-dev
lksctp-tools-dev-1.0.18-r1 contains:
usr/include/netinet/sctp.h
usr/lib/libsctp.so
usr/lib/pkgconfig/libsctp.pc
usr/share/lksctp-tools/checksctp.c
usr/share/lksctp-tools/sctp_bind.c
usr/share/lksctp-tools/sctp_darn.c
usr/share/lksctp-tools/sctp_darn.h
usr/share/lksctp-tools/sctp_load_libs.c
usr/share/lksctp-tools/sctp_socket.c
usr/share/lksctp-tools/sctp_socket.h
usr/share/lksctp-tools/sctp_sockopt.c
usr/share/lksctp-tools/sctp_status.c
usr/share/lksctp-tools/sctp_test.c
```
Going digital in retail with 3x costs reduction using UI Bakery
Tags: webdev, ui, lowcode, webinar
Published: 2020-08-21 11:03:31

Read how a small retail company used UI Bakery to achieve the following results:
– The development of a full-fledged web app with a responsive design allowing for automating business processes and increasing the number of clients.
– The 3x acceleration of the trade-in & buyout processes including a contract of sales generation.
– The 2х reduction of the app development time compared to custom app development.

Check the full story right here: https://hubs.ly/H0tR4ys0
2 X Performance case studies, mobile experience, and scaling to 100k users
Tags: performancematters, performance, monitoring
Published: 2020-08-21 10:52:24

Hi folks, 

Welcome to Performance Matters. Do you want to see the impact of the performance improvements you make over time? Raygun Real User Monitoring has a new line graph to help you do exactly that. [Check it out here.](https://raygun.com/blog/introducing-performance-trends-over-time/?utm_medium=email&utm_source=perfmatters&utm_campaign=rum_line_graph)

We love seeing case studies on improving performance. This week, we have two—how Raygun improved performance by 83%, and how eCommerce giant Allegro uses ESLint to improve performance for 21 million registered accounts.

Enjoy! 

Your Curator 

------------------------------

### FEATURED ARTICLES

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

<strong>Highlighting great user experiences on the mobile web</strong>

Chrome will begin to highlight high-quality user experiences on the web, starting with the labeling of fast links via the link context menu on Chrome for Android. 

[Read the announcement](https://blog.chromium.org/2020/08/highlighting-great-user-experiences-on.html)

------------------------------

<strong>Improving Raygun by 84%</strong>

Learn how we improved the performance of a React component by 83.8% using RUM.

[Diagnosing front-end issues](https://raygun.com/blog/improving-application-performance-with-rum/?utm_medium=email&utm_source=perfmatters&utm_campaign=83_perf_improvement_rum)

------------------------------

<strong>Using ESLint for app performance</strong>

Making a site like Allegro work requires a lot of engineering. Here's how they use ES Lint to improve performance.  

[Read the blog](https://allegro.tech/2020/08/using-eslint.html)

------------------------------

### BUG OF THE WEEK

<strong>Single-line software bug causes fledgeling YAM cryptocurrency to implode just two days after launch</strong>

A two-day-old decentralized cryptocurrency called YAM collapsed on Wednesday after its creators revealed that a software bug had effectively vetoed human governance.

[Read the full story](https://www.theregister.com/2020/08/13/yam_cryptocurrency_bug_governance/)

------------------------------

### COMMUNITY

<strong>Scaling to 100k users</strong>

Lessons from the community on scaling to 100k users inspired by a blog post on startup engineering by Alex Pareto. 

[Read the thread](https://www.reddit.com/r/programming/comments/hctpaj/scaling_to_100k_users/)

 
------------------------------

<strong>The scariest bug I haven't written</strong>

This short video is an ode to the most terrifying software bug...the one you haven't written yet. 

[Listen for the gratuitous guitar solo from the team at Coding Blocks](https://www.youtube.com/watch?v=cESavedcYYU)

------------------------------

If you think Performance Matters is pretty great, why not [sign up](https://performancematters.dev/) to receive it in your inbox every week? 🙌

------------------------------

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

------------------------------
6 Awesome Ways To Present Your Code 🔥
Tags: career, productivity, beginners, javascript
Published: 2020-08-21 10:49:11

At some point, every developer has to present code snippets. This could be for a presentation, or a tweet, or a blog, or just to go through a snippet later in time.

### Let's dive into the tools you can use to present your code awesomely.🔥
***
## 1. [carbon.now.sh](https://carbon.now.sh/)
Create and share beautiful images of your source code.
Start typing or drop a file into the text area to get started.

You can also connect GitHub with carbon.

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

## 2. [codeimg.io](https://codeimg.io/) 
This is my personal favourite. ❤️️

The best part about [codeimg](https://codeimg.io/) is that they have already existing Social Media Templates. So you don't have to worry about canvas sizing. 

Feature wise, you get more options in [codeimg](https://codeimg.io/) as compared with [carbon.now.sh](https://carbon.now.sh/).

Here's a Twitter template created with [codeimg.io](https://codeimg.io/)

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

## 3. [Pastie](http://pastie.org/)
If you like minimalism and simply want to share code as a link instead of a screenshot, Pastie is for you. 

This is perfect to share code among friends/colleagues. The link generated with [Pastie](http://pastie.org/) is valid for 24 hours.

CAUTION: Pastie uses HTTP and not HTTPS. This means that it lacks encryption and is not secure.

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


## 4. [Rust playground](https://play.rust-lang.org/)
If you are a Rust person, this one is for you. 

Play around with browser interface to the Rust compiler to experiment with the language. It also has the capability to share snippet link just like [Pastie](http://pastie.org/).

## 5. [Silicon](https://github.com/Aloxaf/silicon)
This is [carbon.now.sh](https://carbon.now.sh/) implemented in Rust language.

Problems with [carbon.now.sh](https://carbon.now.sh/) that are overcome by [Silicon](https://github.com/Aloxaf/silicon):
* Cannot work without Internet & browser.
* Doesn't work well with shell. (Although there is carbon-now-cli, its experience is not very good, especially when the network is not so good.)

Usage:

```
$ silicon main.rs -o main.png 
```

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

## 6. [Polacode](https://github.com/octref/polacode)
If you love VS Code, this one is for you! Polacode is a VS Code extension that takes beautiful screenshots of your code right from VSCode.

![Alt Text](https://media.giphy.com/media/LRTiSzuftpeg5YH9pz/giphy.gif)

***

### The best part about these 6 tools is that they are all free to use! 

Cheers.✌️
1 year experience, enjoying learning, but unfavorable atmosphere. Should I continue or not?
Tags: discuss, sharing, beginners, career
Published: 2020-08-21 10:33:56

Hi all
I'm lately like to visit this website so fun to read, discuss and love it to hear your story.. :)

So I decide to make one maybe i can do as you do. As my title maybe you guys understand (sorry for it), and someone gave his thoughts about it. ...

:( 
idk what to say 
idk can i use image from google
idk what tag i should use

ps: 
cover image link :
https://thewineingercompany.com12-workplace-distractions-and-how-to-deal
Demystifying the Patreon API
Tags: webdev, javascript, npm
Published: 2020-08-21 10:26:25

The origin story of this blog post is that I was helping my friend who works as a music teacher and performer bring her offerings online, and I thought it would be helpful to include links to her Patreon Reward tiers to make it easier for her clients to contribute to her music. However, as I began to dig in and try to unravel the mystery that is the Patreon API, I found some myself running into many 404 errors using the npm helper package and constantly banging my head against a wall of "do I really not know how to read these API docs?!?!?!".

So here's what I was trying to accomplish:
All I wanted was the campaign tiers exposed on her Patreon page. I already set up a client in the Patreon Portal, grabbed the create access token (so I could skip OAuth, my nemisis), and grabbed the current user campaigns using the npm helper.
```javascript
    const patreonAPIClient = patreonAPI(access_token)
    patreonAPIClient('/current_user/campaigns')
```
Now that I had the campaign ID of the only campaign she had, I could hardcode that in (as she isn't planning on hosting another) and use that to retrieve campaign specific information. So according to the docs, you look at the campaign endpoint and pass in the ID:
```javascript
    const patreonAPIClient = patreonAPI(access_token)
    patreonAPIClient('/campaigns/${id}')
```
And this will give you the campaign info. However it returns a 404 and I really started questioning my ability to work with and understand the API Documentation.

![NOT FOUND error from npm helper call](https://dev-to-uploads.s3.amazonaws.com/i/ml8xrh2em6xvky3sv8dh.png)

Well after some digging, turns out I am not crazy and there is an issue in how the helper package API url is constructed. I plunged into their github src code and found that **AHA** the npm package exports the [base path](https://github.com/Patreon/patreon-js/blob/master/src/utils.js) as "api/oauth2/api", but the campaign endpoint does not live there. If you look at the [API Docs for Campaigns](https://docs.patreon.com/#get-api-oauth2-v2-campaigns), you'll see that the base path should be "api/oauth2/v2" So if you try to access "/campaigns/${id}", you get a 404 with this npm package because "api/oauth2/api/campaigns" does not exist.

For now, it seems that the best work around would be to use a fetch or other http request instead. It appears the V1 of campaigns is also working, so here are the 2 ways I found to access a specific campaign:

1. via the v2 `https://www.patreon.com/api/oauth2/v2/campaigns/5136507`

![v2 api call and response](https://dev-to-uploads.s3.amazonaws.com/i/1h346dycoelvj2a1rvjj.png)

2. via the v1 `https://www.patreon.com/api/campaigns/5136507`

![v1 api call and response](https://dev-to-uploads.s3.amazonaws.com/i/rj137x18u2wcjz3j14g7.png)

The key difference I have found between these 2 is that v2 includes no fields by default and requires Authorization, and v1 includes all fields and relationships without need to authorize. 

As a note, Patreon's API docs do mention that they are not actively maintaining the API due to resource constraints.
React refs and dom references
Tags: react, refs, dom
Published: 2020-08-21 10:13:22

## Introduction

Sometimes you need to have access to a DOM element in React (like for focusing an input). To do so, React has a system of [refs](https://reactjs.org/docs/refs-and-the-dom.html#gatsby-focus-wrapper) that you can use:

- with hooks:

```jsx
const MyComponent = () => {
  const inputRef = React.useRef();

  React.useEffect(() => {
    inputRef.current.focus();
  }, []);

  return <input ref={inputRef} />;
}
```

- with classes:

```jsx
class MyComponent extends React.Component {
  inputRef = React.createRef();

  componentDidMount() {
    this.inputRef.current.focus();
  }

  render() {
    return <input ref={this.inputRef} />;
  }
}
```

## Render lag

What I call "render lag" is the fact that refs that are bound to DOM elements will always be 1 render late: when doing `ref={inputRef}`, react-dom attached the domElement once it is created and added to DOM tree. So in order for the ref **to be bound to the right DOM element**, a **render need to occur**.

Which is why, if you want to **safely use refs** + dom nodes, you should **only access them in methods that run after the renders** (useEffect / useLayoutEffect / componentDidMount / componentDidUpdate).
But you shouldn't read refs' value directly within the render itself (render method / useMemo).

### Illustration

Let's say we are rendering an input and then dispatching one re-render, this is what will happen:

```
# Initial render
ref.current == null 🚫
render() is called
ref.current <- domElement

# Effect after the initial render
ref.current == domElement ✅

## 2nd render
ref.current == domElement ❗️
render() is called
ref.current <- domElement'

# Effect after the initial render
ref.current == domElement' ✅
```

In most cases,  domElement and domElement' are the same, but if you do something like this, it won't be the case:

```jsx
const MyComponent = () => {
  const elementRef = React.useRef();
  const [state, setState] = React.useState(); 
  ...
  return (
    state
      ? <elementA ref={elementRef} />
      : <elementB ref={elementRef} />
  );
}
```

## Conclusion

Refs can be a bit tricky to use but as long as we keep in mind that they should only be used in effects, it should be fine.

And if you really need to use the dom element in your render (like to trigger other effects), you may want to store it in a state:

```jsx
const MyComponent = () => {
  const ref = React.useRef();
  const [element, setElement] = React.useState(null);

  // Effect without dependencies to run it at every render
  // but setElement won't trigger a re-render if the value didn't change so that's fine
  React.useEffect(() => {
    setElement(inputRef.current);
  });

  // now it is safe to use the variable `element` within the render

  return <element ref={ref} />;
}
```
How to convert an Angular Web App into an Ionic App
Tags: angular, typescript, beginners, javascript
Published: 2020-08-21 10:12:13

There are scenarios/requirements in Web development when you need to create an Android app of existing Web Applications.
For Example: if you have an online eCommerce website you might need an android/ios native app as well.
This Blog Post provides a simple solution to overcome the challenge by converting an Angular Web App into an Ionic Mobile App.
 
>Ionic Framework is an open-source UI toolkit for building performant, high-quality mobile and desktop apps using web technologies — HTML, CSS, and JavaScript — with integrations for popular frameworks like Angular and React.

The first step in the process is to create a new Angular project using the CLI `ng new my-fullstack-app`

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5a0bk4pce1zictetwl8g.PNG)

Moving into the project directory  `cd my-fullstack-app/`

The second step includes adding Ionic to your newly created angular project which can be done using the following command 
`ng add @ionic/angular`

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

Once you have successfully added ionic to your project the third and most important step is to initialize your ionic project which can be done using the following command  `ionic init`

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

>Note: Your Ionic project name should be the same as your angular project name. In my case, I have given the same name 
`my-fullstack-app` to both projects

Before creating an android build we need to make some necessary changes like changing the output path from dist to www in the `angular.json` file
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/x6zahnmvc90bb2e711v1.PNG)

The last change in the index.html file `<base href=”/”>` to 
`<base href=”./”>`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1ri4g1q4vmw9yk6ktqyw.PNG)

Now you can use the following command to create an Android apk 
`ionic cordova run android --project="my-fullstack-app"`

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

Your Ionic App is ready 😎.

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


Special Thanks to my Broski Abhishek Shergar

That's all folks....
Micro v3.0.0 - A framework for cloud native development
Tags: go, microservices, cloud
Published: 2020-08-21 10:11:26

---
title: Micro v3.0.0 - A framework for cloud native development
published: true
description: Micro v3 is a cloud native development framework
tags: golang, microservices, cloud
cover_image: https://pbs.twimg.com/profile_banners/1261319105258405889/1596574198/1080x360
---

Micro v3.0.0-beta is out! This is a huge departure from the Micro of past. We've now consolidated everything down to a simple server which you can run with the command `micro server`. We've also launched Micro as a Service so you don't have to. Check out https://m3o.com for that and the blog for more details.

Micro like Rails and Spring of the past is a development framework. We're focused on making cloud-native development super easy. Hopefully you'll see that in the tooling.

Feedback welcome!

https://github.com/micro/micro