teleren/devto huggingface dataset:
How to Customize the Date-Time Axis of Vue Charts
Tags: webdev, vue
Published: 2022-07-01 05:00:20

Learn how easily you can add a date-time axis to the [Vue charts](https://www.syncfusion.com/vue-ui-components/vue-charts) of Syncfusion and customize it with various built-in options. 

In this video, you will learn how to display date-time values on the horizontal axis using the date-time axis, along with other axis customization options. You will see the date-time axis properties with simple scenarios: how to display date-time values based on custom x-axis range values and custom intervals, and how to format the date-time value labels with custom or globalized formats. You’ll also learn how to display date-time values with nonlinear interval values in the horizontal axis using the date-time category axis. 

**Product overview**: https://www.syncfusion.com/vue-ui-components/vue-charts

**Explore our tutorial videos**: https://www.syncfusion.com/tutorial-videos

**Download example from GitHub link**: https://github.com/SyncfusionExamples/customize-datetime-axis-in-vue-charts

{% youtube K2Strqf3WKM %}
React hooks: useSessionStorage and useLocalStorage
Tags: react, hook, typescript, codesnipet
Published: 2022-07-01 04:46:40

I needed a simple way to use the `sessionStorage` and `localStorage` with React, and one of the requirements was to use *TypeScript*. The idea from [Robin Wieruch's original article] (https://www.robinwieruch.de/local-storage-react/) is pretty simple. It encapsulates the browser `sessionStorage` or `localStorage` with the `useState` hook. The hooks actually return a stateful value, and a function to update it. All I had to do was to put everything together into a TypeScript module. 

You can also customize the `STORAGE_KEYS_PREFIX`, which can be useful to avoid conflicts between storage keys from different applications you might be developing.

{% gist https://gist.github.com/saulodias/268ff05763ca54046b44b49c83b01034 file=storage.ts %}

If you like this post, you'll also like: 
{% link https://dev.to/saulodias/elevating-data-integrity-in-your-react-application-with-converters-in-storage-management-18il %}
How to convince business owners that they need website to grow their business?
Tags: discuss, webdev, productivity, opensource
Published: 2022-07-01 04:14:27

_Give me some idea that how to convince business owners in village area (Rural area) that they need website to grow their business. _
**
→ Note: Villagers usually don't know the importance of online presence and they don't know how to use internet properly, but they want their business to grow more.** 

So how can we help them?

**Tell me in the comment section below. 🙏🏻**
Bug (or bad Config) in VS code debug
Tags: vscode
Published: 2022-07-01 03:55:49


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

Good morning people!

I recently started using VS Code because of my job, and whenever I ran the code it ran normally in the IDE's integrated terminal, however, today when I went to run the codes, it just opens at this prompt and closes very quickly. Has anyone had this problem and know how to get back to normal?
So I'm in a bootcamp...
Tags: beginners, javascript, codenewbie
Published: 2022-07-01 03:36:47

I've been feeling pretty overwhelmed during the first week of the new coding bootcamp I'm attending. My cohort mirrors my sentiments, it just seems like we're getting bombarded with a sort of esoteric shotgun approach and it's pretty difficult sometimes to not give in to stress and have a breakdown. However, even with all of these feelings I've never been more excited, challenged, or hopeful. I honestly can't wait to learn more.
CSSBattle | #18 Matrix
Tags: css, cssbattle, challenge, matrix
Published: 2022-07-01 02:46:20

Welcome to CSSBattle Challenges!

In this short article, I go through my solution for [CSSBattle - #18 Matrix](https://cssbattle.dev/play/18) challenge. Please refer to the code snippet below to get a better insight into my thought processes and the implementation detail.

---

> #### Challenge:

![Matrix Challenge](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yl2aw2wgdan6vem1t1wf.png)

---

> #### Solution:

```html
<div class="container">
  <div class="box bg-orange"></div>
  <div class="box bg-lightyellow"></div>
  <div class="box bg-orange"></div>
  <div class="box bg-lightyellow"></div>
  <div class="box bg-lightyellow"></div>
  <div class="box bg-orange"></div>
  <div class="box bg-lightyellow"></div>
  <div class="box bg-orange"></div>
  <div class="box bg-orange"></div>
  <div class="box bg-lightyellow"></div>
  <div class="box bg-orange"></div>
  <div class="box bg-lightyellow"></div>
</div>

<style>
  * {
  	padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  .container {
    height: 100vh;
    width: 100vw;
    display: grid;
    grid-template-rows: repeat(3, calc(320px / 4));
    grid-template-columns: repeat(4, calc(320px / 4));
    grid-gap: 20px;
    padding: 10px;
    background: #5C434C;
  }
  .box {
    border-top-left-radius: 100%;
  }
  .bg-orange {
    background: #F09462;
  }
  .bg-lightyellow {
    background: #F5D6B4;
  }
</style>
```

---

> #### Key Takeaway(s):
- using `display: grid` to align contents both horizontally and vertically at the same time
- using `grid-gap` property to create equal spacing between all the grid elements

As always, I welcome any feedback or questions regarding the implementation detail of the challenge. Otherwise, I hope this was useful!
Scrolla - jQuery Plugin for Reveal Animations
Tags: javascript, jquery, animation, plugin
Published: 2022-07-01 03:02:44

In this article, we will see how to use scrolla - jQuery plugin for revealing animations when scrolling a mouse. 

this jquery plugin is very simple and easy to use for the scrolling effects. jQuery scroll plugin is used to display a bunch of images with animation effect on scrolling.

If your website contains lots of images, then this plugin is perfect to display images in a very good way. 

Scrolla is a simple lightweight jQuery plugin to use which will create a fancy scroll reveal effect to image galleries. Scrolla uses animate.css and jQuery plugins.

So, let's see page scroll animation jquery, animate on scroll jquery plugin, animation effect on scrolling, jQuery scroll animation, animations on scroll.

---

**_[Read More: Scrolla - jQuery Plugin for Reveal Animations](https://techsolutionstuff.com/post/scrolla-jquery-plugin-for-reveal-animations)_**
Are you looking for an easy way to access on-chain data for any major PoS blockchain?
Published: 2022-07-01 02:40:41

Are you looking for an easy way to access on-chain data for any major PoS blockchain?

RockX's new access node API portal is user-friendly, secure, and reliable. To celebrate this new launch, we're giving away free access by crediting your RockX access node accounts!

This is all you have to do:
1. Follow us on [LinkedIn](https://www.linkedin.com/posts/rockx-official_blockchain-developer-dev-activity-6938015733335359488-7ZB8?utm_source=linkedin_share&utm_medium=member_desktop_web) to stay up to date with our new products
2. Create an account on our portal https://bit.ly/3M0fPS8
3. Fill in the form to claim your credits: https://lnkd.in/duxWziyk

Be sure to complete ALL of the above steps so that we can properly credit your RockX account. 
This is the final week that we are doing this, so act fast to secure the credits and gain free access to data on any major PoS blockchain!
Big O Notation in Javascript
Published: 2022-07-01 01:00:48



Big O Notation is a very important computer science concept that all developers should understand, because If you don’t, you could end up writing some very inefficient functions at the wrong time, resulting in a poor performing program.


What are your thoughts?  Find out more [here](https://www.doabledanny.com/big-o-notation-in-javascript)
Is it possible to set "the master URL" from within an IFrame? [SOLVED]
Tags: webdev, html, help
Published: 2022-07-01 00:29:19

Is it possible to set the URL of the currently view document by clicking an `<a>`nchor element in an `<iframe>`?

I want to add chapters to a document I'm making in a similar to way to how [The Rust Book](https://doc.rust-lang.org/stable/book/title-page.html) has chapters, but I don't want to have a bunch of filler HTML on my computer, so I decided I would just make one file, `sitemap.html`, and just load it into an `<iframe>` on the side of every document, but every time I click on one of the `<a>`s it doesn't have the intended behavior.

Is there any way to get the behavior I described or must I repeat my HTML inline to get the desired effect?
Terraform Interpolation vs. Directives
Tags: terraform, devops, tutorial, todayilearned
Published: 2022-07-01 00:14:54

Every Terraform user should be familiar with HashiCorp Language (HCL) aka Terraform **interpolation syntax**.


Let say I have a variable defined as `filename`, then interpolation allows me to do stuff like that:

```hcl
resource "local_file" "index" {
  filename = "${var.filename}.txt"
  content  = "foo!"
}
```

The Terraform official website says:

> [Interpolation] evaluates the expression given between the markers, converts the result to a string if necessary, and then inserts it into the final string.

In other words, it can do some elementary operation and dump result as a string. 

This is neat, and can be helpful if we want to add suffix or prefix to an EC2 instance, but what if we are tasked with generating a config file dynamically with unknown number of nested blocks?

That's where **directives** come into play!

The Terraform docs have this short definition of the directive:

>  [It] allows for conditional results and iteration over collections.

It is kinda like `for_each`, but inside of string rather than resource.

An example should make things clear!

```hcl
variable "filename" {
  default = "index.html"
}

variable "facts" {
  default = ["fun", "hard"]
}

variable "complex_facts" {
  default = [
    {
      element: "h2"
      content: "FUN!"
    },
    {
      element: "h1"
      content: "EASY!"
    }
  ]
}

resource "local_file" "index_html" {
  filename = "${path.module}/${var.filename}"
  content  = <<EOT
    <html>
    %{for fact in var.facts}
      <p>Terraform is ${fact}</p>
    %{endfor}

    %{for fact in var.complex_facts}
      <${fact.element}>Terraform is ${fact.content}</${fact.element}>
    %{endfor}
    </html>
  EOT
}

```

You can see how list `facts` is used to generate HTML <p> elements:

```hcl
%{for fact in var.facts}
  <p>Terraform is ${fact}</p>
%{endfor}
```

The same syntax can be used on objects, like with in `complex_facts` case:

```hcl
%{for fact in var.complex_facts}
  <${fact.element}>Terraform is ${fact.content}</${fact.element}>
%{endfor}
```

The resulting HTML file is pretty ugly:

```html
    <html>
    
      <p>Terraform is fun</p>
    
      <p>Terraform is hard</p>
    

    
      <h2>Terraform is FUN!</h2>
    
      <h1>Terraform is EASY!</h1>
    
    </html>
```

This can be used to generate tiny and ugly HTMLs (although there are better tools for this purpose), but it can also be used for more complex configuration files! 

It can also be used to replace ternary expression, which some people find hard to read.

This interpolation sequence:

```hcl
resource "local_file" "txt" {
  filename = "${path.module}/file.txt"
  content  = <<EOT
    ${ var.content != "" ? var.content : "NO CONTENT PROVIDED"}
  EOT
}
```

can be replace by the following directives sequence:

```hcl
resource "local_file" "txt" {
  filename = "${path.module}/file.txt"
  content  = <<EOT
    %{ if var.content != "" }${var.content}%{ else }NO CONTENT PROVIDED!%{ endif }
  EOT
}
```

That's all for today! Have fun hacking Terraform!
June 30th, 2022: What did you learn this week?
Tags: weeklyretro, discuss, weeklylearn
Published: 2022-07-01 00:05:08

It's that time of the week again. So wonderful devs, what did you learn this week? It could be programming tips, career advice etc.

![The Evergreen ship superimposed over the mini cart Austin Powers is trying to move in the first Austin Powers movie](https://media.giphy.com/media/IrrYlFmpivxthPksfh/giphy.gif)

Feel free to comment with what you learnt and/or reference your TIL post to give it some more exposure.

{%tag todayilearned %}
Blog: 2022-07-01: Content & Tooling Team Status Update
Published: 2022-07-01 16:16:59

---
title: Blog: 2022-07-01: Content & Tooling Team Status Update
published: true
date: 2022-07-01 00:00:00 UTC
tags: 
canonical_url: https://puppetlabs.github.io/content-and-tooling-team/blog/updates/2022-07-01-status-update/
---

## I love that Friday feeling!

It’s been another quiet week while we work on replacing cogs and putting out fires behind the scenes. It feels like weeks are getting shorter as the holiday season starts hitting us.

As mentioned on a previous [`post`](https://puppetlabs.github.io/content-and-tooling-team/blog/posts/2022-06-30-changes-to-supported-modules/), this week we have decided to offically announce the retirement of several modules from our supported list. This is done in an effort to focus our resources on the areas that matter the most. We have also been discussing about the future of some of our internal tools, such as PRM, which might need a refactor soon enough.

As usual, we’d like to thanks all community members for your contributions and let y’all know that they are very much appreciated.

And that’s all for now. Enjoy your weekend, folks!

## Community Contributions

We’d like to thank the following people in the Puppet Community for their contributions over this past week:

- [`puppetlabs-apache#2257`](https://github.com/puppetlabs/puppetlabs-apache/pull/2257): “Correct vhost parameter documentation and run vhost tests on all supported OSes”, thanks to [ekohl](https://github.com/ekohl)
- [`puppetlabs-apache#2256`](https://github.com/puppetlabs/puppetlabs-apache/pull/2256): “Group assertions in vhost spec”, thanks to [ekohl](https://github.com/ekohl)
- [`puppetlabs-apache#2254`](https://github.com/puppetlabs/puppetlabs-apache/pull/2254): “Clean up includes and templates in vhost.pp”, thanks to [ekohl](https://github.com/ekohl)
- [`pdk#1177`](https://github.com/puppetlabs/pdk/pull/1177): “Fixing deprecated message on api\_types.rb”, thanks to [davidsandilands](https://github.com/davidsandilands)

## New Module / Gem Releases

The following modules were released this week:

- [`puppetlabs-vcsrepo`](https://github.com/puppetlabs/puppetlabs-vcsrepo) (`5.2.0`)
Welcome to #JulyOT!
Tags: julyot, iot, cloud, beginners
Published: 2022-07-01 15:22:54

---
title: Welcome to #JulyOT!
published: true
date: 2022-07-01 00:00:00 UTC
tags: julyot,iot,cloud,beginners
canonical_url: https://JulyOT.dev/blog/01-julyot-kickoff
cover_image: https://JulyOT.dev/assets/images/JulyOT-banner-1-welcome-62a0080c482ed6ee0b4f9233bffc4aa6.png
series: JulyOT 2022
---

#JulyOT 2022 is finally here, and we are excited to share 31 days of IoT goodness throughout this month.

Each weekday we will be publishing one or more articles here all grouped into the following themes:

- Beginners, makers, and students
- Embedded development
- AI on the Edge
- Learning and certifications

Some will be full blog posts, others will direct you to videos, GitHub repos, other blogs, or code samples.

Check back here every day for more IoT goodness.

## In this post[​](#in-this-post "Direct link to heading")

- [**Upskill by joining the IoT Cloud skills challenge**](#iot-cloud-skills-challenge)
- [**Learn IoT with IoT For Beginners**](#iot-for-beginners)
- [**Digital swag**](#digital-swag)

## IoT Cloud Skills Challenge[​](#iot-cloud-skills-challenge "Direct link to heading")

Want to become a subject matter in the IoT Domain? Take the [Microsoft Cloud Skills Challenge](https://docs.microsoft.com/learn/challenges?id=261fd583-fa7b-4b1f-86eb-6a52b5468a23&wt.mc_id=eventspg_16482_webpage_reactor) - skill yourself up in 31 days and complete the Cloud Skills Challenge. This starts 1st July, so sign up now.

## IoT For Beginners[​](#iot-for-beginners "Direct link to heading")

IoT for beginners is a free, open source, 24-lesson IoT curriculum. The first lesson is live-streamed today from the Microsoft Reactor. Watch it live at 9am Pacific Time, or catch the recording on the Microsoft Reactor YouTube channel.

[![IoT for beginners - Lesson 1, Introduction to IoT, Friday July 1st, 9am Pacific Time](https://www.meetup.com/_next/image/?url=https%3A%2F%2Fsecure-content.meetupstatic.com%2Fimages%2Fclassic-events%2F504717110%2F676x380.webp&w=3840&q=75)](https://www.meetup.com/Microsoft-Reactor-Redmond/events/286453689/) 

[Register on MeetUp](https://www.meetup.com/Microsoft-Reactor-Redmond/events/286453689)

[Watch on YouTube](https://aka.ms/IoTforbeginnersLess1)

Learn more about IoT for Beginners on the official [IoT for Beginners GitHub repo](https://aka.ms/iot-beginners).

## Digital swag[​](#digital-swag "Direct link to heading")

Check out [digital swag](/digitalswag) page for #JulyOT social media images, sticker templates, desktop backgrounds and video chat backgrounds.
Weather me this
Published: 2022-06-30 23:37:24

Have you ever left the house for school and unfortunately ended up getting rained on? well if that hasn't happened to you yet, lucky you!
I on the other hand have been rained on a bunch of times and it absolutely ruined my day.I soon realized the only way i could avoid this was by creating a cool weather app that is super easy to use.
Want to see what I came up with?Click on the link below
https://kanyi-a.github.io/phase-1-project2/
Deno Deploy
Tags: deno, tutorial, spanish, typescript
Published: 2022-06-30 23:20:12

Una nueva forma de hacer deploy de nuestras aplicaciones (Tiene versión free 🤑).

> SPOILER: Para este tutorial no necesitas instalar Deno.

## Pequeña Introducción
Para los que no lo tenían en el radar.
Deno es un runtime (como Node.js) de JavaScript y TypeScript desarrollado por el mismísimo Ryan Dahl, creador de Node.js. Hay varias cosas que este señor [lamenta de Node.js](https://www.youtube.com/watch?v=M3BM9TB-8yA) y con Deno viene a "reparar" por decirlo de alguna forma, y lo digo entre comillas por que me gusta mucho Node.js.

## Que es Deno Deploy? 🦕🚀
[Citando a ellos mismos](https://deno.com/deploy/docs)
Deno Deploy es un sistema distribuido que permite ejecutar JavaScript, TypeScript y WebAssembly cerca de los usuarios, en el borde, en todo el mundo. Profundamente integrados con el tiempo de ejecución V8, nuestros servidores proporcionan una latencia mínima y eliminan las abstracciones innecesarias. Puedes desarrollar tu script localmente utilizando la CLI de Deno, y luego desplegarlo en nuestra infraestructura gestionada en menos de un segundo, sin necesidad de configurar nada.

Los [precios](https://deno.com/deploy/pricing) son increíbles, me vuela la cabeza que sea tan barato.

## Pero de verdad es tan sencillo? 🤔
Intentemos levantar un servidor con solo 2 líneas de código.

Requisitos:
- [Deno CLI](https://deno.land/#installation) (OPCIONAL)
- [Github](https://github.com/)
- 5 min (Tal vez menos)

## Let's do it ⚡
```typescript
// server.ts
import { serve } from "https://deno.land/std@0.146.0/http/server.ts";

serve(() => new Response("Hello Deno"));

```
> Usa `deno run --allow-net server.ts` para probarlo en local. Si tienes instalado Deno.

Subámoslo a un [repositorio en Github](https://github.com/ushieru/deno-http-hello-world).

Inicia sesión en [Deno Deploy](https://deno.com/deploy) con Github.

Crearemos un nuevo proyecto y vamos a desplegar con Github.

![empty deno deploy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/splxonkmgfiahw2b8uez.png)
 
Le decimos desde que repositorio, en que rama, con que archivo, le ponemos algún nombre a nuestro proyecto y le damos a **Link**.

![deploy with github](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a8iyrd3b47d5iyk0lozj.png)

## Ya lo tenemos 🚀🚀
 
Esto hace deploy en segundos y te da una URL para que visites tu sitio: https://ushieru-deno.deno.dev/

![deploy with deno deploy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iupt8vovklvus8bje94n.png)

Que te pareció? Cambiarias Node.js + Heroku por Deno + Deno deploy?

Hacemos un API? integramos JWT? GraphQL? SSR JSX? Cuéntame en los comentarios.

Y Happy Hacking 🎉👨‍💻
Web Share API: how to use device native share
Tags: javascript, web, share, native
Published: 2022-06-30 23:13:14

---
title: Web Share API: how to use device native share 
published: true
description: See how your web apps can use the share UI provided by system, as native apps do!
tags: javascript, web, share, native
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vf077z81fiyzo4yutthm.png
---

Hey Dev,

Did you know that Web apps can also use the system provided share UI, as native apps do?

Yes, you can! Using the `navigator.share()` method of the **Web Share API** in any Web application.

Let's see how!


## Code

```
var btn = document.getElementById("webshareapiButton");

btn.addEventListener("click", function () {
  navigator.share({
    url: document.URL,
    title: document.title,
    text: "Lorem ipsum..."
  });
});
```

It's very simple! But have some requirements to works...

---

## Requirements

- Works only on websites running over **HTTPS**. But works on local development (localhost) for tests.
- Works only in response to some **user action** (such as a "click" event). To prevent abuses.

---


## Demo

I made a simple demo code comparing common social media share buttons (links based) and a button calling Web Share API.

Note that some Desktops devices (like Windows, Linux and macOS) have no native share UI. Please, try to click on the button bellow using your Mobile device, to view the native share UI.

{% codepen https://codepen.io/lucasm/pen/GYBmoR %}

Don't forget to include a fallback logic to unsupported devices, like this:

```
if (navigator.share) {
  // Web Share API is supported, include code here
} else {
  // fallback code
}
```

---

## Conclusion

Now you know how to use **Web Share API** on any Web application.

To know more details about the Web Share API, like the current Browsers compatibility, see the links bellow.


### References 
- [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share)
- [Web.dev](https://web.dev/i18n/en/web-share/)
- [CSS-Tricks](https://css-tricks.com/how-to-use-the-web-share-api/)

---

I hope you enjoy it!

Follow me on [Twitter](https://twitter.com/lucasmezs)
Sponsor my open source projects on [GitHub](https://github.com/sponsors/lucasm)
Mi primer aplicación web utilizando el framework Flask de Python
Tags: flask, webdev, python, beginners
Published: 2022-06-30 22:55:35

Flask es un microframework de Python mediante el cual podemos construir aplicaciones web de forma muy sencilla.

En este post vamos a crear nuestra primer aplicación utilizando Flask.

Lo primero es instalar Flask mediante pip.
```
pip install flask
```
Ahora vamos a crear un archivo de Python llamado <u>app.py</u> y después importaremos Flask.
```
from flask import Flask
```
Ahora toca crear una instancia de Flask para nuestra aplicación web.
```
app = Flask(__name__)
```
Debemos definir las rutas de nuestra aplicación web, en este caso voy a definir un index en raíz.
```
@app.route('/')
def index():
    return 'Mi primer aplicación web con Flask!'
```
Después crearemos el lanzador de nuestra aplicación web.
```
if __name__ == '__main__':
    app.run()
```
Y para finalizar ejecutamos nuestro archivo <u>app.py</u>.
```
python app.py
```
Si todo sale bien, tendremos nuestra primer aplicación web ejecutándose en 127.0.0.1:5000