teleren/devto huggingface dataset:
PixiJS Setup with Vite and TypeScript
Tags: webdev, javascript, beginners, tutorial
Published: 2024-04-20 18:53:34

While trying to get started with PixiJS I noticed there was no great guide to setup PixiJS with a bundler. So after a bit of fiddling, I came up with a nice setup. It uses Vite as the bundler. Let me share it with you.

Quick note: This is just a bare minimum basic setup, and might not be the best fit for your project. But I still think it will provide a good starting point for your next PixiJS project.

## Setting up Vite
You might know Vite as the bundler for Vue, but that's not the only thing you can use it for. In this case, we'll use it with PixiJS. 

Run the following command:
```bash
npm create vite@latest
```
If you've never run it before it will prompt you if you want to install Vite, say yes. Then you pick the following options

```bash
> project name: <your-project-name>
> Framework: Vanilla
> Variant: TypeScript (if you want typescript)
```

You can also do all of this in one command:
```bash
npm create vite@latest <your-project-name> -- --template vanilla-ts
```

After which you can run the following two commands to install the required packages and start the dev server
```bash
npm install && npm run dev
```

After this, you can go to `http://localhost:5173/` to see your Vite project running.


## Setting up PixiJS
Now that Vite is up and running it's time to get PixiJS running.

First, we'll install PixiJS with npm:
```bash
npm install pixi.js
```

Navigate to `src/main.ts` and replace the contents with the following:

```javascript
import * as PIXI from 'pixi.js';

(async () => {
    const app = new PIXI.Application();
    await app.init({
        width: 640,
        height: 360
    });

    document.body.appendChild(app.canvas);
})();
```

If you have your dev server still running it should automatically reload your app, otherwise restart the server with `npm run dev`. 

In the browser, you'll see a white page with a black rectangle. This black rectangle is a `<canvas>` element that PixiJS created for you.

You are now ready to develop your PixiJS app! Good luck.

---

If you're running into issues, drop a comment down below. Alternatively, you can also look at [my repository on GitHub](https://github.com/MrLinxed/vite-ts-pixi-starter-template) that has this code (plus a bit more) to get you started.

That's it for now, have a lovely day!

---

if you're looking for a way to host your PixiJS app for free, check out my article about hosting web apps on Cloudflare for free.
{% embed https://dev.to/mrlinxed/host-your-web-app-for-free-on-cloudflare-pages-15en %}
Shift Left
Tags: comic, humor
Published: 2024-04-20 18:36:07

_This was originally posted at my personal site at: https://programmeral.com/posts/20240420_ShiftLeftComic_


![Shift Left](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3dpp52h1g1cmp8w5gyx2.png)


## On Shifting Left

I really, really hope no one takes this as an insult. I think (no, I know!) everyone working in the software pipeline does a ton of work. But when I hear Shift Left I hear a lot of people putting work on someone else's plate. 

This isn't a complaint. Shifting Left is a good thing. We do things earlier in the process, where it's cheaper and easier to accomplish. It's a win for everyone. But with more and more tasks being shifted earlier in the pipeline, at some point it feels like we all just have more work to do.

Anyway, I hope you enjoyed this inaugural comic.
Text-to-Code for ServiceNow
Tags: servicenow, text2code
Published: 2024-04-20 08:37:22



In this blog post, I want to share some good practices for code generation in ServiceNow and some hints about prompt engineering.

**Code Generation**

Generate programming code has become one of the most popular applications of LLMs, and on the ServiceNow platform, you can generate ServiceNow-specific javascript code through an LLM.

Firstly, the Model that is used for code generation (as of April 2024) is a fine-tuned version of StarCoder ([model card](https://downloads.docs.servicenow.com/resource/enus/infocard/text-to-code-llm.pdf)). StarCoder 2 was released on February 28, 2024 ([StarCoder 2 press release](https://www.servicenow.com/company/media/press-room/huggingface-nvidia-launch-starcoder2.html)).

StarCoder was trained using sentinel tokens to enable support for Fill In the Middle (FIM) style prompts, and it also expected prompts in a certain format for code generation and code completion. 

This means if you create a new prompt, it will use the above code for the context.

Let's go into ServiceNow and create our first prompt. Almost all script editors in ServiceNow now support text-to-code. These steps are based on the assumption, that you already activated the Text-to-code capability in the Now Assist admin console. 

Our first try:

![first prompt](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/of5s00jki8y1kxjwgh3l.png)

To write a prompt you can use the comment function. Either you do the "//prompt" or for longer prompts, you can also use the "/* prompt here */". Once the prompt is completed hitting ctrl + Enter will then trigger Now Assist to generate the code.

Every output comes first as a draft (greyed out), so you can refine your prompt or accept it by pressing "tab".

**Adding instructions to the prompt**

I found out, that if you give the LLM instructions, you can get better results. I like to add the variable name to my prompt like this:

![instructions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/14hsl29ix1h4mg3e4oue.png)

With that, you can incorporate name conventions into your prompts and get better results. As a general rule of thumb, and this applies to LLMs usage in general too, always ask yourself – could an intern at my company carry out this task based on the description that was given in the prompt?

**Fill in the middle**

As the model was trained to support code that was written before, it will also use parts above the prompt, which can look like this:

![FIM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d6y6u8nb1boa0mt9eeby.png)

Here I just referred to the array, and it knew I meant the fruits array.

Those are a couple of tricks I learned when using the Text-to-code features (Now Assist for Creator) over the last weeks. I will try to update this post if I learn more. 

Happy coding :)

P.S. Credit to my colleague Badrul Alom for the review and feedback
ZINX -A Music Website
Tags: rebase01, javascript, webdev, gdsciiitkalyani
Published: 2024-04-20 18:23:08


**Zinx** is a cool looking modern music website which allows the user to search and play music and also create a playlist of their own through voice search/commands.
Here, we have integrated a feature of Voice Search which will enable the user to search and create playlist by their voice. This way it makes it easier for the user to interact with the website and it also makes the tough process of typing etc in a much shorter time and also hands-free.

Our primary design was made on Figma.
Then we developed the whole website with the help of below mentioned techstack.

The techstack used in this project includes HTML, TailWind CSS, JavaScript.

During our journey we ran into a number of challenges such as
encountered issues like we tried to add the feature of automatic playlist generation (Machine Learning) by user preferences or by recently played tracks but we weren't able to complete that. As we faced several issues such as of limited and/or short time , as all the team members weren't available at a time, so weren't able to work together for much time. Also Machine learning is new for us so we tried our best to do it in the time frame but failed. But we will definitely implement that in our project later on. Moreover, the voice recognition feature was not an easy task, it took us days to develop , debug and finalise that feature.



Website preview- https://misterstranger03.github.io/zinx-music_website/

Video Demo- https://youtu.be/oUowwsBakZ0


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


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


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


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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nevpqx7oawllryjp8dux.png)
NodeJS: Save SQLite in-memory database to a file
Published: 2024-04-20 18:10:48


One may use `VACUUM` SQL statement to save SQLite in-memory database to a file. This is a working example:

```typescript
import { Database } from 'sqlite3';
import { promisify } from 'util';

const filepath = "C:\\temp\\db";

const createContactsTableSql = `
  CREATE TABLE contacts (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    name VARCHAR(30) NOT NULL,
    email VARCHAR(30) NOT NULL
  )
`;

const insertContactsSql = `
  INSERT INTO
    contacts (name, email)
  VALUES
    ('John Smith', 'john.smith@example.com'),
    ('Jane Doe', 'jane.doe@example.com')
`;

const vacuumSql = `VACUUM MAIN INTO "${filepath}"`;

(async function main() {
  const db = new Database(':memory:');
  const exec = promisify(db.exec.bind(db));
  await exec(createContactsTableSql);
  await exec(insertContactsSql);
  await exec(vacuumSql);
})();

```
Diretivas Vuejs
Published: 2024-04-20 17:58:36

- **v-if**: Cria uma condição em uma tag
- **v-show:** Boleano para exibir ou não um elemento.

Diferença entre v-show e v-if: O v-show apenas deixa o display do elemento como none, ou seja, o elemento html continua disponivel na DOM da página, porém sem estar visível. Já o v-if é responsável por uma renderização condicional, aonde caso não seja verdadeira simplesmente não exibe na tela e nem na DOM.
- **v-vind:href**: Cria um link
- **v-for**: Faz um looping de repetição

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

- **v-bind:key** : Informa o indice de repetição da lista

- **props**: É a ação de passar a informação do componente pai para o componente filho
- **emit**: É possivel "ouvir" o evento de um componente filho no componente pai
- **v-on**: Diretiva para pegar eventos de click/submit/mouseover/keyup/scroll e realizar uma ação. A forma simplificada é utilizando um @.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yici5qwawahn8m2f9im1.png)

O v-on aceita modificadores em sua chamada, e por sua vez podem ser encadeados
@click.prevent
@click.once
@keyup.a 
@click.prevent.once

- **v-html**: Possibilita colocar elementos HTML dentro de determinadas tags. Caso a tag já possua outros elementos html dentro dele, o mesmo será substituido pelos valores que serão passados atravez da diretiva.

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

- **v-once**: Executa o elemento HTML apenas uma vez, ou seja, não recebe mais atualizações de tela após a primeira execução.

- **<component :is="nome_componente"**: Funciona com um componente generico que pode se "transformar" qualquer coisa
Submission - Glam Up My Markup: Earth Day Celebration Landing Page
Tags: devchallenge, frontendchallenge, css, javascript
Published: 2024-04-20 17:52:48

_This is a submission for [Frontend Challenge v24.04.17](https://dev.to/devteam/join-us-for-the-next-frontend-challenge-earth-day-edition-52e4), Glam Up My Markup: Earth Day Celebration Landing Page_

## What I Built

I'm not exactly a UI/UX designer. However, my goal was to create a fun and somewhat interactive layout, without sacrificing accessibility, usability, readability, responsiveness or code quality.

## Demo

![Screenshot of the website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i63qtgfyfsxhbv8jww86.png)

try it here
{% embed https://e-abuzaid.github.io/Glam-Up-My-Markup-Earth-Day-Celebration-Landing-Page/ %}

[Source code](https://github.com/e-abuzaid/Glam-Up-My-Markup-Earth-Day-Celebration-Landing-Page/tree/master)

## Journey

When I first viewed the challenge and what it's about, this image of a big globe that rotates on swipe in the middle of page sprung in my head. but I wasn't quite sure how to implement it in plain JavaScript (I'm spoiled by React, and I didn't want to use any external JS libraries in order to really challenge myself). So I searched online for solutions and consluted ChatGPT, I mixed and matched until I came up with this solution.

So bascially, that globe is a simple rounded div with a background image that's a regular rectangular map of the world. And depending on its rotating position, the background image position changes, and along with it, the globe scales up and then down. With those two simple animations put together, it gives the impression of a globe rotating in 3d along the Z-axis.

I initially had it rotate by the pressing the left/right keys on keyboard. but I quickly realized that it would be an accessibility nightmare for keyboard users. And I added the left and right arrows to signal that the user can interact with it, and also for usability on mobile.

I also considered making the background black with glowing stars, but I figured it would give the feel of the website being about space/astronomy rather than the earth itself, so I decided to make it this greenish color.

I'm particularly happy that I figured out how to do it relatively quickly, and that it got these scores when analyzing it with lighthouse.

![The website lighthouse scores](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zu6ng2vg6r2dvyd31b1l.png)

And overall, I had fun doing the challenge and looking forward to the upcoming ones!
Classy: Redefining Classroom Management
Tags: classroom, gdsciiitkalyani, rebase01
Published: 2024-04-20 17:42:34

In the dynamic landscape of modern education, technology plays an increasingly pivotal role in shaping the classroom experience. With the advent of digital tools like Google Classroom, educators have found new avenues for enhancing collaboration, communication, and organization within their teaching environments. However, as the educational landscape evolves, so too must the tools that support it. Enter “Classy” — a revolutionary classroom app poised to redefine the way educators engage with their students and manage their classrooms.

At its core, “Classy” is designed to streamline the myriad tasks that educators face on a daily basis. From notice posting to assignment management and attendance tracking, “Classy” offers a comprehensive suite of features aimed at simplifying the teacher’s workflow. With just a few clicks, educators can effortlessly disseminate important announcements, share resources, and post assignments, all within a single, intuitive platform.

One of the standout features of “Classy” is its robust notice posting functionality. Gone are the days of relying on outdated communication methods like bulletin boards or mass emails. With “Classy,” educators can instantly push notifications to students and parents, ensuring that important information reaches its intended audience in real-time. Whether it’s a last-minute schedule change or a reminder about an upcoming event, “Classy” ensures that everyone stays informed and up to date.

Furthermore, “Classy” offers a seamless solution for assignment management. Educators can easily create and distribute assignments, track student submissions, and provide feedback — all within the app. This not only streamlines the grading process but also empowers educators to deliver personalized feedback that fosters student growth and engagement. Additionally, students benefit from a centralized platform where they can access assignments, submit their work, and view feedback from their teachers, all in one convenient location.

Attendance tracking is another area where “Classy” shines. By leveraging the app’s intuitive interface and robust functionality, educators can efficiently record and monitor student attendance with ease. Whether it’s a traditional in-person classroom setting or a virtual learning environment, “Classy” adapts to meet the needs of educators and students alike, ensuring that attendance data is accurate and accessible whenever it’s needed.

In essence, “Classy” represents the next evolution in classroom management technology. By offering a comprehensive suite of features that streamline communication, assignment management, and attendance tracking, “Classy” empowers educators to focus less on administrative tasks and more on what they do best — teaching. With its user-friendly interface, robust functionality, and commitment to innovation, “Classy” is poised to revolutionize the classroom experience and usher in a new era of digital learning.

Github:- https://github.com/AriaFantom/hackathon-2024
Decks
Published: 2024-04-20 17:33:25

Designing the perfect deck involves careful consideration of several factors, including the layout of the existing space, the intended use of the deck, and the homeowner's personal preferences. Some may opt for a simple, minimalist design that blends seamlessly with the surrounding landscape, while others may prefer a more elaborate setup complete with built-in seating, lighting, and even outdoor kitchens.

Materials play a crucial role in the construction of decks, determining not only their aesthetic appeal but also their durability and longevity. While traditional wood remains a popular choice for its natural beauty and affordability, composite materials such as vinyl and plastic offer low-maintenance alternatives that resist rot, insects, and fading. Additionally, eco-conscious homeowners may opt for sustainable materials such as bamboo or reclaimed wood to minimize their environmental impact.

Beyond their aesthetic and functional benefits, decks can also add significant value to a property. According to real estate experts, well-designed outdoor living spaces can increase a home's resale value and appeal to potential buyers, especially in regions with favorable climates for outdoor activities. In addition to boosting curb appeal, a thoughtfully constructed deck can enhance the overall livability of a home, providing a space for relaxation and recreation that extends beyond the confines of the interior.

http://www.ejcla.com
Read JSON file in GoLang (Unstructured Data)
Tags: go, json, programming
Published: 2024-04-20 17:13:17

In Go programming, we often need to read data from JSON files. Today, we'll talk about a simple way to do this without getting too technical.

Here's a function that reads a JSON file:

```go
// This function reads a JSON file and returns its contents.
func ReadJsonFileWithoutTypes() map[string]interface{} {

    // First, we try to open the JSON file.
    jsonFile, err := os.Open("./data/todos.json")
    if err != nil {
        fmt.Println("Oops! There was a problem opening the file: ", err)
        return nil
    }

    fmt.Println("Yay! The file is open and ready to use.")

    // We make sure to close the file when we're done.
    defer jsonFile.Close()

    // Next, we read the file's content into a special box called a 'byte slice'.
    byteValue, err := io.ReadAll(jsonFile)
    if err != nil {
        fmt.Println("Oops! There was a problem reading the file: ", err)
        return nil
    }

    // Now, we create a container to hold the data from the file.
    var results map[string]interface{}

    // We put the data from the file into our container.
    json.Unmarshal([]byte(byteValue), &results)

    return results
}
```

### Let's Understand the Function

This function, called `ReadJsonFileWithoutTypes`, helps us read a JSON file and see what's inside. Here's what it does:

1. **Opening the File**: First, we try to open the JSON file. If something goes wrong, we show an error message.

2. **Reading the File**: If we manage to open the file, we read its contents and put them in a 'byte slice'. It's like a box where we keep the data from the file.

3. **Understanding the Data**: Then, we take the data from the 'byte slice' and put it into a special container called a 'map'. This container helps us understand the data better.

4. **Finishing Up**: Finally, we return the container with all the data from the JSON file.

### That's It!

This function is like a helper that makes it easy for us to read JSON files in our Go programs. We can use it whenever we need to see what's inside a JSON file without worrying too much about complicated stuff.

Now, you can use this function to explore JSON files in your own Go projects! Have fun coding!
I created a blender add-on for beginner artists
Tags: python, blender, patreon, nicaragua
Published: 2024-04-20 16:59:13

Hello everyone, i create this article on Medium about how i created an add-on for beginner artist, check it out:

https://chriisduran.medium.com/i-created-a-blender-add-on-for-beginner-artists-dc9e5b991436
Open Ruby on Rails errors with VS Code
Tags: rails, vscode, productivity, actionpack
Published: 2024-04-20 16:45:04

<img width="100%" style="width:100%" src="https://media.giphy.com/media/aXLbtKJSDattLWLvLY/giphy.gif">

Hey everyone! Today, I want to share with you a trick that has made my life as a Ruby on Rails developer much easier and more productive. Have you ever found yourself staring at this error screen and feeling like you're wasting time searching for the error file?

![Error Screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a5avdtengdga7h1nrhg5.png)

Well, here's a solution to cut down those minutes of searching and boost your productivity. Instead of manually navigating through files in VS Code to find the error file, we can do it with just a click!

First, open your terminal and run the following command:

```bash
bundle show actionpack
```

This command will give you the path where the `actionpack` library is located on your system. In my case, the path is `/Users/kevin/.rbenv/versions/3.3.0/lib/ruby/gems/3.3.0/gems/actionpack-7.1.3.2`.

Next, open this directory in VS Code and find the `_trace.html.erb` file. Once you've found it, add the following code right after the `<a>` tag with the class "trace-frames":

```erb
<%= link_to "Open in VS Code", "vscode://file#{Rails.root}/#{frame[:trace].split(": ").first.split(":in").first.strip}", style: "font-weight: 700; color: #0078D7; margin-left: 0.5rem;" if Rails.respond_to?(:root) && name == "Application Trace" %>
```

It should look something like this:

![Added Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9s2naxkvn84t420qxyop.png)

This code dynamically generates a link that, when clicked, opens the error file directly in VS Code. It's a handy shortcut that saves you from manually searching for the error file every time.

Save the changes and restart the Rails server. That's it!

Now, if you refresh the error screen you'll see a blue link that says "Open in VS Code". Simply click on it, and you'll be taken directly to the file and line where the error happened!

![Link on Error Screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/km1ybhqibp44bftsrcut.png)

It's that easy!

I hope this trick helps you save time and makes you more productive in your work with Ruby on Rails! If you have any questions or comments, feel free to share them below! 😊