teleren/devto huggingface dataset:
Take your localhost API to be accessible from WWW
Tags: webdev, programming, tutorial, productivity
Published: 2021-04-13 13:19:51

In this post, we will tell you how you can take the API on your machine to be accessible from WWW by using a powerful and free tool called ngrok.

### **The Problem**
Many times we developers develop APIs for our apps. But when we are working in a team and you need to give access to your API to other team members, you just have one option, upload it to a server. This process is very time-consuming. 

### **The Solution**
Wouldn't it be easy to simply take the API from localhost to WWW so that anyone could access it? Well, that's exactly what NGrok does for you. 

### **How does it help?**
Suppose, I am developing an API that gives me the list of food items. As I am developing it on my machine, the URL to access this would be
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dlrq7beelwg24y43az5d.png)
Now, I would like my colleague to access this endpoint. So, to do that, I will use ngrok.

### **Step 1:**
Simply visit https://ngrok.com/ and download the ngrok.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sonex34w1q7flc9dm4wn.png)

### **Step 2:**
Now before using ngrok you have to first set the auth token. So simply go to the ngrok site and get the auth token by creating the account. Now run the below command with your auth token.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eu75la53f42h9z2966pz.png)

### **Step 3:**
Lastly, just run the below command by specifying the port no on which you want to receive the request from WWW.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/li271nu2n5uskuerem0b.png)

In My case, it is 80 because my xampp is running on port 80.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pecexpdbi2szf9wtvqwy.png)

### **Result**
Now you will get a random WWW URL from NGROK.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eylmk47e0l4ly4rqk0nn.png)
By using this URL anyone can access your localhost API.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wzef11hb8walrfrmmkmc.png)

Thank you for reading!

Follow us on Instagram
https://www.instagram.com/the.ninja.programmer/
HTML Basics
Tags: html, basics
Published: 2021-04-13 13:16:53

# What is HTML
Html stands for HyperText Markdown Language. It is a fundamental part of pretty much every webpage you see on the internet. You've probably heard this a million times, but it is essentially a skeleton of the website - it gives it a structure.
Html doesn't care about looks of the page (that's what CSS is for) or interactivity (that's the job of JavaScript), it simply structures the content of your webpage.

# Basic syntax
This is a basic HTML syntax code snippet.
```html
<p>I'm a paragraph</p>
```
You can see that it starts with `<p>` and ends with `</p>`. These are called an HTML **tags**. The whole code snipped is called an html **element**. An html file is composed of these elements. This particular example is an element with 2 tags.

There are two types of elements. Self-closing elements and elements with closing tags.

```html
<input type="text" />
```
Self-closing element example.


# Semantics
When working with Html, you want to look into semantics. Semantics is a really big topic in HTML5. It just means that your content is well structured.
Imagine that you have a _header_, _main_ part and _footer_ on your website. In old HTML, you would do it with an element called `div`. This meant that your code was really messy. HTML5 solves this issue with semantic tags, which are not only great for code readability and maintenance, but also for good Search Engine Optimization.

This is a sample HTML code.
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
</head>
<body>
  <header>
    <h1>My website title</h1>
  </header>
  <main>
    <section>
      <h2>Section title</h2>
      <article>
        <h3>Article name</h3>
        <p>Article content</p>
      </article>
    </section>
  </main>
  <footer>
    <p>This is a website footer</p>
  </footer>
</body>
</html>
```
You can see how the document is structured just by looking at it.

Here you can find a [comprehensive list of html elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) from MDN

# Simplicity
Html is quite easy to learn because it is not a full-fledged programming language (like JavaScript or Python). You can learn it in about __2 weeks__ for basic usage like making simple websites.

> Html in itself isn't that interesting. What is interesting, however, is combining it with CSS and JavaScript. Then you can make really nice, good-looking and interactive websites.

# Learning resources
There are so many great resources on How to learn HTML. I'm just going to list a few here that I personally find interesting:
* [Freecodecamp's Responsive Web Design Course](https://www.freecodecamp.org/learn/responsive-web-design/) is a great place to start.
* [The Odin Project Foundation Course](https://www.theodinproject.com/paths/foundations?) teaches you HTML, CSS, JavaScript, Source Control and many more.
* [Codecademy's Learn HTML Course](https://www.codecademy.com/learn/learn-html) (I haven't done this one, but it has a great feedback)

I plan on posting more here, so stay tuned and let me know if you liked it or tell me what I should change.
A pure CSS password generator! 😱 They said it can't be done...
Tags: css, showdev, webdev, codepen
Published: 2021-04-13 13:16:40

I have seen loads of people say "it can't be done" and....well it can't (yet)!

However after seeing [this awesome post by Alvaro Motoro on how much Jeff Bezos makes per second](https://dev.to/alvaromontoro/bezos-calculator-4b7h) (and with the useful comment by [Temani Afif](https://dev.to/afif)) I realised I could fake it!

I have shamelessly stolen about 90% of the mark-up for Alvaro's post, I hope he doesn't mind!

Click on the black boxes to generate your password. Click again to start the randomiser going again to pick another password! Simple. 

**Note:** as many of you know I advocate for accessibility, the below is not accessible, it is a silly experiment **NOT** to be used in the real world.

{% jsfiddle https://jsfiddle.net/quyzm5h6/2/ result css html %}

The chance of generating the same password is actually very low due to human reaction times, rendering times etc.

Obviously as I said earlier, I wouldn't recommend this for production.....it isn't actually random, **it isn't accessible** and you can't copy and paste the generated password. 

In fact it is pretty rubbish as a password generator!

However the principle of "faking" random could be used for all sorts of things such as a random colour picker, dice etc.

Anyway, as it isn't usable in production I am not even going to explain it, just thought I would lay claim to the title of the first person to create a CSS only password generator (as I don't think anyone has done it before)!

(Ok I will explain a little).

We toggle a checkbox and use CSS to grab the checked state. When the checkbox is unchecked (we start checked) we use `animation-play-state: paused;` to stop all animations. When it is checked we unpause all the animations..

```css
input:checked + label span.number::before {
  animation-play-state: running;
}
```
As for the animations - each box is simply jumping between letters and numbers at a super fast pace, with a different timing for each box so you get the appearance of randomness.

## Update
For anyone who likes CSS witch craft / voodoo here is [Temani Afif](https://dev.to/afif))'s "single element" version (it is two elements...I have to get a dig in somewhere 🤣). 

{% jsfiddle https://jsfiddle.net/u5t1bqsj/3/ result html css %}

It doesn't work in anything other than Chromium based browsers (at the moment) but how can you possibly not be impressed with the creativity, I think I learned at least 5 new CSS tricks just from that fiddle alone!

I am going to say mine is better just because it uses 62 characters instead of 26...😋
Does your work get paid properly?
Published: 2021-04-13 13:13:13

Hello there community and learners.

Two weeks before i came across of a WordPress project,in fat terms it was an eshop(Woocomerce) with some UI work on a custom template,and the back-end work for (bookings,invoices etc).

I used to do a better offers when the client is suggested from a friend or an external partner so i decided to ask the 50% of the ammount.To talk with a numbers that was 500euro from 1000euro which was my offer for the eshop.
 
The customer thought that 500 euro was much enough and decided to to tell me that we will not proceed further with the construction,even if i was already started to create things and show him what i was doing.I get upset a while but you know in freelancing things like these are common.Yesterday i recieved an email from him that my job was very low bugdet and after me he made his research and he got totally dissapointed from the prices and the services that they provided to him.
He asked me if i can be in partnership with him again.

My quetsion is?

Do we underestimate our job,or some clients that belongs out of the field of IT just they are not ready yet to understand the path of our job?
What should be my answer?Should i be professional and say yes let's do it or should i keep it personal and say yes let's do it with more money or even no i don't do it?
With wich way you are calculating your cost's for each project? 


I hope you to have a nice day and a nice reason to talk about your experiences along that situations.

Peace
My "Dependency-Free" Carousel 🎠 Component
Published: 2021-04-13 13:09:15

![react-gallery-carousel controlled by mouse](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ub9fzr0b4ai282yc6gm9.gif)

Recently, I completed react-gallery-carousel, a "dependency-free" React carousel component with support for touch, mouse dragging, lazy loading, pinch to zoom, thumbnails, modal and keyboard navigation.

![react-gallery-carousel controlled by touch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/011t8m65z03btzcrsuun.gif)

Demo: https://yifaneye.github.io/react-gallery-carousel/ (or https://yifanai.com/rgc) 👈
GitHub: https://github.com/yifaneye/react-gallery-carousel

![Lighthouse report on react-gallery-carousel's demo site](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/276qa3q3wp32kldmla1p.jpg)
![rgc3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ub9fzr0b4ai282yc6gm9.gif)
 
react-gallery-carousel component not only supports:
- Lazy loading
- Thumbnails
- Maximization (fullscreen)
- Finger swiping and pinch zooming
- Mouse dragging
- Keyboard navigation
- Accessibility
- Instantaneous speed detection;
but also supports customization with props. 😊

I handcrafted icons, wrote many useful custom hooks and wrote many exquisite functional components to complete this piece of work. 👨🏻‍💻

Everyone is welcome to ask questions, find issues, make pull requests, make suggestions and give stars on GitHub! 👏

Demo: https://yifaneye.github.io/react-gallery-carousel/ (or https://yifanai.com/rgc) 👈
GitHub: https://github.com/yifaneye/react-gallery-carousel
npm: https://www.npmjs.com/package/react-gallery-carousel
Heap Queue in Python
Tags: python, heap, functions
Published: 2021-04-13 13:05:34

A **priority queue** is represented by a heap data structure. It is available in Python through the **“heapq”** module. 

In Python, the property of this data structure is that the smallest of the heap elements is popped each time (min heap). The heap structure is preserved while components are **moved or popped**.

Every time, the *heap[0]* element returns the smallest element.

*Let's look at some important* **heap operations** :

**-** **heapify(iterable)** :- The **iterable** is converted into a heap data structure using this feature. i.e. in *heap order*.

**-** **heappush(heap, ele)** :- This function inserts the element specified in the arguments into the heap. The order is changed to keep the *heap structure* intact.

**-** **heappop(heap)** :- This function is used to **delete** the *smallest element from the heap* and return it. The order is changed to keep the heap structure intact.

```
# Python code to demonstrate working of
# heapify(), heappush() and heappop()

# importing "heapq" to implement heap queue
import heapq

# initializing list
li = [5, 7, 9, 1, 3]

# using heapify to convert list into heap
heapq.heapify(li)

# printing created heap
print ("The created heap is : ",end="")
print (list(li))

# using heappush() to push elements into heap
# pushes 4
heapq.heappush(li,4)

# printing modified heap
print ("The modified heap after push is : ",end="")
print (list(li))

# using heappop() to pop smallest element
print ("The popped and smallest element is : ",end="")
print (heapq.heappop(li))
```
**Output** :

`The created heap is : [1, 3, 9, 7, 5]
The modified heap after push is : [1, 3, 4, 7, 5, 9]
The popped and smallest element is : 1`
Nullish Coalescing Operator (??) on Javascript
Tags: javascript, beginners, node
Published: 2021-04-13 13:04:59


Cover by <a href="https://unsplash.com/@evan__bray?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Evan Dennis</a> on <a href="https://unsplash.com/s/photos/question-mark?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>

# Summary

- [Intro](#intro)
- [The operator ??](#the-operator-raw-endraw-)
- [Use case](#use-case)
- [Considerations](#considerations)

# Intro

You may have seen a Javascript piece of code like this before:

```js
const value = actualValue || "defaultValue";
```

The operator `||` used above is called "Logic OR", and works this way: If the value at the left of the operator is true, its value will be assigned to the variable `value`. If it is false, then the variable `value` will receive the value at the right, `"defaultValue"`.

If you're used to Javascript, you must know that there are various problems with false and true values. Example: `""` and `0` are considered false values. Then, if in an algorithm `""` and `0` are considered valid values, the operator `||` wouldn't give the desired result. That's when the Nullish Coalescing operator comes.

# The operator `??`

Now that you understand the problem, comes the solution. The Nullish Coalescing operator is represented by the symbols `??` and is used like this:

```js
const value = actualValue ?? "defaultValue";
```

In this case, if the value of `actualValue` is `null` or `undefined`, the value `"defautlValue"` will be assigned to the variable `value`. Otherwise, the value `actualValue` will be assigned to it.

# Use case

Think about this scenario: You're creating a function that evaluates a expression using a coefficient. If the coefficient isn't provided, it will receive a default value, with `0` being valid. As I've said before, the operator `||` would not be the best for this case. Then, the operator `??` is much more suitable. Check the representation of this problem below:

```js
function calculateResult(x,y,coefficient) { ;
    const c = coefficient ?? 0.5;
    return x + y * c;
}

const result = calculateResult(2,3);
console.log(result) // Output: 3.5 ( 2 + 3 * 0,5 )
```

The function `calculateResult` uses the `??` to check if the parameter `coefficient` is provided. If it is, then the value will be taken. Otherwise, the default coefficient will be `0.5`.

# Considerations

The case used was a simple example, but the operator `??` can be useful in a lot of situations and assure more reliability to your code.

Enjoyed this article? Follow me for more contents like this one!

Follow me:

[Twitter](https://twitter.com/reisdev) | [Instagram](https://instagram.com/reisdev) | [Youtube](https://youtube.com/reisdev). 

See you on the next article!👋🏽
More opportunities to explore = more opportunities to learn
Tags: cosi, augmentedreality, snapchat, sparkar
Published: 2021-04-13 12:56:29

Looking forward to sharing the fun world of AR at the COSI - Center of Science and Industry Science Fair next month!

We'll be exploring three of my favorite platforms!

* LensStudio for Snap Inc. (Snapchat)
* SparkAR for Facebook and Instagram
* Sumerian on Amazon Web Services (AWS)

What's the biggest difference between the three aside from the platforms? #LensStudio and #SparkAR only work on PCs and Macs (they require a download). #Sumerian is web-based on the AWS platform which means more opportunities for students who may be working on Chromebooks. More opportunities to explore = more opportunities to learn.
TIL:  JSX ＜Foo bar={bar} baz={baz}＞  can rewrite 
＜Foo {...{baz,bar} }＞
Tags: javascript, react, jsx, typescript
Published: 2021-04-13 12:45:55

In generally, we need pass all props like this.

```jsx
const Baz = (props) => {
  const {a, b, c} = props
  return <>
    <div>{a}</div>
    <Foo {...props} />
    <Bar b={b} />
  </>
}
```

But we can omit `props` with spread operator and shorthand property name.

```jsx
const Baz = ({a, b, c}) => {
  return <>
    <div>{a}</div>
    <Foo {...{a, b, c}} />
    <Bar b={b} />
  </>
}
```
Loading Icon Component for Phoenix LiveView
Tags: elixir, phoenix, liveview
Published: 2021-04-13 12:43:41

Today I am going to put together how to make a loading icon [LiveComponent](https://hexdocs.pm/phoenix_live_view/Phoenix.LiveComponent.html) for [Phoenix LiveView](https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html).

## Get a loader CSS

First, I look for an open-source loader CSS because I am poor at designing and writing CSS. Luke Haas's [Single Element CSS Spinners](https://projects.lukehaas.me/css-loaders/) is nice.

## Make a loader CSS file

I create `assets/css/_loader.scss` file in my phoenix project and paste the loader CSS into that file.

I make sure that my loader CSS file is imported into `assets/css/app.scss` file.

```diff
+ @import 'loader';
```

## Make a loading icon component

First I make `lib/mnishiguchi_web/live/components/loading_component.ex` file. I make the component configurable for the CSS class name bacause I might want to use different loaders in different locations.

```elixir
defmodule MnishiguchiWeb.LoadingComponent do
  @moduledoc """
  Shows a loading icon.

  ## Examples

      <%= live_component @socket,
                          MnishiguchiWeb.LoadingComponent,
                          class: "loader7" %>

      <%= live_component @socket,
                          MnishiguchiWeb.LoadingComponent,
                          loading: @loading,
                          class: "loader7" %>

      <%= live_component @socket,
                          MnishiguchiWeb.LoadingComponent,
                          loading: !connected?(@socket),
                          class: "loader7" %>

  """

  use MnishiguchiWeb, :live_component

  @default_assigns %{
    loading: true,
    class: "loader"
  }

  @impl Phoenix.LiveComponent
  def update(assigns, socket) do
    socket =
      socket
      |> assign(@default_assigns)
      |> assign(assigns)

    {:ok, socket}
  end

  @impl Phoenix.LiveComponent
  def render(assigns) do
    ~L"""
    <%= if @loading do %>
      <div class="<%= @class %>">
        Loading...
      </div>
    <% end %>
    """
  end
end
```

That's it!
What are your hacks for reading digital documents?
Tags: productivity, discuss, reading
Published: 2021-04-13 12:37:24

---
title: What are your hacks for reading digital documents?
published: true
description: I love having physical copies of books or printouts to be able to make annotations or to be able to better focus on just the text on the paper in front of me. Since the effort of obtaining content physically is getting harder to justify (sustainability, latency of shipping, cost), I want to become better at reading digital content on my computer. What are your hacks?
tags: productivity, discuss, reading
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uq6fkq4cbasqos7hr5xp.jpg
---

I love having physical copies of books or printouts to be able to make annotations or to be able to better focus on just the text on the paper in front of me. Since the effort of obtaining content physically is getting harder to justify (sustainability, latency of shipping, cost), I want to become better at reading digital content on my computer. What are your hacks?
10 GitHub repos you need to know as a web developer
Tags: beginners, webdev, github
Published: 2021-04-13 12:07:43

_If you found value in this thread you will most likely enjoy my tweets too so make sure you follow me on [Twitter](https://twitter.com/VladPasca5)  for more information about web development and how to improve as a developer. This article was first published on my [Blog](https://vladpasca.hashnode.dev/)_

### 1.  [Frontend Dev Bookmarks](https://github.com/dypsilon/frontend-dev-bookmarks) - This is a manually curated collection of resources for frontend web developers.

### 2.  [Free Programming Books](https://github.com/EbookFoundation/free-programming-books)  - This is a repo with all free programming books that are available.

###  3. [JavaScript Algorithms](https://github.com/trekhleb/javascript-algorithms)  - This is a list with algorithms and data structures implemented in JavaScript with explanations and links to further readings.

### 4.  [Front-End Checklist](https://github.com/thedaviddias/Front-End-Checklist)  - The perfect Front-End Checklist for modern websites and meticulous developers.

### 5.  [HTML5 Boilerplate](https://github.com/h5bp/html5-boilerplate)  - A professional front-end template for building fast, robust, and adaptable web apps or sites.

### 6.  [CSS Pro Tips](https://github.com/AllThingsSmitty/css-protips)  - A collection of tips to help take your CSS skills pro.

### 7.  [Web Fundamentals](https://github.com/google/WebFundamentals)  - Best practices for modern web development.

### 8.  [Learn Git Branching](https://github.com/pcottle/learnGitBranching)  - An interactive git visualization and tutorial. Aspiring students of git can use this app to educate and challenge themselves towards mastery of git.

### 9.  [Web Gems](https://github.com/webgems/webgems)  - A curated list of resources for devs and designers.

### 10.  [Awesome learning resources](https://github.com/lauragift21/awesome-learning-resources)  - This is a list full of resources you can use to learn Bootstrap, Git, JavaScript, HTML, CSS and more


## The end

_I hope found this useful and if you did please let me know. If you have any question feel free to DM me on  [Twitter](https://twitter.com/VladPasca5) ._
Daily Developer Jokes - Tuesday, Apr 13, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-04-13 12:00:06

---
title: "Daily Developer Jokes - Tuesday, Apr 13, 2021"
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=Tuesday%2C%20Apr%2013%2C%202021"
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/5e1259d54c109.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:
___Q___: Did you here about the witch who was off by two when casting a hex?

___A___: They failed to make the target DEAD and made them DEAF instead!
 -->