teleren/devto huggingface dataset:
Storybook Talk / Live Coding
Tags: javascript, react, storybook, ux
Published: 2021-03-16 03:43:46

Last week, I gave a talk on [Storybook](https://storybook.js.org/) at a [The Collab Lab meetup](https://www.meetup.com/tech-talks-by-the-collab-lab/).

{%twitter 1370056928383090689 %}

## What is Storybook?

Think of it as a workbench for building out components that your application consumes without the burden of running your application. It is also living interactive documentation for your entire team/consumers of components.

![Describing building components in Storybook vs. your applciation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6x3jsi7yoj9id3xyhgg3.png)
 
By building out your components in isolation, it forces you (in a good way) to really think about how you are building your component. Building things in Storybook will potentially (hopefully) help you avoid tightly coupling things together. 

For example, at Forem, we use [Elastic Search](https://www.elastic.co/) for search results including the list of users returned in the mention autocomplete component below.

![The Forem mention autocomplete component in action in Forem's Storybook](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3s1qbca47opj18adanwh.png)
 
This component knows nothing about Elastic Search. All it knows is that it gets a list of users from a function [prop](https://reactjs.org/docs/components-and-props.html) called `fetchSuggestions` and renders them. In Storybook, we mock that prop by creating a function that returns some mocked data.

A Storybook story is view of a component in a certain state. A component can have many stories. Here we show a button component with different variants.

![Different views of a button component in different states in Storybook](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mw0e2cmaf72ybu2t78e4.png)

Storybook was originally built for React only but has since evolved to support most of today’s popular frameworks like Vue, Angular, and Svelte etc.

There's more, including some live coding and incorporating Storybook into a The Collab Lab project, so check out the full talk and [slide deck](https://iamdeveloper.com/storybook2021).

{%youtube ypsD-9qQzYg %}

If you aren't already, give [The Collab Lab](https://dev.to/the-collab-lab) a follow on DEV!
TIL You Can Hide the Godot Console
Tags: todayilearned, gamedev, productivity, godot
Published: 2021-03-16 03:39:03

2021-03-15

Godot is tiny and starts up fast but it also starts up with a console that I personally find unnecessary.
![Godot System Console](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ixnjoyru6cy28w6jkm50.png)
It has its purpose but usually it's just another window that ruins my alt-tabbing speed! Fortunately it can be hidden. Under Editor > Editor Settings, you can search for the Hide Console Window option and flip it on.
![Editor Settings highlighting option](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uyjon2yj7sfm27eyjzux.png)
This value is persisted so the next time you run Godot, the console window will hide automatically on startup. For me, it's stored in AppData/Roaming/Godot in a file called editor_settings-3.tres.
```
[resource]
interface/editor/hide_console_window = true
```
If you don't want to use the option and prefer something temporary, you can also toggle its visibility through the Editor menu.
![Editor Menu displaying Toggle command](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uhv9714bibk608q30sbu.png)
Difference between `count(*)` and `count(column_name)`
Tags: mysql, database
Published: 2021-03-16 03:24:17

I found this interesting Medium article from Joshua Otwell about the difference between `count(*)` and `count(column_name)`. 

Good 2 minutes read - https://medium.com/an-idea/mysql-count-and-count-column-or-expression-differences-e480b0db5f43
JS : Do we need Library for simple date formatting? What can you Do ...
Tags: date, javascript, formating
Published: 2021-03-16 03:20:59

We regularly use a date formatting library like moment.js  date-fns in our project. I often i see that , i 
use it for simple date formatting. 

 But there is no need to use any library to format date in JavaScript. 

Like , for  this, 15 - 2 - 2021  you can use 

`{ new Date(time).getDate() + ' / ' + parseInt(new 
   Date(time).getMonth() + 1) + ' / ' +
   new Date(time).getFullYear()
}
`


For Am, Pm , like 9 am,  You can use this ,

`{ new Date().toLocaleString('en-US', { hour: 'numeric', hour12: true }) } 
`

Also what more you can do is, you can make a tiny npm package and share it in your team. 
 

Thank for reading, have a nice day.
Announcing a live coding session: LiveChat web app authorization
Tags: webdev, announcement, javascript, sideprojects
Published: 2021-03-16 02:20:23

**Hopefully, you recognize us from our recent [.txtlss hackathon](https://dev.to/livechat/announcing-txtlss-virtual-hackaton-by-livechat-4nli), which was a fruitful event! We are on a roll, and this time, we want to give you an opportunity to join our live coding session.**

During our live coding, together with the Developer Program team, you will master web app authorization based on our API. That includes implicit grand authorization flow, AccountsSDK, and Sign in with LiveChat flow. You will also learn how to send rich messages in the chat. 

The host of our session will be [Jakub Sikora](https://www.livechat.com/team/#jakub-sikora), one of the frontend developers at LiveChat. He also hosted the first part of our live coding session, and on top of that, he holds weekly programming workshops for his team. Jakub is a great teacher, and the live coding will be a one-of-a-kind opportunity to see it for yourself. What’s more, you will also be able to ask any questions around app authorization or monetization you might have. 

As part of the live coding session, you will receive a task to complete. The first ten developers who submit a pull request with the correct solution will get a $50 credit assigned to their Developer Accounts in the Developer Console. We’re thrilled to give your future projects a kick-start and see them published on the LiveChat Marketplace! If you’d like to see more details on the prizes, visit the [event website.](https://developers.livechat.com/live-coding-authorizing-web-apps/) 

For the coding part, we’ll extend the features of the application created during the first part of our live coding session. If you are not familiar with it, [here](https://www.youtube.com/watch?v=SjqCBgAaEbc&feature=youtu.be) is a recording where you can check out the app development.

The session will take place on March 19, 2pm CET, and will be hosted on the LiveChat for Developers [Discord server](https://discord.com/invite/rFbJkYQFwp). Don’t miss out and save the date. See you there!
Web Development Tools Part 2
Tags: html, css, webdev, beginners
Published: 2021-03-16 02:58:50

More Web Development Tools!
Hello Friends 👋🏾,
Today I want to share with you some more helpful web development tools. I have been a 'web developer' for a few months now. I would not consider myself a pro but I am definitely not a beginner.

1. [Ray.so](https://ray.so) - 
Ray.so allows you to create beautiful images of your code. It has different background colour options, auto formatting, different padding sizes and supports fifty two different coding languages. It also has a nifty feature that automatically detects

![vL5SkhoqJ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9de3p2f1rqpf1hsz4cvx.png)
 

2. [Meta Tags](https://metatags.io) - 
Meta Tags does exactly what it's name says. It gives you meta tags. Usually when you send a website to someone it will look like this (Picture 1), but with Meta Tags it will look like this (Picture 2). The website is functional and very easy to use. It automatically shows you previews of what your website will look like on Google, Discord, Twitter, Linkedin, Pinterest and Slack.

![BGOCwP7b8](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c32jkni0vr3t11xs3ldv.png)
 
Picture 1:

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

Picture 2:

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

3. [grapecss](https://grapecss.glitch.me) - 
grapecss is a stylesheet created by me. As the name suggests grapecss has an overall purple theme. grapecss supports elements such as all the headings, paragraphs, buttons, checkboxes, images, iframes, custom scrollbars, inputs and much more.

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


Part three maybe coming soon... I hope you guys liked The Grapey Blog. If you did please share it to your friends and family. Have a great day!
5 useful sites for FRONTEND devs
Tags: html, css, beginners, webdev
Published: 2021-03-16 02:08:29


## 5 useful sites for you to use in your frontend projects and impress everyone.

---

[Css Grid Generator.](https://grid.layoutit.com/)

This site allows you to visualize the layout of your grid and modify it, generating html and css that are easy to use.
Grid is basically an invisible mesh, used to align and structure elements or sections of your webpage.



[Paletton.](https://paletton.com/)

With this website you will never have to worry again if the colors of your website match. It shows the right palettes for each color, with the right tones and also creates multiple color palettes.
Awesome.


[Glassmorphism.](https://glassmorphism.com/)

Give the effect of transparent or frosted glass to the elements of your page in seconds! The effect is based on background blur with transparency and uses stacked layers to show the depth and context of the interface.


[Shortcurts.](https://shortcuts.design/)

This site is a treasure! It basically contains all the shortcuts of dozens of tools that you will use as a frontend developer, which involves a lot of design.


[Google Fonts.](https://fonts.google.com/)

Let's close with a classic, which many of the newbies still don't know about.
Here you can find the most varied fonts to use in the text of your website, just select the font you like, paste the link in your html and use it in your css. There, beautiful typography on your website.

---
#### If you liked it, follow me on [github!] (https://github.com/lucas-andre)
5 sites úteis para devs FRONT-END
Tags: html, css, webdev, beginners
Published: 2021-03-16 02:02:36

## 5 sites úteis para você utilizar em seus projetos de front-end e impressionar todo mundo.

---

[Css Grid Generator.](https://cssgrid-generator.netlify.app/)

Esse site te permite vizualizar o layout da sua grid e modificá-lo, gerando html e css fáceis de usar no final.
Grid é basicamente uma malha invisível, usada para alinhar e estruturar elementos ou seções da sua webpage.



[Paletton.](https://paletton.com/)

Com esse site você nunca mais vai precisar se preocupar se as cores do seu site combinam. Ele de mostra as paletas adequadas para cada cor, com os tons corretos e também cria paletas de multiplas cores.
Excelente.


[Glassmorphism.](https://glassmorphism.com/)

Dê o efeito de vidro transparente ou fosco para os elementos da sua página em segundos! O efeito é baseado em desfoque de fundo com transparência e usa camadas empilhadas para mostrar a profundidade e o contexto da interface.


[Shortcurts.](https://shortcuts.design/)

Esse site é um tesouro! Contém basicamente todos os atalhos de dezenas de ferramentas que você usará como dev front-end, que envolve muito design.


[Google Fonts.](https://fonts.google.com/)

Vamos fechar com um clássico, que muitos dos novatos ainda não conhecem.
Aqui você encontra as mais variadas fontes para utilizar no texto do seu site, basta selecionar a fonte que você gostar, colar o link dela no seu html e utilizar em seu css. Prontinho, linda tipografia em seu site.

---
#### Se gostou, dá um follow no [github!](https://github.com/lucas-andre)
Day 42: Tip Calculator
Tags: 100daysofcode, python
Published: 2021-03-16 01:48:30

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pvqjh7y5yfnvd2uglwbw.png)
Import the math module. also a quick fix for potential errors in python 2.

```python
import math
try: input = raw_input
except NameError: pass
```
This function handles the subtotal, before taxes and tip:
```python
def enter_subtotal():
    temp = input("Subtotal       [] $")
    if temp.replace(".","",1).isdigit():
        return float(temp)
    else:
        return enter_subtotal()
```

This function is for the tax, with a default rate for my province:
```python
def enter_tax(subtotal):
    default = '15'
    temp = input("Tax          ["+default+"%] ")
    temp = temp.replace('%','')
    if temp.replace(".","",1).isdigit():
        return float(temp)
    elif temp=='':
        return float(default)
    else:
        return enter_tax(subtotal)
```

This function handles the tip percentage:
```python
def enter_tip_percent():
    default = '15'
    temp = input("Tip Percent ["+default+"%] ")
    temp = temp.replace('%','')
    if temp.replace(".","",1).isdigit():
        return float(temp)
    elif temp=='':
        return float(default)
    else:
        return enter_tip()

```

This function adds a tax to the tip, if needed:
```python
def choose_tip_on_tax():
    temp = input("Tip on tax?  [no] ").lower()
    if temp=='':
        return False
    elif temp=='no' or temp=='n':
        return False
    elif temp=='yes' or temp=='y':
        return True
    else:
        return choose_tip_on_tax()
```

This final function prints the results:

```python
def print_fancy(str_in):
    width = 40
    bracket = '----'
    bracket_len = bracket.__len__()
    bracket_end = width-bracket_len
    str_len = str_in.__len__()
    if width<str_len:
        return False
    start_char = (math.floor((width/2)) - math.floor((str_len/2))) - 1
    if start_char<bracket_len:
        return False
    str_out = bracket
    c=bracket_len-1
    while True:
        c+=1
        if c==start_char:
            str_out+=str_in
            c+=str_len
        elif c==bracket_end:
            str_out+=bracket
            break
        else:
            str_out+=' '
    print(str_out)

def dec2(inp):
    try:
        return "%.2f" % inp
    except:
        return ''

print("Tip Calculator\n")

subtotal = enter_subtotal()
tax_percent = enter_tax(subtotal)
tip_percent = enter_tip_percent()
tax = subtotal*(tax_percent/100)
if choose_tip_on_tax():
    tip = (subtotal+tax)*(tip_percent/100)
else:
    tip = subtotal*(tip_percent/100)
total = subtotal+tip+tax

print("")
print_fancy("RECEIPT")
print_fancy("")
print_fancy("MEAL - $"+dec2(subtotal))
print_fancy("TAX - $"+dec2(tax))
print_fancy("TIP - $"+dec2(tip))
print_fancy("TOTAL - $"+dec2(total))
print_fancy("")
print_fancy("THANK YOU FOR YOUR BUSINESS!")
```
Error Cause in JavaScript
Tags: javascript
Published: 2021-03-16 01:45:39

Say, you have a simple function to `fetch` data from an `endPoint` and has a `catch` block.

```js
const fetchData = async () => {
  return await fetch('<SOME_URL>')
    .catch(err => {
       // What shall we do with the err?
    })
}
```

What can you do with the `err` that is captured in the `catch` block? 

* Throw a new `Error`:

```js
 throw new Error('Failed to fetch the data: ' + err.message);
```

* Wrap and throw the error:

```js
  const wrapErr = new Error('Download raw resource failed');
  wrapErr.cause = err;
  throw wrapErr;
```

* Throw a `CustomError`:

 ```js
class CustomError {
	constructor(msg, cause) {
		super(msg);
		this.cause = cause;
	}
}
throw new CustomError('Download raw resource failed', err);
 ```

Perhaps it would be helpful if the `Error` constructor took a `cause` property. In that case, the value of the `cause` would be assigned to the instance of that error. This would improve error chaining without requiring error wrapping. 

This is what we get with the [error-cause](https://tc39.es/proposal-error-cause/) proposal now on stage-3. The proposal suggests a second argument to the `Error` constructor with which the `casuse` can be specified. So we could do something like this:

```js

const fetchData = async (url) => {
  return await fetch(url)
    .catch(err => {
        // Notice the optional object with `cause`
        throw new Error(`Unable to fetchData from ${url}`, 
                        { cause: err });
    })
}

(async () => {
  try {
    await fetchData("https://example.com/");
  } catch (e) {
    console.log(e);
    console.log('Caused by', e.cause);
  }
  // Error: Unable to fetchData from https://example.com/
  // Caused by TypeError: Failed to fetch
})();
```

Hope you like this feature! 🤓

P.S: Error Cause is on stage 4, per 2021.10.26 TC39 meeting.


<hr/>

<center><a href="https://twitter.com/gnumanth">@gnumanth</a></center>
How to convert a number to hexadecimal format and vice-versa in JavaScript?
Tags: javascript
Published: 2021-03-16 00:00:00

---
  title: How to convert a number to hexadecimal format and vice-versa in JavaScript?
  published: true
  tags: JavaScript
  date: Tue Mar 16 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/convert-number-to-hexadecimal-and-vice-versa-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-4f223d7bf2609291e3515dfd4672d111.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/convert-number-to-hexadecimal-and-vice-versa-javascript)
  
## Convert Number to Hexadecimal string

To convert a number to a hexadecimal string, you can use the `toString()` number method and pass `16` as the argument to the method in JavaScript.

```js
const num = 1234;

const hexaDecimalString = num.toString(16);

console.log(hexaDecimalString); // "4d2"
```

- The `toString()` method returns the hexadecimal value as a `string`.
- The argument `16` in the `toString()` method is the radix.

## Convert Hexadecimal string to a Number

Now to convert a hexadecimal string to a number, you can use the `parseInt()` number method and pass the hexadecimal string as the first argument and also the value`16` as the second argument to the method in JavaScript.

```js
/* Convert Hexadecimal String to Number */

const hexaDecimalString = "4d2";

const num = parseInt(hexaDecimalString, 16);

console.log(num); // 1234
```

- The `parseInt()` method returns the corresponding number value.
- The second argument `16` in the `parseInt()` method is the radix.

### See both examples live in [JSBin](https://jsbin.com/leqawunida/2/edit?js,console).

That's it! 🌟

### Feel free to share if you found this useful 😃.

---
Fudging required version numbers
Tags: release, version
Published: 2021-03-17 09:38:43

---
title: Fudging required version numbers
published: true
date: 2021-03-16 00:00:00 UTC
tags: release, version
canonical_url: https://jhall.io/archive/2021/03/16/fudging-required-version-numbers/
---

Sometimes a build tool requires version numbers. JavaScript tooling generally [requires semantic versions](https://docs.npmjs.com/about-semantic-versioning). [Go modules](https://blog.golang.org/using-go-modules) also require the use of semantic versioning.

This is good, for publicly-used packages.

But the overhead of managing the different types of changes indicated by semantic version increments isn’t always needed for internal projects—even when cross-project dependencies are in use.

One simple strategy you can employ, in place of strict adeherence to semver, is a rolling compatibility window.

Whereas semver dictates that a you “increment the MAJOR version when you make incompatible API changes”, a rollwing compatibility window dictates that all breaking changes are announced a certian time in advance.

The rules are pretty simple:

1. A compatibility window is defined. This might be 30 days, 3 months, or 1 year.
2. All breaking changes become deprecations first. The deprecation notice must be clear and unequivocal. Ideally, it can be enforced by a static analysis tool/linter.
3. After a feature is marked as deprecated, it is removed after the defined compatibility window lapses.

That’s pretty much it.

The key is that the compatibility window must be long enough to allow all sub projects that depend on the feature to migrate away from the old feature prior to removal.

Note that this is not at all incompatible with semantic versioning. In fact, many well-known public projects that use semver also use this concept of compatibility windows (usually with a window of 1-2 years). They just _also_ increment the major version any time functionality is removed.

The advantage to doing this on internal projects is that you don’t need to worry about the difference between a patch, minor, or major version in your versioning scheme, if you have no other reason to.
App Platform: How to set an app timezone?
Published: 2022-09-20 17:07:47

---
title: App Platform: How to set an app timezone?
published: true
date: 2021-03-16 00:00:00 UTC
tags: 
canonical_url: https://jonfriesen.ca/articles/app-platform-setting-timezones
---

Apps that run on and built by App Platform use a fairly standard Linux container environment. This means that lots of standard linux configurations work on apps.

To set the timezone of an app, set the `TZ` environment variable, this can be as simple as:

```
TZ='Africa/Lagos'

```

Or using more [complex timezone configurations](https://www.ibm.com/support/pages/about-tz-environment-variable).
Breaking down Umbraco
Tags: umbraco
Published: 2023-09-29 08:18:47

---
title: Breaking down Umbraco
published: true
date: 2021-03-16 00:00:00 UTC
tags: umbraco
canonical_url: https://mozzy.dev/posts/breaking-down-umbraco/
---

I wrote an article for [TPXimpact](https://www.tpximpact.com/) about why you might choose Umbraco for a project.

> Umbraco’s benefits are many. Using technologies we’re already familiar with, the CMS allows our solutions to achieve a breadth of functionality and remain malleable post production.

Read in full here: [Breaking down Umbraco](https://www.tpximpact.com/knowledge-hub/insights/breaking-down-umbraco/)
Instalar extensões do vscode no vscodium
Tags: vscodium, vscode, ptbr, braziliandevs
Published: 2021-03-15 23:51:08

Existem diversas extensões disponíveis para o `vscode`, mas nem todas são listadas no `vscodium`.

Para instalar estas extensões, primeiramente devemos acessar o site de [extensões do vscode](https://marketplace.visualstudio.com/vscode).

![Selection_312](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g1ss0ikqvsrqjl86jimo.png)
 
No campo de pesquisa buscamos pela extensão desejada e acessamos a página específica da extensão.

![Selection_313](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xnaeezp6a1swyg0cj7s6.png)

Na página da extensão, procure por *Resources* (fica no lado direto da página) e faça o download clicando em *Download Extension*

![Selection_314](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i1mp4eedsuushlclcjbi.png)
 
Após o termino do download, navegue até a pasta onde um arquivo `vsix` foi salvo.

Execute o comando abaixo trocando o `extension-name.vsix` pelo arquivo baixado, assim a extensão será instalada no seu `vscodium`.

```
codium --install-extension extension-name.vsix
```

Após reiniciar seu `vscodium` a extensão estará disponível para utilização.
Using Cloudera Flow Management (Powered by Apache NiFi) to Track Cloud Services
Tags: apachenifi, nifi
Published: 2021-03-15 23:46:42

---
title: Using Cloudera Flow Management (Powered by Apache NiFi) to Track Cloud Services
published: true
date: 2021-03-15 23:44:00 UTC
tags: apachenifi,nifi
canonical_url: 
---

#  Using Cloudera Flow Management (Powered by Apache NiFi) to Track Cloud Services
[https://community.cloudera.com/t5/Community-Articles/Using-Cloudera-Flow-Management-To-Ingest-and-Process-RSS/ta-p/313074](https://community.cloudera.com/t5/Community-Articles/Using-Cloudera-Flow-Management-To-Ingest-and-Process-RSS/ta-p/313074)

My **source code** is available here:   [https://github.com/tspannhw/CloudDemo2021](https://github.com/tspannhw/CloudDemo2021)