teleren/devto huggingface dataset:
Guida ScrollReveal.js
Tags: javascript, webdev, beginners, librerie
Published: 2022-08-17 12:25:00

## Introduzione
ScrollReveal è una libreria JavaScript robusta e flessibile che consente di animare facilmente gli elementi che entrano o escono dal viewport.

## Quick Start
Includiamo la libreria nell'html: 
```html
<script src="https://unpkg.com/scrollreveal"></script>
```
Questo ci fornisce la funzione costruttore ScrollReveal(), che useremo in seguito.

### Prima animazione 
Una semplice configurazione:

```html
<h1 class="appear-from-bottom">
    Hello World!
</h1>
```
```js
ScrollReveal().reveal('.appear-from-bottom');
```

## Opzioni di animazione
ScrollReveal.js offre varie opzioni di personalizzazione per ottenere l'effetto desiderato:

- **Delay:** è il tempo in millisecondi prima dell'inizio delle animazioni, es. `{ delay: 500 }`.
- **Distance:** controlla quanto distanti si muovano gli elementi quando rivelati, es. `{ distance: '50px' }`.
- **Duration:** controlla il tempo di completamento delle animazioni in millisecondi, es. `{ duration: '600 }` .
- **Easing:** controlla la transizione delle animazioni tra i valori iniziali e finali, es. `{ easing: 'ease-in' }`.
- **Inverval:**  è il tempo che intercorre tra ogni reveal,  es. `{ interval: 600 }`.
- **Opacity:** specifica l'opacità che hanno prima di essere rivelati, es. `{ opacity: 0.8 }`.
- **Origin:** specifica da quale direzione provengono gli elementi quando vengono rivelati, es. `{ origin: 'top' }` (accetta anche: `bottom`, `left`, `right`).
- **Rotate:** specifica la rotazione che gli elementi hanno prima di essere rivelati, es. `{ rotate: { x: 20, z: 20 }`.
- **Scale:** specifica la dimensione degli elementi prima di essere rivelati, es. `{ scale: 0.85 }`.

### Esempio Pratico
Un esempio di come può essere utilizzata la libreria per avere diverse animazioni mentre si scrolla la pagina:

```js
ScrollReveal().reveal('.appear-left', {
  origin: 'left',
  delay: 1000,
  duration: 600,
  distance: '100px',
});

ScrollReveal().reveal('.appear-right',{
  origin: 'right',
  delay: 1000,
  duration: 600,
  distance: '100px',
});
```

Lo stesso codice viene usato nel seguente codepen:

{% codepen https://codepen.io/g-pagliara/pen/poLqzOa %}

## Risorse Aggiuntive

Per ulteriori configurazioni, metodi e callbacks visita la pagina [API di ScrollReveal.js](https://scrollrevealjs.org/api/reveal.html)

---
Spero questa mini guida vi sia piaciuta , considera di mettere ❤️ al post e seguirmi sui miei social:

[Linkedin](https://www.linkedin.com/in/giandomenico-pagliara-699108179/)
[GitHub](https://github.com/PagliaraG)
Conditional Checkout Fields for WooCommerce
Tags: woocommerce, checkout, field, plugins
Published: 2022-08-17 12:24:14

[WooCommerce conditional checkout fields](https://woocommerce.com/products/conditional-checkout-fields-for-woocommerce/) allows creating fields based on product, category, and user roles in any section of the checkout page.

Some of the key features of Conditional Checkout Fields are

1. Create custom checkout fields with conditions.
2. Add custom checkout fields to specific products and categories.
3. Assign additional checkout fields to specific user roles.
4. Set a price for each field and experiment with customization.
5. Add fields to any section of the checkout page.
6. Create fields based on product, category, or user roles.
7. Use any of the 15 field types.
8. Create dependencies among fields.
9. Edit default checkout fields.
10. Additional fields will be displayed in the invoice email, the order page, and the my account page.
Do you have the time..
Published: 2022-08-17 12:21:45

Time is such a weird thing. At this point, I'm a little over a month into my apprenticeship with Develop Carolina. WHERE HAS THE TIME GONE?? 

So far I've been pretty busy. Mondays & Fridays with the Develop Carolina apprenticeship and Tuesday-Thursday with my paired host company. During my host company time I'm learning some project specific technologies as well as participate in daily standups and other team meetings. Right now my time is spent just getting up to speed with what I will need to know as I get onboarded to the project. 

My time with Develop Carolina still consists of workshops as well as planning my umbrella project. Right now were in the process of scaffolding our umbrella projects and my partner and I have picked our tech stack and look forward to getting our required technologies together and being development! 

Overall, I feel pretty busy. So far, it is a lot of context switching between what we are learning in the workshops vs host company materials. However, I don't think this is a bad thing! From what I've experienced at my host company, context switching happens frequently in software development. So that itself is a learning opportunity! With my current experience some material at my host company can feel overwhelming and difficult to understand but I have reached out when I had questions so far and I'm using the time I have to learn as much as I can.
Ever feel like disengaging when your work is tightly controlled?
Tags: management
Published: 2022-08-17 12:18:00

An aspect of managing creative teams that I take a lot of pride in and value highly is encouraging them to engage, use their heads, and not wait for me to make decisions.  Here is an excerpt from [Daily Creative](https://dailycreative.net) by Todd Henry that does a great job of explaining the idea.  

> **Influence vs control**
>     Early in your career you are rewarded based on how effectively you control your work.  You're primarily tasked with executing decisions being made by others, and if you deliver on expectations consistently you will be rewarded with more responsibility.  You might even be promoted into a role where you are managing others.  This is the critical moment when many people slip up.  Once you are in a position of leadership your job is no longer to control the work, it is to influence it.  If you attempt to control the work of the talented creative pros on your team they will eventually disengage until you tell them exactly what to do.  This means that you won’t  get the best work out of them because they will stop spending energy thinking of ideas that you are likely to change anyway.  
> 	To lead by influence whether you are leading a team, a client, or your peers, means to spend less time telling them how to do the work and more time teaching them how to think about the work.  Establish guiding principles that help them understand what successful work looks like instead of them guessing what you want.  How to know when an idea is good instead of them waiting for you to tell them.  And how to deal with conflict instead of always stepping in and resolving it.  And other elements of your leadership philosophy that will help them deliver great results.  To help your team deliver brilliant unique results, focus on leading with influence instead of leading by control. 
>      Here is today’s question: Where are you trying to control the work right now instead of influencing it?
Monkey Type
Tags: monkeytype, typingtest, typingclub
Published: 2022-08-17 12:16:38

Who has the highest wpm?

The highest typing speed ever recorded was 216 words per minute (wpm), set by Stella Pajunas in 1946, using an IBM electric typewriter. Currently, the fastest English language typist is Barbara Blackburn, who reached a peak typing speed of 212 wpm during a test in 2005, using a Dvorak simplified keyboard. Visit [monkey type](https://monkey-type.org) and make your record.


How many hours a day should I practice typing?
Practising 'little and often' (15 -30 minutes a day) works much better than an hour or more once a week. If you practise regularly and don't give up, you should be able to learn to touch type fluently in 2-3 months, maybe even less. A total of 10 – 15 hours of practice should get you touch typing slowly.
my npm is not installing any package please help
Tags: react, javascript, node
Published: 2022-08-17 12:16:00

[](https://drive.google.com/file/d/18FT4VlxJWH-gNlvO7a6Ybtl6_wXTaQpW/vi
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6c36fk7q5uke5z9g7zvm.png)ew)
F# Http Request
Tags: beginners, fsharp, programming, dotnet
Published: 2022-08-17 12:14:00

The purpose of this article is to give you an example of making a HTTP request in F# wrapped in a `try-catch` with a `cancellation token`.

The example was built in a `console application` using `.NET 6` and requires the below packages

```javascript
Newtonsoft.Json/13.0.1
```
It also makes use of the free to use API placeholder service [JSONPlaceholder](https://jsonplaceholder.typicode.com/).

Paste the below code into your `Program.fs` and execute.

```C#
open System
open System.Net
open System.Net.Http
open System.Threading
open System.Threading.Tasks
open Newtonsoft.Json

type Post =
    { userId: int
      id: int
      title: string
      body: string }

let DeserializePost (response: string) : Post =
    JsonConvert.DeserializeObject<Post>(response)

let GetItem
    (client: HttpClient)
    (message: HttpRequestMessage)
    (ct: CancellationToken) : Task<option<Post>> =    

    task {        
        try
            let! response = client.SendAsync(message, ct)
            if response.StatusCode = HttpStatusCode.OK then
                let! payload = response.Content.ReadAsStringAsync()
                return Some (DeserializePost payload)
            else
                return None
        with
        | :? TaskCanceledException as ex -> printfn $"Task Canceled Exception: {ex.Message}"
                                            return None
        | :? TimeoutException as ex -> printfn $"Timeout Exception: {ex.Message}"
                                       return None
        | ex -> printfn $"General Exception: {ex.Message}"
                return None
    }

let main =    
    //GET
    task {
        let client = new HttpClient()
        let tokenSource = new CancellationTokenSource(3000)
        let token = tokenSource.Token      
        let getMessage = new HttpRequestMessage(HttpMethod.Get, "https://jsonplaceholder.typicode.com/posts/1")
        
        let! item = GetItem client getMessage token
        printfn $"{item}"
    }

main.Wait()
```
**Output**

```config
Some({ userId = 1
  id = 1
  title =
   "sunt aut facere repellat provident occaecati excepturi optio reprehenderit"
  body =
   "quia et suscipit
suscipit recusandae consequuntur expedita et cum
reprehenderit molestiae ut ut quas totam
nostrum rerum est autem sunt rem eveniet architecto" })
```

**Further Readings**

Making F# HTTP calls using either System.Net.Http, Http.Fs or Flurl -> [here](https://www.encora.com/insights/making-http-requests-in-f)
Configuring Serilog into F# -> [Here](https://dev.to/robmulpeter/implement-serilog-into-f-297g)
Tilt
Published: 2022-08-17 12:01:00


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r4g7hnzdpxyrwdsl3exl.png)




> Anvay
Wankhede

As a programmer, you are thought to constantly use Git, typing specific commands in a console (unless you prefer some UI-based approach). Since I work on Windows currently, I’ve been forced to use the Git Bash console. Though it does work, still I perceive it pretty boring and even tiring — especially when I must scroll up output to check something, I need to strain my eyes as prompt blends into other stuff.
VYou vs. custom software development
Tags: saas
Published: 2022-08-19 08:28:52

---
title: VYou vs. custom software development
published: true
date: 2022-08-11 08:15:18 UTC
tags: SaaS
canonical_url: https://vyou-app.com/en/vyou-vs-custom-software-development/
---

When deciding between an already existing [Low Code Platforms](https://vyou-app.com/en/list-of-low-code-platforms/) and [custom software development](https://apiumhub.com/), first of all it is important to determine the goal you wish the software to achieve and the overall customization required in order to achieve the goal. 

Here are some factors to consider when choosing between Low Code Platform vs custom software:

- MVP features
- Amount of customization required 
- Deadlines 
- [Budget](https://vyou-app.com/en/vyou-cuts-the-mvp-costs-and-speeds-up-time-to-market/) 
- Know-how 

Good news is that you don’t have to choose, we don’t live in a black and white world, so there are many low code platforms that allow customization and are quite flexible on that. For example,[VYou](https://vyou-app.com/en/) – user and access management solutions has an option to personalize your plan and add extra features or develop new functionalities from scratch based on your needs, adapting the interface to the style guideline of your company. 

## VYou & Apiumhub collaboration

To be honest, in many cases VYou receives requests to develop custom software apart from VYou solution, therefore we closely work with [Apiumhub](https://apiumhub.com/digital-products) – software development company that has developed the tool and that takes key part in VYou projects that require customization.  

Apiumhub develops powerful and scalable digital products, putting pragmatism and problem solving in the center of every project, delivering value by creating seamless digital experiences, continuously evolving technology, enabling an adaptive mindset to meet business goals.

This is a win-win situation for both companies as they complement each other. In many projects Apiumhub gets briefings to develop a login system from scratch and instead of developing the same functionalities in every project and repeating the process, Apiumhub implements VYou right away, accelerating time to market and reducing costs.

VYou vision is to simplify the automation of user and customer management as well as software development life cycle, putting extra emphasis on easy integration. With VYou you can quickly build secure access, verification, & scalable digital user management into your web and mobile applications. With VYou you can also sign up & sign in, recover password, add payments and manage your backoffice users. It also offers full customization of your customers profile with dynamic fields and access management.

The goal of Apiumhub and VYou is to build sustainable long-term relationships with clients.  Get to know more about us, [let’s talk](https://vyou-app.com/en/contact/)!
How to connect to a EC2 instance having only private IP using a jump server.
Tags: aws, beginners, tutorial, cloud
Published: 2022-08-17 11:58:45

The following article explains how to connect to an ECS instance using only a private IP address.
The first thing I would like to do is introduce some key terminologies, where we will first try to understand a few things, and then move on to the implementation.

**Key terminologies:**

- **ec2 instances:** EC2 instance is like a  computer or laptop where you can run your os like Linux, windows, etc.
- **AMI(Amazon Machine Image):** It contains the operating system like windows ,amazonLinux, sushelinux which we use to launch our ec2 instance.
- **vpc(virtual private cloud):** vpc is an isolated network within aws where we deploy our resources so that they can communicate with each other.
- **Private IP:** Using private IP we can not connect to the internet directly.
- **Public IP:** Using public IP we can connect to the internet directly.
- **Key pair:**  A key pair has a public key and a private key. So basically this is a  set of security credentials that we use to prove our identity while connecting to an ec2 instance.
- **Bastion host:** The ec2 instance which is having a public IP from which we try to connect to an instance present in a private subnet is called a Bastion host.

EC2 Instance Connect allows you to connect to EC2 instances using three different methods:

- A browser-based client accessible via the AWS Management Console.
- Your own key and SSH client.
- EC2 Instance Connect command line interface (CLI).

In this article we only discuss about connecting ec2 instance using key and SSH client.

**Step 1:**
- Start by creating an EC2 instance that has a low configuration. Ensure that this EC2 instance and the instance with the private IP are in the same VPC. And this instance must have a public IP.
- Connect the instance by giving key pair to SSH client. And connect to the root.

```
sudo su
cd
```
_Now try to connect to the private EC2 instance. You will notice it is not connecting because the private key pair is not there._

**step 2:**

- Now login to vi editors with a file name the same name as the private key pair file. In my case, the key name is example.pem.

```
vi example.pem
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/osgh8mb7ey09z0nua5fk.png)

- Copy-paste the key into the editor. Save and exit to the editor. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/86ktfcsbd57y7k7iv16h.png)

- Now give permission to the owner by using the following command.

```
chmod 600 example.pem
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4cc382yhcf4tyh84s3wj.png)

You are good to go.

_Now trying to connect to the ec2 instance having private IP. It will be connected._
Bright kit Web Layout, UI kit, Design Systems & Prebuild Wireframes
Tags: uikit, design, web, wireframes
Published: 2022-08-17 10:17:58

Save countless hours of resizing, stack blocks and create your page in no time! with help of our [Figma Design systems](https://fabrx.co/mobile/) & UI kits

Modern Prebuild Wireframes and Auto Layouts snap so, Ideally, your designs should make a sound!


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/czqd61fcgbrhbhr0b939.gif)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sn6zbo5p4557jyi0xrt6.jpg)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ut1xgl2fkd80yllv6r6a.jpg)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2xl4wlvkqbb2zrtx2pi9.jpg)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nnxig6hfc2z73xl0flwq.jpg)

🚀 See the full preview - [https://fabrx.co/brightkit](https://fabrx.co/brightkit)

## Features - 

- Flexible Components - Responsive elements with constraints and Smart / Auto layout
- Easy Customization - Easily change color and text styles on all artboards with a few clicks.
- Easy Snap - Stack layouts and get your page responsive page ready in minutes!
- Tons of Overrides - Change content easily without affecting the master symbol
- Super Organized and Clean Code - Carefully named groups, layers, artboards, and components
- Bootstrap - Layouts based on Bootstrap grid for a smooth developer hands-off
- A collection of 70+ web layouts ready to be exploited.
- Available in Sketch / Figma / Adobe XD 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b82br2z53ai7el40smnt.jpg)
Product Variations Table for WooCommerce
Tags: woocommerce, variation, table, plugins
Published: 2022-08-17 11:50:00

[WooCommerce variations table](https://woocommerce.com/products/product-variations-table-for-woocommerce/) enable shop owner to display product variations in table for WooCommerce product pages.

Some key features of Product Variation Table is

1. Use data tables to showcase product variety
2. Add specific product attributes and variations in a table
3. Ajax-based filters ensure faster product search for customers
4. Users can extract product variations in CSV, Excel, PDF, or print format
5. Customize table layout to match it with your store theme
6. General settings to enable table for all the variable products at once
7. Option to hide default display of variations on product page
8. Shortcode for variation table
9. Restrict no of product variations to display per page
Custom User Defined Pricing for WooCommerce
Tags: woocommerce, custom, pricing, plugins
Published: 2022-08-17 11:39:00

[WooCommerce custom price](https://woocommerce.com/products/custom-user-defined-pricing-for-woocommerce/) plugin let the customers decide how much they are willing to pay within the limits you define.

1. Allow customers to pay the price they are willing to pay
2. Set pricing for different user roles and individual customers
3. Add new rules for specific products or categories
4. Hide general and sale prices from the product or shop page
5. Set a price range with minimum and maximum values
6. Restrict product order quantities based on customer price
7. Display or hide the suggested, maximum, and minimum price on the product page
8. Redirect customers to cart, checkout, or product page from the shop page
9. Manage rules easily from the back office
10. Use with Simple or Variable Products
⚡️JavaScript Optional Chaining (?.)
Tags: javascript, webdev, programming, react
Published: 2022-08-17 11:28:00

 

Optional chaining allows us to safely read the value of each deeply nested property within an object (or chained objects) without the need to separately evaluate the existence of each property.

For newbies, it might not touch them deeply, but optional chaining solves a great deal of errors JavaScript developers face very frequently.

## 📌Example #1:
Consider a **user** object, which is supposed to have user relevant details as properties:

```
Let user = {
   name: ‘John Doe’, 
   email: john@doe.com
};
```

Consider you try to access `user.address.postcode`, which will eventually give “Cannot read property of undefined..” Error. It’s because **address** is **undefined** and attempt to get `user.address.postcode` fails with an error as **undefined** doesn’t have Object like properties.

## 📌Example #2:
In web application we access DOM elements, such as, `document.querySelector(‘#heading’)`, and can access its properties or manipulate content using `document.querySelector(‘#heading’).innerText`. Now In-case `document.querySelector(‘#heading’)` didn’t return any element instead **undefined**, it will again fail and show same ‘non-existing property’ error.
 

## 🌟Introducing Optional Chaining (?.):
Optional chaining helps us by not showing an Error in-case there is nullish (null or undefined) property before ?. operator and return **undefined** without further evaluation.

In other words:
1. `user?.address?.postcode` will return undefined if address is undefined instead of throwing an Error.
2. It greatly helps to reduce multiple conditions evaluating each nested property whether they are nullish or not.
How do you establish an accessibility-focused developer culture at your company?
Tags: discuss, webdev, a11y, culture
Published: 2022-08-17 11:24:01

At [FINN](https://finn.auto), we’ve experienced enormous growth in the last 18 months. We’ve hired numerous talented people, we’ve built a large number of new features, and we've put a growing-every-day number of sustainable car subscriptions on German and US roads. 

In this process, we could have focused more on accessibility (a11y) than we've done so far. Now that we have more talent to focus on this aspect of our products, everyone is eager to improve our a11y. So we're wondering: **How do you establish an accessibility-focused developer culture at your company?**
React: Page and router transitions
Tags: router, react, transition, animation
Published: 2022-08-17 11:22:00

There are many articles online on how to do this, i found this one is the best:
https://reactcommunity.org/react-transition-group/with-react-router

Check the `react-transition-group` package version and install the same if you are experiencing any issues with a newer package.

If you are experiencing any issues make sure you follow the example, I have found many ways to approach this but a lot of them didnt give great in and out transition results.

If you have any issues, comment here and I will help.