teleren/devto huggingface dataset:
Using VS Code and GitHub Gists As a Web Development Playground
Tags: showdev, vscode, webdev, javascript
Published: 2019-12-19 22:07:41

---
title: Using VS Code and GitHub Gists As a Web Development Playground
published: true
description: 
tags: showdev, vscode, webdev, javascript
---

Developing web applications can be hard! And as result, it can be extremely valuable to experiment with HTML, JavaScript and CSS, and then visually iterate towards the solution you're looking for (e.g. a specific behavior or styling). Because this kind of "exploration" is so useful--and for many of us, happens regularly--it felt like it should be easy to create/share/fork new ideas, without having to leave your editor in order to do it.

To address this problem, I built the notion of "web playgrounds" into the [GistPad extension](https://aka.ms/gistpad), so that at any time, you can create new playgrounds within VS Code, and then edit HTML, JavaScript and CSS, alongside a live preview experience. Once you're done with the playground, simply close the preview panel and move on, without having had to switch contexts and/or losing the power of your VS Code editor + highly-personalized extensions 🔥

{% twitter 1207718123241033728 %}

Behind the scenes, playgrounds are stored as [GitHub Gists](https://gist.github.com), which ensures the code is persisted and reusable in the future. Furthermore, since GitHub Gists can be shared and forked by others, this enables an entire ecosystem of playgrounds to form as new "base templates" are defined, which can increase productivity for specific types of playground scenarios (e.g. TypeScript, Angular, Vue.js).

This playground experience is very early, but I'm excited to begin engaging with the community, learn new use cases and requirements, and see how we can improve the experimentation experience for web development within VS Code 🚀
Angular CLI and Commands
Tags: javascript, angularcli, angular
Published: 2020-07-15 09:35:23

---
title: Angular CLI and Commands
published: true
date: 2019-12-19 20:53:46 UTC
tags: javascript,angularcli,angular
canonical_url: 
---

[![](https://cdn-images-1.medium.com/max/1024/0*oAD163ylc9uP_ZRp.png)](https://medium.com/techmonks/angular-cli-techmonks-9a9a09c6d412?source=rss-cb608f048a93------2)

Angular CLI stands for Angular Command Line Interface. It is a command-line tool to generate Angular applications. It will create all…

[Continue reading on TechMonks »](https://medium.com/techmonks/angular-cli-techmonks-9a9a09c6d412?source=rss-cb608f048a93------2)
Day 16 – Routing (Basic) - Learning Node JS In 30 Days [Mini series]
Tags: node, javascript, codenewbie
Published: 2019-12-19 20:38:10

We’ve already created __basic server__ before so we already know how to start a server and get __response__. But how we can go on a __specific route__ ?

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/rl53v1ltte1qjla5houy.png)

Solution is not that hard actually. We can check `req.url` first, which `URL` client is asking for, then we can provide the data basis on that.

To make the routing, first we can check the `request URL` using if and send some `response` based on that.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/zx56bex1thkdk8xarizo.png)

Run it using `node app.js` and check in browser `http://localhost:3000/home`

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/rj1e1icyzjrmg1ul5j39.png)

Now we can easily add new page. ex- about us page

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/hc8f45b1x2eu4tw1aumu.png)

Stop the __server__ and re-run again using `node app.js`

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/zwfvugjwirbzsokfxndq.png)

We can add more pages like this. But what if someone __request a URL__ we didn’t listed ?

Solution is pretty simple just add a __if else__ for that and send tell them not found.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/cx10oory1aczbzg8b37h.png)

Finally you can check using the wrong URL.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/nu71buk6q3zgqnr92iar.png)

###So can you write routes now ?

You can see the graphical version here
{% instagram B6RGmy2AIKm %}

Originally it published on [nerdjfpbblog](https://blog.nerdjfpb.com/day16-nodejsin30days/). You can connect with me in [twitter](https://twitter.com/nerdjfpb) or [linkedin](https://www.linkedin.com/in/nerdjfpb/) !


###__You can read the old posts from this series (below)__

{% post nerdjfpb/day-1-learning-node-js-in-30-days-mini-series-55e7 %}

{% post nerdjfpb/day-2-learning-node-js-in-30-days-mini-series-5023 %}

{% post nerdjfpb/day-3-learning-node-js-in-30-days-mini-series-24i4 %}

{% post nerdjfpb/day-4-learning-node-js-in-30-days-mini-series-1koc %}

{% post nerdjfpb/day-5-learning-node-js-in-30-days-mini-series-21jm %}

{% post nerdjfpb/day-6-learning-node-js-in-30-days-mini-series-758 %}

{% post nerdjfpb/day-7-learning-node-js-in-30-days-mini-series-3023 %}

{% post nerdjfpb/day-8-var-vs-let-vs-const-learning-node-js-in-30-days-mini-series-1i72 %}

{% post nerdjfpb/day-9-mastering-eventemitter-learning-node-js-in-30-days-mini-series-2dfe %}

{% post nerdjfpb/day-10-mastering-eventemitter-learning-node-js-in-30-days-mini-series-2802 %}

{% post nerdjfpb/day-11-creating-and-deleting-folders-learning-node-js-in-30-days-mini-series-3a2d %}

{% post nerdjfpb/day-12-creating-own-server-learning-node-js-in-30-days-mini-series-3ef %}

{% post nerdjfpb/day-13-buffer-stream-learning-node-js-in-30-days-mini-series-5c5d %}

{% post nerdjfpb/day-14-serving-html-pages-learning-node-js-in-30-days-mini-series-2hl3 %}

{% post nerdjfpb/day-15-sending-json-to-client-learning-node-js-in-30-days-mini-series-21pc %}
My IntCode computer is complete!! - Advent Of Code 2019 in javascript - Day 9
Tags: challenge, adventofcode, javascript, node
Published: 2019-12-19 20:18:36

---
title: My IntCode computer is complete!! - Advent Of Code 2019 in javascript - Day 9
published: true
description: JavaScript walkthrough - Day 9 of Advent of Code 2019 (programming challenge solution)
tags: challenge, AdventOfCode, javascript, node
series: Advent of Code 2019 in Javascript
---

{% youtube 2U2OuR_UJVg %}
Icon-bar html&css
Tags: html, css, devops, beginners
Published: 2019-12-19 20:10:03

Html
----
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/s7jm8hu19cacy1veltji.png)

Css
---
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/bbn0gac8l5qp70ic84ow.png)
CSS Tiles with Elevation
Tags: codepen, css, elevation, transform3d
Published: 2019-12-19 19:52:00

---
title: CSS Tiles with Elevation
published: true
tags: codepen,css,elevation,transform3d
cover_image: https://i.imgur.com/w40EGc1.png
description: A floor like layout, with tiles. Hovering over tiles will elevate them nicely.
---

## Inspiration

I wanted to explore and learn about `transition`, `transform`, `rotate` and `translate` properties/values of CSS3. I thought of creating a structure or layout, which will challenge everything mentioned.

## Idea

So, I decided to create a floor like layout, which will need to have some 3d rotations. That floor will have children as tiles.

Now, I also want each tile to look thicker. And when I hover over them, they should elevate and a text will be displayed below it.

<!-- ## Procedure

1. I started with `floor-wrapper` class and I gave necessary rotations: `rotateX(45deg)` and `rotateZ(45deg)`
2. Created a child class `floor`, with `display: flex` and `flex-wrap: wrap` ad primary properties. I calculated `width` of `floor` class like this: _width = (width of tile + margin of tile) * number of tiles_, so that wrapping workd properly.
3. Now `tile` class, -->

## Resources

Mozilla Developer Network (MDN)'s resources really helped me. I went through below articles briefly to get started.

1. [Using CSS transforms](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms#CSS_transforms_properties)
2. [\<transform-function\>](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function)
3. [Using CSS transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)

I also used avatar generator apis to get images:

1. [DiceBear Avatars](https://avatars.dicebear.com/)
2. [Trianglify](http://qrohlf.com/trianglify/) <small>_Just in case 1st one doesn't work_</small>

## Conclusion

I created a floor like layout with children as tiles. Hovering over tiles will elevate them nicely. I have created a pen, you can check it out below.

Let me know your ideas about it in the comments.

{% codepen https://codepen.io/shhdharmen/pen/KKwaLwB %}

Happy coding :smiley::computer::art::tada:
Using functional programming to create a game in JS
Tags: javascript, functional, game
Published: 2019-12-19 19:34:25

---
title: Using functional programming to create a game in JS
published: true
description: There has been a lot of hype around the functional programming paradigm for some time and there are a lot of great books and articles about it on the internet, but it’s not so easy to find real examples with its application. So have I decided to create a game trying to follow its concepts using Javascript, which is the most popular programming language today. In this post, I will share some of this experience and tell you if it was worth it.
tags: javascript, functional programming, game
---
https://cheesecakelabs.com/blog/functional-programming-game-js/
Base(3,8)36.9 (removes up to 50 ending '0's)
Tags: codepen, ascii, custom, sha
Published: 2019-12-19 19:17:44

---
title: Base(3,8)36.9 (removes up to 50 ending '0's)
published: true
tags: codepen, ascii, custom, SHA
---

<p>Take your ascii input and output a unique SHA</p>

{% codepen https://codepen.io/digimancer3d/pen/xxbgRXO %}

--LS0zRA
Set Prettier as your VS Code formatter
Published: 2019-12-19 19:12:21

It can get annoying when you're writing code and have to worry about indenting a line and putting semicolons at the end to make your code look cleaner. There's a way around that and it's called a code formatter. A code formatter parses your code and reprints it with its own rules. There are many code formatters out there but the one I'm currently using is called Prettier. It's a code formatter that works for many languages and editors. 

Installation:

There are two ways that I know of to install Prettier in VS Code. 

First Option - 
Open VS Code and type the command Mac(Command + P), Windows(Ctrl + P) and paste the following command, and press enter.

ext install esbenp.prettier-vscode

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/si6xkygfpqw76yafhm66.png)

Second Option - 
Open VS Code and on the left side, you should be able to see five options and a settings option at the bottom left. You would want to click on the fifth option and that takes you to the extensions and package place in VS Code. You should then see a search on the top left. Type in Prettier in the search bar. You should see Prettier - Code Formatter as your first option. Click that and install it on the right. 

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ku1fmcqrpyoycg0o6lcl.png)

Setting Prettier as your Code Formatter: 

After you have Prettier installed, now it's time to set it as your code formatter. There should be a settings tab on the bottom left. Click that choose the settings options. There should be a screen that's popped up to the right. That's the settings page. You would then click on Text Editor on the left. Click that and scroll down until you see an option that says Default Formatter. Click the option right under that and scroll until you see the name, esbenp.prettier-vscode. Select that option.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/xsnhnwbo2q7aiubbi6xb.png)

Now that you've set prettier as your default formatter, you won't notice any changes until you've set prettier to format on save. On the Text Editor area where we found the place to set default formatter. You would want to click Formatting. This takes you the place where you can set prettier to format your code on save. There should be an option under Formatting that says Format On Save. Check that box and that is all.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/fjvov8lf3jcdocu8in9p.png)

Now that you've set Prettier as your default formatter and also make it format on save, you can now let Prettier handle the rest. For example, 

This is your text editor before saving.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/yft4vlaeyqron7h8itxe.png)

This is the result after saving.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/6o32fxy8aqdkhlkemnsf.png)

See? Isn't this much better? It even adds a semicolon to the end of a line and all you have to do is save your editor. Now you can go and write code without worrying about formatting your text to look nice. Instead, Prettier will do it for you!
Template Hierarchy in WordPress
Tags: hierarchy, wordpress, template
Published: 2019-12-19 18:59:15

WordPress’ Template Hierarchy refers to the order in which template files are used to display various types of web pages. Each theme may have a completely different set of template files, but WordPress will always use the Template Hierarchy to determine which files are used to render the requested page. WordPress themes may include as many or as few different template files as needed depending on the design.

https://www.codechief.org/article/template-hierarchy-in-wordpress
The Mikado Method: How to Improve your Coding Productivity and Sex Appeal!
Tags: cleancode, productivity, video
Published: 2019-12-19 18:58:37

This is a slightly edited recording of an in-office presentation I did about [_The Mikado Method_](https://amzn.to/38RxqK1), an iterative process for incremental code changes (or sex appeal improvement).  (My apologies for the low production quality--it was never expected to be released publicly.)

{% youtube Cvql4DtRAhU %}
★ 📺 Building filters using laravel-query-builder
Tags: laravel, php, mailcoach
Published: 2020-01-02 23:46:23

---
title: ★ 📺 Building filters using laravel-query-builder
published: true
date: 2019-12-19 18:50:19 UTC
tags: laravel, php, mailcoach
canonical_url: https://freek.dev/1534-building-filters-using-laravel-query-builder
---

On the subscribers screens of the [Mailcoach](https://mailcoach.app), you can filter out the subscribers that have a certain status, you can search and sort them.

In the video below, which is part of the upcoming Mailcoach video course, I explain how we built these filters, powered by three of our packages: [laravel-query-builder](https://github.com/spatie/laravel-query-builder), [query-string](https://github.com/spatie/query-string) and [Blade X](https://github.com/spatie/laravel-blade-x).

{% vimeo 380520777 %}
Announcing UDF in Console
Tags: serverless, jamstack, graphql, fauna
Published: 2019-12-19 18:34:40

Author: Lewis King
Date: December 19, 2019
[Originally posted on the Fauna blog.](https://fauna.com/blog/announcing-udf-in-console)

---

We’re pleased to announce the release of user-defined function (UDF) support in the FaunaDB Console! While UDFs have been available in FQL for some time, they can now be easily managed using the Console GUI.

Generally speaking, a UDF is comparable to a stored procedure or server-side function that has its parameters set by a user and often is seen as a “programming shortcut”. In FaunaDB, UDFs are FQL [Lambda](https://docs.fauna.com/fauna/current/api/fql/functions/lambda) functions (which can be anonymous), and they can be exposed through the GraphQL API, by using the [@resolver](https://docs.fauna.com/fauna/current/api/graphql/directives/d_resolver) directive on fields in the Query and Mutation types. You can learn more about FaunaDB GraphQL UDFs in our [documentation](https://docs.fauna.com/fauna/current/api/graphql/functions).

#UDFs in action#
Creating UDFs in the Console is quite simple. From the homepage, click on one of your Databases. In the left-hand navigation bar, click on the “Functions” button and then click the green “New Function button”:
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/f5pig69neadstsjalbnf.png)

You’ll then see the New Function screen. For this example, let’s create a function that simply doubles the input for a query (more advanced examples are given [here](https://docs.fauna.com/fauna/current/api/graphql/functions)). This query adds the variable “x” to itself, thereby doubling it.

Let’s call the function “double”, and specify the function body as:
```
Query(
Lambda('x', Add(Var('x'), Var('x')))
)
```
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/fewp8f17wlzrwkr2iecq.png)

Once saved, you should see the function listed in the Functions list:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/c38sa4lzqv2bfdl3r5ah.png)

Note: you can use the Role field to apply a role’s privileges to a UDF, which is how you specify permissions in FaunaDB.

You can create more functions at your whim, and delete functions when needed:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/kdcr60y7rbnvkxw1t5fr.png)

Using your new function is straightforward as well. Simply wrap the function name in quotes in a <code>Call()command</code>, i.e. <code>Call("double", 2)</code>:


![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/okm140x3pg5g8br61mb0.png)

And that’s about it! When it comes to UDFs, the only limit is your creativity 😉

#Conclusion#
With our latest cloud release, users now have the ability to create and manage UDFs for a database directly in the FaunaDB Console.

Visit our [documentation](https://docs.fauna.com/fauna/current/api/graphql/functions) to learn more. Please reach out to me on [Twitter](http://twitter.com/lew) and our [Community Slack](https://community-invite.fauna.com/) and describe any other features that would make FaunaDB an obvious choice for your next project.
Daily Challenge #140 - I love you, a little, a lot, passionately ... not at all
Tags: challenge
Published: 2019-12-19 17:30:10

---
title: Daily Challenge #140 - I love you, a little, a lot, passionately ... not at all
published: true
series: Daily Challenge
description: Your goal in this kata is to determine which phrase the girls would say for a flower of a given number of petals
tags: challenge
---
Remember back to your time in the schoolyard when girls would take a flower and tear its petals, saying each of the following phrases each time a petal was torn:

- I love you
- a little
- a lot
- passionately
- madly
- not at all

When the last petal was torn there were cries of excitement, dreams, surging thoughts, and emotions.

Your goal in this kata is to determine which phrase the girls would say for a flower of a given number of petals, where `nb_petals > 0`.

***
_This challenge comes from nbeck on CodeWars. Thank you to [CodeWars](<https://codewars.com/>), who has licensed redistribution of this challenge under the [2-Clause BSD License](<https://opensource.org/licenses/BSD-2-Clause>)!_

_Want to propose a challenge idea for a future post?  Email **yo+challenge@dev.to** with your suggestions!_
React eCommerce Site: Hooks, Firebase, and AirBNB Linter
Tags: hooks, react, firebase, eslint
Published: 2019-12-19 18:18:52

---
title: React eCommerce Site: Hooks, Firebase, and AirBNB Linter
published: true
description: How-to videos on creating a functional React eCommerce site
tags: hooks, react, firebase, eslint
---

I posted a simple text tutorial a while ago on how to create an eCommerce site using React.  The feedback was great and I had a lot of people asking me to do a video showing how to integrate hooks and detail how to keep the Firebase functions organized.  I have started a video series going through how to build a simple eCommerce site that you can follow along with:

Video playlist:
https://www.youtube.com/playlist?list=PLZW2FMU7HD1HbKrMIYzsPIbjzpYlvSTm3

GitHub Repo:
https://github.com/andersjr1984/the-green-owl

Please let me know if the videos are helpful.  I recorded them on my ultrawide monitor, thinking that they would allow people to see both the code screen and the site's render.  All that did, though, was make the code look a little grainy.  I may have to go back and redo everything on a smaller resolution display.

If you watch a video, thank you!  Please let me know what kind of feedback you may have!
OpenMage Release 19.4.0
Tags: openmage, magento, php, ecommerce
Published: 2019-12-19 18:07:50

---
title: OpenMage Release 19.4.0
published: true
description: To avoid confusion with past and future Magento Releases, we are starting with the Version 19.4.0. On the one side this reflects that we include everything from Magento 1.9.4.3
tags: OpenMage, Magento, php, ecommerce
cover_image: https://thepracticaldev.s3.amazonaws.com/i/lgz0bvqp12t90j3ygtci.png
---


We are happy to announce the first independent Release of OpenMage.
To avoid confusion with past and future Magento Releases, we are starting with the Version 19.4.0
On the one side this reflects that we include everything from Magento 1.9.4.3
On the other side, it reflects our intend, to base the Major Version on the current Year.

This Release does not yet contain all changes needed to properly support PHP 7.4 as they are still in the Review, but they should be ready with the next release.

The Version 19 will be an LTS Version with indefinite Lifetime, but at least 5 Years.
It will ensure a maximum on backwards compatibility to Magento 1.



The next LTS version will be released in the beginning of 2023 and be version 23 and have again 5 years of lifetime. Besides this, we will have a yearly major release with around 2 years of lifetime for the Users, who want to try out new Features earlier.

{% github OpenMage/magento-lts no-readme %}
Svelte and CodeSandbox
Tags: svelte, codesandbox, javascript, gamedev
Published: 2019-12-19 21:50:36

---
title: Svelte and CodeSandbox
published: true
date: 2019-12-19 17:34:01 UTC
tags: svelte, codesandbox, javascript, gamedev
canonical_url: https://triptych.writeas.com/svelte-and-codesandbox?pk_campaign=rss-feed
---

# Svelte and CodeSandbox

Lately I have been learning more about [Svelte](https://svelte.dev/) by using [CodeSandbox](https://codesandbox.io/). I use a wide range of web tools like [Repl.it](https://repl.it/) (which is super cool too!) but CodeSandbox has Svelte support right out of the “box” and it lets me push to Netlify as well as create Github repos right away.

I'm testing out whether it's easy or not to share things I create on CodeSandbox via these posts.

Right now I'm working on a simple game tool that lets you create a fun little adventure game. You can see it here:

{% codesandbox quirky-firefly-sfov2 %}

<iframe src="https://codesandbox.io/embed/quirky-firefly-sfov2?fontsize=14&amp;hidenavigation=1&amp;theme=dark" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="quirky-firefly-sfov2"></iframe>

Or you can click this link below to play with the code.

[![Edit quirky-firefly-sfov2](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/quirky-firefly-sfov2?fontsize=14&hidenavigation=1&theme=dark)

Hopefully this will work out, and I can share more fun coding stuff here!

> Written with [StackEdit](https://stackedit.io/).
Indexing Items in Aurelia's Repeat
Tags: aurelia, foreach, repeat, index
Published: 2019-12-19 17:22:07

---
title: Indexing Items in Aurelia's Repeat
published: true
description: Quick Tip in Aurelia Repeat
tags: aurelia, foreach, repeat, index
---

Just a neat thing I learned today:

I am working on writing Selenium tests for an application written in Aurelia, and needed to access the index of items that are dynamically generated in a repeat. 

The fix was simple. If you have the following: 
```javascript
<li repeat.for="price of prices"></li>
```
and in my case needed a unique id, you could do this:

```javascript
<li id="${$index}" repeat.for="price of prices"></li>
```

Just thought that I would share!