teleren/devto huggingface dataset:
Tab Garbage Collector
Tags: productivity, chrome, javascript, programming
Published: 2023-11-19 00:30:30

I am very good at opening new Chrome tabs but not as great at closing them. Very often, I open a tab and forget about it and to open a new one. As a result, I always end up with a lot of duplicate tabs that only take my precious tab space. At the same time I feel anxious whenever I think about closing a tabs. To “solve” my problem I created a simple Chrome extension – [Tab Garbage Collector](https://chromewebstore.google.com/detail/tab-garbage-collector/dclacapdfnancbiogggiajldemcfgbej?hl=en) – that finds duplicate tabs and let me close them with just one click. I know that this is not only my problem so I published my extension in the Chrome Web Store so that anyone can use it.

Here is a short video showing the extension in action:
{% youtube 3uhFzAkgvoA %}

If you are interested what’s under the hood, the code is available on [github](https://github.com/moozzyk/tab-gc).
A package for page transition animation in Next.js
Tags: pagetransitions
Published: 2023-12-06 09:27:45

---
title: A package for page transition animation in Next.js
published: true
date: 2023-11-19 00:13:00 UTC
tags: PageTransitions
canonical_url: https://reactjsexample.com/a-package-for-page-transition-animation-in-next-js/
---

# (hidden)mekuri
 ![A package for page transition animation in Next.js](https://reactjsexample.com/content/images/2023/11/Code_2023-11_12-07-49.jpg)

![A package for page transition animation in Next.js](https://github.com/FunTechInc/mekuri/raw/main/public/app-header.jpg)

(hidden)mekuri is a package for page transition animation in Next.js. It supports both ‘wait’ and ‘sync’ modes, as well as popstate (scroll position preservation during popstate). Since animations can be set on a per-component basis, you can implement them flexibly using animation libraries such as GSAP.

```
$ npm i @funtech-inc/mekuri
```

## MekuriContext

```
"use client";

import { usePathname } from "next/navigation";
import { MekuriContext } from "@funtech-inc/mekuri";

export const PageTransitionContext = ({
   children,
}: {
   children: React.ReactNode;
}) => {
   const pathname = usePathname();
   return (
      <MekuriContext
         millisecond={600}
         scrollRestoration={{
            scrollRestoration: "restore",
            onEnter: (pos) => {
               window.scrollTo({ top: pos });
            },
         }}
         mode="wait"
         trigger={pathname}>
         {children}
      </MekuriContext>
   );
};
```

## Mekuri

```
"use client";

import { MekuriFreezer, Mekuri } from "@funtech-inc/mekuri";
// import { LayoutRouterContext } from "next/dist/shared/lib/app-router-context";
// Next.js ^13.5.2 〜
import { LayoutRouterContext } from "next/dist/shared/lib/app-router-context.shared-runtime";
import { usePathname } from "next/navigation";

export const PageTransitionLayout = ({
   children,
}: {
   children: React.ReactNode;
}) => {
   const pathname = usePathname();
   return (
      <Mekuri>
         <MekuriFreezer key={pathname} routerContext={LayoutRouterContext}>
            {children}
         </MekuriFreezer>
      </Mekuri>
   );
};
```

Since the key cannot be obtained by changing children during app router page transition, it is necessary to import LayoutRouterContext from next and pass the context to `MekuriFreezer`.

[See this issue](https://github.com/vercel/next.js/issues/49279)

## useMekuriAnimation

```
"use client";

import { useRef } from "react";
import { useMekuriAnimation, useMekuriDuration } from "@funtech-inc/mekuri";

export const PageTransitionAnimation = ({
   children,
}: {
   children: React.ReactNode;
}) => {
   const ref = useRef(null);
   const { second } = useMekuriDuration();

   useMekuriAnimation({
      onEveryLeave: () => {
         // some event
      },
   });
   return <div ref={ref}>{children}</div>;
};
```

You can get the duration with `useMekuriDuration`.

```
const { second, millisecond } = useMekuriDuration();
```

## GitHub

[View Github](https://github.com/FunTechInc/mekuri?ref=reactjsexample.com)
Photographs - Writeup
Tags: hacking, security, cybersecurity, ctf
Published: 2023-11-19 00:02:14

When you open the challenge's page, this is its' content:


![A picture, and the challenge in a message](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7te63eoohoipi12ly53w.png)

By downloading the image and taking a look at its' EXIF metadata, you're going to find the nickname `fl0pfl0p5` in the author field. This nickname can be used as input for a tool like Sherlock, or maybe just a google search, and both will result in interesting stuff.

![Sherlock finding social media accounts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3332v0hmoogzwxv997ew.png)

The google results, in special, give us a more important hint, which is this one:

![Another user referencing the nickname fl0pfl0p5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3q2dv0s4vhprhnbgfeoa.png)

When we open this reddit post, there's a comment referencing fl0pfl0p5's github user, but the person who's making this comment has a different username, which is `m4r64r1n3`.

Sherlock returns similar results for this different username, and by looking at its' twitter account, there's this post of a photo that they took!

![Photo of a bird](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a8lt8cbgwepa88qm6c3j.png)

By downloading this picture and using it in a reverse image search tool, such as google image's "find source", you are going to find this reddit post:

![Same picture in a different post](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v9cvwjubol3flqbyh3zp.png)

By looking at the reddit post, it was made by a third nickname (this person likes to use different nicknames, damn!), which is `v1ck1v4l3`:

![v1ck1v4l3 post](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0phgchqpeb7r3al7yzde.png)

If you search for the nickname on Google, there will be a blog with the same name and the same picture as a post!


![v1ck1v4l3 blog](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/91fvhq6fgbj27twg0j2p.png)

There's an anonymous comment in the picture saying that it's not a good idea to share locations online, so it gives us a hint that the location was shared before, in the blog. Web archive to the rescue!


![Comment in the picture post](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7r5t2s4ckkjgp0q7i5cy.png)


By picking up the picture post URL and putting it in the web archive, there will be found a snapshot of it, which contains the flag!


![Web archive snapshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q1hpdhexe3jy16gqv0fb.png)


![Result flag](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/glo8c1lpcpaylokyk77j.png)
How to Overcome Fear in Pursuing Goals?
Tags: discuss
Published: 2023-11-19 00:00:00

---
published_at : 2023-11-19 00:00 +0000
---
How do you motivate yourself to overcome fear and take the first step towards your goals in tech? Share your strategies and experiences.
<br>
Follow the DEVteam for more discussions and online camaraderie! {% embed https://dev.to/devteam %}
Caption This! 🤔💭
Tags: discuss, watercooler
Published: 2023-11-19 00:00:00

---
published_at : 2023-11-19 00:00 +0000
---
We need your help. We need you to caption this image for us. It is really important, we swear.

Comment below what you think the caption could be, and, as stated prior, this is really important and studious work that we are doing, and that need your help on. 
👁👄👁 

![Closeup of a cow with its tongue out.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9csg89i1mrx8oxi0859g.jpg)

---

All jokes aside, follow the DEVteam for more online camaraderie!

{% embed [https://dev.to/devteam](https://dev.to/devteam) %}
Why Do We Side Hustle?
Tags: discuss, codenewbie, beginner
Published: 2023-11-19 00:00:00

---
published_at : 2023-11-19 00:00 +0000
---
Embracing the Side-Hustle Culture: Tech folks are known for it. Why do you think this is? Have you explored side projects, and how do they impact your career?
<br>
Follow the CodeNewbie Org and #codenewbie for more discussions and online camaraderie!
{% embed https://dev.to/codenewbieteam %}
Mullvad vs ProtonVPN: Effortless Security Showdown - Which One's for You?
Tags: technology, security, cybersecurity
Published: 2023-10-09 03:03:12

---
title: Mullvad vs ProtonVPN: Effortless Security Showdown - Which One's for You?
published: true
date: 2023-11-19 00:00:00 UTC
tags: Technology,Security,Cybersecurity
canonical_url: https://simeononsecurity.ch/articles/mullvad-vs-protonvpn/
---

Discover an effortless comparison of Mullvad VPN and ProtonVPN, their security features, performance, and more, helping you choose the best VPN for your needs.

[https://simeononsecurity.ch/articles/mullvad-vs-protonvpn/](https://simeononsecurity.ch/articles/mullvad-vs-protonvpn/)
Automatic Rails Flash messages with Localization support
Tags: rails, i18n, programming, ruby
Published: 2023-11-18 23:42:06

Every Rails developer knows about the [`flash`](https://api.rubyonrails.org/classes/ActionDispatch/Flash.html) feature and how it's often used to present alerts and notices after a user performs an action. These flashes can be set directly in a controller's action like so:

```ruby
def create
  @post = Post.new(post_params)
  if @post.save 
    redirect_to post_urls, flash: { notice: 'Post created successfully' }
  else
    render :new, status: :unprocessable_entity
  end
end
```

Having user-facing text in our controllers is a bit obtrusive though as it distracts from the action's business logic.

To minimize this while also maintaining robust user messaging, I often include the below concern in my controllers. This module will set up easy auto-assignment of flash messages from localizations!

```ruby
# app/controllers/concerns/flashable.rb
module Flashable
  extend ActiveSupport::Concern

  included do
    after_action :try_to_set_flash
  end

  def try_to_set_flash
    return unless request.post? || request.patch? || request.delete?

    catch :exception do
      case response.status
      when 200..399
        flash[:notice] = I18n.t('success', scope: flash_i18n_namespace, throw: true)
      when 400..499
        flash[:alert] = I18n.t('error', scope: flash_i18n_namespace, throw: true)
      end
    end
  end

  def flash_i18n_namespace
    "flash.#{controller_name}.#{action_name}"
  end
end
```

Once you've created this module in your code base, you can `include Flashable` in your `ApplicationController`. Next, create a new locale file under `config/locales/flashes.en.yml`.

The module expects flashes localization entries to be named using the controller and action. When the action was successful a "success" entry set to `flash[:notice]`. When the action failed, the "error" messages is set to `flash[:alert].`

```yaml
en:
  flash:
    posts:
      create:
        success: Post was successfully created
        error: Post was failed to save
    sessions:
      create:
        success: Login successful.
      destroy:
        success: Logout successful.
```

🎉 Happy coding!
Adding CI for testing the code
Tags: javascript, webdev, opensource
Published: 2023-11-18 23:32:38

In our coding journey, we discovered the magic of Continuous Integration/Continuous Deployment (CI/CD) and how it can transform the way we build and maintain our projects. Let's dive into the steps we took, sans the jargon!

I introduced GitHub Actions—an automated assistant that checks our code whenever there's a change. No more manual tests! This ensures that our code is always up to snuff.

We brought in ESLint, our code stylist. It scans our code, points out style blunders, and helps us maintain a consistent and aesthetically pleasing codebase.

Bugs, the bane of every coder's existence. We added automated tests to our workflow, so whenever we make a change, the system automatically runs tests to sniff out any lurking bugs. It's like having a superhero sidekick that keeps our code bug-free.

Through these steps, our code quality soared. The GitHub Actions workflow ensures that each change is thoroughly examined, ESLint keeps our code stylish, and automated tests act as our vigilant guardians against bugs. The result? A robust and reliable codebase ready for anything the coding universe throws at it.

In a nutshell, by embracing CI/CD principles and tools, our coding life has become more efficient and our projects more dependable.
My script to install husky, commitlint and lint-staged with zx
Tags: husky, eslint, zx, git
Published: 2023-11-18 23:31:51

Hello friends,

In all my projects I use [husky](https://github.com/typicode/husky), [lint-staged](https://www.npmjs.com/package/lint-staged) and [commitlint](https://commitlint.js.org/#/).

## Husky 

I love husky ! It helps to create Git hook. I use it for : 
- run eslint with lint-staged before commit
- commitlint to follow [conventionnal commits](https://www.conventionalcommits.org/en/v1.0.0/) rules
- run unit tests before push

## lint-staged

lint-staged is useful to run eslint against staged git files.
I love it, with lint-staged your commits contain nice files ;). It's better than one commit called `lint all files` after all commits ^^.

## commitlint

commitlint checks if your commit messages meet the [conventionnal commit](https://www.conventionalcommits.org/en/v1.0.0/) format.
I discovered conventionnal commit in my company and know I use it in any projects ;).

It's especially useful when we are many developers in a project. It's better than commit like `job done`, `fix something` etc ^^.

## Installation

To install everything on my projects I create a zx script in my [zx-scripts](https://github.com/amiceli/zx-scripts) repository.

If you want test it, you can run this script with[zx](https://github.com/google/zx) : 

    zx https://raw.githubusercontent.com/amiceli/zx-scripts/main/index.mjs

If you don't have zx, you can install it with npm : `npm i -g zx`.

I'm still wording on it to add some args and eslint install.

Ciao friends !
HIRE AN EXPERT HACKER NOW
Published: 2023-11-18 23:24:50


For database or hacking services of any kind, contact wizardlarry@mail.com. They can assist with a variety of problems and can help recover compromised accounts as well as track down cryptocurrency that has been stolen. It also took me a while to locate them on the deep web.

Email: Support(@)wizardlarryrecovery.com

WhatsApp:  +39 351 189 0091

Visit website: https://larrywizard43.wixsite.com/wizardlarry

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7f3oyknmrgtsvg2akgrx.jpeg)
Celebrating One Year of My Side Project: A Job Search Portal Journey 🚀
Tags: remotework, remotejobs, opentowork, opentoworkremote
Published: 2023-11-18 23:16:58

🚀 A year into the exciting journey of developing my own job search portal as a side project, and I'm thrilled to share the latest updates with you all! 🌐💼

During my spare time, I've dedicated efforts to enhance the platform by adding 20 new job sources. Additionally, I've introduced a new page with categorized listings to streamline your job search experience. Not stopping there, I'm currently working on a location-based section to further refine the user experience – stay tuned for that!

As of today, the portal boasts an impressive 6800 job opportunities, with a significant number offering remote work options. The globalization of opportunities is incredible, and I'm passionate about facilitating connections between professionals and job opportunities worldwide.

It's worth noting that a majority of these opportunities require proficiency in English, presenting an excellent opportunity for those looking to boost their language skills and advance their careers.

I extend my gratitude to everyone who has been a part of this journey so far. Here's to achieving more milestones together! 💪

🚀 Thank you for being part of this exciting endeavor! 🌟

Visit the project: https://www.opentoworkremote.com/
Run MusicGen-stereo on Google Colab (Free-tier)
Tags: googlecolab, python, generativeai, music
Published: 2023-11-18 23:15:28

MusicGen Stereo
https://medium.com/r/?url=https%3A%2F%2Fhuggingface.co%2Ffacebook%2Fmusicgen-stereo-medium

Run MusicGen on Google Colab T4

```python
# install packages
!python3 -m pip install -U git+https://github.com/facebookresearch/audiocraft#egg=audiocraft

# import packages
from audiocraft.models import musicgen
from audiocraft.utils.notebook import display_audio
import torch

# generate music
# In this case, we'll try to generate a couple of music
prompts = ['futuristic rock music', 'futuristic jazz music'] # describe the music you want to generate

model = musicgen.MusicGen.get_pretrained('facebook/musicgen-stereo-medium')
model.set_generation_params(duration=60)

res = model.generate(prompts, 
    progress=True)
display_audio(res, 32000)
```

### export music as a wav file.

```python
from audiocraft.data.audio import audio_write

for idx, one_wav in enumerate(res):
    audio_write(f'generated_music_{idx}', one_wav.cpu(), model.sample_rate, strategy="loudness")
```
The following is what I generated. Both of prompts were generated by ChatGPT😁

Cosmic Rhythm
https://soundcloud.com/koji-kanao/cosmic-rhythm

Fusion Flow
https://soundcloud.com/koji-kanao/fusion-flow
Example of Asynchronous Context Manager (async with)
Tags: python
Published: 2023-11-18 22:34:37

```python
#!/usr/bin/env python3
import asyncio

async def sleep(time):
    print(f"Sleeping for {time} seconds")
    await asyncio.sleep(time)

class MyObj:
    def __init__(self, warn=True):
        """
        Don't directly create an instance
        Instead use async_init() below (to work-around async call in __init__)
 
        Created with help from Stack Overflow:
            How to set class attribute with await in __init__
            https://stackoverflow.com/q/33128325
            Asked by https://stackoverflow.com/users/1026990/uralbash
            https://stackoverflow.com/a/33134213
            Answered by https://stackoverflow.com/users/2073595/dano
        """
        if warn:
            assert False, f"Do not directly create an instance of {type(self)}"
    
    # pylint: disable=attribute-defined-outside-init
    @classmethod
    async def async_init(cls, time):
        obj = cls(warn=False)
        obj.time = time
        await sleep(obj.time)
        return obj
    
    async def __aenter__(self):
        print("Enter")
        await sleep(self.time)
        return self
    
    async def __aexit__(self, exc_type, exc_value, traceback):
        print("Exit")
        
async def main():
    async with await MyObj.async_init(1) as my_obj:
        pass
```

Alternatively with decorator `asynccontextmanager` and `try -> yield -> finally`

```python
#!/usr/bin/env python3
import asyncio
from contextlib import asynccontextmanager

async def sleep(time):
    print(f"Sleeping for {time} seconds")
    await asyncio.sleep(time)

class MyObj:
    
    @classmethod
    @asynccontextmanager
    async def async_init(cls, time):
        obj = cls()
        obj.time = time
        await sleep(obj.time)
        try:
            print("Enter")
            await sleep(obj.time)
            yield obj
        except AssertionError:
            print("Assertion caught")
        finally:
            print("Exit")

async def main():
    async with MyObj.async_init(1) as my_obj:
        assert False

if __name__ == "__main__":
    asyncio.run(main())
```
Tackling the Button Size Issue in an Open-Source Fitness App
Published: 2023-11-18 22:21:46


##Introduction:
Contributing to open-source projects can be an enlightening experience. Recently, I had the opportunity to work on an open-source fitness app, where I faced a unique challenge: resolving the button size inconsistency on the workout screen. In this blog post, I'll share my journey in addressing this issue and how it helped improve the app's user interface.

##Getting Started:
My adventure began when I expressed interest in contributing to the fitness app's development. To my delight, the project maintainer promptly assigned me to a task – fixing the button size issue on the workout screen. This experience provided me with valuable insights into open-source collaboration and problem-solving.

##Understanding the Problem:
The button size inconsistency was a pre-existing issue that had been affecting the app's usability. As I dived into the project's codebase, I had to familiarize myself with its structure and coding conventions, ensuring that my contributions aligned with the project's existing standards.

##Identifying the Culprit:
The primary challenge I faced was locating the specific code responsible for controlling button sizes on the workout screen. The app was built using React Native, and styles were defined using a combination of inline styles and external style sheets. Despite my experience with React Native, pinpointing the exact code affecting button sizes proved to be a bit of a puzzle.

##The Solution:
After meticulous code exploration, I successfully identified the root cause of the button size inconsistency. It turned out that some button components lacked consistent size attributes. To resolve this, I added width and height properties to the button styles, ensuring uniformity in button sizes throughout the workout screen.


##Appreciation for Feedback:
I am grateful for the opportunity to work on this open-source fitness app and contribute to its improvement. The button size issue may have been a small hiccup, but it served as a reminder of the power of collective contributions. Open source is a vibrant ecosystem where developers come together to create something greater than the sum of its parts.

##Conclusion:
My journey of addressing the button size issue in this open-source fitness app was both rewarding and educational. It highlighted the importance of collaboration, problem-solving, and maintaining a consistent user interface. As I continue to contribute to open-source projects, I look forward to more opportunities to make a positive impact on the software development community.