teleren/devto huggingface dataset:
Custom validity helpers for Vue.js and Svelte
Tags: vue, svelte, webdev, frontend
Published: 2021-04-22 15:32:15

HTML5 comes with a nifty feature to show custom form validation messages on form submission (see cover image).
This looks different in each browser/OS - but it is a standard HTML5 feature, fully supported in all modern browsers.

This is easy enough to use through javascript: 
```javascript
element.setCustomValidity('That is the wrong name!');
```

But when using a front end framework like Vue.js or Svelte, this means that we first need to get a reference to the DOM element and make sure that the element is mounted before executing above javascript.

Wouldn't it be nice if this could just be set as an attribute directly on each input element?
Something like this:
```html
<input validity="That is the wrong name!" />
```

Here's how you can do just that:

## Vue.js

Run before loading your app, to make this globally available:
```javascript
Vue.directive('validity', function (el, binding) {
  el.setCustomValidity(binding.value?binding.value:'');
})
```

In a Vue component (.vue file):
```html
<template>
  <input type="text"
         v-model="name" 
         v-validity="name!=='joe'?'That is the wrong name!':''" />
</template>         

<script>
  export default {
    data: function () {
      return {
        name: ''
      }
    }
  }
<script>
```


## Svelte

In a "shared.js" file:
```javascript
export function Validity(node, val) {
    if(!!val) node.setCustomValidity(val);
    return {
        update(newVal) {
            node.setCustomValidity(newVal?newVal:'');
        }
    };
}
```

In a ".svelte" component file:
```html
<input type="text"
       bind:value={name}
       use:Validity={name!=='joe'?'That is the wrong name!':''}>

<script>
  import {Validity} from './shared.js';
  let name='';
</script>
```
Props vs State 
Published: 2021-04-22 15:31:20

What's the difference between props and state in React?

Here is a definition of each: 

"props" (short for "properties") is a special keyword in React, and is used for passing down data from one component to another.

"state" is data that changes over the lifetime of a specific instance of a React component.

Let's dive into each.

Props are used to customize Components when it’s being created and give it different arguments.

```
import React from 'react'

function Topic(props) {
     return(
      <div>
        {props.name}
      </div>
    )
   }
```

One of the most important features of props is that they can be passed by a parent component to its child components. This allows us to create a component that can be customized with a new set of props every time we use it.  This is similar to passing arguments to a function.

```
import React from 'react'
function Welcome() {
     return(
      <div>
        <p> Welcome to React, today you will learn: </p>
        <Topic name="Props"/>
        <Topic name="State"/>
      </div>
    )
   }
```

Props are passed to the component and are fixed throughout its lifecycle. But there are cases when we want to use data that we know is going to change overtime and store that data. In this case we use something called state.  

To use state we must import a React Hook called useState

```
import React, { useState } from "react"
```

Figuring out where you need state is an important task as well because we only want to set state if we really need to, and which other child components are going to be using this state.  
Some examples of when to use state is when something on your app updates or changes :

- Counter
- Toggle On/Off 
- Like button feature
- User inputs (forms)
- etc..

 State allows React components to dynamically change output over time in response to certain events.  Events such as onClick, onSubmit, and onChange are a few key examples of the events that can alter the state. 

```
import React, { useState } from "react"
function addLikes() {
    const [likes, setLikes] = useState(0)
}

```

Here we set the initial state of the likes to be set at 0, and depending on where we implement this state will alter the count of likes which then updates state.  


The difference between props and state is that props are passed down from other components to there child components and props are updated in the child component, and props that are just going to display some text like a header or a description there value wont be changed because they are just going to display some text. 

State lives inside a component and is handled inside of that component while props are handled outside of the component.
You can pass down your state as a prop and use it in a child component for something like a like button that will increase likes.  After the like button is clicked react sends that information back up to the component which is handling the state and it gets updated there.


Resources: 

https://www.youtube.com/watch?v=IYvD9oBCuJI - Web Dev Simplified

https://reactjs.org/docs/components-and-props.html - React Docs
How to Deploy Angular on Apache Remote Server Example – Use Vultr Hosting
Tags: angular, deployment, vultr, apache
Published: 2021-04-22 15:20:37

https://grokonez.com/frontend/angular/angular-deployment/how-to-deploy-angular-on-apache-remote-server-example-use-vultr-hosting

How to Deploy Angular on Apache Remote Server Example – Use Vultr Hosting

In the tutorial, We show how to deploy Angular Client with Production mode on Apache Remote Server with Vultr Hosting.

Related post:
- <a href="https://grokonez.com/frontend/angular-6-dynamic-navigation-bar-add-remove-route-dynamically">Angular 6 dynamic Navigation Bar – add/remove Route dynamically</a>

<!--more-->
<h2>Technologies</h2>
- Vultr Hosting
- Apache Server
- Angular
<h2>Goal</h2>
<h3>Video Guide</h3>
<iframe width="853" height="480" src="https://www.youtube.com/embed/PfKiBcfoh34?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<h3>Objectives</h3>
Deploy Angular Client on Apache remote server:
- Normal deployment -&gt;

<img class="alignnone size-full wp-image-15601" src="https://grokonez.com/wp-content/uploads/2018/11/deploy-angular-client-on-apache-server-with-vultr-hosting-result-2.png" alt="deploy-angular-client-on-apache-server-with-vultr-hosting-result-2" width="424" height="259" />

- Sub-folder deployment -&gt;

<img class="alignnone size-full wp-image-15602" src="https://grokonez.com/wp-content/uploads/2018/11/deploy-angular-client-on-apache-server-with-vultr-hosting-sub-folder-deploy.png" alt="deploy-angular-client-on-apache-server-with-vultr-hosting-sub-folder-deploy" width="509" height="262" />

<strong>How to achieve it</strong>?

Start with production build <code>ng build --prod</code>.
-&gt; Then copy output folder (<code>dist/</code> by default) to Apache server.

<img class="alignnone size-full wp-image-15603" src="https://grokonez.com/wp-content/uploads/2018/11/deploy-angular-client-on-apache-server-with-vultr-hosting-copy-production-build-from-local-to-remote.png" alt="deploy-angular-client-on-apache-server-with-vultr-hosting-copy-production-build-from-local-to-remote" width="587" height="223" />

What are Production <code>--prod</code> optimizations?

More at:

https://grokonez.com/frontend/angular/angular-deployment/how-to-deploy-angular-on-apache-remote-server-example-use-vultr-hosting

How to Deploy Angular on Apache Remote Server Example – Use Vultr Hosting
WEEK1: GIT Conventional Commit
Published: 2021-04-22 15:03:58

This will provide a set of rule to make your commit easier to read
https://www.conventionalcommits.org/en/v1.0.0/
https://gist.github.com/qoomon/5dfcdf8eec66a051ecd85625518cfd13

To summarize:
1. `feat` - use when a new feature is added
2. `fix` - fix a bug
3. `refactor` - rewrite/restructure code (no behavior changes)
4. `perf` - improve performance
5. `style` - style of the file eg. white spaces, formatting, semicolon
6. `test` - add test or update test
7. `docs` - format the document not code
8. `build` - build component eg. project version, dependencies
9. `ops` - infrastructure
10. `chore` - other miscellaneous commits eg. update .gitignore

NOTE:
- Use present tense
- Don't capitalize the first letter
- No dot at the end

Example
```
docs: correct spelling of CHANGELOG
```
Can also add scope like this
```
feat(lang): add polish language
```
Creating live coding videos right from your browser
Tags: devlive, webdev, opensource, showdev
Published: 2021-04-22 14:54:05

For those who are lazy in reading my motivation behind creating this small tool [just go here and try it out](https://bit.ly/3sImsyU)

All this time I was thinking of starting my own youtube channel where I would be share my learnings frequently. 

But when I asked a few of my colleagues they told me to use OBS studio to create videos where I had to learn about how to setup OBS studio effectively for better audio quality, video quality. And I immediately got frustrated of trying out different settings.

But then I thought of trying out to create a web based live coding video creator. To my surprise I created whole video recorder (screen and webcam both) just in browser. It leverages latest browser features like [MediaRecorder](https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder), [Picture-in-Picture](https://developer.mozilla.org/en-US/docs/Web/API/Picture-in-Picture_API), [Media access](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) and also uses modern machine learning libraries like [tensforflow.js](https://github.com/tensorflow/tfjs) and [bodypix model](https://github.com/tensorflow/tfjs-models/tree/master/body-pix).

I have developed the application using [next.js](https://nextjs.org/) and [tailwind.css](https://tailwindcss.com/) and have deployed to vercel. [You can try it here](https://bit.ly/3sImsyU). The code is available to contribute and play around [here](https://github.com/technikhil314/next-webrtc)
Splunk - Add marker lines in a column chart
Published: 2021-04-22 14:50:22

In our dashboards, it can really help to have marker lines to show where it's critical or not.

And today, we will see how to do it in a Splunk Column Chart!

---

## How to do it?
### The request
First, you need to define different variables in your request which will correspond to your different markers.

```
... | eval warning = 1 | eval critical = 2 ...
```

Then, be sure that these values are returned in your response data.

```
| table x y warning critical
```

<br/>

### The dashboard
In your dashboard definition, you need to add an option called **charting.chart.overlayFields**. It will contains all the parameters names to use as marker.

```xml
...
<chart>
  <title>My chart</title>
  <search>
    <query>...</query>
    <earliest>$time.earliest$</earliest>
    <latest>$time.latest$</latest>
  </search>
  <option name="charting.chart">column</option>
  <option name="charting.chart.overlayFields">warning,critical</option>
  <option name="charting.drilldown">none</option>
</chart>
...
```
And now you have beautiful markers on your chart!
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9x8r22w9suqpmgah2vpb.PNG)

<br/>

### Customize colors
To customize the colors, you have to add another option called **charting.fieldColors**. It will contains a JSON object with your parameter name as key and the color as value.

```xml
<option name="charting.fieldColors">{"warning":0xf77f00, "critical":0xd62828}</option>
```

And now you can play with it!

---

I hope it will help you!

*Don't hesitate to give some feedback to help me to improve my writing skills. Thanks!*
April Update '21
Published: 2021-04-22 14:50:03

Another update for anyone following along.....

This week we were successful in getting another React and D3 data visualisation [shipped](https://padosensei.github.io/BjjDataViz/). Or at least a first pass at it. 
It needs more work but obviously but did use a python script for the first time to scrape a website so that represents a cool, little landmark. 
Also finished a [Coding Addict tutorial](https://www.youtube.com/watch?v=TNV0_7QRDwY&t=64s) on Node & Express, which really solidified the main principles and will really help with the MERN stack going forward. 
I think we should dial up the practicality of our learning by doing the [Gatsby/Strapi course](https://www.youtube.com/watch?v=asB-dUwpH4Y&t=193s). No, it's not on the list but I think it would be good to start thinking about a portfolio as well as touching the JamStack. 
Once it's done, we'll be able to do the Repo Audit, figuring out what we have, what needs fixing and refactoring and what's missing. 
I'm also eyeing up this for your professional developlment. You need to do more to introduce yourself into the community. (https://community.codenewbie.org/)

###Still on my mind
- MERN Project Book followalong
- More Python. That Haiku / language generator sounds cool. What if you could do a limerick, haiku or sonnet and post the result to Twitter?
- Learn to test. You need to dive into JEST somewhere. 
- Open source. Clean up your act and approach Blitz.js? Could you find something in Ireland?

Go, find something to ship.
What have you Lost and Gained with Front-end Complexity?
Tags: discuss, frontend, javascript, css
Published: 2021-04-22 14:48:15

---
title: What have you Lost and Gained with Front-end Complexity?
published: true
description: 
tags: discuss, frontend, js, css
//cover_image: https://direct_url_to_image.jpg
---
In 2021 front-end software is almost ridiculously advanced.  

You've probably read about the history of JS and how brutal cross-browser compatibility used to be.  The jQuery days were actually quite exciting and in many ways they still are.

If you think about jQuery for one second, it's a massive compatibility layer wrapped up in one global object `$`.  That's incredible. 

jQuery actually hindered a lot of developers because those folks learned jQuery first and JS second.  Today, a lot of developers now are falling into learning JSX first and JS second. While there's nothing terribly wrong with this approach (JSX still requires JS knowledge) there is a hidden "jQuery-esque" magic behind the build processes used to convert JSX in pure JS.  

Most developers cringe at the thought of going back to ASP or JSP HTML templates and writing pure vanilla JS and CSS.

But it's actually essential to know these things.

While no one can ever fully "know" HTML, CSS, and JS (this is according to the "Essential Difficulties" in software design, it's important to at least have an idea of what you don't "know".

I'm not going to write a whole article on the inner workings of webpack or the differences between OOP and Prototypical Programming.  I want to hear from you folks about what you've lost and gained in the complexity of front-end build processes and software advancements.
Keyoxide
Published: 2021-04-22 14:42:32

This is an OpenPGP proof that connects [my OpenPGP key](https://keyoxide.org/F95069755AC4B5F645B661663E2520C8653BA282) to [this dev.to account](https://dev.to/benjaminwolkchen). For details check out https://keyoxide.org/guides/openpgp-proofs

[Verifying my OpenPGP key: openpgp4fpr:F95069755AC4B5F645B661663E2520C8653BA282]
A new way to chat and unblock discord
Tags: javascript, html, easy
Published: 2021-04-22 14:00:51

This might be against TOS but here's an idea: You can create an html application in repl.it or vsc and attempt to make a chat client. But here's the catch, You can't login with your original email and password, (because of captcha and won't register using the chat client) so you need to enter your account token in order to log into discord which is very possible doing that through console if you are aware. This is just an idea that popped up in my head hopefully this gives you an idea. Btw I found a way to prevent content filtering. The reason I said to make an html file is because you can actually download it on your school chromebook and open it inside your browser and it will run. Hopefully this helps :) Btw I have this same problem and I depend on discord right now. One bypass is downloading BetterDiscordPanel but you need someone on the other side to invite your bot to chat with them. First you need to go to https://github.com/SanjaySunil/BetterDiscordPanel then download as zip. Go to my files and right click and make a new folder. Go to recent and open the zip file. do ctrl + a and click, hold and drag to the folder. You need your phone or something and email yourself your discord bot token which you can find tutorial on youtube about it. Also search how to create a discord bot invite and send the invite on your phone to your friends and tell them to invite it (you need a bot application at discord dev portal btw). Go back to your files and go to where you copy and pasted the files to the folder. Search through the folder until you found index.html. Double click it and it should open. Now it requires you to enter your bot token. Go back into your email and copy paste the bot token. Once you are in, now go click the server your bot is in and go to the channel where you chat at. These messages and bypasses are all being done on this chromebook I am using right now :) This works 100% and you won't be able to find a bypass like this on youtube or anywhere else I found this bypass myself :)))
Top 100 software testing companies in Ukraine 2021 by The Manifest
Published: 2021-04-22 14:31:49

The HireTester team is proud to be featured in the review.
Many thanks to our clients for their support and to our team for hard work and dedication.
There is much more to come. And with HireTester you always get the right people involved.

https://lnkd.in/eGVEFnC
#HireTester #TheManifest #qa #testing #softwaretesting #QAcompany #manualtesting #automationtesting
GreenTech not-for-profit hackathon - Hack from Home
Published: 2021-04-22 14:31:09

Hi everyone!

Dataswift is currently organising the second edition of Hack from Home (https://www.hackfromhome.com/) and we are looking for participants! Anybody with an interest in climate change, software development and/or the energy industry can join us.

*What is Hack from Home? Hack from Home is a global, remote hackathon organised by Dataswift, a DeepTech startup providing a decentralised infrastructure for personal data.

*When will it take place? May 15-16, 2021.

*Where will it be? It is a remote hackathon, so you can join it from home!

*What is it about? We will be exploring how energy data placed into decentralised, user-owned and cloud-based 'Personal Data Accounts' can enable new green applications and systems, and would love to have you along. You can learn more at https://www.hackfromhome.com/about-1

Why should I join? We are working with four universities and several leading utilities and EnergyTech organisations. Our participants can register for free and will be able to work with an interesting personal data architecture and be eligible to prizes to the value of £5,000.

How can I join? You can join using this link https://www.hackfromhome.com/join-us-energy 

How much does it cost? The event is free for all participants.
Figma for Developers: 2 Simple Tips to Level Up Your Figma Game
Tags: webdev, design
Published: 2021-04-22 14:26:24

Figma is a great tool to help you design landing pages quickly, but it isn't often used to it's fullest potential. This article will go over 3 simple tips that you can use to create better components for your landing pages.

# Creating a dynamic button


![ezgif.com-video-to-gif.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1619098046143/dOBrCKOmo.gif)


1/ Type in your text as you normally would.

![ezgif.com-video-to-gif-2.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1619098657814/5nWjyC5Z6.gif)

2/ Click Shift + A on the text layer, this will make it an auto-layout frame.

3/ Adjust the padding and alignment in the 'Alignment and padding' window on the right. Also add in your button's color by adding a Fill.


![ezgif.com-video-to-gif-3.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1619098889958/u21J369li.gif)

That's it, you've created a button will retain alignment and padding even if you change the text inside.

# Creating a reusable button

1/ Right click on the auto-layout frame you've just created and click 'Create component'


![ezgif.com-video-to-gif-4.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1619099065895/hTkHdIk_Q.gif)


2/ Copy paste the button anywhere in your design.


![ezgif.com-video-to-gif-5.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1619099183595/UYsHYk91r.gif)

3/ When you apply any changes to the original component, it affects all child components. 


![ezgif.com-video-to-gif-6.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1619099362104/XVjmI2EXb.gif)


These 2 simple tips will speed up your workflow **a lot**, not to mention you can use this same technique for any component, not just buttons. Give it a shot next time you're designing something on Figma!
I'm launching a podcast! Here is the first episode with Sebastiano Mandalà
Tags: podcast, architecture, gamedev, ecs
Published: 2021-04-22 14:26:06

For those who follow me on my Telegram channel, I hinted that I was considering to make a podcast and here it is 🚀🚀🚀

It's simply named: **Software Engineers**

It's obviously aimed at software engineers, programmers, and computer scientists. 
And in every episode, I'll put one of the best engineers working behind the scenes in the spotlight. 

### Why? 

Well I thought we, software engineers, are lacking podcasts discussing our journeys, challenges, quests, ... There are tons of blogs but very few podcasts. So here we are 🔥🔥🔥

### Ok, so what is this first episode about?

I am receiving Sebastiano Mandalà, the CTO of [Freejam](https://freejamgames.com/), an award-winning indie game studio based in Portsmouth, UK.

![freejam.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1619082875562/x5N72uur6.png)

He is also the author of the C# ECS framework: [Svelto.ECS](https://github.com/sebas77/Svelto.ECS) 

![github.com_sebas77_Svelto.ECS(iPad Pro).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1619083092783/OaW_LwAYu.png)

In this episode, we discuss his thoughts process and experience who brought him into ECS ([Entity Component System](https://en.wikipedia.org/wiki/Entity_component_system)). And then discuss the challenges and advantages of using ECS in game development. 

### Listen here 👇

[https://shows.acast.com/software-engineers/episodes/sebastiano-mandala](https://shows.acast.com/software-engineers/episodes/sebastiano-mandala)

👉 If you liked the episode, follow Sebastiano on Twitter: [https://twitter.com/sebify](https://twitter.com/sebify)😊 and if you want to check the latest game Sebastiano is working on, follow: [https://twitter.com/TechbloxGame](https://twitter.com/TechbloxGame).

### And subscribe to the podcast! Next episode on May 22nd.