teleren/devto huggingface dataset:
Make noise overlay used in award-winning sites in 3 steps
Tags: css, webdev, beginners, design
Published: 2023-10-23 10:43:35

You may have come across this trend on [Awwwards](https://www.awwwards.com/), especially in some portfolio sites on there.

You can see it clearly on [David Obodo's site.](https://www.davidobodo.com/)

The starting point is to find a noise overlay texture image that we can use. Something subtle with a transparent background works best.

This is the one I'm going to be using. Just right click and save the image to use it with me 👇
![noise texture overlay](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/clu8w1lontu7604euvkx.png)

**1. The HTML**
Let's make a div and give it a class. It's best to have this div just inside the body but separate from everything else.

HTML:
`<div class="noise"></div>`

JSX (React):
`<div className="noise"></div>`

**2. Setting the background image and making it fill the screen**
It might seem strange that we are making the image much bigger than the screen but it is necessary as it's going to be getting moved around a lot when we bring in the animation.
```
.noise {
    background-image: url("../assets/noise.png");
    position: fixed; // To show noise at all times
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200vh;
    opacity: 0.5; // To make the effect more subtle. You can adjust this to your liking.
}
```

**3. Adding a noise animation**
The idea here is to move the image around very quickly. First we need to add the animation property to our existing .noise selector.

```
.noise {
    // Your existing code
    animation: noise 0.3s infinite;
}
```

Now for the keyframes:

```
@keyframes noise {
    0% {
        transform: translate(0, 0);
    }
    10% {
        transform: translate(-5%, -5%);
    }
    20% {
        transform: translate(-10%, 5%);
    }
    30% {
        transform: translate(5%, -10%);
    }
    40% {
        transform: translate(-5%, 15%);
    }
    50% {
        transform: translate(-10%, 5%);
    }
    60% {
        transform: translate(15%, 0);
    }
    70% {
        transform: translate(0, 10%);
    }
    80% {
        transform: translate(-15%, 0);
    }
    90% {
        transform: translate(10%, 5%);
    }
    100% {
        transform: translate(5%, 0);
    }
}
```

**That's it!**
If you now set your body's background colour to a dark colour you should have something that looks like this 👇

![end result preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wccomeyqyr4stzwmx57z.gif)
Welcome to focussync, a community driven productivity website!
Tags: webdev, nextjs, react, productivity
Published: 2023-10-23 10:36:13

We at focussync believe that achieving your goals is easier and more fun when you have a community supporting you and holding you accountable. That's why we built focussync - to make goal setting and tracking social.

Here's how focussync works:

## Set a goal   

The first step is setting a meaningful goal you want to achieve. It can be anything from losing 10 pounds to learning a new skill. Write down your goal on focussync and break it into smaller actionable tasks.

## Track your tasks

For each task that helps you progress toward your goal, log the time you spend working on it on focussync. This keeps you honest and aware of where you're spending your time.

## Stay motivated   

See how other focussync users are tracking their progress toward their goals. Comment and encourage each other. The social aspect keeps you motivated and on track to achieve your goals.   

We hope focussync can be a helpful tool for you to make achieving your goals a fun and social experience. Let us know if you have any questions or feedback - we're just getting started and want to build the best product we can for our users.

Welcome to the focussync community! Let's make this year the year of achieving our goals.      

You can join the focussync community at [https://focus-sync.vercel.app](https://focus-sync.vercel.app)
Digital marketing services
Tags: marketing, motivation, learning, startup
Published: 2023-10-23 10:35:40

Beetle Dynamics is a Jaipur based company specializing in Digital marketing, internet and interactive media development. We create internet brands, engaging websites, and social media campaigns. We are the team of coders, storytellers, and best of marketing minds who specialize in social, digital and interactive media. We aim to add value to the user’s life because ‘adding value first’ is the winning formula of growth.
[SOLVED]Yet another docker + vite, The connection was reset
Tags: vite, laravel, docker, cors
Published: 2023-10-23 10:23:23

Alright, I am at my wit's end here. I am trying to run vite inside a docker container, that's it. Together with the Laravel plugin 'laravel-vite-plugin'. In a php:8.1-apache container. But it won't load. The console screams
`Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:5173/@vite/client. (Reason: CORS request did not succeed). Status code: (null).`
When I try to visit http://localhost:5173/@vite/client, the browser tells me, "The connection was reset.". Not sure how else debug this through.

I run a standard php:8.1-apache Dockerfile with docker-compose build and docker-compose up. All I added are some lines in the Dockerfile to install node. Then I expose the ports 80:80 and 5173:5137 in docker-compose.yml. I configure vite like this:

```
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/js/app.js'],
            refresh: true
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false
                }
            }
        })
    ],
    server: {
        host: '0.0.0.0',
        port: 5173,
        hmr: {
            port: 5173,
            clientPort: 5173,
            host: 'localhost'
        }
    }
});
```

And then I simply run npx vite inside the php:8.1-apache container. I tried everything I could think of but I cannot get this to work! Is it possible that apache blocks this somehow?
The Complete Guide to Time Series Models
Tags: timeseriesm, machinelearning, datascience, dataengineering
Published: 2023-10-23 10:19:36

As we journey through the intricate landscape of time series modeling, it becomes apparent that our quest for understanding is evolving gradually. Let us embark on a comprehensive exploration of time series modeling, and I eagerly await your feedback.
**Defining Time Series**: A time series is a collection of data points meticulously recorded over time. It's a window into the past that offers us the opportunity to scrutinize the ever-shifting influences on specific variables across distinct time intervals.
**Use & Importance of Time series analysis** : Helps organizations understand the underlying causes of trends or systemic patterns over time. Using data visualizations, business users can see seasonal trends and dig deeper into why these trends occur. With modern analytics platforms, these visualizations can go far beyond line graphs.
**Type of Time- Series models**: There are various types of time-series forecasting models that help in predicting future values. 

Time series models exhibit distinct characteristics: 
**Trend - T(t):** a long-term upward or downward change in the average value.

**Seasonality - S(t):** a periodic change to the value that follows an identifiable pattern.

**Residual  R(t):** random fluctuations in the time series data that does not follow any patterns. 

**Types of time-series models are:** 

- **ARMA(Autoregressive + Moving Average)**: it is a combination of two parts - the model with p autoregressive terms and q moving-average terms. This model contains the AR(p) and MA(q) models.The combination of said models (ARMA) are linear models that work off of an assumption of a stationary input. Under this assumption, they can be used to predict a future occurrence based on previous observations if suitably defined.


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

- **ARIMA(Autoregressive Integrated Moving Average)** : It extends from ARMA model and incorporates the integrated component (inverse of differencing).Its used as a forecasting tool to predict how something will act in the future based on past performance. It is used in technical analysis to predict an asset's future performance. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ih91wl8v4vhm42wtsxp.jpg)

- **SARIMA(Seasonal Auto-Regressive Integrated Moving Average)**: An extension of the ARIMA which addresses the periodic pattern observed in the time series. They are specifically designed to handle data with seasonal patterns.

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

In conclusion, time series modeling equips us with the knowledge to unearth insights, make informed decisions, and forecast future trends. Whether you're a data scientist, a business analyst, or simply someone fascinated by the compelling world of data, this can help you with understanding what time series models are.

Kindly share your thoughts and insights.
Generate all the binary strings of n bits
Tags: beginners, recursion, backtracking, leetcode
Published: 2023-10-23 10:07:39

The point is simple to generate all the binary string of n bits.
Like, n = 3 then
000
001
010
011
100
101
110
111

Overall all 8 binary strings as a result which is simple to determine as the number of possible binary string would be 2<sup>n</sup>

Why 2? 
As we have only 2 character options within a string ie, 0 or 1


Here we set initially zero and till every character is not zero we continue to do so.
Once we reach end and the string is saved, then we go with seting the current character to one and keep doning this.

This process is known as back tracking.

### Show me the code

```
import java.util.ArrayList;
import java.util.List;
import java.util.Scanner;
import java.util.stream.Collector;
import java.util.stream.Collectors;

public class BinaryString {
    public static void main(String[] args) {
        int n = (new Scanner(System.in)).nextInt();

        // String here is represented in form of character arry
        // just for sake of simplicity
        char[] s = new char[n]; 

        List<String> resultStrings = new ArrayList<>();
        
        generateString(s, n, resultStrings);

        System.out.println(resultStrings.stream().collect(Collectors.joining(", ")));
    }

    private static void generateString(char[] s, int n, List<String> resultStrings) {
        if (n == 0) {
            // only one character left
            resultStrings.add(new String(s));
            return;
        }
        s[n - 1] = '0';
        generateString(s, n-1, resultStrings);

        s[n - 1] = '1';
        generateString(s, n-1, resultStrings);
    }
}
```
As a 1st Time Contributor
Tags: hack23contributor, beginners, github
Published: 2023-10-23 10:07:07

If you are a contributor, I also encourage you to participate in Hacktoberfest. It is a great way to learn new skills, make a positive impact on the world, and have some fun!
From my Experience here are some tips for upcoming contributors:

*Start early. Don't wait until the last minute to start contributing. This will give you more time to learn about the project and to make meaningful contributions.

*Be patient. It can take some time for your contributions to be reviewed and merged. Be patient with the maintainers, and be willing to make changes based on their feedback.

*Don't be afraid to ask for help. If you are stuck on something, don't be afraid to ask for help from the maintainers or from other contributors. The open source community is very welcoming and helpful

Here are some of my accepted recent contributions to this year's #hacktoberfest23 event as a #hack23contributor:
1)https://github.com/GFGVITAP/Ai/pull/9
2)https://github.com/GFGVITAP/Ai/pull/5
3)https://github.com/GFGVITAP/Ai/pull/3
4)https://github.com/GFGVITAP/Ai/pull/2
Create a Random Color Palette Generator in HTML CSS & JavaScript
Tags: html, css, javascript, tutorial
Published: 2023-10-23 09:50:55


Create a Random Color Palette Generator in HTML CSS & JavaScript

hey guys today we are going to learn to Create a Random Color Palette Generator in HTML CSS & JavaScript. When you create any application, you must use colors.

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

Colors play an important role inside the website or web applications, so, we are getting colors from another website. You know you can create it using HTML, CSS, and JavaScript.

So, I'm going to teach you how to use HTML CSS, and JavaScript to create it from scratch. Once you create it, you can use it offline, you don't need to use the internet to design the application.

After watching the complete tutorial, I hope you've learned something new from the tutorial, after watching the complete tutorial I hope you've learned something new from the tutorial.

{% embed https://www.youtube.com/watch?v=y49pHvh8lL8 %}
Meet updated ODBC with Server to Server authentication mode, better support and compatibility, and more
Tags: odbc, odbcdriver
Published: 2023-10-23 09:50:05

Devart, a recognized vendor of world-class data connectivity solutions for various data connection technologies and frameworks, announced new versions of [ODBC Drivers](https://www.devart.com/odbc/?utm_source=devto&utm_medium=referral&utm_campaign=pr_odbc_23.10.23) with Server to Server authentication mode, support and compatibility improvements, and more. 

**The list of the improvements includes:**

- An update for Direct Mode, built on the SQLite engine, version 3.42.0;
- Support for CREATE TABLE AS SELECT statement for xBase is now available;
- Implemented Server to Server authentication for Salesforce Marketing Cloud (formerly ExactTarget);
- Jira supports custom tables and custom fields now;
- ListSurveys table and fields to the ListMembers table for SurveyMonkey are available now;
- Compatibility with the Survey Rocket plugin for Sugar CRM;
- Updated SQL engine for Sendinblue, along with multiple bug fixes and quality-of-life improvements.

To learn more about the recent release and download new products, visit: 
https://blog.devart.com/new-in-odbc-server-to-server-authentication-mode-support-and-compatibility-improvements-and-more.html

**Devart ODBC Drivers** are high-performance connectivity solutions with enterprise-level features for accessing the most popular database management systems and cloud services from ODBC-compliant reporting, analytics, BI, and ETL tools on 32-bit and 64-bit Windows, macOS, and Linux. Our ODBC drivers fully support standard ODBC API functions and data types to enable easy access to live data from anywhere.

**About Devart** 
 
Devart is one of the leading developers of database tools and administration software, ALM solutions, data providers for various database servers, data integration, and backup solutions. The company also implements Web and Mobile development projects. 
For additional information about Devart, visit https://www.devart.com/.
Bahçeşehir Çilingir Anahtarcı
Tags: discuss, beginners
Published: 2023-10-23 09:49:10

Çilingir hizmetinden faydalanmak isteyen kişiler bu isteklerinin acil bir şekilde çözüme kavuşturulmasını isterler. Bir çilingir, en kısa süre içerisinde müşterisine ulaşarak kapısını hızlı bir şekilde açabilecek donanıma sahip olmalıdır. Bu yetenek beykentcilingirnet‘ de fazlası ile mevcuttur. Kasa çilingir servisi, kapı çilingircisi, acil kapı anahtarcı, İstanbul Bahçeşehir acil çilingir ve tüm konularda hizmet alabilmek adına beykent anahtarcı ile iletişime geçebilirsiniz.  Bahçeşehirde çilingir yetkili merkez anahtarcı en hızlı şekilde en yakın ve yakınımda beylikdüzü nde 
İstanbul nüfus yoğunluğu en fazla olan kentimizdir. Bu sebepten dolayı en çok çilingir ihtiyacı bulunan şehrimiz de İstanbul başakşehir dir Kendilerine ulaşan talepleri en iyi şekilde karşılayan bahçeşehir çilingir sizin de çilingir ihtiyacınızı en iyi şekilde, güvenle karşılayacaktır. Kapıda mı kaldınız? Anahtarcı mı arıyorsunuz? İstanbul çilingir, zengin anahtar firması ile iletişime geçtiğinizde en kısa süre içerisinde acil çilingirci kapınıza kadar ulaşacaktır. Kapı çilingir, kasa servisi, oto araba açma ve benzeri tüm konularda bu alanda uzman kişiler tarafından sizlere özel hizmet aktarılacaktır. Sizler de anahtarcı, çilingir ihtiyaçlarınızı hızlı, pratik bir şekilde karşılayabilmek adına http://www.bahcesehircilingiri.com ile iletişim kurabilirsiniz.
Beykent Çilingir Anahtarcı
Tags: discuss, devops
Published: 2023-10-23 09:41:30

Beykent Çilingir Firması, çeşitli çilingir ihtiyaçlarına hızlı ve etkili çözümler sunar. Kapı açma, kilit değiştirme, anahtar kopyalama, oto çilingir hizmetleri, kasa açma ve daha fazlası gibi bir dizi hizmet sunmaktayız. Bu, müşterilerimizin farklı ihtiyaçlarına uygun çözümler bulabilecekleri anlamına gelir.

Güvenlik teknolojileri sürekli olarak gelişiyor ve biz de bu gelişmelere ayak uyduruyoruz. *Beykent Çilingir* Firması olarak, en son teknolojiyi kullanarak güvenlik sistemleri kurulumu ve diğer çilingir hizmetlerini sunuyoruz. Bu, müşterilerimize en yüksek güvenlik standartlarını sağlama konusunda yardımcı olur.

Müşteri memnuniyeti, işimizin merkezinde yer alır. Her müşteriye kişiselleştirilmiş hizmet sunarak, müşterilerimizin güvenini kazanmayı ve uzun vadeli ilişkiler kurmayı hedefliyoruz. Beykent Anahtarcı Firması olarak, müşteri geri bildirimlerine ve taleplerine her zaman açığız. http://www.beykentcilingir.net
Password Reset Page with Supabase and Next.js
Published: 2023-10-23 09:41:12


In this tutorial, we will create a password reset page using Supabase and Next.js. 

We will create two pages: one for requesting a password reset and another for updating the password.

## Step 1: Setting up the Request Password Reset Page

First, let's create a page where users can request a password reset. We'll call this page request-reset.tsx.

```js
import { useState } from "react"
import { useSessionContext } from "@supabase/auth-helpers-react"

export default function PasswordReset() {
  const [loading, setLoading] = useState(false)
  const [email, setEmail] = useState("")
  const { supabaseClient } = useSessionContext()

  async function handlePasswordReset(e) {
    e.preventDefault()
    setLoading(true)

    const { error } = await supabaseClient.auth.resetPasswordForEmail(email, {
      redirectTo: `${window.location.origin}/update-password`,
    })

    if (error) {
      alert("Error: ", error.message)
    } else {
      alert("Password reset email sent.")
    }

    setLoading(false)
  }

  return (
    <div>
      <h1>Forgot password</h1>
      <form onSubmit={handlePasswordReset}>
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          placeholder="Your email"
        />
        <button type="submit" disabled={loading}>
          Submit
        </button>
      </form>
    </div>
  )
}
```

By using `supabaseClient.auth.resetPasswordForEmail`, we instruct Supabase to send a password reset email with a link to our second page.

## Step 2: Setting up the Update Password Page


Next, let's create a page where users can update their password after they have received the password reset email. We'll call this page update-password.tsx.

```js
import { useState } from "react"
import { useSessionContext, useUser } from "@supabase/auth-helpers-react"
import Router from "next/router"

export default function UpdatePassword() {
  const [loading, setLoading] = useState(false)
  const [password, setPassword] = useState("")
  const { supabaseClient } = useSessionContext()

  const handlePasswordReset = async (e) => {
    e.preventDefault()
    setLoading(true)

    const { error } = await supabaseClient.auth.updateUser({ password })

    if (error) {
      alert("Error: ", error.message)
    } else {
      alert("Password updated successfully")

      // Redirect your user to the app
      Router.push("/")
    }

    setLoading(false)
  }

  return (
    <div>
      <h1>Reset password</h1>
      <form onSubmit={handlePasswordReset}>
        <input
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          placeholder="New password"
        />
        <button type="submit" disabled={loading}>
          Submit
        </button>
      </form>
    </div>
  )
}
```

And that's it! You've got a basic password reset logic using Supabase and Next.js.

You can now add the link to `/request-reset` on your login page:

```js
<Link href="/request-reset">
  Forgot password?
</Link>
```
Placeholder Pledge
Tags: hacktoberfest23
Published: 2023-10-23 09:31:13

<!-- ✨This template is only meant to get your ideas going, so please feel free to write your own title, structure, and words! ✨ -->


### Intro
<!-- If you are new to the DEV community, introduce yourself and share a bit about why you joined DEV and your motivation to participate in Hacktoberfest this year. -->


### Background
<!-- Are you brand new to Hacktoberfest? What about coding in general? Tell us about how you got here -->


### Pledge
<!-- Share with us a bit about your goals during your Hacktoberfest journey this month. Are you a contributor looking to hone your skills or a maintainer looking for some help on a new project? Let us know!  -->
Replace any object in a photograph with Stable Diffusion Python SDK.
Tags: ai, sdk, stablediffusion, api
Published: 2023-10-23 09:22:40


![Stable diffusion API to replace any object](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zxaernhq4wbqg0szi988.png)

You can install the Novita Python SDK using just one command

```bash
pip install novita-client
```

get `NOVITA_API_KEY` from https://novita.ai/get-started/

Finally, you can try the change cat to dog by following this code.

```python
import os

from novita_client import NovitaClient, Txt2ImgRequest, UpscaleRequest
from novita_client.utils import base64_to_image, image_to_base64
from PIL import Image
from io import BytesIO

novita = NovitaClient(os.getenv('NOVITA_API_KEY'))

replace_object_res = novita.replace_object(image="https://cdn-images-1.medium.com/max/1600/1*E3jkiGoC8EfVlqqhE_6SWw.png", object_prompt="a cat", prompt="a dog", response_image_type="png")
replace_object_generated = base64_to_image(replace_object_res.image_file)
replace_object_generated.save("replace-object.png")
```

novita-client is the Python SDK of Novita.AI, which provides the following features.

- [cleanup](./examples/cleanup.py) - remove all your generated images
- [remove-background](./examples/remove-background.py) - remove background from image
- [remove-text](./examples/remove-text.py) - remove text from image
- [reimagine](./examples/reimagine.py) - reimagine image
- [doodle](./examples/doodle.py) - doodle image
- [merge-face](./examples/merge-face.py) - merge face
- [mix-pose](./examples/mix-pose.py) - mix pose
- [outpainting](./examples/outpainting.py) - outpainting
- [replace-object](./examples/remove-object.py) - remove object
- [replace-background](./examples/replace-background.py) - replace background
- [replace-sky](./examples/replace-sky.py) - replace sky
- [create-tile](./examples/create-tile.py) - create tile