teleren/devto huggingface dataset:
Vue.js cheat sheet: Rendering data into HTML
Tags: vue, javascript, html, cheatsheet
Published: 2021-05-07 20:14:44

Are you just starting out with Vue.js? Or has it been long since you’ve worked with Vue? This cheat sheet lists the nine most common tasks and solutions when outputting data to HTML.

In all these samples, the first part shows the syntax, and the second part shows the usage with real data.

# Outputting data into HTML

The first test of your app or rendering data between HTML elements:

```js
{{ variable }}
↓
{{ metadata.subtitle.value }}
```

# Adding the standard class attribute

After testing the app, you want to make it look nice with styles:

```js
<... class="classname">
↓
<div class="sidebar__inner">
```

# Outputting data into HTML attributes

When adding links or rendering images with alt tags, this is how you can fill the elements’ attributes:

```js
< ... :name="variable">
↓
<a :href="`https://twitter.com/${author.twitter.value}`">
```

# Outputting HTML

In certain cases, like when consuming rich texts from a headless CMS, you need to render already formatted HTML:

```js
< ... v-html="variable"></...>
↓
<div v-html="article.teaser"></div>
```

# Iterating over data sets

Iterating is useful for creating lists of items, like index pages of blogs or product catalogs:

```js
< ... v-for="item in collectionVariable" :key="item.uniqueKey">
↓
<article v-for="article in articles" :key="article.id" ... >
```

# Iterating over data sets with index

The same use case as before, but this way, you can access an index of each item:

```js
< ... v-for="(item, index) in collectionVariable" :key="item.id">
↓
<article v-for="(article, index) in articles" :key="article.id" ... >
```

# Rendering conditional markup

Conditions allow you to hide or display specific parts of markup based on data:

```js
<... v-if="variable !== null">
↓
<div v-if="data.length > 0"> ... </div>
```

# Rendering conditional markup including else branch

They can also be used to display preloaders in case of async data fetching to let your visitors know that something is happening:

```js
<... v-if="variable !== null"> ...
<... v-else>
↓
<div v-if="data.length > 0"> ... </div>
<div v-else>Loading...</div>
```

# Passing data to child components

When you start using components, this is how you can provide them with data from the parent:

```js
<component :componentVariable="variable">
↓
<links :author="author">
```

You can also download this cheat sheet in [printable form](https://ondrabus.com/react-vue-angular-cheatsheet) and check out its [alternatives for React and Angular](https://ondrabus.com/react-vue-angular-cheatsheet).
Join Us To Discuss Features of GitHub and Open Source
Tags: devbugsmash, opensource, forem, contributorswanted
Published: 2021-05-07 19:59:25

## Twitch 👾
Are you participating in the [DEV Community Bug Smash](https://dev.to/devteam/join-us-for-the-first-dev-community-bug-smash-3plm)? Are you interested in contributing to other open source projects? Does GitHub confuse you?

Nick Taylor and I will be on the [Practical DEV Twitch](https://www.twitch.tv/thepracticaldev) stream Wednesday, May 12th 1pm ET(5pm UTC) to talk about GitHub and open source. 

We will discuss features you might not know exist, best practices, contributing to a project, and more.

If you have questions about open source or GitHub come hang out with us and ask ALL your questions live. 

## Bug Smash 🐛
If you are interested in participating in the Bug Smash event we still have several bugs ready for you to smash! 

You can check out the full list of bugs in our repo labeled [`bug smash` here](https://github.com/forem/forem/labels/bug%20smash).

Accessibility and/or Frontend:
{% github https://github.com/forem/forem/issues/13505 %}
{% github  https://github.com/forem/forem/issues/13195 %}


Podcast:
{% github  https://github.com/forem/forem/issues/13667 %}
{% github  https://github.com/forem/forem/issues/8757 %}

Miscellaneous:
{% github  https://github.com/forem/forem/issues/13194 %}
{% github  https://github.com/forem/forem/issues/6586 %}
{% github  https://github.com/forem/forem/issues/6417 %}
HEY, I need help... 
Tags: firstpost, help, html, css
Published: 2021-05-07 19:58:52

**MY CSS SUCKS** _But your gonna help right?_ as u see my chat application [just-talk](https://www.just-talk.ml) or [just-chat](https://Just-Chat.timothyrowell.repl.co) SUCK's someone help I desperate and new to code! _u in?_ thanks.
What was your win this week?
Tags: discuss, weeklyretro
Published: 2021-05-07 19:24:59

---
title: What was your win this week?
published: true
description: Got to all your meetings on time? Started a new project? Fixed a tricky bug?
tags: discuss, weeklyretro
cover_image: https://cl.ly/188e843c2985/download/Image%202019-02-15%20at%202.36.37%20PM.png
---

Hey there!


**Looking back on your week — what was something you're proud of?**

All wins count — big or small 🎉

Examples of 'wins' include:

- Starting a new project
- Fixing a tricky bug
- Starting a new book ... or whatever else might spark joy ❤️ 

---

Happy Friday!

![Pokemon party](https://media.giphy.com/media/EktbegF3J8QIo/giphy.gif)
Twitter, Instagram, or ...?
Tags: discuss, watercooler, devrel, career
Published: 2021-05-07 19:08:19

Photo by <a href="https://unsplash.com/@prateekkatyal?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Prateek Katyal</a> on <a href="https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
  
As I was reading @technoglot's [recap of one of the sessions of the last Hashnode bootcamp](https://dev.to/technoglot/boost-your-online-presence-with-a-strong-personal-brand-4j8e) I started wondering, What is the best social platform for software engineers to engage with each other?

Which is the platform where developers, designers, and everyone in tech have the floor to share their projects and views on specific topics? (Besides dev.to of course)

I personally use Instagram on a daily basis, and to be honest, I don't think it is ideal for sharing projects or having a discussion. It's more suitable to share short informative posts. Twitter is where I see most developers tweeting their hearts away, but I find its UI too cluttered and that makes it difficult to follow a thread.

What are your views on the different social media out there for developers? Which ones do you personally use and enjoy?

And drop your handles, let's connect!✌
An accessible SVG hamburger toggle
Tags: javascript, a11y, webdev
Published: 2021-05-07 19:08:15

We've all been there - searching for the codepen of a navigation hamburger menu, but they never touch the spot - too much code, not accessible, messy... spending precious minutes or even *hours* looking for the right fit.

Pain, a huge pain. 

Finally, I've had enough! I've created an accessible SVG based navigation hamburger toggle with a fancy animation that can be dropped into your navbar with (relative) ease. 

I've always thought using three spans for each bar felt *wrong*, but I've never had the time to do anything about it... until now. 

The link to the codepen is below - feel free to fork, change, and suggest improvements! 

https://codepen.io/Joe45x/pen/WNpbzMR

Note: I'm no A11Y buff, so if the A11Y can be improved, please do share your knowledge!
Link  your sub-domain to AWS API Gateway
Tags: aws, dns, api, lamda
Published: 2021-05-07 18:47:59

Let's hook up the name **myapp.nanosoft.co.za** to an AWS API Gateway

### Create Certificate for Domain
* Go to the Certificate Manager console
* Request a certificate
* Select "Request a public certificate"
* Add one or more domain names, in my case I add **myapp.nanosoft.co.za**
* Choose DNS validation
* You'll be given a CNAME entry to which you'll need to register at your DNS Registrar e.g:
``` 
HOST: _xxxxxxxxxxxxxxxxxxxxx.myapp.nanosoft.co.za 
TYPE: CNAME
VALUE: _xxxxxxxxxxxxxxxx.xxxxxxxxx.acm-validations.aws.
```
This is necessary to validate that you own the subdomain
* Test the DNS Validation registration with 
```
$> dig +short _xxxxxxxxxxxxxxxxxxxxx.myapp.nanosoft.co.za
```
you should get a response of 
```
_xxxxxxxxxxxxxxxx.xxxxxxxxx.acm-validations.aws.
```
* Once AWS has found this validation token, you'll notice that the certificate manager will update the status of the certificate from "Pending" to "Issued". Next, let's create an API Custom Domain record

### Create a custom Domain
* Go to the API Gateway console
* Go to Custom domain names and create a domain name
    1. Choose TLS 1.2
    1. Regional Endpoint
    1. Choose the newly created Certificate for **myapp.nanosoft.co.za**
    1. Click "Create Domain Name"

### Link the Domain Name to Rest API
* Go to the API Gateway console
* Go to Custom domain names
* Select **myapp.nanosoft.co.za**
* Configure the API mapping by choosing an API and Stage,  Path is optional
* Save mapping

### Link the Domain Name to Rest API
* Go to the Route 53 console
* Create a Hosted Zone, In my case it would be **nanosoft.co.za**
* Create an A Record for a subdomain by choosing Simple Routing 
* add the subdomain **myapp** to the existing nanosoft.co.za domain
* Choose "A record"
* For Value/Route to, choose "Alias to API Gateway API"
* Choose the region where the api exists, in my case **af-south-1**
* Choose the matching API gateway, e.g. **d-xxxxxx.execute-api.af-south-1.amazonaws.com**
* Click "Define simple record"
* Now that you have this A Record, we need a CNAME in our DNS to link the subdomain. Do so by adding a CNAME record at your DNS Registrar
```
Host: myapp, //or myapp.nanosoft.co.za depending on your DNS Registrar 
Type: CNAME, 
Value: d-xxxxxx.execute-api.af-south-1.amazonaws.com
```
* Test the dns propagation with <a href="https://dnschecker.org/#CNAME/myapp.nanosoft.co.za" target="_blank">https://dnschecker.org/#CNAME/myapp.nanosoft.co.za</a>
Coding-Games: A different kind of challenge
Tags: challenge, showdev, javascript
Published: 2021-05-07 18:41:56

I remember being captivated by code-based games like [elevator saga](https://play.elevatorsaga.com/) as a tool to improve and learn.

However, the missing "hackability" always bothered me, as you can only progress so far and then things feel a little stale. While there are impressive other mentions, I decided to whip up a little gamified challenge myself. 

## [ResourceMeJS](https://neoan.us/game)

This pure JavaScript/CSS game is approachable, hackable and open-source and I would love to get your opinion on it.

### The principle

Well, it's pretty straight forward: you have to develop an algorithm that performs well under changing circumstances. To do so, you have a little online editor: 
![Editor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oc253l4ki332r4swydz4.png)
And can execute your code with the click of a button. The general goal is to mine as many resources as possible per minute before the dying sun depletes your shield. However, in order to give beginners a chance, the sun's radiation doesn't kick in before you manage to mine resources efficiently.

In order to enhance your efficiency, you can build modules with your station and attach them to your ships, build additional ships and/or cool down the shields with water.

If you are interested in improving the game, don't shy away from reaching out:

{% github sroehrl/theGame %}
Integrate Newrelic in Laravel Vapor
Tags: laravel, vapor, newrelic, serverless
Published: 2021-05-07 18:10:14

Using [docker-based deployments](https://blog.laravel.com/vapor-docker-based-deployments) we can configure newrelic from the same file {env} .dockerfile, here we must install and set the newrelic variables, we must also create an entrypoint.sh file in which we will indicate the image the start of the processes to be carried out:

{env}.dockerfile
```docker
FROM laravelphp/vapor:php74

# Download and install newrelic: https://download.newrelic.com/php_agent/release/
RUN \
    curl -L "https://download.newrelic.com/php_agent/release/newrelic-php5-9.16.0.295-linux-musl.tar.gz" | tar -C /tmp -zx && \
    export NR_INSTALL_USE_CP_NOT_LN=1 && \
    export NR_INSTALL_SILENT=1 && \
    /tmp/newrelic-php5-*/newrelic-install install

# add global var to php.ini file
RUN \
    echo $' \n\
    extension = "newrelic.so" \n\
    newrelic.logfile = "/dev/null" \n\
    newrelic.loglevel = "error" \n\
    newrelic.appname = "REPLACE_APP_NAME" \n\ 
    newrelic.license = "REPLACE_NEWRELIC_LICENCE"' >> /usr/local/etc/php/php.ini

# Remove newrelic.ini file
RUN rm /usr/local/etc/php/conf.d/newrelic.ini

RUN mkdir -p /usr/local/etc/newrelic && \
  echo "loglevel=error" > /usr/local/etc/newrelic/newrelic.cfg && \
  echo "logfile=/dev/null" >> /usr/local/etc/newrelic/newrelic.cfg

COPY . /var/task

USER root
RUN chmod +x /var/task/entrypoint.sh
ENTRYPOINT ["/var/task/entrypoint.sh"]
```

The entrypoint.sh file is necessary to start the execution of PHP and indicate the type of process that will be carried out with newrelic

```docker
#! /bin/sh

#start Newrelic daemon
newrelic-daemon -c /usr/local/etc/newrelic/newrelic.cfg

#start PHP
/opt/bootstrap

newrelic_background_job(false);
```

The newrelic.ini file was removed because it generates the following run-time error:
![newrelic error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9hdmb5759l8tvb6f09kc.png)

Therefore, the setting of the variables to the php.ini file is carried out, which loads the default options of newrelic.
MFA With WebAuthn for FIDO Device Biometrics Now Available
Tags: security, mfa
Published: 2021-05-07 18:01:37

In the last few years, the [FIDO Alliance](https://fidoalliance.org/) has been working relentlessly towards the vision of helping users authenticate with maximum security and minimum friction. The resulting [WebAuthn standard](https://www.w3.org/TR/webauthn-1/) provides the foundation for that to happen. Now it is up to the industry to make that technology available to end users. 

WebAuthn is the only standard-based authentication method that makes phishing impossible, as it binds the public/private key to a specific web domain. You cannot mistakenly authenticate into a phishing website.

A few weeks ago, [we announced](https://auth0.com/blog/fido-security-key-support-comes-to-auth0/) the support for [FIDO Security Keys for MFA](https://auth0.com/docs/mfa/fido-authentication-with-webauthn) using WebAuthn. Security Keys are a great way to secure access to your account, but their adoption is mostly limited to tech-savvy users or corporate environments with relatively high-security requirements.

We are now announcing support for [**FIDO Device Biometrics for MFA using WebAuthn**](https://auth0.com/docs/mfa/fido-authentication-with-webauthn). This makes the security and convenience of WebAuthn-powered flows available to anybody who has a device and browser who can support the biometric challenge, not just those who have security keys. Now all users can reap the benefits of this technology, regardless of how tech-savvy they are. 

Enabling users to authenticate using their device biometrics has two benefits: it **greatly reduces friction** during the authentication challenge, which impacts user **retention and revenue**, and **it increases security** since the flow is not fishable by bad actors. 

[Read more...](https://auth0.com/blog/mfa-with-webauthn-for-fido-device-biometrics-now-available/?utm_source=content_synd&utm_medium=sc&utm_campaign=webauthn)
How to process a heavy request in WordPress
Tags: wordpress, ajax, webdev, php
Published: 2021-05-07 17:52:35

Requests in WordPress and PHP have a limited time to run. I recently had a problem with processing a huge file. What I wanted to do, didn't fit in a single request so I'd done a little research. 
At first, I thought about the cronjobs and it was the right solution but you have to just tweak it a little. 

<h2>The Problem</h2>
I had a CPT and a CSV file, containing the information about every post. Every file had about 1000 rows and 40 columns so it was very big for a single request. 
Noticing that one column was an array of remote images that had to be uploaded to my website. When I tested it, only 3 posts were imported and this was not the result I expected.
 
<h2>Solution 1: Background Processing</h2>
{% github deliciousbrains/wp-background-processing no-readme %}
This plugin can run your tasks in the background. The full tutorial for using its classes is on their GitHub page. 

What this plugin does is simply saving all the data you need for your requests in the database. Every row contains the information for a single request and then runs a cronjob every 5 minutes that grabs the latest row from the database and runs the request. Sound very simple but yet powerful and with a lot of features. 


<h2>Solution 2: Batch Processing</h2>
{% github gdarko/wp-batch-processing no-readme %}
This plugin helps you to do your large requests too. It saves the data in the database and has a user interface! You can go to its page and run the batch and see how many of the requests are done.

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

But the actual difference is that this plugin does not use cronjob. It just runs an ajax call which in the last row of the database runs. Then at that ajax call, another ajax call runs, and the information about the success or the failure of the previous call shows in the interface. One other thing to mention, you can't leave the page or the process will be paused. 

<h2>My Code </h2>
So enough theoretical and let's see some code. I went with the batch processing plugin. 

{% gist https://gist.github.com/amirition/3fc2576af01ab8c8c2222634037e9dac file=games-import-batch.php %}

As the tutorial on the GitHub page says, you should create an instance of the class but my point was to show you how I handled my file.

**Further Problem**: One of the major problems I've faced was that my file was so large that even the batch processor couldn't handle the first step of the work; which would be saving the items in the database. So if you're facing the same problem, what did you do to overcome this?
1 Month Leetcode Challenge 500 rs on.
Published: 2021-05-07 17:48:01

Hi, Guys let me inform you about the challenge on leetcode. 
I give 500 rs to my friends and said I am taking a challenge to  solve 200 leetcode problem within 30 days. 
If in case I am not able to solve 200 question the whole money is yours.

Lets, see I can get my money back or not.
Limit the Number of Connections to an Endpoint In Go
Tags: go
Published: 2021-05-07 17:42:06

---
title: Limit the Number of Connections to an Endpoint In Go
published: true
description: ConnectionsPerHostname in your Go program
tags: Go
---

I found myself implementing this pattern twice in recent times. As a result, I thought I'd share it.

First, some background. I wrote a web crawler for reasons. The crawler would find links in a webpage and create a go routine to follow the link and download what was at that endpoint, and recurse. Quickly, this caused the system running the crawler to run out of open file handles. Goroutines are so powerful that we had the opposite problem that we have in a serial downloader. Rather than going to slowly because of a one at a time situation, we did so much at once that we ran out of free file handles. I just wrote another crawler type program which downloads links discovered via a JSON API and needed the same solution.

Browsers are examples of good behavior to the point that they don't open very many connections to remote hosts.  There is a great stack overflow post https://stackoverflow.com/questions/985431/max-parallel-http-connections-in-a-browser which describes how web browsers limit connections. It is very easy to make my Go programs behave in a similar way.

```go

func main() {
	...
	for {
		go httpSave(currentURL, currentFileName)
	}
	...
}

// httpSave saves u to file named name.
func httpSave(u, name string) {
	resp, err := http.Get(u)
	if err != nil {
		// Queue errors?
		log.Print(err)
		return
	}
	f, err := os.OpenFile(name, os.O_RDWR|os.O_CREATE, 0666)
	if err != nil {
		// Queue errors?
		log.Print(err)
	}
	defer f.Close()
	n, err := io.Copy(f, resp.Body)
	log.Printf("wrote %d bytes to %s", n, name)
}
```

The above httpSave function is real, and the main is partially omitted code for how it might be used.

There are many ways one might limit the number of connections, but a simple to understand way IMO, rather than using locks and a counter is to use a channel of length N where N is the number of concurrent things. I'm still going to use a lock, but that is for synchronizing access to the map which maps the host we are limiting to the channel.

I'm using globals, but for a larger app I would add the map and lock to the struct that holds data around my app state for this operation.

```go
var domainLimit map[string]chan struct{}
var domainListMutex sync.Mutex

func main() {
	domainLimit = make(map[string]chan struct{})
	...
}


func getDomainToken(u string) func() {
	u2, err := url.Parse(u)
	if err != nil {
		log.Print(err)
		return func() {}
	}

	domainListMutex.Lock()
	defer domainListMutex.Unlock()
	f, ok := domainLimit[u2.Host]
	if !ok {
		f = make(chan struct{}, 6) // Six connections per host.
		domainLimit[u2.Host] = f
	}
	f <- struct{}{}
	return func() {
		<-f
	}
}
```

To use this, I add 1 line to the top of the httpSave function.

```go
func httpSave(u, name string) {
	defer getDomainToken(u)()
	...
```

If I had other functions doing http operations I'd need to add that same one line to the top of them. In my case, I don't.

I like it because it is simple and it works.
Reflecting on handling workloads
Tags: womenintech, devjournal
Published: 2021-05-07 17:41:10

As we continue working on the Shiftwork App, the workloads are becoming very heavy. Every day there are new bugs that we discover, PRs that are up to review, and with all of that, you need to continue working on your assigned tasks which a lot of times include the research before the implementation. I am learning a lot about handling my workload.

I enjoy working in a fast-paced environment. It gives me a feeling of drive and empowers me to own the project. With that comes the challenge of managing your time and learning how to prioritize your work to complete all the tasks and make sure you deliver quality results.

Our team has a great structure in place. We have set ways of communication, daily stand-ups, and weekly meetings. This helps a lot to stay focused and be aware of the scope of the project.

When it comes to independent work, I've realized I need to do more to stay productive. I schedule the tasks I will be working on the night before. I move uncompleted tasks to the next day. I plan the most complex task to be done at my most productive hours. Yes, knowing your most productive hours can be a lifesaver. I remember to reach out to my team if I am blocked on anything with the project. I see the importance of daily stand-ups and keeping close communication with my team.

And most importantly, I learn to remember to take breaks and spend time away from the computer. My way to recharge is to get out into nature. I take regular walks at East River Park in my local neighborhood. Planning, prioritizing, and not forgetting about rest are the ways to stay healthy and be a productive engineer. 



Photo by <a href="https://unsplash.com/@martinirc?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">José Martín Ramírez Carrasco</a> on <a href="https://unsplash.com/s/photos/busy?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>