teleren/devto huggingface dataset:
what does "literal" mean?? string literal? object literal? literal syntax???
Tags: webdev, javascript, programming, beginners
Published: 2023-10-16 18:50:40

Me too have wondered what is the meaning of literal that is shoved between text while the text itself makes sense. String literal they say, and I am wondering why not just say "string". Literal syntax of declaring objects !!

Okay, Okay, enough talk, more action (or technically... more talk).

Literal is a notation (way of writing) for representing values. It is the "literal" notation of representing values. And literal here means the same meaning we know it for i.e. literally.
Lets make it more clear.

`let a = "boboddy"`

a is a string.
"boboddy" is also a string.

What is the difference between the two.

One is a variable representing the string, the other is the "literal" way of representing the string.

SO variables and constants cant be string literals or any value literal.

```
let stringVar = String("something")
```

so `String("something")` here is a value right? and it is a string because the string method will return a string as an output (it will get stored to stringVar but we are not talking about the variable here, we are talking about `String("something")` as a value. It is a string but it is not a `string literal` because it is not a literal string notation, the literal string notation is "something")

and the same goes for the other kind of values.

`5` is an integer literal but `2 + 3` is not. Neither is `Number("5")`. They are integers (in the sense that their `2 +3 ` expression will evaluate to `5` and the same goes for the other but they are not integer literals)

You would often hear about the literal syntax of declaring an object. It is like that:

```
let car = {
    model: "BMW",
    year: 2012
}

```
because those curly braces and the way of writing the key value pairs is the literal syntax.

```
let car = new Object();
car.model = "BMW"
car.year = 2012

```
That is another way of declaring an object but it is not the literal way.

I hope this is clear now.

---

Thank you for taking the time to read this article. If you found it helpful, leave a like or a comment. If you have any questions, feel free to ask them down below.
My contribution to hacktoberfest
Tags: hacktoberfest23
Published: 2023-10-16 18:32:25

<!-- ✨This template is only meant to get your ideas going, so please feel free to write your own title, structure, and words! ✨ -->


### Intro
<!-- If you are new to the DEV community, introduce yourself and share a bit about why you joined DEV and your motivation to participate in Hacktoberfest this year. -->
As part of dev of 24 heures de l'INSA I make more MR to projects.

Here some MR I make : 

- https://gitlab.com/24-heures-insa/overrun-mono/-/merge_requests/2
- https://gitlab.com/24-heures-insa/overrun-mono/-/merge_requests/3
- https://gitlab.com/24-heures-insa/overrun-mono/-/merge_requests/4
- https://gitlab.com/24-heures-insa/overrun-mono/-/merge_requests/6
- https://gitlab.com/24-heures-insa/overbookd-mono/-/merge_requests/1732
- https://gitlab.com/24-heures-insa/prevente-api/oversales/-/merge_requests/123
- https://github.com/TCastus/TChelp/pull/39


### Background
<!-- Are you brand new to Hacktoberfest? What about coding in general? Tell us about how you got here -->
It's funny


### Pledge
<!-- Share with us a bit about your goals during your Hacktoberfest journey this month. Are you a contributor looking to hone your skills or a maintainer looking for some help on a new project? Let us know!  -->
Make many MR on october in differents repo
Structural Design Patterns
Tags: java, designpatterns, programming, tutorial
Published: 2023-10-16 18:20:21

Structural design patterns in Java are a category of design patterns that focus on the composition of classes and objects to form larger structures. 
These patterns help in creating relationships between objects, making your code more flexible and efficient. 
Here's a list of common structural design patterns in Java:

1. **Adapter Pattern:**
   - Allows two incompatible interfaces to work together.
   - Helps you make one class compatible with another without changing their existing code.

2. **Decorator Pattern:**
   - Lets you add new behaviors or responsibilities to objects dynamically.
   - Enhances an object's functionality without altering its structure.

3. **Composite Pattern:**
   - Composes objects into tree structures to represent part-whole hierarchies.
   - Clients can treat individual objects and compositions of objects uniformly.

4. **Bridge Pattern:**
   - Separates an object's abstraction from its implementation.
   - Helps avoid a "cartesian product" explosion of classes when dealing with multiple dimensions of variability.

5. **Proxy Pattern:**
   - Provides a placeholder for another object to control access to it.
   - Useful for lazy loading, access control, and logging.

6. **Facade Pattern:**
   - Provides a unified, simplified interface to a set of interfaces in a subsystem.
   - Makes it easier to use a complex system by providing a higher-level interface.

7. **Flyweight Pattern:**
   - Shares common objects efficiently to save memory.
   - Reduces memory consumption when dealing with a large number of similar objects.

8. **Command Pattern:**
    - Encapsulates a request as an object, thereby allowing for parameterization of clients with queues, requests, and operations.
    - Useful for implementing undo/redo functionality, or queuing requests.

These structural design patterns are used to organize and compose objects or classes in a way that enhances flexibility, maintainability, and efficiency in software systems. They help solve common design challenges and make your code more organized and manageable.


😍 If you enjoy the content, please 👍 like, 🔄 share, and 👣 follow for more updates!
Node 21 brings built-in WebSocket support
Tags: node
Published: 2023-10-16 18:19:32


Update 2023-10-17: Node 21 has now shipped with WebSocket support as predicted, read more:

https://nodejs.org/en/blog/announcements/v21-release-announce#built-in-websocket-client

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

If you're a part of the JavaScript jungle, you know how we all have been longing for some native WebSocket love in Node. WebSockets are like that secret sauce to making any app conversation go smoothly in real-time, back and forth between the client and server. But hey, Node has been playing hard to get on this one for a while. However, recent pull request activity suggest that Node version 21 might just be the game changer we've been waiting for, thanks to some community heroes putting in the elbow grease.

Now, let's talk about a recent pull request that's caught the eye over at the Undici project, which is Node’s own client for handling HTTP. This [pull request](https://github.com/nodejs/undici/pull/2217) is all about bringing WebSocket support to the table. It's like a beacon of hope for us, showcasing that, yeah, Node isn't going to let the modern web sprint ahead while it’s tying its shoelaces.

There’s an [issue](https://github.com/nodejs/node/issues/19308) that popped up in the Node repo a while ago, which screams the community’s long-standing wish for some WebSocket magic. This thread is like a saga of devs dreaming about WebSockets dancing in Node natively.

So, what’s the big deal with WebSockets in Node? Well, it's not just about making real-time chit-chat easier; it's also about shipping Node with batteries included and gaining a small performance boost out of it. As Node version 21 is gearing up to see the daylight, having native WebSocket support could mean we get to build snazzier, more interactive apps.

Keep in mind Deno and Bun already comes with WebSocket support out of the box. Node should do to.

Read more about [WebSocket at MDN](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket).
Container and Presentational Components
Tags: react, designpatterns, javascript, tutorial
Published: 2023-10-16 17:55:39

The Container and Presentational Component pattern is a common design approach in React to keep your components organised and maintainable. 
This pattern is also known as the Smart and Dumb component pattern. 
Let's break down the concepts and provide simple code examples. 

**Container Components (Smart Components):**

Container components are responsible for managing state, data fetching, and handling logic. 
They often do not contain much JSX rendering code and are more focused on the functionality of the component. 
They are often stateful and may interact with Redux or other state management solutions.
Here's an example of a container component:
```jsx
import React, { useState, useEffect } from 'react';

function UserListContainer() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    // Simulate fetching user data from an API
    fetch('https://jsonplaceholder.typicode.com/users')
      .then((response) => response.json())
      .then((data) => setUsers(data));
  }, []);

  return <UserList users={users} />;
}

export default UserListContainer;
```
In this example, `UserListContainer` is responsible for fetching user data and maintaining the state. It renders a Presentational Component called `UserList`.

**Presentational Components (Dumb Components):**

Presentational components are concerned with how things look. They receive data and callbacks as props and are primarily responsible for rendering UI elements. 
They are stateless and don't manage application state.
Here's an example of a presentational component:

```jsx
import React from 'react';

const UserList = ({ users }) => {
  return (
    <div>
      <h2>User List</h2>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default UserList;
```

In this example, `UserList` is a pure presentational component that takes the list of users as a prop and renders them. It does not have any state or logic for data fetching.

The advantages of this pattern include:

- Separation of concerns: Container components handle data and logic, while presentational components focus on rendering.
- Reusability: Presentational components can be used in different parts of the application since they are not tightly coupled with data and logic.
- Testing: Presentational components are easier to test since they don't have complex logic.

By following the Container and Presentational Component pattern, you can create a more organized and maintainable React application, especially as your project grows in complexity.

😍 If you enjoy the content, please 👍 like, 🔄 share, and 👣 follow for more updates!
Join me on a professional journey through my LinkedIn profile: [Linkedin Profile](https://www.linkedin.com/in/kurmivivek295/)
Think of this as the pilot!
Published: 2023-10-16 17:55:20

I've been learning how to code for the past six or seven so months. I started with HTML and CSS, which were a bit easier for me. I then moved on to JavaScript, which, to me, had a bit of a steeper leaning curve as I somehow expected. I then smoothly transitioned to React, which had a smoother landing, bearing in mind the fact that we are coming from JavaScript!

After learning React, I started learning Ruby, which I fell in love after the first few lines of code. After a couple of weeks, I met her framework, Rails, and life became sweeter. That is how I started my tech journey!

I fell into a mental rut twice that I can recall. One was when I was learning React, and the other was after finishing Rails. The react rut, as I call it, was due to personal reasons, which I pulled myself through, and the recent one was due to confusion on where to start and a hint of laziness, which a friend had to pull me through. We thank God for such!

As we stand, I'm planning on documenting what I learn here together with the ups and downs of my journey. I am writing for my pleasure, like a diary sort of,accountability and all, also most of it will be code-oriented. Let's see how it goes.
Open Source ABCs: YAML & YML
Tags: opensource, discuss, 100daysofoss
Published: 2023-10-16 17:30:34

---
title: Open Source ABCs: YAML & YML
published: true
description: Join our #100DaysOfOSS blog series as we explore the world of Open Source Software (OSS) from A to Z! Every week, we'll discuss two new letters of the English alphabet. Share your thoughts, ideas, and favorite OSS projects for each letter. Let's celebrate the power of open source together! 
tags: opensource, discuss, 100DaysOfOSS
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fxwg4ygmybnni1tpwdx3.png
# Use a ratio of 100:42 for best results.
series: 100DaysOfOSS
canonical_url: https://opensauced.pizza/docs/community-resources/open-source-abcs-yaml-yml/
---

Welcome to our [#100DaysOfOSS series](https://dev.to/opensauced/100daysofoss-growing-skills-and-real-world-experience-3o5k). Until October 31, we'll be doing  Open Source Software (OSS) terms from A to Z. We'll be diving into a different letter of the English alphabet, uncovering OSS concepts, and sharing our thoughts on them.

Today, we're covering the letter "Y" and the difference between YAML and YML.

- **YAML**: Stands for "YAML Ain't Markup Language." YAML refers to the data serialization standard itself. When you're talking about the language or the format, "YAML" is the term to use.

- **YML**: A file extension commonly used for files that contain YAML-formatted data.

You might see .yml or .yaml as file extensions. Both indicate that the file contains YAML-formatted data.
Both .yml and .yaml are acceptable file extensions, and there's no difference in functionality. It's generally a good practice to stay consistent with the file extension you choose for a given project.

Now, we want to hear from you! What other OSS terms can you think of that start with the letter "Y"? 

Remember to use the hashtag #100DaysOfOSS if you share on social media, and don't forget to tag us [@saucedopen](https://twitter.com/saucedopen) so we can follow along.
How To Cache Playwright Browser On Github Actions
Published: 2023-10-16 17:06:53

Many of us who find ourselves tasked with automating processes, have likely been recommended or suggested Playwright as the go-to tool for our company's automation needs. Playwright empowers us to craft comprehensive end-to-end tests for our software applications, making it an indispensable resource for every software engineer.

For those of us who are already experienced with creating tests using Playwright and wish to seamlessly integrate these tests into our GitHub Actions workflow, the pace at which our tests run can be a source of frustration. Waiting for test results on GitHub Actions can sometimes be a time-consuming process.

The good news is, I've come across an effective solution that can significantly boost the speed and efficiency of running Playwright tests within the GitHub Action Continuous Integration (CI) environment. This enhancement promises to not only save valuable time but also streamline our CI/CD pipeline, resulting in a more productive and reliable development process. In the following sections, I'll outline the steps and strategies to achieve these accelerated Playwright test runs on GitHub Actions.

```
name: Playwright Tests
on:
  push:
    branches: [ main, develop ]
  pull_request:
    branches: [ main, develop ]
jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3
    - uses: actions/setup-node@v2
      with:
        node-version: '18.x'
    - name: Get installed Playwright version
      id: playwright-version
      run: echo "PLAYWRIGHT_VERSION=$(node -e "console.log(require('./package-lock.json').dependencies['@playwright/test'].version)")" >> $GITHUB_ENV
    - name: Cache playwright binaries
      uses: actions/cache@v3
      id: playwright-cache
      with:
        path: |
          ~/.cache/ms-playwright
        key: ${{ runner.os }}-playwright-${{ env.PLAYWRIGHT_VERSION }}
    - run: npm ci
    - run: npx playwright install --with-deps
      if: steps.playwright-cache.outputs.cache-hit != 'true'
    - run: npx playwright install-deps
      if: steps.playwright-cache.outputs.cache-hit != 'true'

    - name: Run Playwright tests
      run: npx playwright test
    - uses: actions/upload-artifact@v2
      if: always()
      with:
        name: playwright-test-results
        path: test-results/
```

Reference links:

1.https://playwrightsolutions.com/playwright-github-action-to-cache-the-browser-binaries/

2.https://github.com/microsoft/playwright/issues/7249#issuecomment-1385567519
Day 69: Newsletter
Tags: webdev, frontend, 100daysofcode, css
Published: 2023-10-16 16:49:42

🌐 **Question**
create an HTML and CSS code snippet for the newsletter page described in the image below. 📰

![Newsletter Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8i461t6ov3uggej8eqiv.jpg)

For the necessary assets and design, check out the details on GitHub: [GitHub - Newsletter](https://github.com/dhrn/newsletter)

**Note:** This challenge is inspired by a cool project on [Frontend Mentor](https://www.frontendmentor.io/challenges/newsletter-signup-form-with-success-message-3FC1AZbNrv).

Please share your awesome solutions below! 🚀

The solution will be revealed before tomorrow, so stay tuned.
Impl Classes Are Meaningless
Tags: discuss, java, tristan
Published: 2023-10-16 16:32:02

### Resources
-  I have copied and pasted this opinion from `Growing object oriented software guided by tests ` by ` Steve Freeman, Nat Pryce`
- I agree with this opinion but I am curious about what other people think

### Impl Classes Are Meaningless
- Sometimes we see code with classes named by adding `Impl` to the single interface they implement. This is better than leaving the class name unchanged and prefixing an `I` to the interface, but not by much. A name like `BookingImpl` is duplication; it says exactly the same as `implements Booking`, which is a `code smell.` We would not be happy with such obvious duplication elsewhere in our code, so we ought to refactor it away. 

- It might just be a naming problem. There’s always something specific about an implementation that can be included in the class name: it might use a bounded collection, communicate over HTTP, use a database for persistence, and so on. A bridging class is even easier to name, since it will belong in one domain but implement interfaces in another.

- If there really isn’t a good implementation name, it might mean that the interface is poorly named or designed. Perhaps it’s unfocused because it has too many responsibilities; or it’s named after its implementation rather than its role in the client;
or it’s a value, not an object—this discrepancy sometimes turns up when writing unit tests

### Conclusion 
- Do you agree or disagree with this opinion? All of the classes in my current app follow the `Impl` naming convention. However, after reading this I will be refactoring them

- Thank you for taking the time out of your day to read this blog post of mine. If you have any questions or concerns please comment below or reach out to me on [Twitter](https://twitter.com/AndroidTristan).
Canadian Choice Windows and Doors Vancouver
Published: 2023-10-16 16:23:43

Canadian Choice Windows & [Doors Vancouver](https://www.windowscanada.com/vancouver-windows.html) is totally committed to full customer satisfaction by offering only high quality, innovative windows and doors that are superiorly manufactured. Our premium products are installed by our competent and skilled installation experts on doors and windows. Among our products you can find a huge selection of vinyl and aluminum windows as well as vinyl patio doors, insulated steel doors, entrance doors, porch enclosures and storm doors.
Address: 801 Century St, Unit 4 Winnipeg, MB R3H 3C0
Phone: 204-813-1096
Draw a pixel art with vanilla js
Tags: canvas, javascript, html, frontend
Published: 2023-10-16 16:22:36

Hi there, I'm a frontend developer and learning to become a game developer, I very stuck when searching art, and sprites for my game so I decided to draw them with my experience on javascript :D here are my work (It's very simple):

## Prepare a canvas element
```html
<div style="width: 100vw;height: 100vh;display: flex;justify-content: center;align-items: center;">
  <div>
    <canvas id="canvas" width="512" height="512" style="width: 512px; height: 512px"></canvas>
  </div>
</div>
```
## Data:
**Color schema**
```json
[
    "#c6bfbe",
    "#040309",
    "#e0e6e9",
    "#9d919d",
    "#b0813f",
    "#cf7f33",
    "#adb6b1",
    "#1d1f29"
]
```

**Pixel maping:**

```
{
    "2_3": 1,
    "2_4": 1,
    "2_5": 1,
    "2_6": 1,
    "2_8": 1,
    "2_9": 1,
    "3_3": 1,
    "3_4": 3,
    "3_5": 1,
    "3_6": 4,
    "3_7": 1,
    "3_8": 6,
    "3_9": 0,
    "4_2": 1,
    .....
}
```
And code to drawl pixel

```
const canvas = document.getElementById("canvas");
  const baseSize = Math.round(canvas.width / size)
  const ctx = canvas.getContext("2d");
  ctx.fillStyle = "#F0F0F0";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  for (const key in data) {
    const [x, y] = key.split("_")
    ctx.fillStyle = colors[data[key]];
    ctx.fillRect(+x * baseSize, +y * baseSize, baseSize, baseSize);
}
```

Tada! It's results:

![Duck pixel art](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bfuc1d9mk5ud226rklb5.png)

You can get more pixel art data by inspecting API from [simplepixelart.com](https://www.simplepixelart.com). I welcome that!

Full source code at:

{% embed https://gist.github.com/comficker/764541ea8f615a891d8be92a30e27248.js %}