teleren/devto huggingface dataset:
JS13K: A journey through music (Day 10 😊)
Tags: javascript, devjournal, challenge, gamedev
Published: 2021-08-22 21:59:43

Today I changed ways for proceeding the game.
I need to make music for it and looking for a solution for making soundtracks for a 13KB game (Is this possible? If yes, will that be good?), so I am reading a book about that.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z0dbqebczt3mhzkunxzm.jpg)
<figcaption> This one. </figcaption>
I hope to learn how to process, play and visualize music throughly once of all this way :)
HTML Linking to other sites vs. linking to other pages on the same site
Tags: codenewbie, beginners, html
Published: 2021-08-22 21:51:46

Sometimes when writing HTML to format your website you will come across the need to create a link to an outside website. Other times you will want to create a links to other pages on your website. 

Lets say you want to create a list of links to an outside website (URL).  You will be using the `<a>` element plus the 'href' attribute. We will insert the URL's/websites into this code like so:

`<p>My Top Stores:`
`<ul>`
`<li><a href="http://www.kohls.com">Kohl's</a></li>`
`<li><a href="http://steinmart.com">Steinmart</a></li>`
`<li><a href="http://bestbuy.com">Best Buy</a></li>`
`</ul>`
`</p>`

The result...

<p>My Top Stores:
<ul>
<li><a href="http://www.kohls.com">Kohl's</a></li>
<li><a href="http://steinmart.com">Steinmart</a></li>
<li><a href="http://bestbuy.com">Best Buy</a></li>
</ul>
</p>

Now when linking to other pages within the same website it is written like this:

`<p>`
`<ul>`
`<li><a href="index.html">Home</a></li>`
`<li><a href="about-me.html">About Me</a></li>`
`<li><a href="my-stores.html">My Stores</a></li>`
`<li><a href="contact-me.html">Contact Me</a></li>`
`</ul>`
`</p>`

The result...

<p>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about-me.html">About Me</a></li>
<li><a href="my-stores.html">My Stores</a></li>
<li><a href="contact-me.html">Contact Me</a></li>
</ul>
</p>
Markdown Backticks: TIL
Tags: markdown, todayilearned, githubflavoredmarkdown
Published: 2021-08-22 18:07:27


In markdown spec, content between triple back ticks "```" is a code fence/code block. 


```python
var = "this is a python variable"
```

According to [GFM](Github Flavored Markdown) and [this blog post](https://koaning.io/til/2021-08-20-markdown-ticks/), it's possible to have more than three backpacks as long followed by code and equal number of backticks. It's valid to have four backticks and five backticks. What's the use case?

````markdown

### Markdown content

```python

print("Hell of a boring life")

```
### Closing thoughts


````

*Note: dev.to doesn't render four backticks properly(mostly they may not follow GFM).*

From GFM Spec

> The closing code fence must be at least as long as the opening fence: 

[Source](https://github.github.com/gfm/#example-94)

- The outer block can be one type and inner codeblock can be another type. Say, outer block can be markdown and inner block can be `Python`.



Preview from https://dillinger.io/

![](https://til.kracekumar.com/images/markdown/markdown_preview_4_backticks.png)

Preview from Github

![](https://til.kracekumar.com/images/markdown/gh_preview.png)

The post initially appeared in my website [https://til.kracekumar.com/posts/markdown_backtick/](https://til.kracekumar.com/posts/markdown_backtick/)

### References
- [GFM Specs](https://github.github.com/gfm/#example-94)
- [TIL Koaning Markdown tricks](https://koaning.io/til/2021-08-20-markdown-ticks/)
Rakkas can now power fullstack RealWorld
Tags: react, vite, ssr
Published: 2021-08-22 20:47:10

[**Rakkas**](https://github.com/rakkasjs/rakkasjs) “the dancing web framework” is a web framework built on **[React](https://reactjs.org/)** and **[Vite](https://vitejs.dev/)**. **[RealWorld](https://github.com/gothinkster/realworld)** is a demo app specification with more than 100 implementations in various frontend and backend frameworks. The just released **version 0.3.0** of Rakkas now has a feature set rich enough to power a **fullstack** implementation of RealWorld which works even with **JavaScript disabled** (a good test of Rakkas's SSR abilities). [See it in action!](https://realworld.rakkasjs.org/)

This port served as a test bed while developing the new version of Rakkas: We **fixed the bugs** we stumbled upon, we **added features** we missed, and we **redesigned APIs** we deemed unergonomic.

It also served as a test bed for establishing Rakkas best practices: **Session management**, **authentication**, unit testing, API testing, end-to-end testing, data validation, database access, and many other things that need to be done in a real world application has been tackled. See the [github repo](https://github.com/rakkasjs/rakkas-realworld) for a more in depth explanation of how everything works.

The new version also comes with **[much expanded documentation](https://rakkasjs.org/guide)** and the next version will focus on **static site generation**.

Although still in early development and not ready for production use, we feel that this release puts Rakkas on the map as an increasingly **promising contender** for building real-world web applications. So go ahead and give it a try: [you can even do it in your browser](https://stackblitz.com/edit/rakkas-demo-ts?file=src/pages/page.tsx)!
Domain Types in SQL – Structured Query Language
Tags: domaintypesinsql, sql, structuredquerylanguage, database
Published: 2021-08-22 20:46:43

A user-defined data types in SQL are Domain Type. You can use the domain instead of a built-in SQL data type. To know the difference between user-defined and built-in data types check our post.  You can use the domain instead of a built-in SQL data type when declaring a column. That column will then be restricted only to use the same domain. Some good definitions of Domain type in SQL are found HERE.

To read about different types of Domain in SQL Visit https://hecodesit.com/domain-types-in-sql-structured-query-language/
Use localized datetime from Carbon in Laravel
Published: 2021-08-29 11:19:35

---
title: Use localized datetime from Carbon in Laravel
published: true
date: 2021-08-22 20:20:55 UTC
tags: 
canonical_url: https://adithya.dev/use-localized-datetime-from-carbon-in-laravel/
---

I've been using this great package [laravel-localization](https://github.com/mcamara/laravel-localization) for translations. I noticed a minor issue with how datetime is resolved for locales in Laravel. The default `format($dateTimeFormat)` wasn't kicking it and a look at documentation reveals that if you use Carbon\Carbon 2, there are more helper methods to make this easier. Using `isoFormat($dateTimeFormat)` takes locale into consideration.

You also may know `formatLocalized()` method from Carbon 1. This method still works the same in Carbon 2 but you should better use `isoFormat()` instead. It does mean that you might have change all your existing method calls to a new format but it's a much cleaner, neater solution.

> `->isoFormat(string $format): string` use ISO format rather than PHP-specific format and use inner translations rather than language packages you need to install on every machine where you deploy your application. `isoFormat` method is compatible with [momentjs format method](https://momentjs.com/), it means you can use same format strings as you may have used in moment from front-end or node.js. Here are some examples:

Official documentation here: [https://carbon.nesbot.com/docs/#api-localization](https://carbon.nesbot.com/docs/#api-localization)
Today's Fun Joke For Developers - Daily Developer Jokes
Tags: jokes, dailydeveloperjokes
Published: 2021-08-22 20:08:53

---
title: "Today's Fun Joke For Developers - Daily Developer Jokes"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
published: true
tags: #jokes, #dailydeveloperjokes
---

Hi there! Here's today's Daily Developer Joke. We hope you enjoy it; it's a good one.

![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1259bf358c4.png)

---

For more jokes, and to submit your own joke to get featured, check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/). We're also open sourced, so feel free to view [our GitHub Profile](https://github.com/dailydeveloperjokes).

### Leave this post a ❤️ if you liked today's joke, and stay tuned for tomorrow's joke too!

_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:___ Hey officer! How did the hackers escape?

___A:___ No idea. They just ransomware.
 -->
Training a deep neural network in a spreadsheet
Tags: machinelearning, beginners, neuralnetworks, tutorial
Published: 2021-08-22 19:57:07

---
title: Training a deep neural network in a spreadsheet
published: true
description: A post about a recently made video in which viewers learn how to make and train a neural network in a spreadsheet
tags: machinelearning, beginners, neuralnetworks, tutorial
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cvuteok0oarjogmai3gp.png
---

The [second and final part](https://www.youtube.com/watch?v=1zwnPt73pow) of the Spreadsheet neural network video series is up. As promised in the [part 1](https://dev.to/kjlubick/training-a-simple-neural-network-in-a-spreadsheet-2n05) writeup, this video demonstrates how to make and train a deep neural network; one with a single hidden layer.

Creating and implementing the neural network algorithms in a spreadsheet genuinely helped me understand them. Hopefully they help you too.
Twelve-Factor App módszer a gyakorlatban / 1. rész
Tags: twelvefactorapp, php, configuration, vagrant
Published: 2021-08-22 19:55:20

A [Twelve-factor app](https://12factor.net/) alapján fogok pár dolgot az egyik projektemmel kapcsolatban megosztani. Jelenlegi cél a kiinduló állapot feljavítása, kezelhetőbbé tétele. A szokásos: megy a versenyautó és menet közben cserélünk motort. Szépen lépésenként egy jobb, karbantarthatóbb, stabilabb, biztosabb, működőbb környezet és kód felé haladva. 
Tanulni, fejlődni, minden nap!

## I. Codebase

A kódbázissal nem volt gond, ugyanis nem volt verziókezelve :sunglasses: :laughing: (meglepő de egy másik projekt kapcsán is pont ezt mesélték, hogy eddig 2 fejlesztő dolgozott és most kezdték verziókelőbe beemelni a kódot) ezt gyorsan lehetett orvosolni egy github repositoryval. Ami még engem zavart, hogy semmi archívum, előzmény nem állt rendelkezésre, hogy mit csinált az előző fejlesztő az elmúlt időszakban.
Szerencsére a szerveren talált mentésekből (havi és napi 1 hétre visszamenőleg) végül sikerült gyártani egy kis verziótörténetet.

## II. Dependencies

A függőségek a kódbázissal kéz a kézben jártak, a jövőben [Composer](https://getcomposer.org/)-t használunk erre.

## III. Config

Itt lesz teendő bőven, minden IS a kódba van égetve. Ezeket szépen el kell kezdeni kiszervezni. Ennek az első lépései megtörténtek. Én régebben az Apache-ban használtam ENV beállításokat, pl:
```
SetEnv APP_ENV "development"
```
Ez alapján már a fejlesztőkörnyezetből (Vagrant virtuális gép) az emailek nem kerülnek kiküldésre, hanem a [MailHog](https://github.com/mailhog/MailHog) kapja el őket.

Elkezdtem néhány Bash scriptet készíteni: init, külső programok telepítése ([Composer](https://getcomposer.org/), [PHPUnit](https://phpunit.de/), [PHPCPD](https://github.com/sebastianbergmann/phpcpd), [PHPMD](https://phpmd.org/) és [PHP-CS-Fixer](https://github.com/FriendsOfPHP/PHP-CS-Fixer)) és itt is szükségem lett volna az `APP_ENV` értékére, ami ugye Apache beállítás és CLI-ben nem elérhető.

Első körben átraktam mindent az `/env/environment`-be, majd mivel nem akartam ezt a globális részt szemetelni, meg amúgy is szebb elkülönítve, illetve az ebben használt formátumot (`APP_ENV=development`) az Apache `/etc/apache2/envvars` nem tudta betölteni / feldolgozni, így a `/etc/profile.d/CUSTOM-environment.sh`-be kerültek át az adatok, ide viszont már az `export APP_ENV=development` formában.

Az Apache `/etc/apache2/envvars`-ban meg simán berántható a fenti file tartalma:
```
# Load all the CUSTOM environment variables.
. /etc/profile.d/CUSTOM-environment.sh
```

Így most CLI-ben is megvannak a beállítások és az Apache-on keresztül a PHP is megkapja őket.
Replace with "O"
Tags: javascript, regex, css, html
Published: 2021-08-22 19:53:47

This snippet takes input into a textfield and replaces all vowels with the letter “o”. 

{% codepen https://codepen.io/ZevanRosser/pen/yLXBQpX default-tab=js,result %}

I saw a meme that did something like this with musical instruments `piano = poono, guitar = gootor etc..`

_See more stuff like this over @ [Snippet Zone](https://snippet.zone/)_
Mini Markdown with Nested Lists
Tags: markdown, javascript
Published: 2021-08-22 19:49:33

This is an addition to a post from the other day... it's a speed coded thing that renders a subset of markdown:

{% codepen https://codepen.io/ZevanRosser/pen/dyRbQVa default-tab=js,result %}

This version of this snippet includes support for nested lists.

_See more stuff like this over @ [Snippet Zone](https://snippet.zone/)_
Fun with Proxies
Tags: javascript, webdev
Published: 2021-08-22 17:27:29

_The first in a series exploring different JS features in 300 words or less_

Hey you! That’s right, it’s _another_ blog post about Javascript (boring, am I right?)! Today though, we’re going to explore one of the most interesting features of the JS language for metaprogramming and building abstractions: Proxies!

To construct a contrived example, let’s say you’re building a website that fetches some data from the backend, and you’ve got a simple NodeJS server somewhat like this (the details are completely unimportant, as long as you get the gist of what’s going on):

```js
app.get("/friends", (req, res) => {
  return res.json([
    {
      name: "Mr Bean",
      username: "mr-bean"
    },
    {
      name: "Darth Vader",
      username: "officialV"
    }
  ])
})
```

Now to the interesting stuff—how would you fetch that from the frontend? The normal way (and quite frankly the sane way), would be to do something like:

```js
const friends = await fetch("/friends").then(r => r.json())
```

But hey, that’s no fun! What if instead you could simply write `const friends = await server.friends()`? That’s where Proxies come in. They’ve got a bunch of interesting properties that you can read all about on [MDN], but for our purposes what they do really well is let you intercept property access (i.e. the getting of the property `friends` on the `server` object). It looks like this:

```js
const server = new Proxy({}, {
  get(_, property) {
    return async () => {
      return fetch(`/${property}`).then(r => r.json())
    }
  }
})
```

This will make every property access on the `server` object return an async function that fetches the path `/${propery}`. And that’s it! Now you can write `await server.whatever()` to your hearts content, knowing that it’ll make the right network request.
Code your own vue
Tags: javascript, vue, webdev, tutorial
Published: 2021-08-22 19:46:28

---
title: "Code your own vue"
published: true
description: "create your own vue, make your own vue"
tags: javascript, vue, webdev, tutorial
---

Code your own vue is a series of post that is going to show you how create your own vue for learning purposes, the implementation of functionalities try to be most simple as can be.

### The ideas of this title are:
- Get a **better** understanding of the main concepts of popular frameworks or libraries like vue, react, angular and so on.
- Be a cool coder that has did your own vue... a simple one like a cheap toy, but is your own vue.

Consider that I can be wrong or vue possibly handle some concepts in other ways, you can use the comments section if you think I'm wrong.

### What you need to know:
- Javascript
- DOM
- Vue v2

I want to be concise, but also I will add some references links to documentation if I use something that someone who start learning javascript may don't know.

## Posts

- [Rendering and states](https://dev.to/ghaerdi/make-your-own-vue-rendering-and-states-jb6)
- [Created vs mounted](https://dev.to/ghaerdi/code-your-own-vue-created-vs-mounted-365a)
- [Methods and events](https://dev.to/ghaerdi/code-your-own-vue-methods-and-events-1dn9)

## Links

- [petite-vue repository](https://github.com/ghaerdi/petite-vue)
- [Twitter](https://twitter.com/ghaerdi/)
#100daysofcode[Day - 01]
Published: 2021-08-22 19:25:09

To is the first day of my 100 days of coding challenge, and today i just make an shopping cart using html, bootstrap and js .
Here is The Code Link :https://github.com/thekawsarhossain/100-days-of-code
And Here is the Live Site Link : https://shopping-cart-bootstrap.netlify.app/
Create Azure Container Instance using Docker Compose
Published: 2021-08-22 18:41:47

<sub>Photo by <a href="https://unsplash.com/@mike_castro_demaria">Mike Castro Demaria</a> on <a href="https://unsplash.com/s/photos/partition-music">Unsplash</a></sub>


As stated in [this tutorial](https://docs.microsoft.com/en-us/azure/container-instances/tutorial-docker-compose) on microsoft docs, you can deploy a group of Azure Container Instance using either
- yaml
- Azure Resource Manager
- Docker compose using Docker CLI

## Docker Context

As highlighted in the tutorial, in order to deploy using docker cli, you need to 
- login into Azure using docker CLI
- create an Azure Container Instance docker context

[This page](https://docs.docker.com/cloud/aci-integration/) from Docker site, describes the integration.

[This page](https://docs.docker.com/cloud/aci-compose-features/) describes the support level for each feature of Docker-Compose.

**Important**: use 
```bash
docker compose up
```
to start Azure Container Instance and not *docker-compose up* !

## Features

[Azure Files Shares](https://docs.docker.com/cloud/aci-integration/#using-azure-file-share-as-volumes-in-aci-containers) can be used as Volume.

[Health checks](https://docs.docker.com/cloud/aci-integration/#health-checks) are supported too, although i'm not sure if they are supported if a [VNet is used](https://docs.microsoft.com/en-us/azure/container-instances/container-instances-virtual-network-concepts#other-limitations).

[Port mapping is not supported](https://docs.docker.com/cloud/aci-compose-features/#exposing-ports) but we can expose up to [5 ports](https://docs.microsoft.com/en-us/azure/container-instances/container-instances-quotas#service-quotas-and-limits) .


Hope this helps !
Deconstructing a Problem
Published: 2021-08-22 18:36:51

I'm working on solving a blog post issue: formatting posts to reflect newlines/paragraphs.

Currently, when you create a blog post, you're directed to a `<textarea>` in which you can enter the body of the blog post. Submitting the form creates a POST request that inserts the text data (and related information) into the database.

The problem lies in formatting of new lines. When you hit enter inside of the `<textarea>`, the cursor drops to the next line, where you can resume writing. But when you view the submitted post, the new lines are rendered as spaces.

Here's an example. Text is submitted formatted like so:

```javascript
Some sample text.

This is line two.

Each line of text is separated from the others by an empty line.
```

Once saved and displayed on the page, the above entry appears like this:

```javascript
Some sample text. This is line two. Each line of text is separated from the others by an empty line.
```

My goal is to render those new lines to accurately reflect the intent of the writer.

##Investigate
The first step is to see what's happening with the text. How is it stored in the DB and how is it reproduced on the site in on the Post page?

Looking up the post in the Mongo client, I can view the text as it's stored in the database:

```javascript
{
 ...
 text: Some sample text./nThis is line two./nEach line of text is separated from the others by an empty line.'
 ...
}
```

So hitting 'enter' to create new lines is saved a `/n` somewhere along the way between hitting 'submit' and being stored as data.

And then those newlines (`/n`) are not rendered on the page as new lines, instead, they render as spaces.

How are chunks of text properly demarked/delimited/formatted in html? Well `<p>` elements seem like the way to go. 

To make sure, I'll check out how other blogging sides do it. If a site like dev.to does it that way, I'll consider it a satisfactory implementation.

Newlines into Paragraphs
Inspecting my own dev.to post in Chrome's developer tools, I notice that all of their paragraphs are wrapped in `<p>` elements. Hypothesis confirmed. That's what I'll do too.

And this is what it looks like:

```javascript
      <div id='create_container__main__post_text'>
        {post.text.split('\n').map(para => (
          <p>{para}</p>
        ))}
      </div>
```
I regret not using Xfce4 before
Tags: linux, windowmanagers
Published: 2021-08-22 17:57:58

---
title: I regret not using Xfce4 before
published: true
description: I have spend too much time on Gnome3
tags: linux, windowmanagers
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xyxsqombm83ln8hxrais.jpg
---

## Gnome3 takes a lot of memory and is intrusive 

It is very difficult to disable tracker, I even spend a time using [windowmaker](https://www.windowmaker.org/) to save my old laptop, but I felt I was missing something...

## Make your xfce4 look better

Install [plank](https://launchpad.net/plank), an elegant simple and clean dock, just search on google: "plank dock", or in case you, like me use voidlinux: 

```sh
doas xbps-install -Sy plank
```

After installing you can run...

```sh
plank --preferences
``` 

...  then you can disable the native xfce dock.

## Add a new Applications Menu (WhiskerMenu)

Just follow [this great article](https://www.pragmaticlinux.com/2021/03/install-and-configure-the-whisker-menu-as-your-xfce-start-menu/) that explains everything your need to do:

## Add some themes:

To make it easier install **ocs-url**, void users can run:

```sh
doas xbps-install -Sy ocs-url
``` 

## But what the hell is ocs-url? 

An install helper program for items served via OpenCollaborationServices (ocs://). 
You can just click on install on sites like [xfce-look.org](http://https://www.xfce-look.org).

## Tweak your xfce4-terminal 

Install a good programming font, nowadays I am using [jetbraisn mono](https://www.jetbrains.com/lp/mono/). Another great thing in many cases is enabling compositing, which will make possible use tranparencies, this can be turned on: 'Enable display compositing' (Settings -> Settings Manager -> Window Manager Tweaks -> Compositor (tab).

My terminal looks like this:

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

After some tweaks my desktop looks like this:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cwjf5j2xmu5w64jx7zi4.jpg)

## Final tips:

Most users know enought "sudo" but you have seen in this article the "doas", so to know better what it is: [OpenDoas](https://github.com/Duncaen/OpenDoas): a portable version of OpenBSD's doas command doas is a minimal replacement for the venerable sudo. It was initially written by Ted Unangst of the OpenBSD project to provide 95% of the features of sudo with a fraction of the codebase.

### To make easier writing this article I had to search a good screenshot tool.

    doas xbps-install -Sy xfce4-screenshooter

### Hide firefox tool bar:
+ [Reference: support.mozilla.org](https://support.mozilla.org/en-US/kb/customize-firefox-controls-buttons-and-toolbars)

Right click on the menu bar > customize > disable the check box on the bootom of the window