teleren/devto huggingface dataset:
First project with Html, JavaScript, and CSS
Published: 2022-12-09 19:14:16

 This was my first coding project and it offered a lot of challenges and new learning experiences building a website. Our website features an extensive collection of delicious drinks, each with its own ingredients and instructions for making it. The user can browse the available drinks by clicking on their images, and when a drink is selected, its name, ingredients, and instructions are displayed on the page.

In addition to the core functionality of displaying the drinks and their details, our website also includes two fun modes that users can toggle on and off: party mode and dark mode. When party mode is activated, the background color of the page changes to a random color every second, creating a lively and festive atmosphere. Dark mode, on the other hand, inverts the colors of the page to create a "dark" look, which can be easier on the eyes in low light environments.

The code that powers our website is written in JavaScript and makes use of the Document Object Model (DOM) to access and manipulate the elements on the page. We use the DOM to obtain references to the necessary elements, such as the images of the drinks, the form for adding new drinks, and the buttons for activating party and dark mode.

One of the key functions in our code is handleClick, which is called whenever a user clicks on one of the drink images. This function first clears the main container on the page, and then it creates and appends an img element representing the selected drink's image. It also updates the text of the h1 and h4 elements to display the drink's name and instructions, respectively. Additionally, the function calls the displayIngredient function for each of the drink's ingredients, which creates and apples an li element for each ingredient to the ingredientsContainer element on the page.

Another important function in our code is handleSubmit, which is called when a user submits the form for adding a new drink. This function takes the values entered into the form and uses them to create a new object representing the drink. The new drink is then added to the page by calling the displayFirstDrink and displayDrinks functions, which create and append the necessary elements to the page. The displayFirstDrink function is similar to the handleClick function, in that it creates and appends an img element for the new drink and updates the h1 and h4 elements to display the drink's name and instructions. The displayDrinks function, on the other hand, simply creates and appends an img element for the new drink to the ul element that contains all of the available drink images.

In conclusion, our website is a great resource for anyone looking to learn about and make delicious drinks. The ability to add new drinks and the fun party and dark mode features make it a unique and engaging experience for users. Whether you're looking to impress your friends with a new drink recipe or simply want to browse some tasty options, our website has you covered.
SPVM 0.9665 is released
Tags: perl, spvm, beginners, programming
Published: 2022-12-09 23:36:17

<a href="https://metacpan.org/pod/SPVM">SPVM</a> 0.9665 is released.

## New Features and Enhancement

<a href="https://github.com/yuki-kimoto/SPVM/blob/master/Changes">Changes</a>

```
0.9666 2022-12-16
  [Bug Fix]
    * Fixed the bug that SPVM don't work on Windows Server 2020/2022.
  [Prerequirement Changes]
    * SPVM needs ExtUtils::CBuilder 0.280236+.
  [New Features]
    * The string in the config mode allow "-"
      Foo.my_mode-azAZ09.config
  [Changes]
    * Added --no-build-spvm-modules option to Makefile.PL that is generated by the spvmdist command.
    * Added --meta option to Makefile.PL that is generated by the spvmdist command.
    * Changed the Name, Usage, Description that is generated by the spvmdist command.
    
      =head1 Name

      SPVM::$class_name - foo

      =head1 Description

      C<SPVM::$class_name> is the L<SPVM>'s C<$class_name> class.

      =head1 Usage

        use $class_name;
    * Removed cpanm from MANIFEST.skip that is generated by the spvmdist command.
  [Build Process Improvement]
    * Added --no-build-spvm-modules option to Makefile.PL.
    * Added --no-precompile-tests option to Makefile.PL.
    * Added --meta option to Makefile.PL.
  [Test Improvement]
    * Solo tests use spvmcc command.

```

## For Programming Beginners

### What Is SPVM?

SPVM is a static typed programming language that can be installed from Perl/CPAN.

### How potential dose SPVM have?

Growth is expected in the fields of Bio Tech, AI/ML, Apple/iPhone/iPad Apps, Google/Android Apps, IoT Device, Connected Car, Smart Device, Smart Home, etc.

This is because SPVM can produce an executable file that supports cross platforms and make easy to calculate arrays and bind C/C++ and Nvidia/GPU/cuda.
Ask Me Anything w/ VP of Deal Strategy & Monetization
Tags: eventsinyourcity, kubernetes, monitoring
Published: 2022-12-09 23:29:28

Hello Dev Community! 

You ask, we answer! Join us for a Reddit AMA with Umber Singh, VP of Deal Strategy & Monetization, and his team at New Relic.

📍 r/DevOps https://lnkd.in/g8QZ628z
📅 Dec 14, 10 am-12 pm PT
❔ Kubernetes, network monitoring, log management, and getting started with o11y

See you there!
Has a Company Ever Rescinded Your Offer Letter?
Tags: anonymous, career
Published: 2022-12-09 23:17:01

_This is an anonymous post sent in by a member who does not want their name disclosed. Please be thoughtful with your responses, as these are usually tough posts to write. Email sloan@dev.to if you'd like to leave an anonymous comment or if you want to ask your own anonymous question._ 

***

So I was contacted by [PandaDoc](https://www.pandadoc.com/) because they were to expand their software team.

Since they don't have offices on my country. They used a third party ([deel](https://www.deel.com)) for managing the legal aspect.

On Monday I received the offer letter through this third party:

![Offer letter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uwh8kcn3wggjbw5f46c7.png)

But didn't receive email from the recruiter.

I pinged her and we scheduled a meeting on Thursday.

In the meantime, I booked train tickets. My manager lives in a different city (~3h by train) and I wanted to give him the letter personally. Love the details.

The meeting with PandaDoc's HR; she told me that despite of they were extremely happy with my selection process - nothing but positive feedback - they were cancelling the offer.

She explained that they were entering in hiring freeze. I wasn't supposed to receive the offer letter. "_I'm sorry_".

Since Monday, I've already changed job. I mean mentally. This is the worst part. I'm not focused on my current job at all.

Cancelling an offer once I've received the letter is the most dirty thing I've suffered in a selection process.

Has anyone else experienced something similar? If so, would you be willing to share your experience?

Thanks for reading.
why I cannot get the domain names out of a certificate in nodejs?
Tags: help, javascript, node
Published: 2022-12-09 23:16:14

As I ask in [stackoverflow](https://stackoverflow.com/q/74694498/4706711) I try to mane a multi-certificate https server.


```
const fs = require('fs');
  const { exit } = require('process');

  let https;
  try {
    https = require('node:https');
  } catch (err) {
    console.log('https support is disabled!');
  }
  
  const cert_dir = '/etc/myapp/certs';
  const secureContext = {}
  
  fs.stat(cert_dir,(err,cb) => {
    if(err){
        console.log(err);
        exit(-1);
    }

    fs.readdir(cert_dir,(err, files) => {
        if (err){
            console.log(err);
        } else {
            files.filter(item => {
                return path.extname(item)=='.cert'
            }).forEach(file => {
                console.log(file);
                const cert = path.join(cert_dir,file);
                const key = path.join(cert_dir,(path.basename(file,".cert")+".key"))

                fs.stat(key, (err, stat) => {
                    if(err == null){
                        const x509 = new X509Certificate(fs.readFileSync(cert));
                        console.log("cert Info",x509);

                        // get domain here
                    }
                });
            });
        }
    });

  });

  const options = {
    SNICallback: function (domain, cb) {
        if (secureContext[domain]) {
            if (cb) {
                cb(null, secureContext[domain]);
            } else {
                // compatibility for older versions of node
                return secureContext[domain]; 
            }
        } else {
            throw new Error('No keys/certificates for domain requested');
        }
    },
    // must list a default key and cert because required by tls.createServer()
    key: fs.readFileSync('../path_to_key.pem'), 
    cert: fs.readFileSync('../path_to_cert.crt'), 
  };
  
  const server = https.createServer(options,handle);
  server.listen(449);
```

But I cannot find a way to match a certificate by its domain. DO you know how I can find the domain out of random certificate?

I mean in Java I am able to do so:
https://stackoverflow.com/a/14020952/4706711

But why not in nodejs (despite being different and complete opposite)
Avent of Code - Day 09 - Rope Bridge
Tags: aoc, adventureofcode, programming, 2022
Published: 2022-12-09 23:03:32

[Advent of Code](https://adventofcode.com/) occurs at Dec 01 to 25 where each day, you will need to solve a puzzle. It is Festival and the problem statement is mostly related to Christmas.

## Day 09  - Rope Bridge
https://adventofcode.com/2022/day/9


![image.png](https://cdn.steemitimages.com/DQmVE6km4rniEHEaWH5Amjv4bVkxuNBURCbYwwhSGd44mc3/image.png)

### Q1
```python
import sys

file1 = open(sys.argv[1], "r")

seen = set()

H = (0, 0)
T = (0, 0)
seen.add(tuple(T))
prevH = H

while True:
        line = file1.readline()
        if not line:
                break
        a, b = line.strip().split()
        for _ in range(int(b)):
                prevH = H
                if a == "R":
                        H = (H[0], H[1] + 1)
                elif a == "U":
                        H = (H[0] - 1, H[1])
                elif a == "L":
                        H = (H[0], H[1] - 1)
                elif a == "D":
                        H = (H[0] + 1, H[1])

                if abs(H[0] - T[0]) <= 1 and abs(H[1] - T[1]) <= 1:
                        continue
                T = prevH
                seen.add(tuple(T))

print(len(seen))
```

### Q2
```python
import sys
from collections import deque
from math import inf

file1 = open(sys.argv[1], "r")
seen = set()

snake = [(0, 0) for _ in range(10)]
seen.add(snake[0])

def get_near(A, B):
        rr, cc = A
        r, c = B
        def dis(r0, c0, r1, c1):
                return abs(r0 - r1) + abs(c0 - c1)
        D = inf
        for dr in range(-1, 2):
                for dc in range(-1, 2):
                        if dr != 0 or dc != 0:
                                d = dis(rr + dr, cc + dc, r, c)
                                if d < D:
                                        D = d
                                        ans = (rr + dr, cc + dc)
        return ans


while True:
        line = file1.readline()
        if not line:
                break
        a, b = line.strip().split()
        for _ in range(int(b)):
                x = snake[-1]
                if a == "R":
                        H = (x[0], x[1] + 1)
                elif a == "U":
                        H = (x[0] - 1, x[1])
                elif a == "L":
                        H = (x[0], x[1] - 1)
                elif a == "D":
                        H = (x[0] + 1, x[1])
                snake[-1] = H
                for i in range(8, -1, -1):
                        if (abs(snake[i][0] - snake[i + 1][0]) <= 1) and abs(snake[i][1] - snake[i + 1][1]) <= 1:
                                break
                        snake[i] = get_near(snake[i], snake[i + 1])
                seen.add(snake[0])

print(len(seen))
```

Q1 is basically [a snake game](https://helloacm.com/static/game/snake/). However, the Q2 is tricky - the body movement needs to be based on the rules, and not just follow its previous piece.


<hr/>

### [Steem](https://steemyy.com) to the Moon!
[CSS Tricks] : Changing the default box model
Tags: css, tutorial, webdev, beginners
Published: 2022-12-09 22:49:56

One common trick in CSS is to use the box-sizing property to change the default box model for an element.

By default, the box model in CSS defines the dimensions of an element as the sum of its content, padding, and border. This means that if you specify a width and height for an element, the actual dimensions of the element will be larger than the specified values, due to the space occupied by the padding and border.


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



However, you can use the box-sizing property to change this behavior, and make the dimensions of an element include its padding and border. This can be useful if you want to specify the dimensions of an element accurately, and avoid having the dimensions of the element change due to the padding and border.

Here is an example of how you can use the box-sizing property to change the box model for an element:

```js
.my-element {
  box-sizing: border-box;
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 10px solid black;
}
```

In this example, the box-sizing property is set to border-box, which means that the dimensions of the element will include its padding and border. This means that the actual dimensions of the element will be 300px x 200px, even though the padding and border add an additional 40px to the width and height of the element.

By using the box-sizing property, you can easily control the dimensions of an element, and avoid unexpected changes to the layout of your web page due to the padding and border of the element.
[How to] use CSS Variables in React Component
Tags: react, css, javascript, tutorial
Published: 2022-12-09 22:42:59

To use CSS variables (also known as "custom properties") in React components, you can define the variables in a separate CSS file, and then use the style attribute in your React components to reference and apply the variables.

Here is an example of how you can use CSS variables in a React component:

First, define the variables in a separate CSS file, such as styles.css:

```css
:root {
  --primary-color: #f1f1f1;
  --secondary-color: #d1d1d1;
}
```

Then, in your React component, import the CSS file and use the style attribute to reference and apply the variables:

```
import './styles.css';

function MyComponent() {
  return (
    <div style={{
      backgroundColor: 'var(--primary-color)',
      color: 'var(--secondary-color)'
    }}>
      This is my component
    </div>
  );
}
```

In this example, the CSS variables are defined in the :root selector, which means that they are available to all elements on the page. The style attribute in the React component is used to reference and apply the variables to the div element, using the var() function.

By using CSS variables in this way, you can easily reuse and manage the styles in your React components, and make it easier to maintain and update your CSS styles.
How To Integrate Google Calendar API with Laravel
Tags: laravel, webdev, api, googlecloud
Published: 2022-12-09 21:58:56

Many applications need to integrate their application with Google or Outlook calendars. Reasons can be different, such as obtaining free dates for scheduling appointments in CRM or combining several calendars in one application, and others.

## Introduction

If you have experience with PHP and Laravel you can easily do it. 

This article gives you a basic understanding of how Google API works, useful source code and a step-by-step guide on how to integrate Google calendar into your application and set up synchronization.

## Enabling Google API
1. Go to the [Google API Console](https://console.developers.google.com/).
2. Select an existing project from the projects list, or click **NEW PROJECT** to create a new project.
![create a new project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tebjfimw2la4js6kw7aj.jpg)
3. Select the newly created project and _ENABLE_ to the [Google Calendar API](https://console.cloud.google.com/apis/library/calendar-json.googleapis.com) in APIs & Services section.
4. Сreate a key pair by clicking **Create credentials** by type OAuth Client ID.
![Create credentials](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wy7g9si8j1cwizm2mull.jpg)
5. Once created, you will receive an **Client ID** and **Client Secret**. Save `client_secret_*.json` file, as you will need them later.
6. [Add a test user](https://console.cloud.google.com/apis/credentials/consent) . Google says

> While publishing status is set to "Testing", only test users are able to access the app. Allowed user cap prior to app verification is 100, and is counted over the entire lifetime of the app.

![Add a test user to access](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nt59ki0jqp9tb4jfnz3z.jpg)

## Conclusion
This concludes the first part of our integration. In the [next article](https://dev.to/dnsinyukov/how-to-integrate-google-calendar-api-and-friendship-with-laravel-part-2-48ba) we will create an application that will authenticate with OAuth 2 and retrieve & sync calendars.

See you soon ..

## Related links:
- [Google API Reference](https://developers.google.com/calendar/api/v3/reference)
- [How To Integrate Google Calendar API and friendship with Laravel. Part 2](https://dev.to/dnsinyukov/how-to-integrate-google-calendar-api-and-friendship-with-laravel-part-2-48ba)
Skeletons and Sprites!
Tags: gamedev, godot
Published: 2022-12-09 21:55:19


When I first started working on this project I had some experience with sprite sheets. I did a quick test scene with an animated sprite using a sprite sheet and thought I understood what I needed and proceeded to work on the rest of the game leaving the sprite work for later. As it turned out, making an animated 2d sprite in a 3d game was not as trivial as I had thought. As mentioned previously, I want to just be able to feed a sprite "atlas" of some kind to the game (maybe from an NFT!) and have it just show up in the game for the random student selection when playing a level. To get there in 3d, I needed to make the Sprite3d in Godot have a viewport to a 2d scene that contained the animation. This seems to work, but hopefully it isn't too inefficient... it feels a little hackey! But very cool that Godot lets you do this! Lots of Inkscape and Gimp work this week with me trying to be an artist drawing this person. 

I added some brick to the camera facing part of the building so that the walls look less thin and built a simple Student Editor to my level designer: 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ie5u0inf8j8pby9rvgk.jpg)

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

You can catch a glimpse of a green "skeleton" student above. This was me playing with using multiple student designs. It is so awesome to be able to make an animation with bones and then stick the texture on top so I can just draw the limbs and the animations are built into the game without a huge sprite sheet with every gesture for every character design.
HTML canvas, web components and pianos.
Tags: javascript, piano, html, webcomponents
Published: 2022-12-09 21:53:23

---
title: HTML canvas, web components and pianos.
published: true
description: What is a web component and how can it help me?
tags: javascript,piano,html,webcomponents
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t2eyzp2w84u2ifrxajcu.png
# Use a ratio of 100:42 for best results.
# published_at: 2022-12-09 21:07 +0000
---

If you've ever thought about starting to code a music web application, chances are you've needed a piano keyboard in your HTML.

Notice how little code is needed to add a keyboard to an HTML page:

``` html
<html>
  <body>
    <piano-keyboard height="100" width="800" octaves="5"></piano-keyboard>
  </body>
  <script src="https://cdn.jsdelivr.net/gh/rafapaezbas/piano-keyboard/piano-keyboard.js"></script>
</html>
```

`<piano-keyboard>` ? That tag doesn't exist! No problem, web components to the rescue!

If you don't know what a web component is, let me explain quickly: a web component is a fully customized html element, but it's just as easy to use as any standard web element. You can see a good tutorial following this [link](https://www.webcomponents.org/introduction).

Or maybe you are interested in seeing the [full code of the component.](https://github.com/rafapaezbas/piano-keyboard)

A calendar, a knob or a writing keyboard are good candidates to create a web component due to their reusability. Create the component and reuse or share the code. Also don't be afraid that the component's logic will interfere with your application's logic, this logic is fully encapsulated! A web component can only communicate with its parent by emitting events.

A simple example:

``` js
// hello-world-component.js

window.customElements.define('hello-world', class HelloWorld extends HTMLElement {
  builder () {
    super()
    this.root = this.attachShadow({ mode: 'open' })
  }

  async connectedCallback() {
      this.dispatchEvent(new CustomEvent('hello-world-event, { detail: { message: 'hello word!' }, bubbles: true, composed: true }))
  }
}
```

To include the component in your HTML page just add the script:

``` html
<html>
  <body>
    <hello-world></hello-world>
  </body>
  <script src="hello-world-component.js"></script>
  <script>
    document.querySelector('hello-world').addEventListener('hello-world-event', (e) => {
      console.log(e.detail.message))
    })
  </script>
</html>
```

It's that easy to create your own web component!

Of course, the combination of web components and HTML canvas offers endless possibilities. It's easy to imagine a collection of components that makes building and maintaining web applications truly modular.