teleren/devto huggingface dataset:
Tagged templates literal in js.
Tags: javascript, tutorial, react
Published: 2021-03-28 11:09:01

## What is template literal? :no_mouth:

Template literals allow us to concatenate or embed variables inside a string. It was introduced in ES6.

Template literals are enclosed by the backtick.

Example:
```javascript
   const age = 12;
   const title =`My age is ${age} years.`
```

## What is Tagged templates literal? :grimacing:

Here **tag** refers to a **function** which performs parsing of the given template literal.

[styled components](https://styled-components.com/) is a famous library that uses the tagged template literal.

Example:
```javascript
   const Title = styled.h1`
     font-size: 1.5em;
     text-align: center;
     color: palevioletred;
`;
```

## How it works? :hushed:

### Step 1) Create a function.
```javascript
const appendStyle = (array,val1,val2) => {
   //do something and return a value.
   return "testing";
}
```

can be also written as

```javascript
const appendStyle = (array,...values) => {
   //do something and return a value.
   return "testing";
}
```

In the **array** we will get the **split strings**.
means if the template literal is `My name is ${name} and my age is ${age}`

then, the **array** will be

`array = ['My name is','and my age is']`

and in the **values** we will get all the arguments.

### Step2) attach the function in front of the template literal, without the () 
 
```javascript
  const name = 'gilbish';
  const age = '23';
  const text = appendStyle`My name is ${name} and my age is ${age}`;
 console.log(text);

// output: testing
```

### Step3) finish the Function.

In the appendStyle function , we gonna make the color of each arguments to blue or whatever color you prefer. :smile:

```javascript
const appendStyle = (array,...values) => {
    let color = "blue"
    let text = '';
    array.map((item,index) => text += `${item} <span style="color:${color}">${values[index] || ''}</span> `);
    return text;
}
```

our tagged template literal **appendStyle** is ready to use  :confetti_ball:


Example:
```javascript
  const name = 'gilbish';
  const age = '23';
  const text = appendStyle`My name is ${name} and my age is ${age}`;

  document.body.innerHTML = text;
```

Output:

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




Thanks for reading the post :pray:
I recreated the Twitter 'Who to follow' card
Tags: html, css, javascript, 100daysofcode
Published: 2021-03-28 10:41:28

I had been wanting to learn more about HTML, CSS, and JavaScript for a while, so I figured I should do a series of mini-projects that could hopefully help me in familiarizing myself with these three.

I recreated Twitter's 'Who to follow' card using HTML and CSS (and some JavaScript), and I used theming for the first time!

![Light theme snippet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1el5cxbic78q8hed2ye4.PNG)

![Dark theme snippet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h1ssim1hb4i4ovl28eoy.PNG)

{% codepen https://codepen.io/rngueco/pen/zYNBKeq %}

Would love to hear your thoughts on this. Any improvement on the code I could implement?

---

If you found this cool or useful, consider [buying me a coffee](https://ko-fi.com/yanski_).
Trying Vue without NPM
Tags: vue, beginners
Published: 2021-03-28 10:37:17

You can start hacking away with [Vue](https://vuejs.org/) (and [Axios](https://github.com/axios/axios)) without NPM. One simple html-file is all you need. In this post I will show you how with an example based on the official Vue.js guides.

---

I wanted to create a simple frontend to show some data from a REST API. I wanted to use a modern framework but I didn't wanted to bother with Node and NPM. Luckily with Vue.js thats really easy to do!

Vue.js can be easily [included using a script-tag](https://vuejs.org/v2/guide/installation.html#Direct-lt-script-gt-Include) and the [same goes for Axios](https://github.com/axios/axios#installing).

Below you find a working example of the official Vue.js [Using Axios to Consume APIs](https://vuejs.org/v2/cookbook/using-axios-to-consume-apis.html) example in copy-paste-able html:

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello Vue</title>
    <!-- development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <h1>Bitcoin Price Index</h1>
    <div v-for="currency in info" class="currency">
        {{ currency.description }}:
        <span v-html="currency.symbol"></span>{{ currency.rate_float | currencydecimal }}
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            info: null
        },
        mounted () {
            axios.get('https://api.coindesk.com/v1/bpi/currentprice.json')
                .then(response => this.info = response.data.bpi);
        }
    });
</script>
</body>
</html>
```
The same is also possible with (but not limited to):
- [React](https://reactjs.org/docs/add-react-to-a-website.html)
- Old school [AngularJS](https://docs.angularjs.org/misc/downloading)
LOVEFIELD - My favorite relational database solution for electronJS Projects (Part 1)
Tags: javascript, database
Published: 2021-03-28 10:24:17

Hello devs....

Few months ago I got a customer who wanted me to develop management system for his local business. He wanted it to be a desktop App with local data storage. I chose to use my favorite electronJS as a framework for this Desktop app but I faced the challenge on how I would implement database on it. 

I tried to use mysql drivers on nodeJS but that option didn't provide required portability(It needed database server). So I began a search and I came across this library called **LOVEFIELD** Made and supported by Google.

**Lovefield** is a relational database that uses indexedDB on browsers to store data for websites. Since electron framework just provides a chromium-like browser for your app to run, lovefield becomes a cheap and portable solution to implement relational database support for your app.

With a combination of electronJS, **_(a framework that allows devs to create cross platform desktop Apps with javascript, css & html5)_** and lovefield developers can create very useful Desktop apps. Now let's see  how to configure your electronJS to use lovefield.


**CONFIGURING LOVEFIELD IN ELECTRONJS PROJECT**
Here we go.. Start by going to the root of your electronJS project and install lovefield using npm's ```npm install --save lovefield```. After it has been downloaded the next part is loading it to your project

**_Loading lovefield_**
There is a trick here, Lovefield was primarily made for browsers and not the nodeJS environment. But electronJS uses nodeJS and it creates browser environment for your App. So when you require it in your project's javascript file like any other module it may not work as intended _(For me it didn't work completely)_. 

So to go around this you have to use the normal browser-like way in your `index.html` file (or any other `html` file where lovefield will be used), I mean you should use the `<script>` tag to load `lovefield`. You can load it like this 
```
<script src="node_modules/lovefield/dist/lovefield.min.js"></script>
```

After loading it you can use the `lf` namespace to access all lovefield APIs and Classes.


Thanks for reading to this far, this is part one of my article on `lovefield`. The next part will focus more on how to use `lovefield`, most common errors and what precautions you should always take when using `lovefield` as your relational database.

Happy coding!
API Performance Monitoring for product managers
Tags: apimonitoring, apidevelopment, softwaredevelopment, productmanagers
Published: 2021-03-28 09:47:36

APIs have become very useful in most SaaS products. There is still a gap, however, when it comes to understanding how they work; particularly for the purpose of monitoring them. Some developers do not realize that APIs fail. And when they fail, users usually blame the application’s poor performance on the product owners rather than the third-party APIs used in the app. The developers also waste a lot of time debugging their app trying to “solve” what was just but a network issue. 

This post was first published here: https://sweetcode.io/api-performance-monitoring-an-introduction/
Realt.
Tags: awesomitylab, codeofafrica, taskforce, teamwork
Published: 2021-03-28 09:42:58

That's a month down and I couldn't be prouder for where we are now compared to when we started.

This last week we dived into design thinking and how we can apply it into our daily work. The concept design thinking which is an approach to problem-solving where the client's needs are considered first is very interesting because it can help me put more effort in what the client wants and not what I think they want. It was also interesting to find out that we sometimes use design thinking without being aware of it. But knowing this is a plus because it can help me avoid wasted time and resources and increase efficiency.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ub0lpy7fnl74m269c8w9.png)
What made this last week the busiest and most challenging so far though was building our own full stack applications from scratch in four days and demoing them on the fifth. We had to figure out how we were going to manage the workflow, build the GUI from the mock-ups and then the server all in just those four days. I was in a team of three and we built Realt, a real estate mobile application that can facilitate people to buy houses without stressing over price negotiation and remove that uncertainty. I learned a lot about working in a team and working under pressure from this and I like to think aside from the continuous app crashes that occurred in the demo that we did a decent job given the circumstances. I also know that that was just a start and I am confident that we will surpass ourselves next time.

Briefly, this last week was not easy but it was worth it and we pulled through. Looking forward to next week where we'll receive feedback on our apps and improve them. It won't be an easy one as well but what is that yields great outcomes?
I've officially started work on RuntDeale!
Tags: java, gamedev, watercooler
Published: 2021-03-28 09:40:47

From [my Twitter post](https://twitter.com/BaenenCalin/status/1376098315075522571).
![Image of my Twitter post.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5jopy2k1i9eyl1ifswip.png)
<br/>
I've just started real development on RuntDeale.
Wish me luck!

\- Bargain-bin Toby Fox. ( ;p )
<a href="https://twitter.com/search?q=%23gamedev">#gamedev</a> <a href="https://twitter.com/search?q=%23undertale">#undertale</a> <a href="https://twitter.com/search?q=%23fangame">#fangame</a> <a href="https://twitter.com/search?q=%23fanart">#fanart</a>
![Eclipse with (RuntDeale) project open.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/abuu8069ys80w95dq2gc.png)
What's the point of a data store?
Tags: vue, vuex, react, redux
Published: 2021-03-28 09:25:25

---
title: What's the point of a data store?
published: true
description: 
tags: vue, vuex, react, redux
//cover_image: https://direct_url_to_image.jpg
---

I'm roughly two years into developing with vue/vuex, having used it across five personal projects and two large scale apps that I have built at work (one mostly solo deving). Initially I found a lot of conventions confusing and struggled to understand why we had to do a lot of things _the vue way_, when it seemed like we could skip out on some things in order to simplify the development process.

I have come to grips with most of the reasons these days, but one thing still frustrates me. What's the point of a data store, really?

I'm talking in particular about the persisted crud classes - "Models" in Laravel - in an orm-like, normalized store structure such as vuex-orm.

I'll use the example of an ecommerce application. You have an admin area that creates, edits and deletes Product models. When creating a new Product, you send some data to the database and then store the response in your data store - in vuex that's likely your Products store module. Then when you go to the edit page for that Product later, you already have the data locally. Nifty.

However, when you're navigating around the admin area and go to a Product that you _didn't_ just create, you need to load that data for the product page. At this point as a developer I see two choices - `a`: fetch the product when the user navigates into the product edit page or `b`: fetch all of the products you expect to need and fill your datastore at page load.

The problem with `b` is that it's _extremely hard_ to know what you're going to need to load, so you're very likely going to just load _everything_, resulting in a massive initial query and a longer ttfb, especially as your application (and database) grows. You also risk holding stale data in your store if something elsewhere (like a purchase going through) modifies your object data.

The problem with `a` is that you're fetching the data when you load up the component _anyway_, so why bother storing it locally?

To further frustrate this, your average store algorithm (redux, vuex) doesn't like you directly editing store state, so when you load up your edit component you almost always have to copy the model out of the store using the unfortunately hacky-looking `JSON.parse(JSON.stringify(object))`.

Am I missing something here? What is the point of a data store?
Where to find charitable dev work?
Published: 2021-03-28 08:58:44

---
title: Where to find charitable dev work?
published: true
description: 
tags: 
---

A few months ago I did something for free for a decent cause. It felt good so I'm looking for more. Unfortunately, I have no idea where to look.

There are charities of course, but they are not for me. I'm turned off by how many on how much people get payed from money that's been given in support of a cause. Especially when those people are essentially overhead costs. Working at a charity would be just another job for me.

Instead I'm looking for situations where software could solve a problem, solving that problem is considered morally good and there is no money available to hire devs as regular. For instance, the last time it was a teaching tool that generates multiplication exercises.

I'm okay with making something that will be used commercially so long as it meets the above criteria, and does not create a competitive advantage for one party, which should basically come down to being reusable and open-source.

Any ideas are greatly appreciated. Even indirect ones like how I could go about finding charitable dev work.
Progressive Web Apps are the Future
Tags: pwa, webdev
Published: 2021-03-28 08:50:51

Alian is a Google Developer Expert in Web Technologies / Angular.  Alian’s talk will introduce what Progressive Web Apps are all about and explain why they are the future for web / mobile development.

{% youtube nHFneTsOdn0 %}

**Further reading:**
☞ [Push Notifications in PWA Using Firebase and React](https://morioh.com/p/db01ec6fd2ef "Push Notifications in PWA Using Firebase and React")

☞ [The Complete Guide to Service Worker and PWA in Angular](https://morioh.com/p/984afc91af1c "The Complete Guide to Service Worker and PWA in Angular")

☞ [Vue PWA: Build A Progressive Web Application With Nuxt.js](https://morioh.com/p/5842c169c80e "Vue PWA: Build A Progressive Web Application With Nuxt.js")
Adding custom styles to matTooltip
Published: 2021-03-28 08:34:16

I recently came across this requirement and after getting stuck to style the matTooltip I finally managed to do it and thought it’s a good idea to share what I learned, here.

It’s very difficult to look at the structure of the Angular Material Tooltip because of it’s behavior when you try to inspect, so let me share the HTML first.

```
<div class="cdk-overlay-container">
	 <div class="cdk-overlay-connected-position-bounding-box" dir="ltr"style="top: 0px; left: 0px; height: 100%; width: 100%;">
	  <div id="cdk-overlay-1" class="cdk-overlay-pane mat-tooltip-panel"style="pointer-events: auto; top: 8px; left: 417.625px;">
	  <mat-tooltip-component aria-hidden="true" class="ng-tns-c34-15 ng-star-inserted" style="zoom: 1;">
		  <div class="mat-tooltip ng-trigger ng-trigger-				state"style="transform-origin: left center; transform: scale(1);">Info about the action</div>
	  </mat-tooltip-component>
	 </div>
	</div>
</div>
```

It’s half the problem solved when you can clearly see the structure of the HTML, next we’ll try to style it. Make sure to put these styles in your custom mixin.scss or styles.scss

```
.cdk-overlay-pane {  
 &.mat-tooltip-panel {  
  .mat-tooltip { 
  color: pink;
  background-color: white;
  border:  1px solid #eeeeee;
  border-radius:  3px;
  font-size:  15px;
  padding:  10px; 
  } 
 } 
}
```

That’s it. Now you know how to style a tooltip.

Thanks!
Updating Node and npm using Node Version Manager
Tags: nvm, npm, node
Published: 2021-03-28 13:27:27

---
title: Updating Node and npm using Node Version Manager
published: true
date: 2021-03-28 08:20:02 UTC
tags: #nvm #npm #node
canonical_url: https://www.preciouschicken.com/blog/posts/update-node-npm-using-nvm/
---

[Node Version Manager](https://github.com/nvm-sh/nvm) is a "POSIX-compliant bash script to manage multiple active node.js versions."  It is a very useful tool for taming Node.js which can throw up some [strange problems](https://stackoverflow.com/q/16151018/6333825) when you install it in the [standard fashion](https://nodejs.org/en/download/).

However I only ever use two commands, which I can never remember off the top of my head, so here they are:

## Update Node.js to latest Long Term Support version

```bash
nvm install --lts
```

## Update npm

```bash
nvm install-latest-npm
```

I only realised this was an option recently thanks to a [post by MuffinMan](https://muffinman.io/blog/nvm-updating-npm/).

## Where am I again?

And to confirm which versions you are using:

```bash
node --version && npm --version
```
XDebug, VScode, ubuntu
Tags: xdebug, vscode, ubuntu
Published: 2021-03-28 07:14:22

For installing the XDebug in ubuntu and use it from VScode follow these steps
### 1.Step one
Run this command 
```
sudo apt install php-xdebug
```
### 2.Step two
Run this command
```
sudo nano /etc/php/7.4/mods-available/xdebug.ini
```
Then go to the end of the file and add these lines
```
[xdebug]
zend_extension=/usr/lib/php/20190902/xdebug.so
xdebug.mode = debug
xdebug.start_with_request = yes
xdebug.client_port = 9000

```
For finding the path of the xdebug (/usr/lib/php/20190902/xdebug.so)
you can run this command 
```
locate xdebug.so
```
### 3.Step three
Open the configuration file of Xdebug by clicking ‘Add Configuration…’ from the menu Run and set the necessary configuration according to the xdebug.ini file.
It will become sth like this
```
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for XDebug",
            "type": "php",
            "request": "launch",
            "port": 9000,
        },
        {
            "name": "Launch currently open script",
            "type": "php",
            "request": "launch",
            "program": "${file}",
            "cwd": "${fileDirname}",
            "port": 9000
        }
    ]
}
```
Done
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0e7cainnteg8bms3qzan.png)
React Native Authentication Using Deeplinking and react-native-inappbrowser-reborn
Tags: reactnative, javascript
Published: 2021-03-28 07:01:01

1) Install and configure library from here
https://www.npmjs.com/package/react-native-inappbrowser-reborn


2)Suppose the universal deeplink url provided is like this:
**https://www.app_name.com/login**


3)Android configuration as per given url:
Update **Manifest.xml**
```
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:screenOrientation="portrait"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
        android:launchMode="singleTask"
        android:windowSoftInputMode="adjustResize"
        android:exported="true">

  <!-- deep linking -->
    <intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="app_name" host="wwww.app_name.com" pathPrefix="/login"/>
    </intent-filter>
      </activity>
```

4)iOS configuration as per given url:
Update **Info.plist**
```
	<key>CFBundleURLTypes</key>
	<array>
		<dict>
			<key>CFBundleURLName</key>
			<string>com.app_name</string>
			<key>CFBundleURLSchemes</key>
			<array>
				<string>app_name</string>
			</array>
		</dict>
	</array>
```

5)TwitchAuth.js
```
export const tryDeepLinking = async () => {
    const loginUrl = 'https://amazonaws.com/dev/app/v1/user/login';
    const redirectUrl = 'app_name'
    const urlInApp = `${loginUrl}?redirect_url=${encodeURIComponent(redirectUrl)}`;
    try {
        if (await InAppBrowser.isAvailable()) {
            const result = await InAppBrowser.openAuth(urlInApp, redirectUrl);
        console.log(result);

            }
        } else {
            alert('Not supported :/');
        }
    } catch (error) {
        console.error(error);
        alert('Something’s wrong with the app :(');
    }
}
```

6) Whenever the url in browser is like this https://www.app_name.com/login screen will be redirected to app with response.

---
Compiling MariaDB from Source - On FreeBSD
Tags: freebsd, mysql, sql, mariadb
Published: 2021-03-28 06:56:35

This is part of a series of articles I'm writing on how to accomplish common tasks in FreeBSD. Every day, I see new tutorials on "How To Do (THING) on Linux in 20 easy steps!" - so here I am, matching each of those articles, but from the perspective of showing the amazing simplicity of FreeBSD instead.

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

# Compiling MariaDB from Source

On many other platforms, they'll start out with a complicated set of steps to create the build environment, setup the compiler and tool chain, then download and extract the source code before even getting to the compilation. This is all 100% automated in the FreeBSD world!

1) Enter the directory for the MariaDB Port
```
cd /usr/ports/databases/mariadb105-server/
```

2) Download, configure, and compile MariaDB (yes, all in one command)
```
make
```

3) Install your now compiled MariaDB binaries
```
make install
```

And just like that, MariaDB is not only compiled, but it is also installed! What about all of the compiler tools required? What about runtime dependencies? All of that is taken care of for us automatically via the FreeBSD Ports collection!

Alternatively, if you want to install MariaDB from pre-built binary packages, that option is also available. Simple replace steps 1-3 with with the following:
```
pkg install -y mariadb105-server
```

But wait, there are actually two more important steps after this... because we need to actually RUN our server, not just compile and install it!

NOTE: For the time being, MariaDB still uses the "mysql-server" service on FreeBSD, as it has yet to be renamed.

4) Enable the MariaDB service to start at boot time
```
service mysql-server enable
```

5) Start the MariaDB service without first rebooting
```
service mysql-server start
```

But wait, what about the utility to create the initial MariaDB database? That too is taken care of for us automatically on first run! Everything is designed from the ground up for easy sysadmin automation.

## Recap
So, let's recap. Step one, draw a couple circle. Step two, let FreeBSD draw the rest of the owl! ;)