teleren/devto huggingface dataset:
Daily Developer Jokes - Thursday, May 20, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-05-20 12:00:04

---
title: "Daily Developer Jokes - Thursday, May 20, 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=Thursday%2C%20May%2020%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/5e125969479bf.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:___ What did XHR say to AJAX when it thought it was being a Mean Girl?

___A:___ Stop trying to make fetch happen!
 -->
Setting a .travis.yml file for a react app test
Tags: docker, devops, tutorial, beginners
Published: 2021-05-20 11:58:49

# Travis Yaml Configuration

1. First we will tell the Travis we need a copy of docker running.
2. Now, we need to build the image based on the Dockerfile.dev which is the Dockerfile used for development purpose.
3. Next we write some script which guides Travis how to run our test suite.
4. If we are hosting our code to AWS, we also tell Travis to do so (which I do not cover now)

```yaml
language: generic

# required super user access
sudo: required

# services thhat are required
services: 
  - docker

# series of steps ran before the test
before_install:
  - docker build -t rohithvazhathodiyil/docker-react -f Dockerfile.dev .

# triggering travis ci to run this script to have the test
script:
  - docker run -e CI=true rohithvazhathodiyil/docker-react yarn test
```

After pushing the `.travis.yml` file to the respective repository, our test triggers and Travis CI will do the test for us.
If we head towards our Travis CI dashboard, we can see the job log as 

![3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d4byqgiliim60hz9bo8a.png)
 
 
It says, `The command "docker run -e CI=true rohithvazhathodiyil/docker-react yarn test" exited with 0.
Done. Your build exited with 0.`

{% github Rohithv07/docker-react %}
What is Nuxt.js used for?
Tags: javascript, vue, node, webpack
Published: 2021-05-20 11:54:00

Reasons to consider Nuxt for your project:

1. Create universal applications quite easily

The positive aspect regarding Nuxt JS is the fact that developers can build universal applications quite easily. The majority of the individuals are not acquainted with universal applications, especially beginners.

So, what do you mean by a universal app?

The universal app describes the JavaScript code that will be able to execute on the server-side and the client-side. You will come across lots of contemporary JavaScript frameworks such as Vue that intend to create single-page applications and universal applications based on single-page applications.

Nuxt helps to make coding more simple.

Creating long projects can be quite monotonous for the web app developers since it requires more time for configuration on the client-side and server-side. The primary objective will be to make it simplified for sharing codes between the client and the server.

Nuxt likewise provides the developer with an asyncData process in the components used for fetching data and rendering it on the server-side. In this way, Nuxt comes of use to the developers when it comes to creating universal applications.
2. Provide automated code-splitting

Nuxt helps to generate a static version of your site with an exclusive webpack configuration. It automatically builds the program for every page, which, in turn, creates its JavaScript file. It likewise aids in accelerating the progress and maintaining the small size of the JavaScript file as well.

learn more here: https://webmobileappcreator.wordpress.com/2021/05/20/what-is-nuxtjs-used-for/
PHP multi-language support getting started with Locale class in intl extension
Tags: php, multilanguage, locale, openbsd
Published: 2021-05-20 11:50:36

<small>\* The cover image is originally by [anncapictures](https://pixabay.com/users/anncapictures-1564471/) and edited with great appreciation.</small>

---

## Summary

[PHP](https://www.php.net/) provides a very useful extension for multi-language support named [intl](https://www.php.net/manual/en/book.intl.php). It means "internationalization".
This post shows how to install it (on [OpenBSD](http://openbsd.org/)) and use it with holding up [Locale](https://www.php.net/manual/en/class.locale.php) class as an example. 

### Environment

- OS: OpenBSD 6.9
- Programming Language: PHP 7.4

## Description

### Installation

First, get the extension as a ports package:

```console
$ doas pkg_add php-intl
quirks-3.632 signed on 2021-05-18T20:40:55Z
Ambiguous: choose package for php-intl
	0: <None>
	1: php-intl-7.3.28
	2: php-intl-7.4.19
	3: php-intl-8.0.6
Your choice: 2
php-intl-7.4.19:icu4c-wwwdata-68.2v0: ok
php-intl-7.4.19:icu4c-68.2v0: ok
php-intl-7.4.19: ok
```

Then, activate it:

```console
$ cd /etc/php-7.4

$ # enable extension
$ doas ln -s ../php-7.4.sample/intl.ini
$ # validate the symbolic link created
$ ls -l
total 0
...
lrwxr-xr-x  1 root  wheel  26 May 20 11:05 intl.ini@ -> ../php-7.4.sample/intl.ini
...

$ # load it
$ doas rcctl restart php74_fpm
```

That's it.

### Get localized display name with Locale::getDisplayLanguage

The intl extension is active now.
Let's use [getDisplayLanguage](https://www.php.net/manual/en/locale.getdisplaylanguage.php) function of Locale class in it. It brings "an appropriately localized display name for language of the inputlocale".

#### Example 1: Language names in current language

`locale_get_display_language`, the "procedural style", is available instead of `Locale::getDisplayLanguage`.
Almost all what to do is to pass locale string, which you want to convert to the display name, as the first parameter.

```php
# prerequisites:
# the default locale is en-US

$arr = ['en', 'ja', 'de', 'es', 'fr', 'sv', 'ar']; # for example
```

If the second parameter is omitted, string shown in the default language is returned. For example, `locale_get_display_language('ja');` this time means "Japanese in English".

```php
foreach ($arr as $lang) {
    echo locale_get_display_language($lang);
    // or: echo Locale::getDisplayLanguage($lang);
}
# ==> 
# English
# Japanese
# German
# Spanish
# French
# Swedish
# Arabic
```

#### Example 2: Language names in each language

If the second parameter is passed to `locale_get_display_language` or `Locale::getDisplayLanguage`, string shown in the language is returned. For example, `ocale_get_display_language('ja', 'ja');` means "Japanese in Japanese".

```php
foreach ($arr as $lang) {
    echo locale_get_display_language($lang, $lang);
    // or: echo Locale::getDisplayLanguage($lang, $lang);
}
# ==>
# English
# 日本語
# Deutsch
# español
# français
# svenska
# العربية
```

S' wonderful🙂
Some great tools to create a static site from your markdown documentation
Published: 2021-05-20 11:41:49

When we are working on a project, we are writing a lot of documentation about the project, how works the application... 

Depending on the documentation, generally technical people need access to, but sometimes you want to let it available for non-technical people. But they don't know how to use github *(or don't have the access if it's a private project)* or else to go to your markdown files.

So here are useful tools to be able to generate a static website from your markdown files.

---

# MkDocs
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/py4qho303imag7zia7qs.PNG)
[WebSite](https://www.mkdocs.org/)

---

# Read the docs
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lg2mv6a1dyckjzmk1ryu.PNG)
[WebSite](https://readthedocs.org/projects/markdown-guide/)

---

# Sphinx
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wnrskrvuhlzaodnsl1dw.PNG)
[Website](https://www.sphinx-doc.org/en/master/index.html)

---

# VuePress
*Thanks to [Socola Đại Ca](https://dev.to/socoladaica) for this one*
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/spp9jonuchoenx48teek.PNG)
[Website](https://vuepress.vuejs.org/)

---

# Hugo
*Thanks to [Roneo.org](https://dev.to/roneo) for this one*
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/owpl2ynpc7fn6buub089.PNG)
[Website](https://gohugo.io/)

---

I hope it will help you!
Event Delegation in _hyperscript
Tags: hyperscript, javascript, webdev
Published: 2021-06-24 22:46:21

---
title: Event Delegation in _hyperscript
published: true
date: 2021-05-20 09:43:49 UTC
tags: [hyperscript, javascript, webdev]
canonical_url: https://denizaksimsek.com/2021/hyperscript-event-delegation/
---

```hyperscript
on click
  tell the closest <li/> to the target
    remove yourself
    -- do more stuff...
    -- "you" refers to the clicked list item
```

I’ve seen some people use a pattern like this:

```jinja
<ul>
  {% for item in items %}
    <li _="on click remove me"></li>
  {% endfor %}
</ul>
```

This is convenient to write if you have a server-side templating system, but has a few issues:

- The code needs to be parsed N times where N is the number of items.
- The resulting HTML is bloated.
- If you add more items client-side, you need to repeat the code there.

The pattern for resolving this is called <dfn>event delegation</dfn>. Here’s how you might do it in JavaScript:

```javascript
ul.addEventListener('click', e => {
  const li = e.target.closest('li')
  if (!li) return
  li.remove()
})
```

We add a single event listener to the enclosing list, which finds the item that was clicked and manipulates it.

In \_hyperscript, the `tell` command allows us to manipulate an element other than `me` conveniently, by changing the implicit target from `me` to `ypu`, which refers to the element being “told”.
JavaScript Interview Question #41: Going above MAX_SAFE_INTEGER
Tags: beginners, webdev, javascript, codenewbie
Published: 2021-05-20 11:39:44

![coderslang javascript interview question #41](https://learn.coderslang.com/js-test-41.png)

True or false? What appears in the console?

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

JavaScript uses the double-precision floating-point numbers even to represent integers. This means that the biggest number that can be stored safely as a JS number is 2^53^ - 1 or  9007199254740991. This value is stored as a static constant `Math.MAX_SAFE_INTEGER`.

```js
console.log(Math.MAX_SAFE_INTEGER);      // 9007199254740991
console.log(Math.pow(2, 53) - 1);        // 9007199254740991
```

Having the value `Math.MAX_SAFE_INTEGER` doesn’t mean that it’s impossible to have a bigger number in JS. But, when we continue to increase the number, the loss of precision occurs.

```js
console.log(Number.MAX_SAFE_INTEGER + 1); // 9007199254740992
console.log(Number.MAX_SAFE_INTEGER + 2); // 9007199254740992
```

As you see, by adding 1 and then 2 to `Number.MAX_SAFE_INTEGER`, we got the same number.

If you’re building an application where such behavior is critical, then you should use  `BigInt` instead of the regular JavaScript `Number`.

---

**ANSWER**: There will be a loss of precision due to rounding and safe integer overflow. Both `x` and `y` will equal `9007199254740992`. The message `true` will be printed to the console.

Get my [free e-book](https://learn.coderslang.com/free-ebooks/) to prepare for the technical interview or start to [Learn Full-Stack JavaScript](https://js.coderslang.com)
¿Qué es xAPI (Tin Can)?
Tags: elearning
Published: 2021-05-20 11:21:47

Imagínate una cámara de seguridad que sigue a un estudiante o a un grupo de estudiantes mientras completan un curso en clase, leen un libro electrónico de camino a casa y juegan un juego educativo sin iniciar sesión en ningún sistema, ni siquiera sin conexión. Eso es exactamente lo que hace xAPI. Los estudiantes no deben tenerle miedo a este control total, xAPI solo monitoriza lo que es esencial para hacer que la experiencia de aprendizaje sea más fluida y eficiente.

xAPI son las siglas de Experience API (también conocido como Tin Can) y es el estándar de e-learning más reciente y versátil. Fue desarrollado en 2013 por una iniciativa ADL con la intención de capturar la experiencia del estudiante tal como es. El nuevo enfoque xAPI trata otros problemas modernos de e-learning que los estándares anteriores no lograron solucionar.

En este artículo, descubrirás todos los detalles importantes sobre xAPI que te ayudarán a decidir si deberías usarlo en tu proceso de aprendizaje y cuáles son los beneficios y las dificultades de pasar de SCORM a xAPI. Como parte de la formación práctica, vamos a crear un curso, configurar los informes y verlo en acción.

<a href="https://www.ispring.es/blog/xapi-tin-can">Leer más</a>

<a href="https://linknest.com/meygele/">Más artículos</a>

<a href="https://www.ispring.es/blog/capacitacion-de-personal">Leer más</a>

<a href="https://www.ispring.es/blog/onboarding-de-nuevos-empleados">Leer más</a>

<a href="https://www.ispring.es/blog/programa-de-capacitacion">Leer más</a>

<a href="https://www.ispring.es/blog/soft-skills">Leer más</a>

<a href="https://www.ispring.es/blog/clases-virtuales">Leer más</a>

<a href="https://www.ispring.es/blog/que-es-el-aula-invertida">Leer más</a>
Demystifying DevOps
Published: 2021-05-20 11:15:09

Software Development is one of the important processes in today’s world which deals with coding, programming, testing, documenting debugging and many more. They are the building blocks to any kind of technology in the world. When we talk about software development, a term that comes to our mind is DevOps.  The term DevOps seems very interesting, yet confusing to many. Initially, I too was unaware about DevOps in the Tech World. However, on slowly demystifying this term **“DevOps”**, I leant quite a lot about its history, significance and the reason for its popularity.


DevOps is an abbreviated form of **“Developer and Operations”**.  What does this exactly mean? Why is it so popular in the industry? Let's demystify it one by one!! Hence, in the next few posts, I would like to simplify and explain about DevOps.
Practice Makes Perfect
Tags: learning, videos, improvement
Published: 2021-05-20 10:59:39

---
title: Practice Makes Perfect
published: true
description: The making of my unboxing video for my Dot Net Frontend Day speaker gift
tags: learning, videos, improvement
cover_image: https://raw.githubusercontent.com/StacyCash/blog-posts/main/general/practice-makes-perfect/cover-image.jpg
---

Last week I received my speakers gift for talking at Dot Net Frontend day.

An absolutely amazing, personalised Lego set!

![Personalised Doctor Who Lego Set](https://raw.githubusercontent.com/StacyCash/blog-posts/main/general/practice-makes-perfect/speaker-gift.jpg)

I had no idea what was coming, but knew that it was going to be something special, so decided to make an unboxing video for it.

Now, making videos is something that I struggle with.

Live streams, fine, no problem. If it goes wrong laugh about it and continue. No problem - it's part of the fun.

Recording... Er, no. I can't just ignore mistakes

It has to be perfect, if only because there is a remote possibility that it **can** be perfect. (Note: no it can't, but I don't let logic stop me stressing!)

It is something that I've been wanting to try for a while though, and this seemed an innocent enough way to practice.

So lets unbox, and build, the speaker gift in a video.

It didn't go great. I went wrong, I mis-spoke repeatedly, I completely messed up building the K9 model.

And... I kept it. Just uploaded the video and left it at that. I didn't try to clean up any of the mistakes: I left in the fact that I got K9 very wrong before I got it right, and that I managed to miss a bit from the Dalek... 

I just uploaded as is and enjoyed the experience.

It took a deep breath to do, and it's a tiny little video, but it's a start 😊

Practice makes perfect, and maybe I'll get the courage to start recording videos at some point soon!

The end result is [here](https://youtu.be/Cn2weYHikT4)

The conference videos are [here](https://www.dotnet-frontend.com/recordings)

Cover image by <a href="https://unsplash.com/@sigmund?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sigmund</a> on <a href="https://unsplash.com/s/photos/practice?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Why Webpack imports don't resolve in CI
Tags: webpack, linux, javascript
Published: 2021-05-20 10:53:48

Your application is building locally perfectly fine, but in CI, imports are not resolving? I maybe have a hint for you.

## Problem statement

Let me lay out the issue I had a little bit more. We build web applications with VueJS. We use Webpack to bundle and optimize the JavaScript code. Imagine the following folder structure:

```
|-resources
  |-js
    |-Components
      |-TheNavigation
        |-Index.vue
        |-NavLink.vue
      |-TheFooter
        |-Index.vue
    |-Layouts
      |-Default.vue
```

In the Webpack config, we set an alias to resolve the `@` sign to `resources/js` and omit the .vue file extension. Therefore when we import the navigation and the footer component into the default layout, this looks like the following:

```javascript
import TheNavigation from '@/Components/TheNavigation'
import TheFooter from '@/Components/TheFooter'
```

Consistent with the other component names, the `Index.vue` also starts with a capital letter.

## Build fails in CI

We use Github Actions for continuous integration as well as for builds and deployments. We run all workflows on Linux systems.
When we built a project with the situation above, it worked completely fine on our local machines. We use Macs.
When we triggered the build on Github in a Linux container, it failed because it could not resolve the module imports from Webpack.

The problem is that Linux has a case-sensitive system, other than Windows and macOS. Therefore, when you import, as seen above, the System searches for an `index.(whateverFileType)`. On a Mac computer, the System finds the `Index.vue` file and uses it. But as Linux is case sensitive in file names, it will not recognize `Index.vue` as the same file as `index.vue`. Therefore the module can not be resolved.

It took me some time to figure this out, with a hint from [this answer on Stack Overflow](https://stackoverflow.com/questions/36365550/webpack-doesnt-resolve-properly-my-alias#answer-55923972) I realized that case-sensitivity could be the problem. After changing all `Index.vue` files to `index.vue`, the build ran on the Linux machine.

Of course, it would be possible to add the whole path, inclusive filename, and extension, but in my opinion, this looks way less clean and is more code to write. 

I hope this helps at least one developer, as it was a big pain in the ass to figure out. The solution is not what I was looking for. Rather I was debugging the Webpack config instead, which obviously was utterly useless.
React Router v4 example
Tags: react, router
Published: 2021-05-20 08:57:19

https://grokonez.com/frontend/react/react-router-example-v4

React Router v4 example

In this tutorial, we're gonna look at React example that uses Router v4 for implementing navigation.

<!--more-->
<h2>Goal</h2>
We will use React Router v4 to create a navigation bar in which, clicking on any item will show corresponding Component without reloading the site:

<img src="https://grokonez.com/wp-content/uploads/2018/04/react-router-example-goal.png" alt="react-router-example-goal" width="468" height="465" class="alignnone size-full wp-image-11646" />
<h2>How to</h2>
<h3>Project Structure</h3>
<img src="https://grokonez.com/wp-content/uploads/2018/04/react-router-example-structure.png" alt="react-router-example-structure" width="179" height="471" class="alignnone size-full wp-image-11648" />
<h3>Install Packages</h3>
We need <strong>react-router-dom</strong> to apply <code>Router</code>. Add it to <code>dependencies</code> in <strong>package.json</strong>:
<pre><code class="language-javascript">
{
  ...
  "dependencies": {
    ...
    "react-router-dom":"4.2.2",
  }
}</code></pre>
Then run cmd <code>yarn install</code>.
<h3>Configure Webpack</h3>
Open <strong>webpack.config.js</strong>:
<pre><code class="language-javascript">
const path = require('path');

module.exports = {
    ...
    module: {
        rules: [...]
    },
    devtool: 'cheap-module-eval-source-map',
    devServer: {
        contentBase: path.join(__dirname, 'public'),
        historyApiFallback: true
    }
};</code></pre>
<code>historyApiFallback</code> option is specifically for <strong>webpack-dev-server</strong>. Setting it <code>true</code> will effectively ask the server to fallback to <strong>index.html</strong> when a requested resource cannot be found (404 occurs).
<h3>Create Components</h3>
- For each Page that displays when clicking on Navigation item, we add one Component. So we have 4 Components: <code>Dashboard</code>, <code>AddBook</code>, <code>EditBook</code>, <code>Help</code>.
- We need a Component for 404 status, it's called <code>NotFound</code>.
- Now, we put a group of <code>NavLink</code> in header of <code>Header</code> Component:

More at:

https://grokonez.com/frontend/react/react-router-example-v4

React Router v4 example