teleren/devto huggingface dataset:
Deep-dive into Reactivity - Part 1
Tags: webdev, javascript, frontend, react
Published: 2023-06-03 11:36:35

Welcome to the easy world. In this world, we just have to _update a variable_, and the framework does the heavy lifting of:

- **Tracking** all the places this variable was used
- **Re-computing** the _dependent functions_
- **Updating** the _dependent DOM element_, in the most efficient way possible.

Let's take a simple example. Go ahead and **click** that button.

{% codesandbox https://codesandbox.io/embed/react-click-update-7mz19k?codemirror=1&fontsize=14&theme=dark&view=split %}

On click of the button
- React has to **update the variable** `name` to Batman.
- As `name` was used in the DOM, it has to iterate over the DOM and **update the exact h1 tag** (without an `id` to `getElementById` on).
- Also as `name` was part of `useEffect`'s dependency array, it will **trigger the callback function**, and update the DOM element with the clicked timestamp.

No big deal, right? 

Let's try and implement this in Vanilla JS from scratch to see why this is a big deal.

{% codesandbox https://codesandbox.io/embed/thirsty-sanne-99yf5o?fontsize=14&hidenavigation=1&theme=dark&view=editor %}

Pheew 😪. You saw all the **extraHardWork()** we had to do to get it working?

As a developer our core job should be to _develop the app_. The more work we delegate to the framework, the better we can do our job.

In this case, the time we spend tracking 
- which DOM elements to update
- in which order should it be executed
- assigning `id` to each dynamic DOM element, and updating it.

is the time spent not doing our core job.

As the size of the applications scales, this leads to increasing number of bugs. Feeling grateful yet? 😇

In **Part 2** we get into how various frameworks like React, Vue and Svelte implement **Reactivity**, and what kind of crazy optimizations they do to keep it performant.
Creating Transferrable Knowledge
Tags: programming, career, discuss
Published: 2023-06-03 10:53:30

Hi everyone !
I am a Full stack developer usually working with python django or javascript frameworks such as react or next. And recently I had to work with Kotlin Android to create a project for my university. 

Usually, the way I work with a new project is, I put my hours in, I learn the programming language, go through the best practices, watch tutorials, read posts here on DEV ;) and so on. But in this project, I had to dive right in because of time constraints and I imagined I might bump into problems or that it would be a disaster. But instead it went pretty well and I realised I had transferrable knowledge.

What i mean by **transferrable knowledge** is the ability to identify and use programming concepts across all languages and frameworks. Because underneath all the bells and whistles of each language, they all follow mostly the same programming paradigms and concepts.

Which brings me to next point, how to create transferrable knowledge. 

**Firstly and lastly, Learn programming concepts. **

Yes, learn programming concepts! From concepts small as datatypes, data structures, conditional statements, looping statements to concepts vital such as exception handling etc. Also for bonus points, you can learn about Functional programming concepts such as currying, pure functions etc. Same goes for object oriented programming concepts.

Now that you have learned the concepts. You can choose a language to work on your side hustle. Here, you can break down the logic in terms of the concepts you have learned, then you can refer the documentation or tutorials for the  syntax to code through the logic of your application and in a few hours, you would be working through the syntax as if it were second nature.

Congrats ! You have now started with creating your transferrable knowledge. 

Have you experienced and used this in your career ? Let me know in the comments if you have.
Error with Flutter Signed Apk Generation
Tags: flutter, andoidstudio
Published: 2023-06-03 10:52:23

Hi,
I am trying to make a signed apk for play store in android studio.
Gradle build is executing successfully but signed apk generation is failing with the error as in the image.
I have tried rebuild, invalidate cache/restart but nothing works.
Please tell me what can be done.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f4fz7zd6o4241gimznl5.jpg)
New JavaScript Array Methods: A Guide for Developers
Tags: javascript, react, frontend, programming
Published: 2023-06-03 10:40:42

JavaScript arrays are a powerful tool for storing and manipulating data. In recent years, the JavaScript language has added a number of new methods to the Array object, making it even easier to work with arrays.

**Here are some of the new JavaScript array methods, in more descriptive detail:**


- **toReversed():** This method clones an array and then reverses its order. This can be useful for tasks such as sorting a list of items in reverse chronological order or displaying a list of items in reverse alphabetical order.

- **toSorted():** This method clones an array and then sorts it. This can be useful for tasks such as sorting a list of items in ascending or descending order or displaying a list of items in alphabetical order.

- **toSpliced():** This method clones an array and then splices out a section of it. This can be useful for tasks such as removing a section of items from a list or inserting a new section of items into a list.

- **with():** This method clones an array and then adds a new element to it. This can be useful for tasks such as adding a new item to a list or updating an existing item in a list.


These new methods can be used to make your JavaScript code more concise and efficient. For example, the following code uses the `toReversed()` method to reverse the order of an array:

```
const array = [1, 2, 3, 4, 5];

const reversedArray = array.toReversed();

console.log(reversedArray); // [5, 4, 3, 2, 1]

```

The following code uses the `toSorted()` method to sort an array:

```
const array = [5, 3, 1, 2, 4];

const sortedArray = array.toSorted();

console.log(sortedArray); // [1, 2, 3, 4, 5]

```

The following code uses the `toSpliced()` method to splice out a section of an array:

```
const array = [1, 2, 3, 4, 5];

const splicedArray = array.toSpliced(2, 2);

console.log(splicedArray); // [1, 2]

```

The following code uses the `with()` method to add a new element to an array:

```
const array = [1, 2, 3, 4, 5];

const newArray = array.with(6, "6");

console.log(newArray); // [1, 2, 3, 4, 5, 6]

```


These are just a few examples of how the new JavaScript array methods can be used. For more information, please consult the JavaScript documentation.

I hope this more descriptive version of the article is helpful. Please let me know if you have any other questions.
Protecting Your Online Privacy
Tags: protecting, online, privacy
Published: 2023-06-03 10:39:22

Protecting Your Online Privacy | A Comprehensive Guide

**     ----- Protecting Your Online Privacy -----
**
Online privacy! In today's video, we have an essential topic to discuss: protecting your online privacy.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6xszrsntnse3dlyuva83.png)
Inheritance in Java: Everything You Need to Know
Published: 2023-06-03 10:33:33

Inheritance in Java: A Personal Perspective
Inheritance is one of the most powerful features in Java. It allows you to create new classes that inherit the properties and methods of existing classes. This can save you time and effort when developing new code, as you can reuse the code from existing classes.

Since i am using this programming language as for my study in university, and I've found it to be a very helpful tool. It has allowed me to make me understands more about OOP's.

One of the things I like most about inheritance is that it allows me to think about my code in terms of objects. This makes it easier for me to understand and maintain my code.

For example, I recently had to develop an application that managed a fleet of vehicles. I created a Vehicle class, and then I created subclasses of Vehicle for each type of vehicle in the fleet. This made it very easy to code the different features of the application, such as starting and stopping the vehicles, and tracking their location.

If you're new to Java, I encourage you to learn about inheritance. It's a powerful feature that can help you to write better code.

Here are a few tips for using inheritance effectively:

Use single inheritance whenever possible.
Avoid using multiple inheritance unless it is absolutely necessary.
Use inheritance to reuse code, not to create new functionality.
Keep inheritance hierarchies shallow.
Use interfaces to decouple objects.
Use abstract classes to provide partial implementations of interfaces.
I hope this article has given you a better understanding of inheritance in Java. If you have any questions, please feel free to ask me.
Design Thinking
Tags: design, thinking, sustainability, growth
Published: 2023-06-03 10:02:28

- Design is a dynamic idea used to describe how organizations can adjust their problem-solving approaches to respond to rapidly changing environments—and create maximum impact and shareholder value. It's a journey and a destination.

- Design thinking is a core way of starting the journey and arriving at the right destination at the right time.

- Building a design-driven company culture
	- Empathy and purpose are core business needs
	- Steps to building success through the power of design:
		- Understand end-user behavior and needs in-depth 
		- Build bridge between the point of view of the people, the planet, and the company’s purpose
		- Combine design, business strategy, and technology in real time
		- Be agile

- User centered design vs design thinking
	- Both emphasize listening to and deeply understanding users and continually gathering and implementing feedback to develop, refine, and improve a service
	- User-centered design focuses on improving a specific product or service
	- Design thinking takes a broader view as a way to creatively address complex problems—whether for a start-up, a large organization, or society as a whole

- The principles of Design To Value (DTV) have evolved into design for value and growth (D4VG), a new way of creating products that provide exceptional customer experiences while driving both value and growth.

- An increased focus on design for sustainability (DFS), especially at the research and development stage, can help mitigate some of these inefficiencies and ultimately create even more sustainable products.

- Skinny design is a method whereby consumer goods companies reassess the overall box size of products by reducing the total cubic volume of the package.

Ref.: [Design Thinking](https://www.mckinsey.com/featured-insights/mckinsey-explainers/what-is-design-thinking)
Setup FastAPI Debugger in PyCharm With Docker
Tags: python, fastapi, docker
Published: 2023-06-03 09:24:03

The key is running only 1 worker when start uvicorn

## Content
For local Python app development, use a Docker container for non-application services like databases, Redis, etc. If all of your services are running in containers, you SHOULD use [remote debug](https://www.jetbrains.com/help/pycharm/remote-debugging-with-product.html).

If all of your services are run in container you SHOULD use [remote debug](https://www.jetbrains.com/help/pycharm/remote-debugging-with-product.html)

### 0. Dockerfile
Here, I will use docker-compose as example

* docker-compose.debug.yml
```yml
version: "3.8"
services:
  pgsql:
    image: postgres:13
    restart: unless-stopped
    environment:
        - POSTGRES_HOST_AUTH_METHOD=trust
        - POSTGRES_USER=root
        - POSTGRES_PASSWORD=
        - POSTGRES_DB=postgres
    volumes:
      - postgres:/var/lib/postgresql/data
    ports:
      - '5432:5432'
    privileged: true
volumes:
  postgres:
```

### 1. Setup Run/Debug configurations
It's located in the top-right corner.
![setup](https://i.imgur.com/0xynoAW.png)

### 2. Setup local running configuration
Choose "FastAPI" for the running configuration.

> remember to set `--workers=1`

![setup](https://i.imgur.com/2iU74Bq.png)

### 3. Setup container running configuration
Choose Docker Compose for your configuration.

![setup](https://i.imgur.com/Jh35GwE.png)

### 4. Add local configuration
Under "Before launch" settings, add your local running configuration.

![setup](https://i.imgur.com/Mbi4urj.png)

Complete setup
![setup](https://i.imgur.com/lCvuFlq.png)

### 5. Start debugger as a happy debugger
![setup](https://i.imgur.com/8WN6yD0.png)
RefreshDatabase in pytest
Tags: python, testing, tutorial
Published: 2023-06-03 09:09:49


When writing tests, there is an important concept called "unit of work," which states that every test should only focus on testing one specific thing, usually a function or a class. Additionally, each test should be independent, meaning that **the result of one test should not impact the result of another test**. 

Therefore, it is crucial to ensure that the database is clean before each test. 

In this article, I will demonstrate how to implement a database refresh using pytest.

There are 5 scopes in pytest:
- `function`: the default scope, the fixture is destroyed at the end of the test.
- `class`: the fixture is destroyed during `teardown` of the last test in the class.
- `module`: the fixture is destroyed during teardown of the last test in the module(single_test_file.py).
- `package`: the fixture is destroyed during teardown of the last test in the package(single/folder).
- `session`: the fixture is destroyed at the end of the test session.(until the command line exits)

So, we can use the `function` scope to rollback and truncate all tables of the database after every test, and use the `session` scope to drop all tables after all tests have ended. 

This approach ensures that the database schema remains unchanged and prevents tests from failing.

Here's how to implement it using SQLAlchemy:

```py
# conftest.py

from sqlalchemy import create_engine
from sqlalchemy.ext.declarative import declarative_base
from sqlalchemy.orm import sessionmaker


Base = declarative_base()

engine = create_engine(
    url='your-connection-string',
    echo=True,
    future=True,
)
@pytest.fixture(autouse=True, scope='session')
def db_engine():
    Base.metadata.create_all(engine)

    yield engine # db engine to the test session

    Base.metadata.drop_all(engine)

@pytest.fixture(autouse=True, scope='function')
def db_session(db_engine):
    session_local = sessionmaker(
        autocommit=False,
        autoflush=False,
        bind=db_engine,
        expire_on_commit=False,
    )()

    yield session_local # every test will get a new db session

    session_local.rollback() # rollback the transactions

    # truncate all tables
    for table in reversed(Base.metadata.sorted_tables):
        session.execute(f'TRUNCATE {table.name} CASCADE;')
        session.commit()

    session_local.close()
```

That is. Now, you can use `db_session` fixture in your test file to get a new db session for every test.

```py
def test_something(db_session):
    # do something
    ...
```

Also, you can refresh your redis cache in the same way if you need.

```py
import redis

@pytest.fixture(autouse=True, scope='session')
def refresh_cache():
    cache = redis.Redis(
        host='localhost',
        port=6379,
        db=0)

    yield cache

    cache.flushdb()
```
Bootcamping: An 'in-tents' experience
Tags: beginners, webdev, career, learning
Published: 2023-06-03 08:57:57

Warning: I like a good (technically bad) pun.

My web development journey started in October 2022 when I decided to brave the wilderness and enrol in the [Coder Academy full stack web development boot camp](https://coderacademy.edu.au/web-development/bootcamp). 

After over a decade in client service, sales, and marketing roles, the decision to change careers was sparked by a period of self-discovery; identifying personal and professional passions and acknowledging the desire for new challenges and a change of pace. 

The past 7 months have been a baptism by (camp) fire. From juggling full-time work, learning a completely new skill set, and regular bouts of imposter syndrome and comparisonitis, I've constantly questioned whether I made the right decision.

Despite previously working with developers and project teams on managing web and app builds, I had no hands-on coding experience. Learning new languages, terminology, platforms, and systems at such a fast pace led me to doubt myself. This was compounded by many of my classmates being well-versed in tech and development, despite it being a beginner level course. Even the fact I'm not into Pokemon (shock!) led me down a path of uncertainty.

Needless to say, the s'more I overanalysed, the s'more I felt like a fraud. 

It's taken a long time for things to finally start clicking, and while I'm still behind in my coding knowledge I have to remember that it's been less than a year. I'm still a beginner and everyone learns at their own pace.

With 8 weeks and one major assignment (full stack MERN app) to go, there's still a lot to do but I'm up for the challenge.

_Lessons learned so far:_
- It's impor-tent to remember where you started, and how far you've come on the journey.
- Learn and build with in-tent-sion; set yourself achievable goals and celebrate the small wins.
- If you don't know, ask. Don't be afraid to ask questions and don't pre-tent to know it all.
- When you feel like you've reached camp-acity, take a break. Mental and physical health is key to achieving a study/work/life balance.

---
_Apologies for the pun overkill. Once I was in the zone, I couldn't get out._
Pulse Text Animation using CSS
Published: 2023-06-03 08:06:17

Hello Coder! Today we are Going to Create Pulse Text Animation using HTML and CSS. **[Pulse Text Animation](https://www.codewithrandom.com/2022/10/19/pulse-text-animation-using-html-css/)** is like Text Blink in Every Second with animation so today we create this same Animation using Only Html and Css.

Pulse Text Animation using CSS becomes a trend nowadays to grab the user's attention developers try to add some effects in the text so that the surf time increase and users would love to visit the site again. With that note, I welcome you all to Codewithrandom with this fresh blog discussion about the text effect called pulse animation. Pulse is like the text will appear and disappear after some interval of time.

## HTML Code for Pulse Animation:-
```
<h1 class="element"><center>Welcome to Codewithrandom</center></h1>
```
In this code, we have just defined a heading and aligned it in the center. Now let us style and add the most important part of this project the CSS script.

## Pulse Text Css Code:-
```
.element {
  width: 100%;
  height: 100%;
  animation: pulse 5s infinite;
  
}

@keyframes pulse {
  0% {
    color: orange;
  }
  50%{
    opacity: 0;
  }
  100% {
    color: orange;
  }
}

html,
body {
  background: red;
  height: 100%;
}
```
In this CSS Code, we have first defined the fixed width & height for the text and the number of seconds for appearing and disappearing. And then added a background color for the styling. Let us see the Final Output.

We have successfully created our **[Pulse Animation](https://www.codewithrandom.com/2022/10/19/pulse-text-animation-using-html-css/)** in Text using CSS. You can use this project for your personal needs and the respective lines of code are given with the code pen link mentioned above.

If you find out this Blog helpful, then make sure to search Codewithrandom on Google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Written By – Harsh Sawant

Code By – harshh9
Turbolinks in prior rails versions
Published: 2023-06-03 07:53:07

Recently I have been reading about turbolinks which is deprecated but one should have a proper knowledge . I have read that turbolinks replaces the body of the requested page with the body of the current page and merges the head. The primary speed comes from not having to reload the assets like js or css files which are present in both heads of the requested and current page and are same. My confusion is some seniors say that turbolinks does not replaces the body rather it replaces the sections in the body. And If there is a full body swapping, then its almost same as even if you are sending a normal request instead of ajax. Now I am confused. Please give your expert opinion regarding the workflow of the turbolinks.
Facing Issue In Dependent Dropdowns lists in my booking form. The Second dropdown list is not loading and is blank.
Published: 2023-06-03 07:43:11



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iop9x6yuolg3n60y6j9r.PNG)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r9rsxuigq0nllrfz861w.PNG)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3esd4fc9jzpps35at1aq.PNG)
Java Full Stack Web Development Building Modern Applications
Tags: java, automation, webdev, programming
Published: 2023-06-03 07:11:59

Java Full Stack Development has become a important part of the web development landscape, empowering developers to create robust and dynamic web applications. Whether you're an experienced Java developer looking to expand your skill set or a beginner eager to enter the field, understanding the ins and outs of Java Full Stack.

Java Full Stack Development involves the end-to-end process of developing web applications, encompassing both the back-end and front-end components. A Java Full Stack Developer possesses proficiency in multiple technologies, including Java for server-side programming, frameworks like Spring or Java EE, and various front-end tools such as HTML, CSS, and JavaScript. This comprehensive skill set allows Java Full Stack Developers to handle different layers of an application, ensuring its smooth functioning.

To become a competent Java Full Stack Developer, acquiring the necessary skills and knowledge is crucial. Enrolling in a Java Full Stack course provides a structured learning path, covering fundamental Java programming, database management, server-side development, and front-end web technologies. Through practical hands-on projects and real-world examples, aspiring developers can gain invaluable experience and apply their learning to create fully functional web applications.

[Java Full Stack course](https://www.acaders.com/full-stack-developer-courses) from Acaders, a reputable institution offering a unique opportunity to pay after placement, along with a 100% placement guarantee.