teleren/devto huggingface dataset:
Glassmorphism CSS Generator
Tags: webdev, css, programming, productivity
Published: 2023-04-30 15:22:32

Design isn't something that stays the same forever. Old trends go, new trends replace them. It's constantly evolving.

A relatively new trend on the web is **Glassmorphism**. You can imagine it as taking a glass panel and putting it in front of a background. Give the glass a little bit of colour and a blur effect which result in the background changing completely when you're looking through the glass piece. Now add the information that you want to transmit to your user on top and voilà, you've got yourself a pretty looking glassmorphism UI.


So We decided to build a free [Glassmorphism CSS Generator](https://democoding.in/css-glassmorphism-generator)

What you can do with this tool is that you can generate the css that you need to get the glassmorphism effect.

Some of the features include:

- glassmorphism properties (blur, transparency) 
- component border radius
- change the background image
- change the card background color

We also add some crazy examples of Glassmorphism. they all are free to use

1. [Glassmorphism Profile Card](https://democoding.in/css-glassmorphism-generator)

![Glassmorphism Profile Card](https://i.ibb.co/V9mhZ0K/ezgif-com-gif-maker-11.webp)

---

2. [Glassmorphism Card Hover Effect](https://youtu.be/t7ib0W14ZaE)


![Glassmorphism Card Hover Effect](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mtdrf9jrbua67a98oaf2.gif)


---

{% youtube t7ib0W14ZaE %}

---
---
{% link https://dev.to/jon_snow789/instagram-3d-post-generator-2h7p %}

---
---

This tool is free to use and to play with. let us know in the comments section what you think about it, what would you do differently, or how we can improve it. Thank You 🧡🧡

Check it out: [Glassmorphism CSS Generator](https://democoding.in/css-glassmorphism-generator)
Gnarly News April 2023
Tags: nextjs, ruby, rails, news
Published: 2023-04-30 14:51:31

The software development landscape is constantly changing. As a software consultancy, it’s our responsibility to keep our finger on the pulse of the industry. Here are some headlines that caught our attention recently. 

## [Rails World: A New Conference in 2023](https://rubyonrails.org/2023/4/6/rails-world-is-coming)

Conference season is upon us! There have been many announcements as of late about conference dates and CFPs but one of the most buzzworthy for us is Rails World. Rails World is a brand-new conference that is sponsored by the Rails Foundation and will be held in Amsterdam, Netherlands (😏)  on October 5th and 6th. 

## [Ruby 3.2.2 Released](https://www.ruby-lang.org/en/news/2023/03/30/ruby-3-2-2-released/)

Ruby 3.2.2 was released at the end of last month. There’s nothing super shiny in this release but there are some important security fixes in the <code>[Time](https://www.ruby-lang.org/en/news/2023/03/30/redos-in-time-cve-2023-28756/)</code> and <code>[URI](https://www.ruby-lang.org/en/news/2023/03/28/redos-in-uri-cve-2023-28755/)</code> classes that you’ll want to get in ASAP.

## [Next.js Version 13.3 Released](https://nextjs.org/blog/next-13-3)

This release is all about community-requested features! Four main improvements are described in the release notes such as the ability to dynamically generate sitemaps and Open Graph images. It also adds SPA support for Server Components and adds some new advanced routing features for the App Router.  


## Contributors

* [Ethan Fertsch](https://github.com/efertsch)

_Learn more about how The Gnar [builds software](https://www.thegnar.com/software-development)._
Error TypeError: (0 , _react.createContext) is not a function
Tags: nextjs, redux
Published: 2023-04-30 14:43:18

I'm making a NextJS Redux app, where after putting `const dispatch = useDispatch()`, I'm getting this error: 

>  Error TypeError: (0 , _react.createContext) is not a function

[StackOverflow](https://stackoverflow.com/questions/75448286/typeerror-0-react-createcontext-is-not-a-function-on-nextjs-using-redux)
How to Install dbForge Studio for PostgreSQL on macOS
Tags: postgres, postgressql, database, dbforgestudio
Published: 2023-04-30 13:46:48

This video covers a step by step plan to install and use dbForge Studio for PostgreSQL on your macOS using CrossOver - https://youtu.be/QyXnV3RQqII

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fl6bvgf8lapp70ttqaxl.png)
When to use PHP abstract classes
Tags: php, beginners, programming
Published: 2023-04-30 13:38:16

OOP and abstract classes are not specific to PHP, but let's see when it makes sense using this programming language.

## Abstract classes are meant for inheritance

Abstract classes are generic templates that are extended by other classes to implement their abstract methods.

At this point, you may still struggle to understand why you should use them instead of other known structures, for example:

* simple classes
* interfaces

## Abstract classes vs. simple classes

Unlike simple classes, abstract classes cannot be instanciated. A child class and the keyword `extends` are required:

```PHP
abstract class MyAbstract 
{
    abstract protected function isValid(): bool;
}

class MyClass extends MyAbstract 
{
    protected function isValid(): bool
    {
        return true;// or a more complex condition
    }
}
```

`isValid()` does not mean anything in itself. We just want to **force child classes to implement it**.

This logic may also explain why you cannot define private abstract methods. It's either public or protected.

## Abstract classes vs. interfaces

Abstract classes can contain non-abstract methods and properties child classes do not have to [re-]implement (e.g., common implementations and properties available for all child classes).

Both abstract classes and interfaces will force other classes to implement specific methods, but abstract classes are meant for inheritance, whereas interfaces are used to achieve  polymorphism.

In short:

* if you need to share common features and properties across the entire hierarchy (all child classes), use an abstract
* if you need to force an implementation but with additional parameters (only if you define default values), use an abstract
* if you start adding lots of abstract methods in your abstract class, it might be better to use an interface
100days of coding challenge accepted
Tags: programming, beginners, java
Published: 2023-04-30 13:35:30

Hello everyone.

It's Hassan Shahzad Aheer from Karachi,Pakistan, and I'm excited to publicly commit to the #100DaysOfCode challenge starting from [date, e.g. May 1st, 2023]. You can follow my progress on Twitter [https://twitter.com/hshahzadaheer].

My goal for the next 100 days is to master data structures and algorithms through the resources provided in this YouTube playlist (https://www.youtube.com/playlist?list=PL9gnSGHSqcnr_DxHsP7AW9ftq0AtAyYqJ) and this Google Sheets document (https://docs.google.com/spreadsheets/d/1O4Yp6EHUL785BBIZ0ENMVurM1Zb1E0wFhiVBa5A8lNU/edit#gid=1923098947).

I'm sharing my commitment with the community in the hopes of inspiring others to join me on this journey of self-improvement. If you're interested in participating in the challenge, you can learn more about it at https://www.100daysofx.com/challenges/

I'll be documenting my progress on social media using the hashtag #100DaysOfCode, and I encourage you to do the same if you decide to join me. Let's support each other and learn new things every day!

Thanks for reading, and happy coding!
What is MySQL: Tutorial Guide for Beginners
Tags: mysql, database, dbforge, dbforgestudio
Published: 2023-04-30 13:34:28

The video is about the world of databases, the importance of MySQL and the various tools and features that make it one of the most popular database management systems - https://youtu.be/rjlmfZUJbec

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vs6twu1ftxzxz8l17ily.png)
15 Project Ideas for Developers: From Easy to Hard
Tags: webdev, programming, javascript, python
Published: 2023-04-30 13:25:49

## Blog Link: https://medium.com/@naser_shareef/32abe214977

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ysu5fua07wuzinbqx595.jpg)
Install Docker Desktop on Ubuntu 22.04
Tags: docker, ubuntu, beginners, tutorial
Published: 2023-04-30 13:25:48

## 1. Set up Docker
### Set up the repository
1. Update the apt package index and install packages to allow apt to use a repository over HTTPS:
```bash
sudo apt-get update
sudo apt-get install \
    ca-certificates \
    curl \
    gnupg
```
2. Add Docker’s official GPG key:
```bash
sudo install -m 0755 -d /etc/apt/keyrings
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg
sudo chmod a+r /etc/apt/keyrings/docker.gpg
```
3. Use the following command to set up the repository:
```bash
echo \
  "deb [arch="$(dpkg --print-architecture)" signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/ubuntu \
  "$(. /etc/os-release && echo "$VERSION_CODENAME")" stable" | \
  sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
```
### Install Docker Engine
1. Update the apt package index:
```bash
sudo apt-get update
```
2. Install Docker Engine, containerd, and Docker Compose.
```bash
sudo apt-get install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin
```
## 2. Install Docker Desktop
1. Download latest DEB package.
2. Install the package with apt as follows:
```bash
sudo apt-get update
sudo apt-get install ./docker-desktop-<version>-<arch>.deb
```
---
Source:
- https://docs.docker.com/desktop/install/ubuntu/
[Storybook GPT] Joining the GitHub + DEV 2023 Hackathon
Tags: react, webdev, githubhack23, gpt3
Published: 2023-04-30 13:15:30


Earlier this week I found out about the [GitHub + DEV 2023 Hackathon](https://dev.to/devteam/announcing-the-github-dev-2023-hackathon-4ocn) and I was immediately excited to learn more about it. 

As an application developer, I'm always looking for new opportunities to challenge myself and showcase my skills. This hackathon seems like the perfect opportunity for me to learn about Github Codespaces (which I wanted to use for quite some time) and ChatGPT API.

After doing some research, I decided that for this hackathon I will utilize the power of [GitHub Codespaces](https://github.com/features/codespaces) to develop an open source web application that uses ChatGPT API to automate the process of generating Storybook stories from React components and it will be named **StorybookGPT** (you can find similar projects made by [Kate](https://github.com/whoiskatrin)). Therefore, I presume this project falls under the **Wacky Wildcards** category.

Overall, I'm excited to join the GitHub + DEV 2023 Hackathon and see how this project turns out.
ez-ux: an invitation to work on this open source project
Tags: opensource, beginners, ai, javascript
Published: 2023-04-30 13:14:55


Today, I am excited to share my latest open-source project: [ez-ux](https://livramatheus.github.io/ez-ux/) - **a tool to easily build Midjourney prompts for UX**, ranging from mobile apps all the way to desktop landing pages. This application also allows the user to refine the prompt and even choose a specific color palette. 

But hey. I’m not just sharing the project with you all. I’m actually **looking for contributors to this open source project**.


![ez-ux](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gv3vogmi9fbj597n13gg.PNG)

To keep things simple, I decided to build this tool using **HTML, CSS, and JavaScript**. This means that developers with **less experience can also contribute** to the project. Whether you are an experienced developer or just starting out, there's something for everyone in this project.

I'm open to suggestions, feedback, and contributions from the community. Whether you want to work on a new feature or a bug fix, your contributions will be greatly appreciated.

If you're interested in getting involved, [head over to the project's GitHub page](https://github.com/livramatheus/ez-ux) and take a look at the code. You can also reach out to me directly if you have any questions or suggestions. **Let's work together** to improve this tool that has already helped me a lot (and can definitely help others too).

Lastly, if you at least liked the project, **leave a star**!
Thanks!
Common Git Issues and How to Troubleshoot Them
Tags: git
Published: 2023-04-30 13:05:00

While Git is a powerful tool, it can sometimes have issues that need to be resolved. Here are some common Git issues and how to troubleshoot them:

1\. Merge Conflicts

Git merge conflicts occur when two or more developers make changes to the same codebase at the same time, and Git cannot automatically merge the changes. To troubleshoot Git merge conflicts, developers can use the following steps:

- Identify the conflicting changes: Git will highlight the conflicting changes in the codebase. Developers should review the changes and identify the conflicting lines of code.

- Resolve the conflicts: Developers should manually edit the code to resolve the conflicts. They can choose to keep one version of the code, or merge the changes together.

- Add and commit the changes: After resolving the conflicts, developers should add the changes to the staging area and commit them to the repository.

2\. Detached HEAD

Detached HEAD is a Git issue that occurs when developers check out a specific commit instead of a branch. To troubleshoot Detached HEAD, developers can use the following steps:

- Checkout a branch: Developers should checkout a branch instead of a specific commit. This will allow them to work with the codebase as usual.

- Create a new branch: If developers need to make changes to the codebase while in Detached HEAD, they can create a new branch from the current commit. This will allow them to make changes and commit them to the repository.

3\. Git Errors

Git errors are common issues that developers face when using Git. To troubleshoot Git errors, developers can use the following steps:

- Check the error message: Git errors often come with error messages that provide information about the issue. Developers should read the error message carefully to understand the issue.

- Search for solutions: Developers can search online for solutions to the specific Git error. There are many online resources, such as Stack Overflow and Git documentation, that provide solutions to common Git errors.

- Reset Git configuration: If the Git error is related to the configuration, developers can reset the Git configuration using the git config command. They can also remove the Git repository and clone it again to reset the configuration.

By following these Git Workflow models and troubleshooting steps, developers can manage their codebase effectively and resolve common Git issues. Git is a powerful tool that can help developers collaborate and manage their codebase efficiently, and with the right approach and mindset, it can be a valuable asset for any project.
Compare Two Tables In MySQL: The Easy And Cool Guide
Tags: mysql, database, dbforge, dbforgestudio
Published: 2023-04-30 12:57:42

If you need to transfer data or compare two copies for other reasons, this article is for you. If you are looking for MySQL code to compare, your code samples are waiting for you below, as well as alternatives to MySQL code - GUI tools - https://www.techwhoop.com/compare-two-tables-in-mysql/

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rtb9ko55p7n3y2g4by25.png)
Event bus in Vue 3
Published: 2023-04-30 11:49:08

## Introduction :

Vue.js provides an efficient seamless way to communicate with sibling components using emit, but sometimes we want to trigger a method and pass data to it from a sibling component, this scenario sounds familiar, right?

No worries a global event bus comes to the rescue, which is what we would usually use to trigger a method from a sibling component, but that got deprecated in Vue 3.

in Vue 2 it would be something like that

```
export const bus = new Vue();

bus.$on(...)

bus.$emit(...)

```

In Vue 3 we would need to install an external library called Mitt

`npm install --save mitt
`
## Scenario :

now let's picture a scenario, where we have component A and component B, they are both sibling components, component A has a button, which if clicked will invoke a method in component B, let see how this works.

## in main.js

We have registered the mitt globally we will inject it in both components to trigger the method by injecting it

```
import { createApp } from "vue";
import mitt from 'mitt';

const app = createApp(App);

const eventBus = mitt();

// we need to provide it to the app to be used globally
app.provide('eventBus',eventBus);
```

## in Component A:

component A will emit the event when the button is clicked, which will result in passing a param to component B once mounted

```
<script>

export default {
  name: "AppSideNav",
  // we inject the event bus in the component
  inject: ["eventBus"],
  data() {
    return {
 
    };
  },
  methods:{
    triggerMethod(param){
        this.eventBus.emit("trigger-method-in-componentB", param);

    }
  }
  
}
</script>
<template>
  <div> 
    <button @click='triggerMethod(param)' >
       click me !
     </button>
   </div>
</template>
```

## in Component B:

we subscribe to the emitted event that will trigger the method sayMessage() in component B to be invoked.

```

<script>
export default {
  name: "AppBoard",
    // we inject the eventbus in the component B

  inject: ["eventBus"],
   
  data(){
    return{
      message:'',
    },
  
  },
   methods:{
       sayMessage(){
          console.log(this.message)
       }
    },
   mounted() {
    this.eventBus.on("trigger-method-in-componentB", (param) => {
      this.message = param;
      this.sayMessage();
      
    });
 
  },
 </script>

```

## Thank you for reading!
MySQL LIKE Operator: 7 Examples and Best Practices
Tags: mysql, database, dbforge, dbforgestudio
Published: 2023-04-30 12:35:43

This article describes the basic syntax for using the LIKE operator, as well as illustrated examples of how to apply it in queries using one of the most popular MySQL IDEs on the market, dbForge Studio for MySQL - https://blog.devart.com/mysql-like-tutorial.html

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b4ee0gozqoqj1f0hm1uf.png)
Git Best Practices
Tags: git, backend
Published: 2023-04-30 12:32:23

Git is a powerful version control system that is widely used by developers for managing their codebase. However, to ensure that the codebase is well-managed, organized, and maintainable, developers need to follow some best practices. In this blog post, we will discuss some of the best practices for using Git.

1\. Commit Frequently

One of the best practices for using Git is to commit frequently. Commits should be small and frequent, with each commit representing a single logical change. This makes it easier to track changes and revert to previous versions if necessary. Developers should also make sure to write clear commit messages that explain what changes were made and why.

2\. Use Meaningful Branch Names

Another best practice is to use meaningful branch names. Branch names should be descriptive and meaningful, indicating the purpose of the branch. This makes it easier to understand the branch's purpose and helps avoid confusion. Developers should also use feature branches, which are branches created specifically for developing a new feature or fixing a bug. This isolates changes from the main codebase until they are ready to be merged into the main branch.

3\. Use Git Hooks

Git hooks are scripts that run automatically whenever certain Git events occur, such as committing or pushing changes. Developers can use Git hooks to automate tasks, such as running tests or formatting code, and ensure that code quality is maintained. For example, a pre-commit hook can automatically run static code analysis tools to ensure that the code meets certain quality standards before it is committed.

4\. Keep the Repository Clean

Another best practice is to keep the repository clean and organized, with unnecessary files and directories removed. This helps reduce the repository's size and makes it easier to navigate. Developers should also use Gitignore files to exclude files that should not be tracked, such as temporary files or build artifacts.

5\. Use Git Tags

Git tags are labels that are assigned to specific commits, indicating a version or release. Developers can use Git tags to mark important milestones, such as a production release, and make it easier to track changes over time. Tags can also be used to mark a specific commit as a hotfix or a security patch.

By following these best practices, developers can ensure that their codebase is well-managed, organized, and maintainable. Git is a powerful tool that can help developers collaborate and manage their codebase effectively. However, it is important to follow these best practices to ensure that the codebase is consistent and high-quality.
Use pip packages in DaVinci Resolve scripts
Tags: davinciresolve, python, pip, logs
Published: 2023-04-30 12:32:09

As a content creator and a automation enthusiast, I've spent some time studying how to script my video editing workflow in DaVinci Resolve. I'm happy to share my findings because I've found that there isn't much documentation on this topic.

As with regular programming, it's always beneficial to reuse modules written by others when creating scripts for DaVinci Resolve. These modules can be easily installed using pip, just like with any other Python project. 

However, it's important to note that the process for using custom modules in DaVinci Resolve is slightly different than it is for regular Python programming. 

In particular, you need to manually locate the Python folder used by DaVinci Resolve and install the module in the "site-packages" folder within that folder. Once installed, the module can be used just like any other module in your DaVinci Resolve scripts. 

To locate DaVinci Resolve's Python folder, I created script that logs `os.file`:

```python
import logging
logger = logging.getLogger()
logging.basicConfig(filename='/absolutePath/forYourLogFile/log.log', level=logging.DEBUG)
logger.debug(str(os.__file__))
```
After executing the script from DaVinci Resolve, you will see in the log file a line like `DEBUG:root:/Library/Frameworks/Python.framework/Versions/3.10/lib/python3.10/os.py`

Open up a terminal and navigate to the bin directory, some levels up the path that was logged. In my case was `/Library/Frameworks/Python.framework/Versions/3.10/bin`.

From there you can install a custom Python module in DaVinci Resolve with the command `./pip3 install <module name>`

In your DaVinci Resolve script you will be able to import it with `import <module name>`

In conclusion, using Python modules in DaVinci Resolve can offer many opportunities for customizing and automating your workflow.

I hope this article has been helpful to you and has provided you with the necessary information to use custom Python modules in DaVinci Resolve.

This was tested with Resolve 18 on MacOs
MySQL Table Editor
Tags: mysql, database, dbforge, dbforgestudio
Published: 2023-04-30 12:04:48

The table editor is a tool that helps you create, modify, and delete tables. Let's take a look at the MySQL table editor and some of the tools available on the market that simplify the process of editing tables - https://www.sciencetimes.com/articles/43079/20230331/mysql-table-editor.htm

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