teleren/devto huggingface dataset:
Splitting.js: CSS vars for split words & chars
Tags: codepen
Published: 2023-05-11 08:59:43

<p>Examples of text effects built with  Splitting: <a href="https://splitting.js.org" target="_blank">https://splitting.js.org</a></p>

<p>These animations/transitions are all done with CSS after Splitting adds helper spans &amp; CSS Variables.</p>

{% codepen https://codepen.io/TarrynKJ/pen/QWZmGpR %}
Question: How do you keep on top of the endless renovate PRs?
Published: 2023-05-11 08:47:43

Hi Folks
My team is currently battling a tsunami of renovate PRs for npm package upgrades.  We are using renovate to help automate package upgrades to ensure that we are always on the latest version which in turn helps to improve our security posture.  

However, over the past 6 to 12 months it has come to a point where we are struggling to keep up with fixing the broken builds due to a renovate PR trying to upgrade a package.

Some ideas we have thought of to try and combat this are:

1. Create a culture of everyone spending an hour or two every
morning working on renovate PRs.
2. Reduce the number of repos we have (we have quite a few) by merging some into mono-repos, thereby allowing us to share more packages between projects reducing the number of PRs.
3. Focus on the package upgrades raised by Snyk instead of renovate as security is our highest priority.
4. Create a team culture of, if you are working in a repo, make sure you resolve all renovate PRs before releasing to prod.

Each option has pros and cons, for example, option 1 may not scale well, option 2 could mean that although a package upgrade works for one project in the mono-repo it may not work for another thereby delaying the upgrade for all projects in the repo, or the added complexity of being able to deploy projects in a mono-repo individually. Option 3 means that some packages can be far behind making a future upgrade require a bigger jump between versions.  Option 4 means that seldom touched repos don't get upgraded as frequently resulting in a similar problem to option 3.  Therefore,a combination of these options, or other options would be require.

I'm keen to learn what strategies others use to keep their package upgrades under control and ensure that your code remain secure.
The State of Web Scraping 2023 Survey
Tags: webscraping, webdev, datascience, python
Published: 2023-05-11 08:46:14

We're excited to share that we've just launched the 'State of Web Scraping 2023' survey. Embracing the spirit of open knowledge, we aim to help the web scraping community understand itself better. That's why we're making both raw data and results publicly available. Our goal is to turn this into an annual endeavor, similar to what other tech communities do.

To participate in the 'State of Web Scraping 2023' survey, please follow this link: https://forms.gle/Wsi24nWHHe2qLbPZ8.
As a thank you for your time, we're offering a 50% discount on our web scraping API, Scraping Fish, to all participants.

Whether you're a seasoned web scraper, a software developer, a business owner, or just starting out in the field, your experiences and insights are invaluable. The survey covers a wide range of topics: from your role and expertise in web scraping, the tools and languages you prefer, to your thoughts on the ethics and challenges associated with web scraping.

Thank you in advance for your time and insights. We can't wait to share the collective knowledge we gather from this endeavor.

Also, if you have any feedback on the survey itself or if there's anything more you'd want to learn about the web scraping community, please let us know.
Join WAM Game Jam Season 1
Tags: gamedev, html, gamejam
Published: 2023-05-11 08:40:39

🔊 Attention game devs! Join WAM.JAM Season 1 and compete for a $15k prize pool. Our goal is to discover the next viral game, and we want you to be a part of it! 

 👉 For more information and to sign up for WAM.JAM Season 1, visit our website at https://itch.io/jam/wam-jam. 
Don't miss out on this exciting opportunity to showcase your skills, connect with other developers, and potentially create the next viral game!
Devlog 1
Tags: javascript, webdev, beginners, html
Published: 2023-05-11 08:28:58

## 11 May 2023

5 days ago I started a web project. 

The idea was to create a site that displays interactive simulation(eg particle system, boids, electric fields) in our browser. 

I decided to use p5js which is a JavaScript library. 

You can see my progress here: [demo-site](https://project-demo-site.netlify.app/)
It's still in development. 

you can also checkout Instagram post to see it in action : [insta-post](https://www.instagram.com/reel/CsGHuVHIRD2/?igshid=NTc4MTIwNjQ2YQ==)

I'll be posting devlogs from now on
Join Our Exclusive Meetup on Blockchain, Crypto & NFTs!
Tags: toronto, web3, defi, meetup
Published: 2023-05-11 07:52:04

Hello everyone!

We're excited to announce our upcoming closed-door meetup on Blockchain, Crypto & NFTs, happening this Friday from 6:00 PM to 8:00 PM. If you're interested in learning more about the web3 space or investing in these areas, this is the perfect opportunity for you!



> we'll be providing wine and finger food at no cost, so come hungry and thirsty. However, please note that we have limited seats available, so be sure to RSVP soon to secure your spot.

To RSVP, please PM us with your name and contact information. We'll provide you with the event details and location once you've confirmed your attendance.

```
Can't wait to see you there and share our conversations
of the blockchain and crypto world!
```




P.S. If you'd like to know more about the event, please visit our Eventbrite page at https://www.eventbrite.com/e/xdc-network-a-blockchain-you-want-to-know-tickets-630546019117.

>
Fuzzing the JVM - FuzzingWeekly CW 19
Tags: fuzzing, opensource, java, jvm
Published: 2023-05-11 08:02:57

The theme of this week's rendition of Fuzzing Weekly is Java Virtual Machine (JVM) fuzzing, meaning languages built on top of the JVM and the JVM itself.

Here you go:

Confuzzion: A Java Virtual Machine Fuzzer for Type Confusion Vulnerabilities: https://ieeexplore.ieee.org/abstract/document/9724749

Coverage-DirectedDifferentialTestingofJVMImplementations: https://wcventure.github.io/FuzzingPaper/Paper/PLDI16_JVM.pdf

Kaizen: A Scalable Concolic Fuzzing Tool for Scala: https://dl.acm.org/doi/pdf/10.1145/3426426.3428487

Until next week!

https://www.fuzztesting.io/fuzzing-weekly

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xh8p8oqpjoieays6ylav.png)
𝐄𝐅𝐒 (𝐄𝐥𝐚𝐬𝐭𝐢𝐜 𝐅𝐢𝐥𝐞 𝐒𝐲𝐬𝐭𝐞𝐦) 𝐏𝐫𝐨𝐨𝐟 𝐨𝐟 𝐂𝐨𝐧𝐜𝐞𝐩𝐭 (𝐏𝐎𝐂):
Published: 2023-05-11 08:02:33



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cbru6tx3fm6gs2gdeuh4.JPG)#90daysofawschallenge #iammani
Hey, connections!!👋

🎯Let’s learn and grow together.

📢 📢 📢

🎯 Let’s Understand 𝐄𝐅𝐒 (𝐄𝐥𝐚𝐬𝐭𝐢𝐜 𝐅𝐢𝐥𝐞 𝐒𝐲𝐬𝐭𝐞𝐦) 𝐏𝐫𝐨𝐨𝐟 𝐨𝐟 𝐂𝐨𝐧𝐜𝐞𝐩𝐭 (𝐏𝐎𝐂):

Full video link click: https://lnkd.in/gaUuNN5W
Happy learning,
🍂🍂🍂🍂
Sources: Google

Follow me, Manikanta Suru, and Cloudnloud Tech Community on LinkedIn for more insightful knowledge & resources.


#community #connections #learning #infrastructure #iammani
Creating a Protected Route in React
Tags: react, webdev, javascript, tutorial
Published: 2023-05-11 07:37:56

You can make a page private in React Router by creating a protected route. This protected route can be used as a wrapper around route element you want to be private. Authorization will grant the user access to the private route. In this example we create a context, which holds the current authenticated state. Clicking the login button will set authenticated to true and then the user has access to the private page.

{% youtube 3YvAeaB9jns %}
Touch event triggers :hover.
Tags: svelte, css
Published: 2023-05-11 07:26:55

Hello, guys! I'm working on the project where I need some on `:hover` CSS changes to animate the component. I only need this behavior on devices with the pointer, I don't need touch events to trigger them. And I thought that's what `:hover` exists for. But unfortunately touch events can imitate hover. I was looking for an answer and found this one: 

```js
@media(hover: hover){
.your-class:hover{color: red}
}
```
 This `@media` tag actually tracking if the device has a pointer or not. If not, hover event won't be executed. My question is: is it the right and overall the best way to achieve what's expected?
Here's minimal [demonstration repo](https://svelte.dev/repl/34f24fc6f2f842bc9fc4e283e7eabb35?version=3.59.1 ).
If you're in Chrome - RMB click -> Inspect -> Toggle device toolbar (in a top left corner of dev tools) -> select Nest Hub Max. Now cursor becomes a "finger" and you could push on the div and it will animate. If you're in another browser - do something similar with it's dev tools. Just be sure to select the touchscreen device with the screen big enough to display all the content of the repo.
3D Toggle Switch CSS Button
Tags: css, design, animation, webdev
Published: 2023-05-11 07:15:00

3D Toggle Switch CSS Button

---


![3D Toggle Switch CSS Button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2x8smyb8i4ml4q5lpazz.gif)

---

### HTML Code

```html
<div class="container">
  <input id="checkbox" name="checkbox" type="checkbox">
  <label class="label" for="checkbox"></label> 
</div>
```

---

### CSS Code

```css
.container {
}

.label {
  height: 60px;
  width: 120px;
  background-color: #ffffff;
  border-radius: 30px;
  -webkit-box-shadow: inset 0 0 5px 4px rgba(255, 255, 255, 1),
    inset 0 0 20px 1px rgba(0, 0, 0, 0.488), 10px 20px 30px rgba(0, 0, 0, 0.096),
    inset 0 0 0 3px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 5px 4px rgba(255, 255, 255, 1),
    inset 0 0 20px 1px rgba(0, 0, 0, 0.488), 10px 20px 30px rgba(0, 0, 0, 0.096),
    inset 0 0 0 3px rgba(0, 0, 0, 0.3);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  cursor: pointer;
  position: relative;
  -webkit-transition: -webkit-transform 0.4s;
  transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
}

/* Visit https://democoding.in/ for more free css animation */

.label:hover {
  -webkit-transform: perspective(100px) rotateX(5deg) rotateY(-5deg);
  transform: perspective(100px) rotateX(5deg) rotateY(-5deg);
}

#checkbox:checked ~ .label:hover {
  -webkit-transform: perspective(100px) rotateX(-5deg) rotateY(5deg);
  transform: perspective(100px) rotateX(-5deg) rotateY(5deg);
}

#checkbox {
  display: none;
}

#checkbox:checked ~ .label::before {
  left: 70px;
  background-color: #000000;
  background-image: linear-gradient(315deg, #000000 0%, #414141 70%);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.label::before {
  position: absolute;
  content: "";
  height: 40px;
  width: 40px;
  border-radius: 50%;
  background-color: #000000;
  background-image: linear-gradient(
    130deg,
    #757272 10%,
    #ffffff 11%,
    #726f6f 62%
  );
  left: 10px;
  -webkit-box-shadow: 0 2px 1px rgba(0, 0, 0, 0.3), 10px 10px 10px rgba(0, 0, 0, 0.3);
  box-shadow: 0 2px 1px rgba(0, 0, 0, 0.3), 10px 10px 10px rgba(0, 0, 0, 0.3);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
```

---

### 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 %}
IT KPI : 25 Key Performance Indicator For IT Managers – Meaning ,Dashboard And Examples
Tags: beginners, productivity, opensource, discuss
Published: 2023-05-11 07:11:59


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

Experience the power of seamless HR management with our free trial - sign up now at [https://app.doerhrm.com/app/freeregister](https://app.doerhrm.com/app/freeregister) !

Download our comprehensive guide to KPI and OKR implementation at [https://www.doerhrm.com.my/download-online-kpi-okr-guide/](https://www.doerhrm.com.my/download-online-kpi-okr-guide/) today.

IT KPI- IT Key Performance Indicators (KPIs) play a critical role in measuring the performance of IT managers and their teams. These KPIs help IT managers to track their progress towards achieving specific goals and objectives, identify areas that require improvement, and make data-driven decisions. In today’s fast-paced technological environment, IT KPIs are more critical than ever before, as they provide the necessary insights for businesses to stay competitive and achieve their strategic objectives.

In this article, we will discuss 25 essential IT KPIs that IT managers must measure to ensure the effective management of their IT teams. We will explain the meaning of each KPI, provide examples of how to calculate them, and discuss their significance in evaluating IT performance. Additionally, we will explore the use of IT KPI dashboards, which can provide real-time data visualization and analysis to help IT managers make informed decisions quickly.

Throughout this article, we will use the “IT KPI” keyword to emphasize the importance of these metrics in IT management. By the end of this article, readers will have a comprehensive understanding of IT KPIs, their significance, and how to use them to improve their IT management skills and their team’s performance.

Read More at : [https://www.doerhrm.com.my/it-kpi/](https://www.doerhrm.com.my/it-kpi/)
Marketing KPI: 25 Digital Marketing Key Performance Indicators For Sales & Marketing- Manager, Department, Examples
Tags: marketing, management, productivity, discuss
Published: 2023-05-11 07:09:39


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

Experience the power of seamless HR management with our free trial - sign up now at [https://app.doerhrm.com/app/freeregister](https://app.doerhrm.com/app/freeregister) !

Download our comprehensive guide to KPI and OKR implementation at [https://www.doerhrm.com.my/download-online-kpi-okr-guide/](https://www.doerhrm.com.my/download-online-kpi-okr-guide/) today.

Marketing KPI, or key performance indicators, are a set of measurable values used by businesses to assess the success of their marketing strategies. These metrics help organizations track their progress towards achieving their marketing objectives, whether it be increasing website traffic, generating leads, or driving revenue growth.

By measuring marketing metrics, sales and marketing managers can gain valuable insights into the performance of their campaigns and identify areas for improvement. For example, if a company’s cost per acquisition is high, they may need to reassess their targeting or adjust their ad spend to optimize their ROI.

In this article, we will explore 25 digital marketing metrics across five categories: sales, marketing, website, social media, and email marketing. By understanding and tracking these KPIs, businesses can make informed decisions and improve the effectiveness of their marketing efforts.

Read More at : [https://www.doerhrm.com.my/marketing-kpi/](https://www.doerhrm.com.my/marketing-kpi/)
Latest Off-Page Techniques by Icreativez
Tags: seo, socialmedia, career, contentwriting
Published: 2023-05-11 07:03:04



## What is Off-Page SEO?
[Off-page SEO refers to SEO tactics](https://www.icreativez.com/seo-services-in-pakistan.aspx#offpageseo) applied outside of a website to improve its rankings. These tactics often include link building, guest posting, social media marketing, and more. The goal of off-page SEO is to get search engines (and users) to see your site as more trustworthy and authoritative.


## 5 New Off-Page SEO Techniques That Work:

There are 5 new off-page SEO Techniques that really work and improve your organic ranking and website domain authority.

1. Link Building
2. Content Marketing
3. Local SEO (GMB and Citations)
4. Reviews
5. Event

**Link Building:**
There are 17 types of link buildings.

- Profile creations
- Comments
- Blogs
- Forums
- Social Bookmarking
- Add URLS
- Web 2.0
- Press Release
- Articles
- Video Submission
- Infographics
- Directory Submissions
- Classified Adds
- Newsletter
- PDF Submissions
- Post
- Add Link

**Content Marketing:**

Content marketing is an important SEO tactics. If you have good content to share with other websites and find other channels, it’s good content marketing, and these tactics gain media attention and show your Expertise, Authoritativeness, and Trustworthiness (E-A-T).

Some channels include:

- Digital PR
- Social Media
- Influencer Marketing
- Guest Posting
- Podcasts
- Content Syndication
- Forums and More…

**Local SEO (GMB and Citations)**

Local SEO is a search engine optimization (SEO) strategy that helps your business be more visible in local search results on Google. Any business that has a physical location or serves a geographic area can benefit from local SEO.

**Reviews:**

Reviews are a great way to help others trust your business. Which means they are vitally important to your local SEO success. Google recommends replying to all reviews. Good and bad. Doing so shows that you value your customers’ business and feedback.

Here are a few tips for your online reviews: 

Kindly ask all customers to leave reviews
Build trust by responding to all reviews
Don’t accept (or offer) money in exchange for reviews 

**Event:**

[search engine optimization (SEO)](https://www.icreativez.com/seo-services-in-pakistan.aspx) is a critical component of event marketing success. Today, potential attendees are more likely to discover your event through a search engine than any other method, which makes it crucial to optimize your event marketing efforts for search engines.
What Was Your Toughest Coding Concept and How Did You Conquer It?
Tags: discuss, beginners, codenewbie
Published: 2023-05-11 07:00:00

We all encounter hurdles along our coding journey, but it's the triumphs that make us grow. What coding concept once posed a significant challenge for you, and how did you ultimately overcome it? Share your story and the strategies you employed to conquer the coding mountain!

---

Follow the [CodeNewbie Org](https://dev.to/codenewbieteam) and [#codenewbie](https://dev.to/t/codenewbie) for more awesome discussions and online camaraderie!

{% embed [https://dev.to/t/codenewbie](https://dev.to/codenewbieteam) %}
Can Coding Create More Efficient and Effective Remote Work Environments?
Tags: discuss
Published: 2023-05-11 07:00:00

The adoption of remote work and digital collaboration tools has accelerated in the wake of the COVID pandemic. How can coding be used to create more efficient and effective remote work environments and foster a sense of connection and productivity among distributed teams?

---

Follow the DEVteam for more awesome discussions and online camaraderie!

{% embed [https://dev.to/devteam](https://dev.to/devteam) %}
The Green Tanners: Hub of Premium Leather Goods
Tags: leather, goods, hunting, accessories
Published: 2023-05-11 06:59:09

We are a small family-based business that loves to design and craft high-quality [leather goods](https://www.thegreentanners.com/) with splendid and diverse craftsmanship. After years of learning and developing, “The Green Tanners” went from an idea to a reality and since then there is no looking back!
Our premium leather products variety consists of [leather aprons](https://www.thegreentanners.com/collections/leather-apron), backpacks, crossbody bags, shooting & hunting accessories, golf bags, tool bags, knife rolls and [leather dice cups](https://www.thegreentanners.com/collections/leather-dice-cups).
We are diversifying our product range to cater for people from different backgrounds and cultures. 
All of our products are designed to meet end users' professional needs. The design and craft not only feel appealing but also have practical features which complement the user experience, so if you are in search of handcrafted genuine leather products with smart user-dedicated features then The Green Tanners is a perfect choice for you.
Free stuff I made for Indie Hackers, Web Developers & Digital Designers
Published: 2023-05-11 06:56:39

Here is a list of all the stuff I am giving away for free that I have been building while learning web development.

161 Tailwind & Alpinejs components:
⏤ http://windstatic.com

Free personal and podcast templates on Lexington Themes:
⏤ http://lexingtonthemes.com/info/primapersona/
⏤ http://lexingtonthemes.com/info/streamer/

Astro & Tailwind CSS Open source templates:
⏤ http://astrosaas.vercel.app
⏤ http://quickstorre.vercel.app

Tools:
⏤ http://colorsandfonts.com
⏤ http://svgdoodles.com
⏤ http://svggradients.com

Figma files:
⏤ http://figma.com/@MikeAndreuzza

VS Code themes:
⏤ https://marketplace.visualstudio.com/publishers/wicked-labs

Hope you find them helpfull, have a nice day and if you want to ask me something go ahead here or on twitter.com/Mike_Andreuzza
Experience Neuron Industrial IoT Gateway Software for Free with Time-Unlimited Trial License
Tags: iot, industrial, mqtt, emq
Published: 2023-05-11 06:54:09

## Introduction

[Neuron](https://neugates.io/) is an industry IoT gateway software that enables industrial devices with essential IoT connectivity capabilities. With minimal resource utilization, Neuron can communicate with diverse industrial devices through the standard or its dedicated protocols, realizing the multiple device connections to the Industrial IoT platform.

To enable users to verify their IIoT systems more easily, Neuron v2.4.4 provides a time-unlimited free trial license. Users can now experience the full connectivity capabilities of Neuron at no cost from this version.

## Various Drivers Available for Industrial Connectivity

Neuron is an open-source project that embraces collaboration and community contribution. The core framework, dashboard, and a selection of driver modules, including widely-used Modbus-TCP and MQTT, are available as open source under the LGPLv3 license.

For those who demand more dedicated protocol connectivity, Neuron provides a range of commercial drivers catering to various industrial and common PLC protocols. These drivers include BACnet, KNXnet/IP, IEC-104, IEC-61850, Mitsubishi 1E and 3E, Siemens S7 and Fetch-write, Omron Fins TCP, Beckhoff ADS, and more. With these drivers, Neuron ensures seamless integration of various industrial devices and facilitates data communication and management.

## Try Any Drivers For As Long As You Want

Previously, users needed to download from EMQ official website or contact us directly to obtain a trial license for Neuron, limited to 1000 data tags, 100 connections, and 15 days. It was insufficient for many developers to thoroughly test and verify their work with commercial drivers.

The latest release offers an embedded, time-unlimited free trial license with a 30-data tag limitation. All you need to do is to download the latest version of Neuron's docker images or installation package and start using it immediately!

Download from [Neuron website](https://www.emqx.com/en/try?product=neuron)

![Download Neuron](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/564zqnme2y0rom8uwugo.png)

This new embedded trial license provides a flexible small-scale solution for developers to explore and evaluate Neuron's capabilities without any time restrictions.

## Summary

Neuron v2.4.4 allows users to experience its commercial connectivity capabilities with the time-unlimited trial license. We understand the challenges faced by Industrial IoT developers, and now you can take the time to adapt and debug your system with small-scale data collection to ensure that basic functions work properly.

Try Neuron's latest release for free today and experience the benefits of enhanced industrial connectivity.

_Originally published at [www.emqx.com](https://www.emqx.com/en/blog/experience-neuron-industrial-iot-gateway-software-for-free-with-time-unlimited-trial-license)_