teleren/devto huggingface dataset:
4 CSS advancements from Google I/O 2023 with examples
Tags: webdev, css, google, container
Published: 2023-05-12 14:11:28

Google I/O 2023 featured several advancements in CSS development that showcased new techniques and tools to enhance web design and user experience. Below are some of the best CSS highlights from the event, along with examples and real-life use cases.

**1. Container Queries:**
Container queries allow developers to create responsive components that adapt to the size of their container, rather than the viewport. This feature enables more modular and scalable design systems.

Example:

```
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.card {
  contain: size layout;
}

.card::container(min-width: 300px) {
  background-color: lightblue;
}

.card::container(min-width: 500px) {
  background-color: coral;
}
```

**Real-life use case**: Designing responsive cards for a product grid that change their styles based on the container's width, rather than the viewport size.

---
**2. CSS Subgrid:**
CSS Subgrid enables nested grids to align with their parent grid, making it easier to create complex and consistent layouts.

Example:

```
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.subgrid {
  display: grid;
  grid-row: 1;
  grid-column: 1 / 3;
  grid-template-columns: subgrid;
  gap: 10px;
}

.item {
  border: 1px solid black;
  padding: 10px;
}

```
**Real-life use case:** Creating a nested grid within a news website's layout to align images and text within an article while maintaining consistency with the parent grid.

---

**3. CSS Scroll Snap:**
CSS Scroll Snap provides a smooth, controlled scrolling experience by snapping elements into place as the user scrolls.

Example:

```
.container {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  display: flex;
}

.item {
  scroll-snap-align: start;
  flex: 0 0 100%;
}

```
**Real-life use case:** Building a horizontal image carousel that snaps to each image as the user scrolls, providing a seamless browsing experience.

---

**4. Layered CSS:**
Layered CSS allows developers to define styles in multiple layers, making it easier to manage large CSS codebases and improve performance.

Example:

```
@layer reset {
  * {
    margin: 0;
    padding: 0;
  }
}

@layer theme {
  body {
    background-color: #f0f0f0;
  }
}
```
**Real-life use case:** Managing styles for a large web application, where separating resets, themes, and component styles into different layers can improve readability and maintainability.

These advancements in CSS development from Google I/O 2023 provide developers with powerful tools to create more responsive, efficient, and visually appealing web experiences.
What was your win this week?
Tags: discuss, weeklyretro
Published: 2023-05-12 14:02:32

---
title: What was your win this week?
published: true
description: Looking back on this past week, what was something you were proud of accomplishing?
tags: discuss, weeklyretro
---

Hey peeps 👋

Hope that everybody has a wonderful weekend. 🙌

Looking back on this past week, what was something you were proud of accomplishing?

All wins count — big or small 🎉

Examples of 'wins' include:

- Starting a new project
- Fixing a tricky bug
- Taking a joyride! 🏍

---

![A group of 3 doggos riding a motorcycle with a sidecar, looking cute as heck](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w7p21c1bv7ihpzs4jma0.gif)
Last Chance to Register for IUG Conference 2023 in Budapest!
Tags: iug, eventsinyourcity, conference, meetup
Published: 2023-05-16 11:28:02

---
title: Last Chance to Register for IUG Conference 2023 in Budapest!
published: true
date: 2023-05-12 13:57:40 UTC
tags: iug, eventsinyourcity, conference, meetup
canonical_url: https://tech.forums.softwareag.com/t/last-chance-to-register-for-iug-conference-2023-in-budapest/278536
---

**We wanted to touch base with you and remind you that time is running out to register for this year’s [International User Groups Conference](https://www.softwareag.com/en_corporate/company/events/iug-conference.html?utm_source=mkto&utm_medium=email&utm_region=hq&utm_campaign=global_events&utm_content=iug-eventpage) (IUG) in Budapest, Hungary from June 12-16. Don’t miss out on the chance to connect with industry leaders, experts, and peers from around the world for a unique and inspiring event!**

Our agenda is packed with 80+ sessions featuring product experts and customers sharing best practices and the latest updates. You’ll get the inside scoop on our 2023 product roadmaps, enjoy extended networking time with practical advice from those who have gone before you, and set yourself on the path to digital success.

Get a glimpse of what to expect:

[![iug-what-to-expect](https://global.discourse-cdn.com/techcommunity/original/3X/6/1/619c2d1ed6a1344ca75dbb9e229173c286dfc08b.jpeg)](https://softwareag.scene7.com/is/content/softwareagprod/SAG_Promo-IUG-Conference-23-Budapest_FINAL_033023)

We’re excited to welcome you to Budapest for a few information-packed and fun-filled days!

> [Register now](https://web.cvent.com/event/815c3f76-7808-4ae8-ae4a-68ccb422e1f6/regPage:dc736f5b-504e-4fb3-ada9-ac8f7a2d23aa) to secure your spot and take advantage of this incredible opportunity.

If you need help convincing your manager to approve your trip, we’ve prepared a [justification letter](https://www.softwareag.com/en_corporate/company/events/iug-conference.html#justification) to make it easier for you.

If you can’t join us in person, you can still [register for virtual attendance](https://web.cvent.com/event/815c3f76-7808-4ae8-ae4a-68ccb422e1f6/regPage:dc736f5b-504e-4fb3-ada9-ac8f7a2d23aa), which will give you access to all the sessions on-demand starting June 22nd.


[Read full topic](https://tech.forums.softwareag.com/t/last-chance-to-register-for-iug-conference-2023-in-budapest/278536)
Why Kotlin?
Tags: kotlin, beginners, programming
Published: 2023-05-12 13:51:52

Kotlin is a trendy programming language that aims to be expressive, and error-free. JetBrains software company which is the organization behind the famous IntelliJ concept integrated development environment (IDE) has invented this, and it's now an approved programming language for producing Android apps. Kotlin is a statically-typed language, cause of that its variables and features need to be specified with a specific type at compile time, making it fewer prone to errors and less complex to maintain. 

One of the most significant advantages of Kotlin is, its compatibility with Java. Kotlin code may be turned into Java bytecode which it to execute on any platform that supports Java, including Android. Thereby it easier to integrate Kotlin into existing Java applications and to use Java libraries in Kotlin programs. Another benefit of Kotlin is ,that it has a short syntax. 

Kotlin also contains several features that help to make it simpler to write solid and maintainable code. NullPointerExceptions are not uncommon in Java when a variable is null, leading the utility to fail. Null safety is built into Kotlin, which implies that the compiler determines if a variable may be null or not at assembly time. This makes it easier to write code that is more robust and less prone to errors. Kotlin also supports practical programming, which implies that it respects functions as good residents. This implies you may use capabilities as inputs in other methods, return features from features, and shop features in variables. This makes it less difficult to write code that is more modular and easier to test.

Kotlin is a popular programming language that is make programming easier, more succinct. Its Java compatibility, null protection, and support for practical programming make it an excellent candidate for writing Android applications as well as standard-motive programming.
Why does mermaid be not supported in markdown now?
Published: 2023-05-12 13:48:58

```mermaid 
graph LR
    A[开始] --> B[任务1]
    B --> C{状态：已完成}
    C --> D{状态：进行中}
    D --> E{状态：未完成}
    E --> F{状态：已拒绝}
    F --> G{状态：已解决}
    G --> H[结束]
```
PyJaws: A Pythonic Way to Define Databricks Jobs and Workflows
Tags: spark, dataengineering, airflow, orchestration
Published: 2023-05-12 13:01:40

**PyJaws** enables declaring [Databricks Jobs and Workflows](https://docs.databricks.com/workflows/index.html) as Python code, allowing for:
* Code Linting (e.g. with [Flake](https://flake8.pycqa.org/en/latest/) or [Ruff](https://beta.ruff.rs/docs/))
* Formatting (e.g. with [Black](https://github.com/psf/black))
* Parameter Validation
* Modularity and reusability

In addition to those, **PyJaws** also provides some nice features such as **cycle detection** out of the box.

Folks who have used Python-based orchestration tools such as [Apache Airflow](https://airflow.apache.org/), [Luigi](https://luigi.readthedocs.io/en/stable/) and [Mage](https://www.mage.ai/) will be familiar with the concepts and the API if PyJaws.

PyJaws leverages some existing libraries in order to allow for modularisation, reusability and validation, such as:
* Click - for providing a rich CLI functionality
* Pydantic - for efficient parameter validation
* NetworkX - for Graph and Cycle Detection features
* Jinja2 - for templating

Check it out: https://github.com/rafaelpierre/pyjaws
#GitHubHack23 - Celebrate Contributors 🎉✨
Tags: githubhack23
Published: 2023-05-12 12:48:45

## What I built
A GitHub Action for celebrating contributors. A workflow that collects all of the contributors for the repository it is within. It then creates a table of contributors and a graph of contributions by contributor.

### Category Submission
Maintainer Must-Haves

### App Link
[Celebrate Contributors 🎉✨](https://github.com/slouchd/celebrate-contributors)

### Screenshots 

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

### Description
A GitHub Action for celebrating contributors. A workflow that collects all of the contributors for the repository it is within. It then creates a table of contributors and a graph of contributions by contributor.

### Link to Source Code
[Celebrate Contributors 🎉✨](https://github.com/slouchd/celebrate-contributors)

### Permissive License 
MIT License 🪪

## Background (What made you decide to build this particular app? What inspired you?) 
In my opinion the core tenet of open-source software are the people. The people who choose to volunteer their time and cognitive power. For the betterment of software and the world. Therefore, simply, we should celebrate those who contribute!

### How I built it (How did you utilize GitHub Actions or GitHub Codespaces? Did you learn something new along the way? Pick up a new skill?) 
This is the first time I had used GitHub Actions. What a pleasant experience it was. I had heard that it was extremely powerful but I never thought it would be this good! I am now looking to implement it in more fun and exotic ways across repositories.

### Additional Resources/Info
Inspired by: [all-contributors](https://github.com/all-contributors/all-contributors)
Simplified Debugging : One little gem in the latest version of Vue 3.3
Tags: vue, dx, beginners
Published: 2023-05-12 12:11:19

The recent release of [Vue.js 3.3](https://blog.vuejs.org/posts/vue-3-3) has brought a range of new features that significantly enhance the development experience (DX).

Among them, there is a small powerful improvement: the ability to use **console.log directly in templates**.

Previously, using console.log in Vue.js templates would cause this frustrating error 🤯 : **TypeError: Cannot read properties of undefined (reading 'log')**

However, Vue.js 3.3 has resolved [this issue](https://github.com/vuejs/core/issues/7939) by enabling the use of console.log without generating errors.

## How to use console.log in the template

```vue
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <h1>{{ count }}</h1>
  <button @click="console.log(++count)">++</button>
</template>
```

[Test the example in the Vue Playground](https://play.vuejs.org/#eNp9T0tuwjAQvYrlDaAQu4hdFKL0Ht6AM0BK/JE9oYvId+84QVVEpS7ff2bin96L5wi84nXUoffIIuDoG2V7411ANrEAV5bYNTjDNmTdKKudjci0Gy2yU9a3Hztla7k0UJYAgvHDGYEQY/X90EzTK5FSLQnP/GVEdJa1euj146R4bnYDiMHdtkUx+3eKN0VRy8VKsVr+dvM9X84szdmLr+gsPTLlZvUSouIVm5nM0fkZK35H9LGScrT+cRPaGdmSJgPt9QbKzpn2KI7iILs+4poWEE15Ce47QqBBxferbknkE0IZwHYQIPy79eZd771JfzbzZFI28fQD2YabMw==).

Now when you click on the button, you will see the value of count in your console 🥳

![A capture of the exemple with the developer console opened](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p553hbwp9m6ld4bq3av8.png)
GitHub + DEV 2023 Hackathon: Weather App
Tags: githubhack23
Published: 2023-05-12 11:29:20

## What I built 
I built an Angular app to show user weather information using: [OpenWeather API](https://openweathermap.org/), Bootstrap, RxJs and Github Actions.

### Category Submission: 
**Wacky Wildcards**

### App Link
https://weather-app-renanferro.vercel.app/

### Screenshots 
**Mobile Homepage:**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6a6ldmx4fs9t390n6psn.png)

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

**Mobile Homepage Data:**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xlvd14q3u34jxclqfvbs.png)

**Desktop Homepage Data:**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3drowjufit6jnn622u2t.png)

### Description 
An Angular app to see your weather information locally with some information, like:

- Your city
- Your country 
- Current weather
- Humidity
- Minimum temperature
- Maximum temperature
- Wind speed
- Cloudiness

**Technologies I used:**

- [Angular v16](https://angular.io/)
- [Bootstrap v5.2](https://getbootstrap.com/docs/5.2/getting-started/introduction/)
- [RxJs](https://rxjs.dev/)
- [Open Weather API](https://openweathermap.org/)
- [Published on Vercel](https://vercel.com/)


### Link to Source Code 
Github: [Weather App](https://github.com/ferrorenan/weather-app) - https://github.com/ferrorenan/weather-app

### Permissive License 
**MIT License**

Link License repository file: [LICENSE](https://github.com/ferrorenan/weather-app/blob/main/LICENSE)

## Background (What made you decide to build this particular app? What inspired you?) 
I wanted to do this because I would like to have a website to see my local weather information like temperature, wind speed, cloud cover and other information easily and quickly! And to practice development skills, learn some new things and share with the community!

### How I built it (How did you utilize GitHub Actions or GitHub Codespaces? Did you learn something new along the way? Pick up a new skill?) 

I built it using **Github Actions** and it has greatly improved my development flow and opened my mind to new ideas to use in my real work with **Github Actions**

**The problem:** I needed to improve the flow to merge the **development** branch into the **master** branch because when I push the **develop** branch I need to update **master** to update the production environment.

**The Solution:** I made a **Action on Github** to pull, merge branches and update environments! And with that I improved my development time and acquired new skills!

Your can see my **Github Actions** script [here](https://github.com/ferrorenan/weather-app/blob/main/.github/workflows/github-actions.yml)

### Additional Resources/Info
Clear All pinia stores
Tags: pinia, vue, webdev, javascript
Published: 2023-05-12 11:09:09

**Pinia** is a store library and state management framework for **Vue.js**. Designed primarily for building front-end web applications, it uses declarative syntax and offers its own state management API. it released on November 2019, so let's say it's new to the tech industry.

In this blog i won't share how to use and create Pinia stores you can check that in the [docs](https://pinia.vuejs.org/introduction.html), but i'm gonna show you how to clear or reset all pinia stores at once.

**One of the cases where you want to reset all stores** is when you have for example a social media platform and the user logged out, you don't want to keep the last user's data stored in pinia right, so that's where you need to clear all stores.

At the time were this blog is created pinia does not have a built-in function that reset all the stores in its [official docs](https://pinia.vuejs.org), we hope they'll provide one soon.

So what is the solution here ? one solution i come up with is by resetting the stores one by one, so for example let's say you've created `3 pinia stores` 

```
userStore
postsStore
followersStore
```

We need to go to each of these stores and `$reset` them one by one, and this achieved like this 

```js
import { getActivePinia } from "pinia"

// map through that list and use the **$reset** fn to reset the state
getActivePinia()._s.forEach(store => store.$reset());
```

See this is the github discussion [here](https://github.com/vuejs/pinia/discussions/911)
Google Really Impressed Us!
Tags: beginners, trend, chatgpt, google
Published: 2023-05-12 10:30:27


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


Excited for Google recent advancements in #artificialintelligence

I tested Google Bard yesterday. The first thing to note is that **#bardai** is very fast. Secondly, for less complex queries, one can prefer Bard as it's fast but if you want to do a complex one, like want it to write a difficult code, ChatGPT is way ahead. But it's just a matter of time I guess.

With Google really stepping it up. Seemed like #Bard might be busy at first. Now I’m wondering how OpenAi will respond. At this pace we might have a sentient AI in less than a year.

My thought: OpenAI will prolly make the plugins available to everyone faster if they want to compete. But with Google's integration to every product, it is a tough competition.

Google coming down with the hammer. Will Apple follow?

Super tough times, The year of Chatbots.

**OpenAI ChatGPT:** https://chat.openai.com/
**Google Bard:** https://bard.google.com/
The Art of Visualization: Why Shaping Information Architecture is Key for Building Complex Business Software
Tags: uidesign, uxdesign, architecture, product
Published: 2023-05-12 10:18:16

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/400dgdgtaokppzg4dn02.jpg)
Discover the importance of visualizing information architecture for developing complex business software, and how designing applications with a clear UI/UX can significantly impact your product’s success.

**[Read Now](https://www.cygnismedia.com/blog/information-architecture-for-developing-business-software/)**
A Realistic 3D Card hover effect using only CSS
Published: 2023-05-12 10:14:00

A Realistic 3D Card hover effect using only CSS 


---

#### This CodePen was created by [Temani Afif](https://codepen.io/t_afif)

{% codepen https://codepen.io/t_afif/pen/mdzxJaa %}

---

>This codepen was not created by me, all rights belong to its respective owners

---

### Check Our Latest Post 

{% link https://dev.to/jon_snow789/glassmorphism-css-generator-k90 %}

---

Thanks for Reading ❤️! Check my website [Demo coding](https://democoding.in/) for updates about my latest CSS Animation, CSS Tools, and some cool web dev tips. Let's be friends!

Don't forget to subscribe to our channel : [Demo code](https://www.youtube.com/@democode)

---

{% twitter 1655834579394252800 %}
Wicked Moai
Published: 2023-05-12 10:10:05

Wicked Moai is a decentralized blockchain project focused on gaming and finance. The project aims to create an ecosystem where users can participate in various activities using the MOAI token. However, it is important to note that investing in cryptocurrencies and blockchain projects comes with inherent risks. 

By participating in the Wicked Moai project, you acknowledge that you have read and understood the risks involved, including but not limited to market volatility, regulatory changes, and technological risks. You understand that the value of the MOAI token may fluctuate significantly and there is no guarantee of profit or investment return.

WICKED MOAI SEED #AIRDROP IS NOW ACTIVE!
Total reward: $100K in $MOAI
Participant time:  14:30 5th May - 14:30 15th May UTC
Grab your chance right now: https://zealy.io/c/wickedmoai/questboard
View the guideline: http://surl.li/gvgvu
#WickedMoai #zksync

Join us :
Discord | https://discord.com/invite/wickedmoai
Twitter | https://twitter.com/WickedMoai
Website | https://moai3.xyz/
Telegram | https://t.me/wickedmoai
The Future of Testing: How to Incorporate AI in Testing for Better Results in 2023
Published: 2023-05-12 10:01:35

As software development continues to grow and evolve, the use of AI in testing is becoming increasingly popular. AI technology can help automate testing tasks, allowing developers to spend more time on development rather than manual testing. In this post, we will explore how to use AI in testing in 2023.

**1.Implementing AI in Test Automation:**
Test automation has been around for years, but with the advancements in AI, it's now possible to create more sophisticated automated tests. AI can be used to create and execute test scripts, detect and analyze defects, and even generate test data.

**2.AI for Intelligent Test Selection:**
Testing all the features and functions of a software product can be time-consuming and expensive. With AI, testers can use intelligent test selection to choose the most relevant and critical tests to run. AI algorithms can analyze data about the application under test, its use cases, and test results to optimize the testing process.

**3.AI for Predictive Analytics:**
AI can be used to predict the probability of defects and identify potential risks. Predictive analytics algorithms can analyze the application code, test results, and user behavior to identify patterns and detect defects early in the development process.

**4.AI for Test Case Generation:**
Test case generation is a time-consuming task that can be automated using AI. AI algorithms can analyze the application code and generate test cases that cover all possible scenarios, reducing the risk of overlooking critical test cases.

**5.AI for Performance Testing:**
AI can be used to simulate real-world usage scenarios and identify performance bottlenecks. AI algorithms can analyze application performance data, user behavior, and other factors to optimize application performance.

**6.AI for Security Testing:**
Security testing is critical to the success of any software product. AI can be used to identify security vulnerabilities and simulate real-world attacks to test the security of the application.

**7.AI for Test Environment Management:**
Creating and managing test environments can be a complex and time-consuming task. AI can be used to automate the creation and management of test environments, reducing the time and effort required to set up and maintain test environments.

In conclusion, AI can be a valuable tool for software testers in 2023. It can automate testing tasks, identify defects early in the development process, and optimize the testing process. By incorporating AI into their testing strategy, software testers can save time and effort while improving the quality of their software products.