teleren/devto huggingface dataset:
Nesting in CSS - A better way to structure styles
Tags: webdev, beginners, programming, css
Published: 2023-10-02 03:30:03

CSS can be cumbersome to read. It becomes easily very difficult to figure out which is the parent and which is the child. Also, which is the immediate parent and which is the immediate styles. Hence, concept of nesting was introduced, initially in CSS pre-processors such as SASS and now in native CSS.
CSS now has a `&` nesting selector support built in. This provides a familiar syntax to most of the CSS pre-processors to nest the CSS selectors.
## CSS Nesting selector basics
To nest CSS, it isn't necessary to use the nesting operator. It can be done without that as well.
```CSS
.parent {
  /* Parent's CSS Code */
  .child {
    /* Child's code */
  }
}
```
This will evaluate to:
```CSS
.parent {
  /* Parent's CSS Code */
}

.parent .child {
  /* Child's CSS Code */
}
```
But then why do we require the `&` nesting operator?
Well, we can also nest the pseudo-selectors and we might need to mention classes which require them to be written without the whitespace. In these situations, we are mandated to use the nesting operator. Let's see an example.
```CSS
.parent {
  /* Parent's code */
  :hover {
    /* Hover state code */
  }
}
```
Intended functionality:
```CSS
.parent {
  /* Parent's code */
}
.parent:hover {
  /* Hover state code */
}
```
But what we actually get:
```CSS
.parent {
  /* Parent's code */
}
.parent *:hover {
  /* Hover state code which gets applied to all the child element's hover states */
}
```
Which is not the desired functionality.
Also note that currently (at the time of writing of this article) browsers except firefox do not support type selectors (tags) to be nested without the nesting operator.
### Appending the CSS nesting operator
Nesting operator can be appended to the right as well to reverse the effect. With the `&` at the left side of the operator, it was giving `.parent .child`. But if we append it, we will get `.child .parent` which reverses the effect. Now here we are referring to the element with .parent class which lies inside the element with `.child` class.
This can be done multiple times as well. Appending the nesting operator or pre-pending the nesting operator multiple times will duplicate the selector there.
Here is an example to illustrate this:

{% codepen https://codepen.io/sahil2004/pen/abPKxeG %}

Well, with CSS nesting operator, it is now a better choice to use it rather than repeating the classes again and again just to point to their children. Also, if you are using CSS pre-processors such as SASS (or SCSS) just due to the variables and nesting, then you should reconsider your choice as CSS has support for both nesting as well as variables.

---

If you came this long, you must have liked the post. I highly recommend you to follow to never miss learning new and unknown things in the domain of web development. You can always unfollow if you don't like it in the future.
Let's get connected on linkedin: [https://www.linkedin.com/in/sahil2004/](https://www.linkedin.com/in/sahil2004/)
I post such amazing content there as well.
Start Your Open Source Journey with EVENTRON
Tags: hacktoberfest, opensource, github, hacktoberfest23
Published: 2023-10-02 03:24:30

Are you eagerly waiting for Hacktoberfest every year? Do you want to merge your first pull request and kickstart your open source journey? Look no further! We have an exciting open source project called [EVENTRON](https://github.com/eventron), where beginners like you can easily participate and contribute.

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



## What is EVENTRON?

EVENTRON is a community events listing space for developers. It allows you to list and discover community events happening around your city, whether they are online or offline. By marking and saving your city repository, you can receive instant notifications throught the github app whenever a new event is added.

{% embed https://github.com/eventron %}

## How to Contribute?

Contributing to EVENTRON is simple. Just raise a pull request to add an event! This project is perfect for beginners who want to get hands-on experience in open source development. Don't worry if you're new to the process – we have a supportive community to guide you through your first contribution.

## Join Us as a Maintainer

Since EVENTRON is a relatively new project, we are in need of maintainers who can help us shape its future. There is a lot to do, and your ideas and contributions are highly valued. If you have an idea or feature in mind, don't hesitate to come and raise your first pull request. We're excited to have you on board!

Start your open source journey today with EVENTRON. Together, let's build an inclusive and vibrant community for developers worldwide.

Happy hacking!
From the Beaches to the Blizzards : My journey from The Bahamas to Canada..and eventually Cloud Computing.
Published: 2023-10-02 03:16:37

Hi there! 

This is my first official blog post! I know that the title is a bit melodramatic but I can definetely explain. Before I get to that, I'd like to introduce myself.

My name is Kirkwood Williams and I was born and raised in Nassau Bahamas. As it pertains to my career in IT, I had no idea what I wanted to do with my life until recent. Outside of wanting to play SNES emulators on my aunt's PC, I had no real desire to work in technology. If it was up to me, I'd be an NBA star ( that clearly didn't work out). So, after completing highschool in Nassau, I enrolled into a A+ certification course at a local tech school. I figured that IT would be the net best thing and at the time, I had no other options besides odd jobs. Fast forward to 2016 after graduating from The University of The Bahamas with a Bachelors in Information Tech, I knew that I wanted more from life. 

Growing up on the islands may seem like a dream come true to most but trust me it gets old real fast. Luckily enough, In 2018, I received a full scholarship to study at a technical college in Ontario Canada. I truly beleive that this was the turning point in my life that would eventually bring me to many new beginnings and career prospects. 

Apart from my academic experiences, I've worked primarily in technical support and have been blessed with numerous internship opportunites and eventually fulltime work in Network administration and support. However, I've always wanted to specialize in more than just putting out fires. I love assisting end users and resolving complex tickets however, I'm ready to be apart of the building process and see projects come to life.
With this desire, I spent countless evenings on google and reddit blogs searching for the right approach to breaking into the cloud space. 


Well, this year I stumbled accross a reddit post singing the praises of the "Cloud Resume Challenge" by Forrest Brazeal.

The goal of the CRC is to provide people new to cloud a REAL challenge and not to give a "paint-by-numbers tutorial". The challenge lays out all of the necessary tools needed Build and host your own static website using various Azure services and features. It is a complete hands on approach to preparing for any roles related to the skills learned througout this journey.

For more info on this project feel free to visit https://cloudresumechallenge.dev/.

With that being said, the following blog post will include each phase of my journey until completion.

Cheers!

KW
Domino QQ W88 - Trò chơi giải trí trực tuyến hấp dẫn được yêu thích tại w88yoga.
Tags: dominoqqw88
Published: 2023-10-02 03:00:34

Domino QQ, còn được biết đến với tên gọi Qiu Qiu hoặc ’99 domino poker’, là một phần của di sản trò chơi bài tại Indonesia. Sử dụng bộ domino độc đáo với 28 quân bài, trò chơi này cho phép từ 2 đến 6 người tham gia. Nhiệm vụ của người chơi là sắp xếp bốn lá bài sao cho tổng số điểm không quá 9, hay còn gọi là ‘Qiu’ theo tiếng Trung.

Khi tham gia Domino QQ, người chơi đặt một số tiền cược vào pot và người có tổng điểm ấn tượng nhất sẽ giành lấy pot. Sự kết hợp giữa may mắn và tư duy chiến thuật làm cho trò chơi này cực kỳ cuốn hút.

Nhờ sự tiến bộ của công nghệ, hiện nay Domino QQ cũng đã có phiên bản trực tuyến, cho phép game thủ toàn cầu có cơ hội trải nghiệm mà không cần tới Indonesia.

Xem chi tiết tại: https://w88.yoga/huong-dan-choi-domino-qq-w88/ 
Trang liên quan: https://w88yoga.tumblr.com/
#dominoQQw88 #w88 #w88yoga
Complete Guide to Deploying Next.js Standalone with Bun and Docker
Tags: nextjs, bunjs, docker, tutorial
Published: 2023-10-02 02:16:36

Learn to deploy a Next.js standalone application using Bun and Docker as if you were deploying with Vercel. This guide includes a step-by-step walkthrough, tackling common errors, and more.

## Why Deploy Next.js with Bun and Docker?

When Bun hit its stable version 1 and Vercel started supporting it as a package manager (though still relying on Node for runtime), I was intrigued. How could you simulate the Vercel deployment process locally? Specifically, how can you deploy a Next.js standalone app with Bun and Docker? This guide aims to answer these questions.

### Prerequisites

- Basic understanding of Docker, Next.js, and Bun
- Node.js installed
- Bun package manager installed

## Step-by-Step Guide

### Step 1: Setting Up Dockerfile

Here's the full `dockerfile` you'll need.

```dockerfile
FROM imbios/bun-node:18-slim AS deps
ARG DEBIAN_FRONTEND=noninteractive

# I use Asia/Jakarta as my timezone, you can change it to your timezone
RUN apt-get -y update && \
  apt-get install -yq openssl git ca-certificates tzdata && \
  ln -fs /usr/share/zoneinfo/Asia/Jakarta /etc/localtime && \
  dpkg-reconfigure -f noninteractive tzdata
WORKDIR /app

# Install dependencies based on the preferred package manager
COPY package.json bun.lockb ./
RUN bun install --frozen-lockfile

# Build the app
FROM deps AS builder
WORKDIR /app
COPY . .

RUN bun run build


# Production image, copy all the files and run next
FROM node:18-slim AS runner
WORKDIR /app

ARG CONFIG_FILE
COPY $CONFIG_FILE /app/.env
ENV NODE_ENV production
# Uncomment the following line in case you want to disable telemetry during runtime.
# ENV NEXT_TELEMETRY_DISABLED 1

COPY --from=builder  /app/.next/standalone ./

EXPOSE 3001

ENV PORT 3001

CMD ["node", "server.js"]
```

### Step 2: Custom Shell Script

Create a custom shell script ./build.sh.

```build.sh
#!/bin/bash
set -e

# Run Next.js build with passed arguments
next build "$@"

# Copy files only if not in a CI environment
if [ -z "$CI" ]; then
  cp -r ./public ./.next/standalone/public
  cp -r ./.next/static ./.next/standalone/.next/static
fi
```

## Common Errors and Troubleshooting

I ran into some issues during my first attempt, especially errors prefixed with node:. I fixed them by using `imbios/bun-node` instad of `oven/bun` as the base image. Becase we need Node.js fallback for Bun's not yet implemented features.

## Conclusion

By following this guide, you should have a Next.js app deployed, mimicking the Vercel deployment process, with Bun and Docker. Feel free to tweak and optimize the setup according to your project's needs.

## What's Next?

Share this guide if you found it useful and leave a comment if you have any questions or improvements. Stay tuned for more!
Mastery in Minutes: Proper Computer Icon Usage
Published: 2023-10-02 01:17:50



In this digital age, computer icons play a crucial role in navigating through various applications and files. Ever wondered about the mastery of using these small graphical symbols properly? This article will guide you through the importance, types, and guidelines for proper computer icon usage.

**Importance of Proper Computer Icon Usage**
Effective icon usage leads to efficient and productive computer operation.

**Efficiency and Productivity**
Properly used icons can significantly enhance your efficiency and productivity. They provide quick access to various functionalities, helping you to accomplish tasks faster.

**Reducing Confusion**
Ensuring that icons are used correctly minimizes confusion and mistakes, making your computer usage more enjoyable and effective.

**Types of Computer Icons**
There are various types of [computer icons](https://icons8.com/icons/set/computer), each with its specific purpose.

**System Icons**
These icons represent core functionalities of your operating system.

**Application Icons**
Application icons symbolize different software and apps on your computer.

**File Icons**
File icons indicate various file types, making it easier to locate and manage your documents.

**Guidelines for Proper Computer Icon Usage**
Proper computer icon usage involves several key principles.

**Consistency and Standardization**
Maintain consistency in icon usage. Standardized icons ensure a uniform and intuitive user experience.

**Simplicity**
Icons should be simple and clear. Avoid overly complex icons that can confuse users.

**Clear Visual Communication**
Ensure that icons clearly communicate their function, helping users to easily understand and use them.

**Tips and Tricks for Icon Mastery**
Equip yourself with tips and tricks for optimal icon usage. Explore shortcuts, customization, and proper organization for enhanced computer operation.

Mastering proper computer icon usage is vital for efficient and enjoyable computer operation. Follow the guidelines, understand the types, and use icons effectively to enhance your digital experience.
A simply useful task manager with React
Tags: task
Published: 2023-10-03 18:53:29

---
title: A simply useful task manager with React
published: true
date: 2023-10-02 00:54:00 UTC
tags: Task
canonical_url: https://reactjsexample.com/a-simply-useful-task-manager/
---

# Taskman
 ![A simply useful task manager with React](https://reactjsexample.com/content/images/2023/09/Code_2023-09_21-49-16.jpg)

Taskman is the simply helpful task manager app with minimal features, so that users can focus on managing their workload for the day. The sleek, minimal design ensures there are no distractions – nothing pretty to look at, no affiliate marketing and distracting ads. It does one thing and one thing only – Creates, Reads, Updates, and Deletes tasks. When you need a full CRUD todo, taskman is here for you.

![A simply useful task manager with React](https://github.com/tayl0rt0t/TaskMan/raw/main/Screenshot%202023-09-26%20at%207.38.26%20AM.png)

## Technologies

Taskman is built with MongoDB, ExpressJS, and React, and NodeJs. It’s full stack and reliable.

### Getting Started

Would you like to try Taskman? It’s free and always will be. Just click the link and conquer your day: [https://taskman-1osa.onrender.com](https://taskman-1osa.onrender.com)

### Unsolved Problems

At Taskman, we’re always improving, and part of improving is being honest with issues. One of those issues is clicking ‘add task’ with an empty field will add an empty task to the task list. This is a simple enough fix which will be implemented in future versions.

### Future Enhancements

Taskman has a ton of potential. One way we intend to improve Taskman is by having a drag and drop feature similar to trello, as well as multiple task lists for each day of the week. A gentle alarm feature would be helpful as well, for those who like to work in time intervals before taking short breaks. Darkmode is another feature we strive to implement here at Taskman.

### Planning/resources

wireframe-[https://www.canva.com/design/DAFvfpz4HaE/v9NssvfvO4yB0qtXf6-RXg/edit?utm\_content=DAFvfpz4HaE&utm\_campaign=designshare&utm\_medium=link2&utm\_source=sharebutton](https://www.canva.com/design/DAFvfpz4HaE/v9NssvfvO4yB0qtXf6-RXg/edit?utm_content=DAFvfpz4HaE&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton)

Taskman Current/MVP-[https://trello.com/b/uhpp3NJe/taskman](https://trello.com/b/uhpp3NJe/taskman)

Taskman Icebox –[https://trello.com/b/Eh7ygQSJ/taskman-icebox](https://trello.com/b/Eh7ygQSJ/taskman-icebox)

## GitHub

[View Github](https://github.com/tayl0rt0t/TaskMan?ref=reactjsexample.com)
Why Is Bash scripting an important tool to learn as a Cloud DevOps engineer?
Tags: bash, shellscript, devops, cloud
Published: 2023-10-02 00:46:05

Bash is widely regarded as a universal scripting language 
In the world of cloud computing. All cloud platforms support using Bash commands to pass data and information. Bash scripting is mainly used for Automating tasks in DevOps workflow.
 
**Let’s establish what Shell scripting and Bash scripting are:**
**Shell scripting** is the practice of writing scripts or programs using a shell's scripting language.

**Bash scripting**, short for “Bourne Again SHell” is a subset of shell scripting language. 

## Importance of Bash scripting 

- **Automation:** It allows you to create scripts that can execute a series of commands automatically. This is indispensable for tasks that need to be repeated regularly, such as backups, log file parsing, and system maintenance.
- **Efficiency:** They can perform complex tasks quickly and consistently, reducing the potential for human error.
- **Remote Administration:** Bash scripts can be used for remote administration of systems. With tools like SSH, you can run Bash scripts on remote servers, making it easier to manage and maintain multiple systems.
- **Logging and Reporting:** Bash scripts can generate logs and reports, which are essential for monitoring system health, tracking changes, and troubleshooting issues.

Having established some relevant importance of bash scripting, 

## How do we identify a Bash script?
Every bash script starts with a shebang/hashbang `#!` at the very beginning of a script file to indicate the path to the interpreter that should be used to execute the script.
`#! /bin/bash/`

`#!` tells the system to use the Bash shell interpreter to run the script. The shebang line is crucial because it ensures that the script is executed with the correct interpreter, regardless of where the script is located. 

> Note: Different interpreters, such as Python, Perl, or Ruby, may have their own shebang lines.

## Conclusion
By understanding the importance of Bash scripting and recognizing its distinctive shebang notation, you can harness this tool effectively to manage and maintain cloud-based systems with precision and reliability.

 **Next write-up, I’ll be discussing the Bash scripting Fundamental concepts and skills to focus on.**
A weekly calendar app that integrates with Google Calendar
Tags: calendar, apps
Published: 2023-10-03 18:53:41

---
title: A weekly calendar app that integrates with Google Calendar
published: true
date: 2023-10-02 00:24:00 UTC
tags: Calendar,Apps
canonical_url: https://reactjsexample.com/a-weekly-calendar-app-that-integrates-with-google-calendar/
---

# 🧭 Compass

### Compass is a weekly calendar app that integrates with Google Calendar.
 ![A weekly calendar app that integrates with Google Calendar](https://reactjsexample.com/content/images/2023/09/code_2023-30-22-18-30.jpg)

![A weekly calendar app that integrates with Google Calendar](https://user-images.githubusercontent.com/30163055/271442333-00543d34-5dfc-47d5-9b83-d84d4c748391.gif)

## Features

Here are the main features. Visit [app.compasscalendar.com](https://app.compasscalendar.com) to see them all in action with your own events

- 🔄 2-way sync with Google Calendar
- 🔄 Recurring events
- 🕒 Display events in local time
- 🏷️ Tagging events
- 🖍️ Resizing events
- 🖍️ Task reordering
- 🖍️ Drag & drop tasks & events
- 🖍️ Shortcuts
- ✉️ Email capture
- 🔐 Google OAuth authentication
- 🔐 User session management

## Limitations

I got pretty far, but I didn’t include all the features you’d expect from a calendar app. Here are some of main things that are missing:

- Sub-calendars (only primary calendar is supported)
- Sharing
- Location
- Reminders
- Mobile app

## GitHub

[View Github](https://github.com/SwitchbackTech/compass?ref=reactjsexample.com)
Toyota Center Odessa "VIDI Palmira"
Published: 2023-10-02 00:20:10

Toyota Center Odessa "VIDI Palmira" is an official Toyota dealer that began operations on January 1, 2008. It specializes in the sale and service of Toyota vehicles, as well as the provision of Toyota brand-related products and services. Here are some of the key advantages of Center [toyota odessa](https://toyota-odessa.com.ua/ua/) "VIDI Palmira":

Convenient location: the dealership is located in a convenient location in Odessa, providing easy access for customers.

Convenient shopping: Customers can buy Toyota vehicles here and receive professional advice to make informed decisions.

Original spare parts and accessories: the center offers original spare parts and accessories for Toyota vehicles, ensuring quality and reliability.

Service Quality Control: Vehicles are serviced to Toyota's high standards.

Selection and Test Drives: Customers can explore various Toyota models and take test drives to choose the best option.

"TRADE-IN" program: the center provides a program for exchanging an old car for a new one.

Warranties: Buyers receive warranties on both vehicles and labor for peace of mind.

Loyalty program: There is a loyalty program for regular customers that offers additional bonuses and incentives.

The team at Toyota Center Odessa "VIDI Palmira" strives to provide a positive experience for every customer and meet the high standards and expectations of its customers. For more information and answers to your questions, you can contact them by phone (048) 734 45 45.
KING Pacman Website with React
Tags: website
Published: 2023-10-03 18:53:57

---
title: KING Pacman Website with React
published: true
date: 2023-10-02 00:14:00 UTC
tags: WebSite
canonical_url: https://reactjsexample.com/king-pacman-website-with-react/
---

# The Frontend of KING Pacman site

## Live site
 ![KING Pacman Website with React](https://reactjsexample.com/content/images/2023/09/code_2023-30-22-08-53.jpg)

[![KING Pacman Website with React](https://github.com/Dejan-Teofilovic/kingpac-site/raw/main/live-site.png)](https://kingpactoken.com)

## Contact info

- **Email:** [dejanteofilovic2@gmail.com](mailto:dejanteofilovic2@gmail.com)
- **Discord:** [dejan\_teofilovic](https://discord.gg/PztT2r5U)

## Release date

May 26, 2022

## Environment

- `Node.js v14.17.0`

## Stack

- **Framework:** `React.js v18.1.0`
- **Theme:** `MUI v5.8.0`

## How to run the game.

1. Please open terminal window in the root directory.
2. Please run command `npm run start` in it.

![KING Pacman Website with React](https://github.com/Dejan-Teofilovic/kingpac-site/raw/main/guide-terminal.png)

## GitHub

[View Github](https://github.com/Dejan-Teofilovic/kingpac-site?ref=reactjsexample.com)
What's Your 5-Year Code Vision?
Tags: discuss, codenewbie, beginner
Published: 2023-10-02 00:00:00

---
published_at : 2023-10-02 00:00 +0000
---
Imagine it's five years from now, and you're at the peak of your coding career. Write a brief vision statement describing your ideal job, the projects you're working on, and the impact you've made on the industry.

Follow the [CodeNewbie Org](https://dev.to/codenewbieteam) and [#codenewbie](https://dev.to/t/codenewbie) for more discussions and online camaraderie! *{% embed* https://dev.to/codenewbieteam *%}*
Monolithic Apps in Containers: Viable or Not?
Tags: discuss
Published: 2023-10-02 00:00:00

---
published_at : 2023-10-02 00:00 +0000
---

>  Do you think running monolithic applications in containers is a good idea? Share your insights on the benefits and drawbacks of this approach.

Follow the DEVteam for more discussions and online camaraderie!

{% embed [https://dev.to/devteam](https://dev.to/devteam) %}