teleren/devto huggingface dataset:
Using environment variables with SvelteKit
Tags: svelte, sveltekit, webdev
Published: 2021-12-04 17:56:24

Because SvelteKit comes with Vite, using `.env` may be a bit unfamiliar. There are two ways to go about it, either with Vite's `import.meta.env` out of the box or with the usual suspect `process.env` that requires a bit more setting up.

**You may also be interested in**
[SvelteKit + TailwindCSS](https://dev.to/nostro/using-tailwindcss-with-sveltekit-25i6)
[SvelteKit + Heroku](https://dev.to/nostro/deploying-to-heroku-with-sveltekit-3350)

### Using `import.meta.env` 

Full information is available in the [official docs](https://vitejs.dev/guide/env-and-mode.html) but the gist of it is that you should prefix any variable that you want exposed to your client with `VITE_`

It means `import.meta.env.FOO` will not be exposed client-side, while `import.meta.env.VITE_FOO` will be. 

`.env`
```
FOO=BAR
VITE_FOO=BAR
```

`browser`
```js
console.log(import.meta.env.FOO)
// undefined


console.log(import.meta.env.VITE_FOO)
// BAR
```

### Using `process.env`

If for some reason you still want to use `process.env`, because you're used to it or you don't feel like renaming all your variables `VITE_SOMETHING`, you can also do it with the `env-cmd` package.

```powershell
npm i env-cmd
```
Then modify your `config` in `svelte.config.js`

`svelte.config.js`
```js
const config = {
    kit: {    
        vite: {
            define: {
                'process.env': process.env,
            },
        },
    },
};
```

And finally add `env-cmd` to your `dev` script

`package.json`
```js
{
    "scripts": {
        "dev": "env-cmd svelte-kit dev",
        },
}
```

And now you'll be able to access `process.env` in your client

`.env`
```
FOO=BAR
```

`browser`
```js
console.log(process.env.FOO)
// BAR
```
Integrate PayPal API
Tags: webdev, javascript, beginners, tutorial
Published: 2021-12-04 20:53:52

**This article is about integrating [Paypal API](https://developer.paypal.com/home)**

As a developer, integrating APIs into your project is imperative. I recently integrated PayPal's payment gateway on a side project and plan on sharing how to do it.

PayPal is well known for online payments. Its credibility and developer experience have convinced many users to use it. 
The basic API integration can be done in two different ways. The first one is *client-side*. And the second one is *server-side* integration.

## Implementing on the Client Side
If I talk about the reading resources:

A developer won't need anything further than visiting this page. I really don't think you need anything else. [_Documentation_](https://developer.paypal.com/docs/business
/checkout/set-up-standard-payments/integrate/)

Reasons to consider this resource-

- The workflow is very well explained.
- The code sample is available
- Steps to test out provided.

Talking about the video resources:

{% youtube l3e1uzMhiV8 %}

- This is a pretty short and concise video. 
- It is from the official channel of Paypal.
- This video very well explains the concept of different ways to integrate on any website.
- Covers all the cases and is easy to follow up.

There is one more resource, that developers can follow up. I am not promoting their channel in any manner but I liked their flow and ease to follow.

- [Paypal Official Source](https://youtu.be/T1q7JipHR48?list=LL)

## Implementing on the Backend Server

I will not be getting into the benefits of applying on Client or Backend. That is up to the developer's choice of preference. If I had to recommend one, then I would have to say an easy way to implement would b the first one.

Getting on to the resource, this video takes care of most of the integration:

{% youtube DNM9FdFrI1k %}

API integration I would say. I used this node module [paypal-checkout](https://www.npmjs.com/package/paypal-checkout)

- Installing it was very easy.
- The npm page was
also very helpful and informative.
- This resource has Video tutorials.
- Demo app space and much more cool stuff.

## Reviews of API Integration:

This was all enough for integration I think. Moving ahead, I will be sharing my reviews of my experience. Learning was also easy as I expected, the official support and documentation were very helpful. But the
PayPal's youtube channel is also of great help. I got many good articles around it too. Many fun blogs on the dashboard as well.

Thanks for reading my article 😊
Hanukkah lighting in WebXR
Tags: webxr, html, vr, showdev
Published: 2021-12-05 09:21:18

To celebrate Hanukkah (חנוכה), I made a WebXR scene where the user can pan, walk around (WASD), and/or enter VR in the Western Wall (הכותל המערבי) using AFrame, an HTML/JS framework for creating WebXR experiences.

{% github aframevr/aframe %}

To make a WebXR scene, I used the webcomponents proved by AFrame to create a scene with 

- a 360 image as the sky
- a number of cylinders as candles
- a number of gltf models for flames and the hanukiah (special thanks to [Santiago Shang](https://skfb.ly/6VLIn) for the CC licensed beautiful GLTF model)
- and some english text (doesn't support hebrew / RTL as far as I can tell)

Here is the [live demo](https://hanukah-aframe.barakplasma.repl.co/) (click the ▶️ to see it in your browser, desktop or mobile)
{% replit @barakplasma/Hanukah-AFrame %}

Future plans involve adding interactivity, so that using a Quest 2 controller / pointer lets you light each candle, or to integrate [hebcal](https://github.com/hebcal/hebcal-es6) so that it can automatically light the right number of candles.
Especialista SEO Qué es y cómo convertirse
Published: 2021-12-05 14:03:46

## [Experto SEO: especialista en seo y Wordpress](https://estandar.io/como-convertirse-en-un-especialista-seo-en-el-proximo2022/)

Un especialista seo es una persona con habilidades y técnicas específicas que son eficaces para mejorar el posicionamiento de una página web en los resultados de las búsquedas de los motores de búsqueda. Una vez que uno domina los conocimientos necesarios para asumir la tarea, comienza a trabajar en el sitio web de los clientes para mejorar la visibilidad de la misma en los resultados de búsqueda de los motores de búsqueda. Todos los especialistas seo tienen en común su capacidad de mejorar la visibilidad de un sitio web en las búsquedas de los motores de búsqueda. Sin embargo, existen ciertas diferencias entre los especialistas seo que van desde el tipo de conocimientos que poseen hasta el equipo que tienen. Esos son algunos de los principales tipos de especialistas seo existentes hoy en día:

Analista de contenido

Analista de contenido

Un analista de contenido es un especialista seo que se encarga de analizar la información de los sitios web de los clientes para determinar si está en conformidad con las normas y las demandas de los motores de búsqueda. Se dedica a comprobar si la información de la página web contiene la información que los usuarios esperan encontrar.

Consultor SEO

Un consultor SEO es un especialista seo que tiene una amplia gama de conocimientos técnicos y procedimientos que le permiten mejorar la visibilidad de cualquier sitio web en los resultados de las búsquedas de los motores de búsqueda. El consultor SEO es capaz de analizar los detalles técnicos de un sitio web y puede ayudar al cliente a mejorarlos para que el sitio web sea más visible y genere más tráfico.

## [Experto SEO: especialista en seo y Wordpress](https://estandar.io/como-convertirse-en-un-especialista-seo-en-el-proximo2022/)

Director de marketing digital

Un director de marketing digital es un especialista seo que tiene la responsabilidad de manejar todo el proceso de posicionamiento en los resultados de búsqueda de motores de búsqueda. Tiene la responsabilidad de realizar la medición de la efectividad del sitio web del cliente y puede comunicarse con el equipo de diseño y desarrollo para mejorar la apariencia y el contenido del sitio web.

Especialista SEO

Un especialista SEO es una persona que domina las técnicas y los procedimientos específicos de posicionamiento en los resultados de búsqueda de motores de búsqueda. Está capacitado para realizar todos los procesos que conforman el posicionamiento en búsqueda de motores de búsqueda, desde la medición del tráfico en el sitio web hasta el desarrollo de técnicas de posicionamiento.
AutoML & AWS SageMaker Autopilot
Tags: aws, machinelearning, devops
Published: 2021-12-05 15:03:53


### what is the difference between auto machine learning and AWS SageMaker Autopilot?
____________________

***SageMaker Autopilot uses a transparent approach to AutoML***

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

In nontransparent approaches, as shown in the image below, we don’t have control or visibility into the chosen algorithms, applied data transformations, or hyper-parameter choices. We point the
automated machine learning (AutoML) service to our data and receive a trained model.


This makes it hard to understand, explain, and reproduce the model. Many AutoML solutions implement this kind of nontransparent approach. 

 ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tk1naat1o9uek55fxh06.jpg)
 
as you see, in many AutoML services, we don’t have visibility into the chosen algorithms, applied data transformations, or hyper-parameter choices.


_______________________

### SageMaker Autopilot documents and shares its findings throughout the data analysis, feature engineering, and model tuning steps.

SageMaker Autopilot doesn’t just share the models; it also logs all observed metrics and generates Jupyter notebooks, which contain the code to reproduce the model pipelines, as visualized in the image bellow 


The data-analysis step identifies potential data-quality issues, such as missing values that might impact model performance if not addressed. The Data Exploration notebook contains the results from the data analysis step. SageMaker Autopilot also generates another Jupyter notebook that contains all pipeline definitions to provide transparency and reproducibility. The Candidate Definition notebook highlights the best algorithms to learn our given dataset, as well as the code and configuration needed to use our dataset with each algorithm.



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p5msmfgq5bmngmvhktii.jpg)
SageMaker Autopilot generates Jupyter notebooks, features engineering scripts, and model code.



Resources : 
[Data science on AWS Book](https://www.oreilly.com/library/view/data-science-on/9781492079385/)
Best Google Fonts for your website
Tags: design, font, css, googlefont
Published: 2021-12-05 15:57:56

1. Merriweather
Eben Sorkin’s [Merriweather](https://fonts.google.com/specimen/Merriweather?sort=alpha&sidebar.open=true&selection.family=Headland+One&query=merriweather) is designed for optimal readability on screens. Merriweather’s large x-height boosts the font’s legibility, making it suitable for use in long texts as well as for headlines and titles. Merriweather currently has 8 styles: Light, Regular, Bold, Black, Light Italic, Italic, Bold Italic, Black Italic.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kzj3579agiit176m9m0y.png)

2. Assistant
This is another very versatile Google font. [Assistant](https://fonts.google.com/specimen/Assistant?sort=alpha) is a clean typeface and offers a generous 6 styles, from extra light to bold. The carefully-planned spacing between the letters create a font with great readability. This, combined with the abundant bold styles makes Assistant especially good for larger bodies.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7a85ghil89ie1xlhzd4u.png)

3. Poppins
[Poppins](https://fonts.google.com/specimen/Poppins/), created by the Indian Type Foundry, is an attractive, geometric sans-serif font for use in text or display contexts. It’s also the first font on our list to support the Devanagari system, which is used in over 150 languages including Hindi and Sanskrit.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1y0k878l206fuv4x1g17.png)

4. Caladea
[Caladea](https://fonts.google.com/specimen/Caladea?sort=alpha) is a modern and friendly Google font. Created from [Cambo](https://fonts.google.com/specimen/Cambo), Caladea offers 4 different styles to choose from. The font is practical not just in the sense that it has styles to highlight content, but also due to its reliable readability. Caladea works both for big and dramatic titles and small texts that don’t overwhelm readers.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yfml8afvfwtdgjydnj16.png)

5. Enriqueta
[Enriqueta](https://fonts.google.com/specimen/Enriqueta?sort=alpha) is a Google font that also brings a certain glamour to any page, but it’s special in its own way. This font has bold features that reminded our team of old-times, adding a Rockwell sort of vibe to the page. The best part? Enriqueta is very well-balanced, and even though it has strong visuals, it still delivers great readability – even in very small bodies!
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/af9arp4rtj77mvn12bfl.png)

thanks for reading...
Baloonza IT newsletters weekly digest #14
Published: 2021-12-05 17:49:07

IT-related topics and trends of the past week:

### startup, development, entrepreneurship

- [No one asked](https://app.baloonza.com/issues/9882)

- [One empty seat](https://app.baloonza.com/issues/9946)

- [Hacker Newsletter Daily - 11/30/21](https://app.baloonza.com/issues/9970)

- [Canva for video games](https://app.baloonza.com/issues/9977)

- [Virtual HQ](https://app.baloonza.com/issues/10021)

- [The bank of the metaverse?](https://app.baloonza.com/issues/10059)

- [Hacker Newsletter #581](https://app.baloonza.com/issues/10107)

### css, design, frontend, html, web development, javascript

- [CSS Animation Weekly #277](https://app.baloonza.com/issues/9933)

- [📝 [CSS-Tricks] 279: Houdini Is Not as Scary as You Think](https://app.baloonza.com/issues/9956)

- [🎨 doing neat things with the Paint API..](https://app.baloonza.com/issues/10025)

### marketing

- [🎓 Frame your product as the ‘gift’ in a bundle](https://app.baloonza.com/issues/9965)
 
### data science

- [Data Science Weekly - Issue 419](https://app.baloonza.com/issues/10100)

***
Bulk data deduplication
Published: 2021-12-06 09:51:05

Hi guys, I'm looking for some feedback: we’ve just built a new Custom Action in Procesio called Bulk Data Deduplication. Basically we've packed an entire SaaS into this action, designed to merge records or eliminate dupes coming from different sources in CRMs or other databases when you are working with high volumes of data. What do you think, is this something you'd find useful? Let me know of your feedback. 

You can find it in the Procesio left-hand [app dashboard](https://procesio.app/) under Beta.

{% youtube lmcVuM6rD5c %}
How to format HTML code
Tags: html
Published: 2021-12-06 15:35:37

Are you writing HTML Code? If yes then this article is especially for you because in this article I will show you how to beautify ugly, minified HTML code.

Most of the people like good looking codes including me because if code is written in a proper manner it is easy to understand.

Today in this article I will introduce [HTML Formatter](https://goonlinetools.com/html-formatter/)

![Html formatter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3451plr0yrmdoik4ruv0.png)

## Here is How to Format HTML Code?

1. First open [HTML Formatter] (https://goonlinetools.com/html-formatter/)
2. Click on clear button to clear demo code
3. Paste Minified HTML Code
4. Click on Format Button
5. Now click on copy button to copy formatted HTML Code

Thanks for reading this article, If you have any questions regarding this then feel free to ask in the comment box.

More HTML tools:
- [HTML Minifier](https://goonlinetools.com/html-minifier/)
- [Realtime html editor](https://goonlinetools.com/realtime-html-editor/)
- [HTML Viewer](https://goonlinetools.com/html-viewer/)
- [Source code viewer](https://goonlinetools.com/source-code-viewer/)

Also read : 

- [How to share code snippets easily](https://dev.to/goonlinetools/how-to-share-code-snippets-easily-2m46)
- [How to Beautify JSON Code?](https://dev.to/goonlinetools/how-to-beautify-json-code-221e)
- [How to Beautify Javascript Code?](https://dev.to/goonlinetools/how-to-beautify-javascript-code-3ole)
- [How to Beautify PHP Code?](https://dev.to/goonlinetools/how-to-beautify-php-code-ahd)
Type-safe JSON.parse() with joi
Tags: typescript, showdev, webdev, discuss
Published: 2021-12-07 17:03:23

As developers, we often interact with APIs and databases that return a response in `JSON` format. To parse that `JSON` response we have to reach for the `JSON.parse()` method. 
By default, `JSON.parse()` will return the object with type `any`. This means that we can simply declare the type of our object inline, like this:
```typescript
interface MyObject {
    key1: string;
    key2?: number;
    key3: boolean;
}

const jsonString = api.get()

const myObject: MyObject = JSON.parse(jsonString)
```
This would be sufficient if we were absolutely sure that `jsonString` is assignable to type `MyObject`. However, if for any reason the API sends us a different response, Typescript will not prevent us from misusing that response and potentially getting runtime errors.

To address this issue we can use a runtime data validator such as [joi](https://www.npmjs.com/package/joi):
```typescript
import { ObjectSchema, ValidationError } from 'joi';

export const typedParse = <TSchema>(
    jsonString: string,
    schema: ObjectSchema<TSchema>
): TSchema => {
    const {
        value,
        error,
        warning,
    }: { value: TSchema; error?: ValidationError; warning?: unknown } =
        schema.validate(JSON.parse(jsonString));
    // handle error and warning cases as needed
    if (error) throw error;
    if (warning) console.log(warning);
    return value;
}; 
```
Now we can import and use this reusable function anywhere we use `JSON.parse()` by providing the `JSON` string and the corresponding joi schema:
```typescript
import Joi from 'joi'
import { typedParse } from './util/typedParse.ts'

interface MyObject {
    key1: string;
    key2?: number;
    key3: boolean;
}

const jsonString = api.get()

const schema = Joi.object<MyObject>()
    .keys({
        key1: Joi.string().required(),
        key2: Joi.number().integer(),
        key3: Joi.boolean()
    })
    .required()

const myObject = typedParse(jsonString, schema)
```
This allows us to take advantage of all the type safety and autocompletion that Typescript offers when the API request matches what we expect, and at the same time prevents unexpected behavior when the API returns a different response.
Day 491 : Come Up
Tags: hiphop, code, coding, lifelongdev
Published: 2021-12-07 00:23:45

_liner notes_:
- Saturday : Got up early to finish putting together the radio show. Then made the trip to the radio station. Did the show, had a good time. Then drove the van to my spot, watched an episode of Cowboy Bebop. I was pretty tired and went to sleep. The recording of this week's show is at https://kNOwBETTERHIPHOP.com

![Radio show episode image of the cover and back of Davina's So Good song with the words Dec 4th 2021 Not My Biz Tax](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h1i1ul87nc8n4e1k524h.jpg)

- Sunday : Had my online study group ( https://untilit.works ). The time flew by! Got a few things done though, so I felt good and went right to bed.

- Professional : Ran into an issue building a demo for a blog post last week. So today, I went through the code and got it working. I'm taking another sample app and adding some Web Components. Got everything pretty much working and need to work on some styling.

- Personal : So I decided to take part in this developer event thing that if you deploy an application to Netlify (like a hosting company) in December, they will donate money to organizations that help people get into tech. As a person who participated in extra-curricular programs to help under represented people get in science, math and tech fields, I'm down to support. I have a demo that I did for a talk I gave earlier this year, so I am going to make it a full application and deploy it. I even bought a domain. Yes, another domain. haha.

![Overhead shot of an island in Thinadhoo, Maldives with the ocean surrounding a strip of land with a green lagoon in the center.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jt9x8ksx9cz15dvrrnuv.jpg)

Going to see how much I can get done with the Netlify project. I've never used it before, so this will be a good chance to learn it. Also, I want to update my website to remove the links to view the code for my side projects. I recently took down my GitLab instance because I got like a $300 bill from Google because I think my server that hosted my GitLab may have been hacked to do crypto mining. For whatever reason I couldn't view my GitLab instance. Definitely shut that server and others I was playing around with real quick! haha. If I don't have time to follow up with these servers, I have no business setting them up. haha The money I'll be saving from the servers, I'll be putting it into my side project so it can come up.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube plvaAYeYY5o %}
Starting with Terraform Provider | Prisma Cloud Compute
Tags: security, terraform, devops, tutorial
Published: 2021-12-08 22:02:49

Automating your security is crucial, especially for companies operating in the cloud! I have recently made a video tutorial on how to use Terraform provider for Prisma Cloud Compute. 

It would help anyone using Palo Alto Network's security platform to start building automation around their security practices.

{% youtube 9R3XWnl4EPs %}

I will include code snippets from this tutorial below:

**creds.json**

```json
{
  "username": "test",
  "password": "test",
  "console_url": "https://192.168.64.2:32677"
}
```

**main.tf**

```hcl
terraform {
  required_providers {
    prismacloudcompute = {
      source = "PaloAltoNetworks/prismacloudcompute"
      version = "0.1.0"
    }
  }
}

provider "prismacloudcompute" {
  config_file = "creds.json"
}

resource "prismacloudcompute_collection" "node_alpine" {
  name              = "node-alpine-collection"
  description       = "Collection for Node images based on Alpine"
  color             = "#68A063"
  application_ids   = ["*"]
  code_repositories = ["*"]
  images            = ["node:17-alpine3.12", "*/node:17-alpine3.12"]
  labels            = ["*"]
  namespaces        = ["*"]
}
resource "prismacloudcompute_ci_image_vulnerability_policy" "ruleset" {
  depends_on = [
    prismacloudcompute_collection.node_alpine,
  ]

  rule {
    collections = [
      prismacloudcompute_collection.node_alpine.name,
    ]
    disabled   = false
    effect     = "alert, block"
    grace_days = 30
    name       = "${prismacloudcompute_collection.node_alpine.name}-ci-policy"
    notes      = "CI policy for ${prismacloudcompute_collection.node_alpine.name}"
    only_fixed = true
    verbose    = false

    alert_threshold {
      disabled = false
      value    = 1
    }

    block_threshold {
      enabled = true
      value   = 2
    }

    cve_rule {
      description = "Ignore ansi-regex"
      effect      = "ignore"
      id          = "CVE-2021-3807"

      expiration {
        date    = "2022-01-06T06:00:00Z"
        enabled = true
      }
    }
    cve_rule {
      description = "Ignore busybox"
      effect      = "ignore"
      id          = "CVE-2021-28831"

      expiration {
        date    = "2022-01-06T06:00:00Z"
        enabled = true
      }
    }
  }

  rule {
    collections = [
      "All",
    ]
    disabled   = false
    effect     = "alert, block"
    grace_days = 30
    name       = "default"
    notes      = "Default policy for CI scans"
    only_fixed = true
    verbose    = false

    alert_threshold {
      disabled = false
      value    = 1
    }

    block_threshold {
      enabled = true
      value   = 2
    }
  }
}
```