teleren/devto huggingface dataset:
BackendProject
Published: 2023-06-12 13:48:51

###https://github.com/MaxwellConway/Backend-Project

##Project Goals
This project was completed to demonstrate the use of JavaScript, Sequelize, and Authentication. Specifically, this project used an API to supply data that I could sort amongst tables in my database.

Completing this project involved three (3) main personal goals:
-*Using various CRUD routes within a project*
-*Encryption*
-*Writing functional JavaScript*
-*Authentication*

##What does it do?
This project allows a user to create an account, log in, and view a home page. This home page displays a search form that the user can use to search for various events or concerts using the Ticketmaster Discovery API. Once a user searches for events, the user can click a button on the search results to save and display that result to the user's home page within a box titled `My Concerts`. A user is then able to remove this data from their home page. The user can also see the usernames of other users that have added the same results to their home page.

## Work Process
This project was off to a rough start given the timeframe. In total, there were 10 days to complete the project. I experienced difficulty implementing authentication. It was also difficult to manage syntax and relationships between my routes and ejs files, particularly when mixing javascript and html.
Quickly create a local postgres database with docker
Published: 2023-06-12 13:38:37

Here are some quick package.json scripts to create, remove, start, and stop a local docker postgres database.

```json
{
  "scripts": {
    "db:create": "docker run --name DB_NAME -e POSTGRES_PASSWORD=postgres -p DB_EXTERNAL_PORT:5432 -d postgres",
    "db:remove": "docker rm DB_NAME",
    "db:start": "docker start DB_NAME",
    "db:stop": "docker stop DB_NAME"
  }
}
```

Used env vars:
`DB_NAME`: Name for the docker container to create.
`DB_EXTERNAL_PORT`: What local port the database should be accessible from. Use 5432 for default pg port.
What is the secure way to store environment variables?
Tags: javascript, node, encrypt, help
Published: 2023-06-12 13:36:22

So I was working on project with someone else. I was just using `.env` file to store secrets but then he told me that it's not the secure way to store secrets. So after digging around the internet I found AWS KMS and used to to encrypt the secret but now I'm in the same situation since I ended up with `apiKeyId` and `apiSecretAccessKey`. Now how to I store those even if I encrypt these keys two but then I will again end with some encryption key and so on.
So can anyone help me understand how to go around about it.

And Also If some attacker breached my server what could be some step which could be taken to prevent or at least minimize that
The Correct :hover
Tags: css, webdev, html, beginners
Published: 2023-06-12 13:32:36

If you're styling hover with CSS, I have some news for you.

**_THERE IS NO HOVER ON TOUCHSCREENS!_**

Why? Well, because hover is the state of an element over which a pointer (mouse cursor) is placed. Obviously, a smartphone does not know over which element a user's finger is hovering.

I don't what was the logic behind it, but for some reason mobile browser developers decided to enable hover styles when tapping on an element. The problem is that tapping on an element on a touchscreen leads to the styles hanging in a hover state.

What it looks like: the user taps a button, and it starts glowing as if a cursor has been placed over it. And this state is maintained until the next tap or scroll​​.

## What to do?
There are [Interaction media features](https://caniuse.com/css-media-interaction) in CSS. It's a media query that determines whether a user can hover over elements and whether they use a precise (mouse or stylus) or imprecise (finger) pointer. Example:

``` css
/* smartphones, touchscreens */
@media (hover: none) and (pointer: coarse) { /* ... */ }

/* stylus-based screens */
@media (hover: none) and (pointer: fine) { /* ... */ }

/* Nintendo Wii controller, Microsoft Kinect */
@media (hover: hover) and (pointer: coarse) { /* ... */ }

/* mouse, touch pad */
@media (hover: hover) and (pointer: fine) { /* ... */ }
```

If you're using SCSS, please write yourself a mixin.

And if you're using Tailwind 3+ just go to your config and set `hoverOnlyWhenSupported` to true:

``` js
// tailwind.config.js
module.exports = {
  future: {
    hoverOnlyWhenSupported: true,
  },
  // ...
}
```
---
If you like the article, please hit reactions and subscribe.

Also follow me on [Twitter](https://twitter.com/mishgun_eth), connect on [LinkedIn](https://www.linkedin.com/in/topcatnocap/).
Building your MVP? Use windstatic, is 100%. A set of 181 elements & layouts made with Tailwind CSS and Alpine.js
Tags: tailwindcss, resources, javascript
Published: 2023-06-12 13:26:15

A free collection of aesthetically designed elements & layouts made with Tailwind CSS and Alpine.js

## https://windstatic.com/

✺ 161 Components
✺ 24 Different categories

You will find:
✺ Hero
✺ Features
✺ Grids
✺ Footers
✺ Cta
✺ Testimonials
✺ Logo clouds
✺ Gallery
✺ Pricing
✺ Faq
✺ Team
✺ Blog
✺ Newsletter
✺ Error
✺ Navbars
✺ Flyout menu
✺ Sidebar menus
✺ Breadcrumbs
✺ Tabs
✺ Pagination
✺ Vertical navigation
✺ Steps
✺ Command palettte
✺ Sign in and registrations

If you have any questions, feel free to reach out here or feel free to follow me on twitter at twitter.com/Mike_Andreuzza.

Hope you find it useful

{% twitter 1668240410680991744 %} 



/Mike
I created app to make organizing car events more convent.
Published: 2023-06-12 13:06:03

Hello, my name is Dustin Beckford, I created an app for hosting car events. this app will help you keep track of participants, their cars, make model year type of their cars as well as what events they will attends and who's sponsoring them.


The app allows event organizers to maintain a database of participants and their cars. Each participant profile contains essential information such as name, contact details, and car specifications including make, model, year, and type. This feature enables event organizers to gain insights into the variety of cars attending the event and helps in creating a diverse and engaging experience.


if you would like to know more about is app here is the link to my GitHub repo!


https://github.com/xJamoni/backend-project-2
Debug: The `yarn' command exists in these Node versions:
Tags: node, nodenv, debug
Published: 2023-06-12 13:04:00

If you have the following error,

```shell
The `yarn' command exists in these Node versions:
```


Try this:

```shell
npm i -g yarn
```

Commands to confirm settings:

```shell
which yarn

which node

yarn --version

node --version
```
Music Monday — What are you listening to? (Pop Edition)
Tags: watercooler, discuss, music
Published: 2023-06-12 13:00:00

_cover image source: [*NSYNC](https://giphy.com/gifs/nsync-no-strings-attached-bye-ghNR6jhhDbANObLABK)_

**Last week, we got weird. This week, I wanna go the other direction! Pop music (aka popular music) is _typically_ more accessible to the masses and most often conforms to established musical traditions... though that's not set in stone! But even if it is lacking in originality, that doesn't make it any less cool or enjoyable! So, who are your favorite pop artists and what radio-friendly songs do you like to tune into? I wanna listen to some of your mainstream favorites and hear why you're particularly into what you're into!**

![Michael Jackson dancing from The Way You Make Me Feel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i16r3t7q0eiqiqsp8ytm.gif)

***

## How we do 

In this weekly series, folks can chime in and drop links to whatever it is they've been listening to recently + browse others suggestions. You can follow the suggested genre if you'd like, but don't feel confined to it; you're free to suggest whatever you wanna. 🙌  

If you're interested in having other discussions about music, consider following the aptly named [#music discussions](https://dev.to/music-discussions) organization.

{% embed https://dev.to/music-discussions %}  

***

Play the hits! _Note: you can embed a link to your song using the following syntax `{% embed https://... %}`. This should work for most common platforms!_

Looking forward to listening to y'all's suggestions! 🎶
Machine Learning: Understanding Large Language Models (LLMs)
Tags: machinelearning, ai, webdev, learning
Published: 2023-06-12 12:52:26

Hello everyone,

So unless you have been living under a rock for the last six months I'm sure by now you've seen the words 'Artificial Intelligence' quite frequently.  If you're a sci-fi fan like myself those words definitely peaked your curiosity, but now you might be wondering how does this work? That exact thought is what lead me to write this post. So let's take a dive into the world of Large Language Models, understanding what they are and how they work.

## What are Large Language Models?
According to a recent article published by Adrian Tam, [A large language model is a trained deep-learning model that understands and generates text in a human-like fashion.](https://machinelearningmastery.com/what-are-large-language-models/) In recent developments this concept has been taken to the next level. With massive networks with millions of parameters enables these models to generate on a grand scale. They possess the ability to learn patterns, semantics, and context from vast amounts of data. Some examples of popular LLMs are GPT-3 and GPT-4 by OpenAI, LaMDA and PaLM by Google, and LLaMA by Meta.

## How Large Language Models Work?
LLMs have two primary phases: pre-training and fine-tuning.

**Pre-training:** [The training process begins with gathering, pre-processing, and cleaning the training dataset which can come from various sources, such as books, websites, articles, and other open datasets.](https://slator.com/resources/how-do-large-language-models-work/) It learns by predicting the next word in a sentence taking in the structure of language. The model uses transformer architectures, which capture long-range dependencies and context. 


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

Source: [AIMultiple](https://research.aimultiple.com/large-language-model-training/)

**Fine-tuning:** During fine-tuning the models are trained on specific tasks or domains using labeled datasets. For example, [a large language model might be fine-tuned for tasks like sentiment analysis in product reviews, predicting stock prices based on financial news, or identifying symptoms of diseases in medical texts.](https://research.aimultiple.com/llm-fine-tuning/) By fine-tuning the model becomes specialized in a particular application while retaining its broad understanding of language.


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

Source: [AssemblyAI](https://www.assemblyai.com/blog/fine-tuning-transformers-for-nlp/)

## Conclusion
Large Language Models (LLMs) are game changers in the field of machine learning. The ability they possess to comprehend and generate human language on such a large scale will open the door for incredible innovations. The more advancements made with this technology could potentially transform many industries. We are witnessing the beginning stages of something amazing!
Exploring Mobile App Development: Tools, Techniques, and Best Practices
Published: 2023-06-12 12:38:57

Exploring Mobile App Development: Tools, Techniques, and Best Practices" is a comprehensive guide that delves into the world of mobile app development, providing valuable insights, practical knowledge, and industry best practices. Whether you are an aspiring app developer or an experienced professional looking to expand your skills, this book serves as an essential resource for mastering the intricacies of mobile app development.

With the exponential growth of mobile technology, creating successful mobile applications requires a deep understanding of the tools, techniques, and frameworks that drive this ever-evolving industry. This book takes you on a journey through the fundamental concepts, emerging trends, and proven practices that contribute to building exceptional mobile apps to [islamic pdf](https://islampdf.com/)

Within these pages, you will discover an exploration of various mobile platforms, including iOS and Android, along with their respective development ecosystems. You will learn about the essential tools and software development kits (SDKs) required to create, test, and deploy mobile applications efficiently.
How to Trigger Upload Started/Finished Event in Component (FilamentPHP)
Tags: laravel, php, filamentphp, javascript
Published: 2023-06-12 12:36:03

When writing custom components in Filament, it is sometimes necessary to interact with upload events. For example, you may want to deactivate the save button and display a "File Uploading" button. In the following code, I am using Alpine.js due to its compatibility with the TALL stack and its simplicity.

Firstly, we need to locate the form element. Since we are using Alpine.js, we perform this task within the init function. The code snippet below finds the closest form element and assigns it to the form variable in our Alpine.js data.

```js
form: null,
init(){
    this.form = this.$el.closest('form');
},
```
Next, we define two functions responsible for triggering the upload started and upload finished events. 

```js
setFormUploadStarted(){
    this.form.dispatchEvent(new Event('file-upload-started'))
},
setFormUploadFinished(){
    this.form.dispatchEvent(new Event('file-upload-finished'))
},
```

Now we are ready to use these functions. For example, you can use them as follows:

```js
async uploadVideoHandler(){
    this.setFormUploadStarted(); // Start upload
    try{
        ... // Perform Upload
    }
    catch(e) {
        ...
    }
    finally {
        this.setFormUploadFinished(); // Finish upload
    }
},
```

You can effortlessly interact with upload events, providing better control over the upload process and enhancing the user experience. Customize the code snippets to suit your specific needs and enjoy.
How to Add and Configure Gift Wrap in Magento 2 ?
Tags: webdev, magento, magento2tutorials
Published: 2023-06-12 03:57:07

Magento 2 is a state of the art web based business stage that offers unrivaled customization and versatility for organizations, everything being equal. With its powerful arrangement of highlights and functionalities, vendors can easily make and oversee online stores.

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

One of the champion highlights that raises the client shopping experience is the gift wrapping choice. This novel component permits clients to demand present wrapping for their bought things, adding an individual touch to their presents. This turns out to be particularly significant for extraordinary events like birthday celebrations, commemorations, occasions, and different occasions where clients plan to introduce their presents in a smart and rich way. Utilizing to make configurable items in Magento 2, you can offer gift wrapping as a configurable choice during the checkout cycle, giving clients the adaptability to pick.

In this blog, we will direct you through the means of **_how to add and configure gift wrap in Magento 2._**

For more info, visit **_https://webguru.dev/how-to-add-and-configure-gift-wrap-in-magento-2/_**
What does ANZSCO list include ?
Published: 2023-06-12 03:53:46

The ANZSCO (Australian and New Zealand Standard Classification of Occupations) list is a comprehensive classification system that includes various occupations and job titles. It serves as a standardized reference for categorizing and classifying different professions in Australia and New Zealand.

The ANZSCO list encompasses a wide range of occupations across different industries and sectors. It includes professions such as engineers, healthcare professionals, teachers, IT specialists, tradespeople, administrators, and many more. Each occupation on the list is assigned a unique [ANZSCO code](https://www.cdrwriteraustralia.com/anzsco-codes), which helps in identifying and categorizing specific job roles.

The ANZSCO list provides a consistent framework for statistical and administrative purposes. It assists government organizations, employers, recruiters, and policymakers in analyzing and understanding the labor market, workforce trends, skill shortages, and other relevant data.

For individuals seeking employment or migration opportunities, the ANZSCO list is a valuable resource. It helps them determine the ANZSCO code associated with their occupation, which can be crucial for visa applications, skills assessments, and understanding the requirements and expectations of their chosen profession in Australia and New Zealand.

Overall, the ANZSCO list plays a significant role in organizing and classifying occupations, facilitating effective communication, and supporting decision-making processes related to employment, education, and migration.
I have 2030 Followers! But I have < 100 readers!
Tags: devjournal, showdev
Published: 2023-06-12 12:14:06

I have 2030 Followers! But I have < 100 readers. I don't know how DEV.to post algorithm works.

![Cool Right?](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/72qljnzd8smry8knwd4u.png)
What's the best feedback you've ever received?
Tags: discuss, feedback
Published: 2023-06-12 12:04:15

---
title: What's the best feedback you've ever received?
published: true
description: 
tags: discuss, feedback
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-06-13 12:00 +0000
---

I'm a firm believer in the importance of feedback, but I also think it doesn't happen nearly enough. 

{% twitter https://twitter.com/BekahHW/status/1666810171224473600?s=20 %}

**What's the best feedback you've received?**
How to resolve "deriveddata/consumerapp_v1/build/products/debug-iphonesimulator not found" issue
Tags: xcode, react, architecture
Published: 2023-06-12 12:00:25

While running the app in simulator in m1 system, these type of issues will be identified. To Resolve this kind of issue, we have ensure few steps in the xcode setup.

Navigate to target/Buildsettings from the xcode and search for **Excluded Architecture**. And add the configuration as below.

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

Based on the need, we can add this for debug/release builds and save the required values.

Now delete the derived data and clean the project by build => clean. Now try running the project in the simulator.

Thanks for Reading.
Happy Coding
My Journey in Open Source - event-loop-sleep
Tags: javascript, opensource, github, node
Published: 2023-06-12 12:00:00

[Link to the repo](https://github.com/Cadienvan/event-loop-sleep)

## Welcome to event-loop-sleep ⏱️

> Zero CPU overhead, zero dependency, true event-loop blocking sleep

### Usage

```js
const sleep = require("event-loop-sleep");

console.time("sleep");
setTimeout(() => {
  console.timeEnd("sleep");
}, 100);
sleep(1000);
```

The `console.time` will report a time of just over 1000ms despite the `setTimeout`
being 100ms. This is because the event loop is paused for 1000ms and the setTimeout
fires immediately after the event loop is no longer blocked (as more than 100ms have passed).

### Install

```sh
npm install
```

### Run tests

```sh
npm test
```

### Support

Node and Browser versions that support both `SharedArrayBuffer` and `Atomics` will have (virtually) zero CPU overhead sleep.

For Node, Event Loop Sleep can provide zero CPU overhead sleep from Node 8 and up.

For browser support see https://caniuse.com/#feat=sharedarraybuffer and https://caniuse.com/#feat=mdn-javascript_builtins_atomics.

For older Node versions and olders browsers we fall back to blocking the event loop in a way that will cause a CPU spike.

---

Based on the original work of [David Mark Clements](https://github.com/davidmarkclements/atomic-sleep).
A Framework-Agnostic Magento 2 Integration: The Next Step in eCommerce Frontend Development:
Tags: magento2, nextjs, nuxt, ecommerce
Published: 2023-06-12 11:50:00

We're happy to introduce the latest Magento 2 Integration from Vue Storefront. This integration connects your frontend application smoothly with a Magento 2 backend, ensuring a seamless bridge between the two.

## The Framework-Agnostic Design
A highlight of this Magento 2 Integration is its framework-agnostic design. This design includes an SDK and middleware that are framework-agnostic. What does that mean for you? It means you have the flexibility to use popular frameworks such as Nuxt and Next.js. If you choose, you can work without any framework at all. The SDK, built using TypeScript, is adaptable and can be installed in any application developed in JavaScript or TypeScript.

If your project could benefit from a UI library made with eCommerce in mind, Storefront UI may be a good fit. You can find more details via this link: Storefront UI 

## What's Next?
The Journey to Build the Next Storefront Boilerplate
We're proud of the SDK and see it as a significant step forward. It is particularly useful if you're aiming to create a new frontend application that pairs with your existing Magento 2 headless store. However, we're always looking for ways to push our products further, and that's why our next move is the development of a fully functional open-source boilerplate application.

This application will incorporate the new Magento 2 integration, the SDK and middleware, and of course, Storefront UI 2. We've chosen to use Nuxt 3 for this initial boilerplate due to its excellent performance, flexibility, and advanced features. As we move forward with this project, we'll document the process and share updates so you can follow along with our progress. Here's how you can stay informed:

Checko out the [magento-integration repo](https://github.com/vuestorefront/magento2)

Check out our [Youtube Channel](https://www.youtube.com/channel/UCkm1F3Cglty3CE1QwKQUhhg)  

Sign up for our [Developer Newsletter](https://vuestorefront.io/developer-newsletter) 

## Inviting Collaborators
If you're interested, you're more than welcome to join us in developing this open-source storefront using the new Magento 2 SDK and Storefront UI 2. Whether you're an eCommerce expert, a beginner in open-source contributions, or simply curious to be part of an exciting project, we'd be delighted to have you on board. Everyone has something valuable to contribute, regardless of experience level. So, let's code together and see where this project takes us. We're excited about this journey and we hope you are too. Ready to start coding?

Check out the [magento-sdk-storefront Repo](https://github.com/vuestorefront/magento-sdk-storefront), (it's brand new.)

{% embed https://www.youtube.com/watch?v=-w0U95mOb7I %}