teleren/devto huggingface dataset:
Getting started with Open SaaS
Tags: wasp, node, react
Published: 2024-04-21 07:34:17

When building [AI Blog Articles](https://getaiblogarticles.com/) and [Meeting Reminders](https://meeting-reminders.com/), I decided to get started as fast as possible. So I looked for a free boilerplate and stumbled upon [Open SaaS](https://opensaas.sh/), which used YC-backed [Wasp](https://wasp-lang.dev/). It is a full-stack React + NodeJS + Prisma that takes 8 hours to get started with.

Their documentation is brilliant, and great support over Discord. I decided to list here the full walkthrough on how to set up the development environment so that it is a simple copy-paste for you.

For frontend deployment, I used [Netlify](https://www.netlify.com/) (for the generous free package) and the recommended [fly.io](https://fly.io/) for server + database (also cheap package).

## Run development commands

Start development database:

```
cd app && wasp start db
```
View development database in Prisma:

```
wasp db studio
```
Start development app:

```
cd app && wasp start
```

Start development blog:

```
cd blog && npm install && npm run dev
```

## Run frontend deployment commands

Locate the folder:

```
cd .wasp/build/web-app
```

Install dependencies:

```
npm install && REACT_APP_API_URL={your-server-URL} npm run build
```

Deploy preview:

`netlify deploy`

Deploy to production:

`netlify deploy --prod`

Every time there is a Wasp app rebuild (with wasp build), it will remove your `.wasp/build/` directory. Until the GitHub issue is fixed, you need to update `netlify.toml`’s publish line to:

```
  publish = ".wasp/build/web-app/build"
```

## Run backend & db deployment commands

Locate the folder:

```
cd .wasp/build/
```

Deploy preview:

```
flyctl deploy --remote-only --config ../../src/shared/fly-server.toml
```

Every time there is a Wasp app rebuild (with wasp build), it will remove your `.wasp/build/` directory. That’s why there is a copy of the file in `app/src/shared/`.

## Run blog deployment commands

Locate the folder:

```
cd blog
```
Build the app:

```
npm run build
```

Deploy preview:

```
netlify deploy
```

Deploy to production:

```
netlify deploy --prod
```

Good luck with building, hopefully it will be faster now!
Week 5
Published: 2024-04-21 07:10:59

For week 5, we only have to be in the office from Monday to Wednesday since we have to be in school for our ict talk and capstone presentation on Thursday and Friday.

So for my task, on Monday, I did my first task which I have to do daily and since it is Monday I have to do a specific task that needs to be done only on Mondays. Aside from that since I still have few tasks that I need to learn I also make use most of my time reviewing recordings or tutorial videos for the tasks that will be taught to me.
Submission for Frontend Challenge Earth-Day-Edition: Elements of Earth: CSS Card animation
Tags: frontendchallenge, devchallenge, css
Published: 2024-04-21 07:02:02

This is a submission for Frontend Challenge v24.04.17, CSS Art: Earth Day 2024

AIMING FOR DEV SHOP GIFT(TEE)

Inspiration
The inspiration for this CSS animation project is drawn from the various elements of earth (soil, water, fire, air, and space). 


## Demo 
Below given is live link for the submission.
Live Link: https://sundus-hussain.github.io/Dev_Earth_day/

Source Code : https://github.com/Sundus-hussain/Dev_Earth_day

## Journey 
1. The journey begins with finding the right concept.
2. This design embraces a whimsical yet sophisticated aesthetic, revealing hidden treasures with every click.
3.  Witness creativity blossoming in every pixel, inviting exploration and discovery at every click.
4. This design is created keeping in mind about the color contrast and opacity of the images(I am still doubtful about it.... hope you like it!!!), and screen reader compatibility.
5. Responsive design ensures a flawless viewing experience across devices, from desktops to smartphones.

image links:(https://www.craiyon.com/image/sKXNCYtIR5GwfYl4bfKIZg , https://www.istockphoto.com/photo/burning-earth-gm174702179-9948965 , https://sm.mashable.com/mashable_in/photo/default/gw-copy_87rn.jpg, https://w0.peakpx.com/wallpaper/740/461/HD-wallpaper-earth-view-from-space-earth-space-digital-universe.jpg , https://t4.ftcdn.net/jpg/05/55/32/99/360_F_555329972_7CNEDOvl34YykCyeoRe8dMbF5yNTcDRE.jpg, https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR125PDJbp3L8zOWWTIfke2E4kft5TzVpBsq3LyeJePs2LKkBN5)


Thank you!
How to override the colors of NeoSolarized in NeoVim
Tags: neovim, terminal
Published: 2024-04-21 06:52:40

Recently, I’d like to alter a theme with a new one in NeoVim. The [onedarkpro](https://github.com/olimorris/onedarkpro.nvim) is a fantastic theme that I’ve used for a long time, but it’s difficult to defeat the temptation to try out another theme like [NeoSolarized](https://github.com/Tsuzat/NeoSolarized.nvim).

![https://user-images.githubusercontent.com/70003855/235333907-c064208a-3975-404d-874b-58e5c52ee5f0.png](https://user-images.githubusercontent.com/70003855/235333907-c064208a-3975-404d-874b-58e5c52ee5f0.png)

First, I installed NeoSolarized.nvim via [lazy.nvim](https://github.com/folke/lazy.nvim), so the code would be simple like the following one.

```lua
return {
    {
        "Tsuzat/NeoSolarized.nvim",
        config = function()
            local neosolarized = require('NeoSolarized')
            neosolarized.setup {
                transparent = true,
            }
        end
    }
}

```

But I wanted to customize it more.


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


There was no explicit description in README to modify styles, but referring theme.lua in NeoSolarized, colors can be overridden.

```lua
return {
    {
        "Tsuzat/NeoSolarized.nvim",
        config = function()
            -- https://github.com/Tsuzat/NeoSolarized.nvim/blob/208e65a3ede945b8a1d00104a4441217c5e23509/lua/NeoSolarized/theme.lua#L1-L11
            local neosolarized = require('NeoSolarized')
            local cls = require("NeoSolarized.colors")
            local config = require("NeoSolarized.config")
            local options = config.options
            local theme = {config = options, colors = cls.setup()}

            local c = theme.colors
            c.green = '#40f7d2'
            c.yellow = '#eaea8a'
            c.red = '#ea4481'
            c.blue = '#2bb3d8'
            c.fg0 = '#dde8d5'
            c.orange = '#dd9f4d'
            neosolarized.setup {
                transparent = true,
                -- https://github.com/Tsuzat/NeoSolarized.nvim/blob/208e65a3ede945b8a1d00104a4441217c5e23509/lua/NeoSolarized/theme.lua#L748
                styles = {
                    comments = {italic = false},
                    keywords = {italic = false, bold = true},
                    string = {italic = false}
                },
                on_highlights = function(highlights, colors)
                    -- highlights.Include.fg = colors.red -- Using `red` foreground for Includes
                end
            }
        end
    }
}
```


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

- https://github.com/Tsuzat/NeoSolarized.nvim/blob/208e65a3ede945b8a1d00104a4441217c5e23509/lua/NeoSolarized/theme.lua#L1-L11
- https://github.com/Tsuzat/NeoSolarized.nvim/blob/208e65a3ede945b8a1d00104a4441217c5e23509/lua/NeoSolarized/theme.lua#L748
How To Merge Two Json Objects or Files
Tags: programming, career, algorithms, interview
Published: 2024-04-21 06:43:01

[Merge two JSON objects or files](https://interviewspreparation.com/how-to-merge-two-json-objects-or-files/) is an intermediate-level interview question, and sometimes interviewers may phrase it as ['join,' 'combine,' 'concatenate,' or 'multiply' two JSON objects](https://interviewspreparation.com/how-to-merge-two-json-objects-or-files/). These terms might be used interchangeably to inquire about the process of merging JSON data.

![merge two json objects by interviewspreparation.com ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7nlpigk2x2gcqo84kzq7.gif)

Welcome back, visitors! In this article, I'm going to delve into the logic behind merging JSON objects. Join me as we explore the solution to concatenating two JSON strings in C#. I am going to cover how to join two json objects

Note for new users: If you have questions regarding your programming interview or if you're stuck somewhere, I suggest joining our **[Quora Community](https://qr.ae/psYYgq)**. **It's free**, and you'll receive answers within 24 hours. If you are preparing for Beginner or Intermediate level Interview then do check our those tags.


## Program To Merge Two Json Or Files

```
// program by interviewspreparation.com

static void Main(string[] args)
{
    
    var jsonOne = JsonConvert.DeserializeObject<Dictionary<string, object>>(File.ReadAllText(PathFileOne));
    var jsonTwo = JsonConvert.DeserializeObject<Dictionary<string, object>>(File.ReadAllText(PathFileTwo));
    
    var jsonArray = new List<Dictionary<string, object>> { jsonOne, jsonTwo };

    string mergedJson = JsonConvert.SerializeObject(jsonArray);
    
    Console.WriteLine(mergedJson);
}
```

## How To Join Json Files Or Objects

Let's delve into the heart of this article: Concatenating two JSON objects. I hope you are aware of what JSON is and how it works.

To combine multiple JSON objects, I'm going to use C#'s Dictionary. Using this, we can accomplish our merging within 3 steps.

We will store both JSON data into a dictionary and then use any JSON object converter library to create serialized versions of both JSON files.

[Follow and check my website for Merge Multiple Json Objects or Files.](https://interviewspreparation.com/how-to-merge-two-json-objects-or-files/)
Uses of paper cups
Tags: wordpress
Published: 2024-04-21 06:18:35

[Paper products]({% embed https://www.digikala.com/product/dkp-1597189/%D9%84%DB%8C%D9%88%D8%A7%D9%86-%DB%8C%DA%A9%D8%A8%D8%A7%D8%B1-%D9%85%D8%B5%D8%B1%D9%81-%DA%A9%D8%A7%D8%BA%D8%B0%DB%8C-%D9%85%D8%AF%D9%84-a32-%D8%A8%D8%B3%D8%AA%D9%87-%DB%B5%DB%B0-%D8%B9%D8%AF%D8%AF%DB%8C %}.) are produced in different types and are used in different situations. Due to the variety of paper products, they can be used in different sectors. If we want to mention some of the uses of this product:

 

1- For hot and cold drinks, corn and potatoes are used.

2- It is used for catering in hotels, airplanes and trains.

3- Paper products are also used in large and small stores, entertainment centers and coffee shops.

4- It is placed next to the water coolers of universities, offices and institutions.

5- It is used in big and small parties.

6- Some people also use paper products to make handicrafts.

7- It is also used in various advertising projects to introduce the company's brand.

8- The hygienic type of this product has more fans.

9- These days, with the spread of diseases, including the corona disease, they often use sanitary paper products.

[{% https://ariyan7.blogspot.com/2023/10/custom-paper-cup-printing-services.html%}.](https://ariyan7.blogspot.com/2023/10/custom-paper-cup-printing-services.html)
HTML & Vue.js, a secrete you may not know about Vue
Tags: html, vue, webdev
Published: 2024-04-21 02:52:55


## Reference
http://blog.kueiapp.com/ja/vue-component-communication2/

Vue.js and Native HTML5 – what is the difference
Nowadays, there are many ways and frameworks to building up a web frontend system, such as React, AngularJS, Vue.js and so on. It is definitely able to build up a system using native HTML5 with JavaScript, but usually using a good framework can implement the system with a beautiful design pattern for structure and security.


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


A tool or frameworks be created is usually because of the difficulties developers have at that moment. For example, jQuery was created for using JavaScript on different browsers that supported different standards, and it was the first one library to be able to use CSS selectors to control DOM (Document Object Modal) . The HTML5 querySelector now copied this cool functionality.

## Why VueJS
### Access DOM
when using Pure HTML5 JavaScript to access DOM in order to grab data from HTML tree. There are a lot of works needed to be done, such as targeting an element, add a new listener to detect interaction from users on UI, or return data when target action is caught.

```
<html>
  <body>
    <h1>Checkbox with pure HTML5 syntax</h1>
    <label>
      <input type="checkbox" name="group1" value="check1" />
      checkbox 1
    </label>
    <label>
      <input type="checkbox" name="group1" value="check2" />
      checkbox 2
    </label>
  </body>
</html>
<script>
window.onload = ()=>{
  const group1: NodeListOf<HTMLInputElement> | undefined =
      document.querySelectorAll("input[name=group1]");
    if (!group1) return;
    group1.forEach((checkbox) => {
      checkbox.addEventListener("change", (e: Event) => {
        if (!e.target) return;
        const targetValue = (e.target as HTMLInputElement).value.toString();
        const checked = (e.target as HTMLInputElement).checked;
        if (!checked) {
          this.selected = this.selected.filter(
            (select) => select !== targetValue
          );
        } else {
          this.selected = [...this.selected, targetValue];
        }
      });
  });
});
```


Compare to native HTML5 JavaScript (or jQuery) which operate DOM directly, Vue.js has its own View Model to modify DOM when getting new data model. In other words, we can focus on data and structure rather then design our own modal and operating DOM directly. Both ways are good for different scenarios but Vue.js actually provides a easier route to build up a web frontend.


## Using Vue.js
```
<div>      
      <label>
        check 1
        <input type="checkbox" v-model="checkboxList" value="1" />
      </label>
      <label>
        check 2
        <input type="checkbox" v-model="checkboxList" value="2" />
      </label>
</div>
export default Vue.extend({
  data: () => ({
    checkboxList: [],
  }),
});
```

## Reference
http://blog.kueiapp.com/ja/vue-component-communication2/
Be a Better UI Engineer: Selectively Exclude CSS Styles
Tags: css, webdev, frontend
Published: 2024-04-21 06:06:50

> Fine grained control over your styles in 3 steps


![1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1s94d87nn5heekawonri.png)<figcaption>Correcting the styles. Before and after.</figcaption>



## The Problem
I wanted to increase the sizes of the images in my personal site’s projects page. So I wrote some styles in `globals.css`, and applied it to the parent node that contains the content.

This style applies to all images within elements with the classes `.prose` and `.project`.

```css
.prose.project img {
 @apply max-w-none rounded-md border border-secondary bg-tertiary md:rounded-lg lg:-ml-16 lg:w-[calc(100%+128px)];
}
```

The problem arises with this dynamic classlg:w-[calc(100%+128px)]. It adds 128 pixels to 100% of the parent element’s width. This is a common technique in CSS for achieving responsive and dynamic layouts.

This made the images in one of my custom MDX components to blow out of proportions.


![2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gisj8mbwbppdwo4vcuer.png)<figcaption>See the **red NPM logo** image that’s out of proportion.</figcaption>

I don’t want this global style to be applied. How do I go about excluding it?

## The Solution
The key to solving this problem lies in understanding how CSS selectors work and how to leverage them to target specific elements. In our case, we want to exclude the global style from one specific element.

## Step 1: Add a Custom Class to the component
First, add a custom class to the element/component where you don’t want the global style to be applied. For example, you can add a class named `.no-prose-style`.

```jsx
<div
 className="project prose animate-in no-prose-style"
 style={{ "--index": 2 } as React.CSSProperties}
>
```

## Step 2: Define the Override Styles in CSS
Next, define the styles you want to override or reset for the `.no-prose-style` class in your CSS. You can reset the properties to their default values or set them to something else as needed.

In my case, the problem revolved around images blowing out of proportions in my custom component. Hence, I set the width on large screens to be 100% with a Tailwind utility class.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o3u73v8mb1lxgushqioj.png)<figcaption>The the class to override the prose project style</figcaption>



```css
.no-prose-style img {
  @apply lg:w-full;
 }
```

## The result:

![4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dbcbu8stkke69toriz1v.png)<figcaption>The red **NPM logo** looks great now!</figcaption>

In conclusion, by understanding CSS selectors and utilizing targeted overrides, we can maintain fine-grained control over our styles in Tailwind CSS. With just a few simple steps, we can exclude global styles from specific elements, ensuring a more tailored and cohesive design across our projects.

---

Footnotes:
GitHub: https://github.com/phukon
Socials: https://rkph.me
Day 21/366
Tags: 1percentplusplus, 100daysofcode
Published: 2024-04-21 05:54:38

🚀 **Today's Learning:**

🌟 DSA
- Trapping Rainwater
- Merge Intervals

🌟 Dev
- React vs Next JS

🔍 **Some Key Highlights:**

DSA

In Trapping Rainwater, you iterate over each element in the array to calculate the amount of water that can be trapped at that specific position. For each element, you find the maximum height on its left and right sides. The trapped water at that position is the minimum of the maximum height on both sides minus the height of the current element. This process is repeated for every element in the array, accumulating the total trapped water.

Merge Intervals involves sorting the intervals based on their starting points. Then, you merge overlapping intervals by iterating through the sorted list. At each step, if the current interval overlaps with the previous one, you update the end point of the merged interval to be the maximum of the two end points. If there's no overlap, you add the current interval to the result list. This process continues until all intervals are processed, resulting in a list of merged non-overlapping intervals.

DEV

React.js is a JavaScript library for building user interfaces, primarily for single-page applications. It provides a component-based architecture where UIs are composed of reusable and encapsulated components. React.js allows developers to efficiently update and render UI components based on changes in application state, using a virtual DOM for performance optimization. It's commonly used in conjunction with other libraries and frameworks to build dynamic web applications.

Next.js, on the other hand, is a React framework for building server-rendered React applications. It adds capabilities to React.js, such as server-side rendering, static site generation, and API routes, among others. Next.js simplifies the setup and configuration of React applications by providing a batteries-included approach, offering features like file-based routing, automatic code splitting, and optimized production builds. It's well-suited for building scalable and SEO-friendly web applications with React.js.

 #100daysofcode #1percentplusplus #coding #dsa
Hoisting
Tags: blogging
Published: 2024-04-21 05:34:25

## What is Hoisting?
Hoisting is a behavior in JavaScript where variable and function declarations are moved to the top of their containing scope during the compilation phase, regardless of where they are declared in the code.

Variable Hoisting:
Consider the following code snippet:
`console.log(x); // undefined
var x = 10;`
Surprisingly, this code doesn't throw a reference error. Instead, it logs 'undefined'. This is because, during compilation, JavaScript moves the variable declaration var x to the top of its scope. Essentially, the code above behaves like this:
`var x;
console.log(x); // undefined
x = 10;
`

Function Hoisting:
Similar to variables, function declarations are also hoisted. Let's examine another example:
`foo(); // "Hello, world!"
function foo() {
  console.log("Hello, world!");
}`
Even though foo() is invoked before its declaration, JavaScript doesn't complain. This is because the function declaration function foo() is hoisted to the top of its containing scope, allowing it to be invoked anywhere within that scope.

**Hoisting in ES6:**

With the introduction of ES6 (ECMAScript 2015), let and const were introduced as block-scoped alternatives to var. While let and const are still hoisted, they're not initialized until their actual declaration in the code. This is known as the "**Temporal Dead Zone**". In Interviews the term TDZ is always pointed to explain. so understand the term is also important.
`console.log(x); // ReferenceError: Cannot access 'x' before initialization
let x = 10;
`

Best Practices:

- Declare variables and functions at the top of their scope to improve code readability and avoid unexpected behavior due to hoisting.

- Prefer let and const over var for better block scoping and to minimize hoisting-related issues.

- 
Use strict mode ('use strict';) to catch undeclared variables and other common mistakes.
Khám phá Thế Giới Casino RS8
Tags: webdev, javascript, programming, beginners
Published: 2024-04-21 05:26:20

Khám phá Thế Giới Casino RS8
Casino tại nhà cái #RS8sportvip nơi cung cấp một thế giới giải trí đa dạng. 
Nhà cái Rs8 được mọi người ưu chuộng cuốn hút đông đảo người chơi 
Hoàn trả tỷ lệ cao trên tất cả các thể loại game #rs8 
Hãy đến ngay #Rs8ing để trải nghiệm sự chuyên nghiệp từ nhà cái đến từ Châu Âu 
Fanpage https://www.facebook.com/trangchurs8sports
Web: https://rs8.ing/kham-pha-the-gioi-casino-rs8/
#rs8 #rs8sports #rs8sport #nhacairs8 #thers8
Submission for Frontend Challenge Earth-Day-Edition: Earth's Rotation: Rotating with CSS on Earth Day
Tags: frontendchallenge, devchallenge, css
Published: 2024-04-21 05:19:19

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), CSS Art: Earth Day 2024

## Inspiration
The inspiration for this CSS animation project was drawn from a YouTube channel named [Online Tutorials](https://youtube.com/@OnlineTutorialsYT?si=k-SLCm4_vGrj8ND7) dedicated to showcasing innovative CSS coding projects and creative web animations. As a subscriber to the channel, I was inspired by the diverse range of animations and visual effects demonstrated in their videos.
Video Link: [CSS 3D Text Animation Effect](https://youtu.be/TQyOL1u10EI?si=--gSbQf0y3I9YP1r)

## Demo 
Below given is live link for the submission.
**Live Link:** [Earth Day 2024 Rotate with CSS](https://dhanush9952.github.io/EarthDay-2024-CSS/)

## Journey 
Creating this CSS animation for Earth Day taught me:
**Keyframes and Animations:** How to define keyframes and create smooth animations using CSS.
**Custom Properties:** Using CSS variables to modularize code and adjust animation timing.
**Positioning and Layering:** Techniques for overlaying continent landscapes onto elements.
**Styling:** Applying CSS styles for text and element enhancements.
**Animation Control:** Experimenting with animation timing and easing functions for desired effects.

Thank You!