teleren/devto huggingface dataset:
Code Smell 142 - Queries in Constructors
Tags: oop, java, programming, database
Published: 2022-06-20 13:30:29

*Accessing a database in domain objects is a code smell. Doing it in a constructor is a double smell*

> TL;DR: Constructors should construct (and probably initialize) objects.

# Problems

- [Coupling](https://dev.to/mcsee/coupling-the-one-and-only-software-design-problem-2pd7)

- Side Effects

# Solutions

1. Decouple essential business logic from accidental persistence

2. On persistence classes run queries in functions other than constructors/destructors

# Context

On legacy code, the database is not correctly separated from business objects.

Constructors should never have side effects.

According to the single responsibility principle, they should only build *valid* objects

# Sample Code

## Wrong

[Gist Url]: # (https://gist.github.com/mcsee/5125008158d94d51b27e8687bbbbf812)
```java
public class Person {
  int childrenCount; 

  public Person(int id) {
    childrenCount = database.sqlCall("SELECT COUNT(CHILDREN) FROM PERSON WHERE ID = " . id); 
  }
}
```

## Right

[Gist Url]: # (https://gist.github.com/mcsee/a84b6d71034c47c1f95590d74bd2126d)
```java
public class Person {
  int childrenCount; 

  // Create a class constructor for the Main class
  public Person(int id, int childrenCount) {
    childrenCount = childrenCount; 
    // We can assign the number in the constructor
    // Accidental Database is decoupled
    // We can test the object
  }
}
```

# Detection

[X] Semi-Automatic 

Our linterns can find SQL patterns on constructors and warn us.

# Tags

- Coupling

# Conclusion

Separation of concerns is key and coupling is our main enemy when designing robust software.

# More Info

- [Coupling: The one and only Software Problem](https://dev.to/mcsee/coupling-the-one-and-only-software-design-problem-2pd7)

# Credits

<span>Photo by [Callum Hill](https://unsplash.com/@inkyhills) on [Unsplash](https://unsplash.com/s/photos/no)</span>

* * *

> My belief is still, if you get the data structures and their invariants right, most of the code will kind of write itself.

_Peter Deustch_
 
{% post https://dev.to/mcsee/software-engineering-great-quotes-26ci %}

* * *

This article is part of the CodeSmell Series.

{% post https://dev.to/mcsee/how-to-find-the-stinky-parts-of-your-code-1dbc %}
Reducing distractions? Routines? Music? Automations? What's your favourite productivity hack?
Tags: productivity, programming, postman, api
Published: 2022-06-20 13:30:05

---
title: Reducing distractions? Routines? Music? Automations? What's your favourite productivity hack?
published: true
description: How do you crank up your everyday productivity? What's the nitty gritty things that make you productive?
tags: productivity, programming, postman, api
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oisecdprkt31u4mmea9b.png
# Use a ratio of 100:42 for best results.
---

My family and I recently went on a vacation trip with our camper van, and when burglars broke into it while we were having lunch, among other things they took away my Surface headphones. I didn't realise I do need them so much for my personal productivity until today. I often listen to Lo-Fi HipHop Radio on YouTube while working.

{% embed https://www.youtube.com/watch?v=5qap5aO4i9A %} 

Not today, obviously. At least not through my favourite bluetooth headphones. Being tied to a cable is just not the same.

I also get distracted easily. Not only through stuff lying around on my desk, but also digitally. Opening a website like spiegel.de (German news outlet) or home assistant (home automation platform) is pandora's box to me. So I try to make it a habit to not visit these sites (or do personal things at all) from my work machine.

Sometimes it's also automated tasks, that remind me of doing things. A web crawler, a Slack bot that mentions me on certain keywords (or, in my case, [URLs of events that are not yet on our database](https://dev.to/postman/moar-automation-in-devrel-build-a-slack-bot-that-notifies-you-about-relevant-devto-articles-4pki)). Sometimes it's a [Postman Monitor](https://learning.postman.com/docs/monitoring-your-api/intro-monitors/) that brings my focus back to an important task.

I rely on music, good habits/practices and automations/bots to keep productivity at a reasonable level. 

What's your hacks to stay productive throughout the day?
Paracetamol.js💊| #148: Explica este código JavaScript
Tags: javascript, webdev, programming, spanish
Published: 2022-06-20 13:27:37

## **<center>Explica el siguiente código JavaScript</center>**
#### <center>**Dificultad:** <mark>Intermedio</mark></center>

```js
const nums = [1,2,3,4,5,6];
const {3:num1} = nums;
const [,,, num2] = nums;
console.log(num1, num2);
```

A. `4`, `4`
B. `3`, `4`
C. `4`, `3`
D. `3`, `3`

Respuesta en el primer comentario.

---
Interval | Made with React JS
Published: 2022-06-20 13:23:19

![Interval | Made with Javascript | React JS](https://res.cloudinary.com/madewithjavascript/image/upload/v1655465661/large_interval_made_with_react_js_19c096e3d4.jpg "Interval | Made with Javascript | React JS")


### 10x better internal apps with 1/10th the code

> Interval lets you build web apps for tasks like managing accounts, moderating content, and editing database records.
> 
> Just write business logic in your backend, Interval handles the rest.
> 
> Build web apps for tasks like managing accounts, moderating content, and editing database records. All in your backend codebase, with zero frontend code.
> 
> Everything you need to go from script to internal app
> Interval is a batteries-included approach to building internal tools within your codebase. Just write business logic to power your tools in your backend, Interval handles the rest.
> 
> Built for engineers
> Other tools force you to learn how to work in their custom environments and runtimes. Interval supercharges your existing codebase.

## Check out more such amazing projects on our website

[Made with Javascript](https://madewithjavascript.club)

## Want us to feature your project

[Submit your Project to Made with Javascript](https://madewithjavascript.club/submit-project)


You can also write to us for any of your queries at:

[Email Made with Javascript](mailto:madewithjavascript@gmail.com)

## Project already shared on our social media handles.

| SocialMedia | SharedLink |
| ----------- | ---------- |
| Twitter | [Interval on Twitter](https://twitter.com/withjavascript/status/1538874109119143936?s=20&t=iIDmi0fnCuqg5qLY3AvIpg)
 |
| Medium | [Interval on Medium](https://medium.com/@madewithjavascript/interval-made-with-react-js-433584b35e64)
 |
| Facebook | [Interval on Facebook](https://www.facebook.com/madewithjavascript/posts/pfbid02ae7YThBFTewb2PrGfuq2EqLQJDyx5o7vSQXBCpFUe7pFmbsqVtsWJaLab3XoqAi1l)
 |
| Tumblr | [Interval on Tumblr](https://www.tumblr.com/blog/view/madewithjavascript/687584047748218880?source=share)
 |
| LinkedIn | [Interval on LinkedIn](https://www.linkedin.com/feed/update/urn:li:activity:6944639936557957120)
 |
| Pinterest | [Interval on Pinterest](https://pin.it/ormdMRj)
 |


Filled Under:

 - [Made with Javascript](https://madewithjavascript.club)
 - [Made with React JS](https://madewithjavascript.club/categories/react-js)

Make sure to give this post ❤ 50 ❤ hearts, click the 🦄 unicorns 🦄 and follow 👉 @madewithjavascript 👈 for more such awesome showcases. Show you love for the people who have worked so hard!
Are Web Components Dead?
Tags: webcomponents, webdev, javascript, programming
Published: 2022-06-20 13:18:28

![Sekelton](https://miro.medium.com/max/1400/1*g-iH_T_gw-LQ7cmxoyoONA.jpeg)


{% medium https://medium.com/@mariusbongarts/are-web-components-dead-12e404e0f4b0 %}
How to build basic logic and more with JS and other languages?
Tags: webdev, beginners, programming, productivity
Published: 2022-06-20 13:16:53

> 
If you are anyone who has just started learning how to code and went through some tutorials but when you sit to right some code or any function or class and feel overwhelmed by how other coders think so fast but you can't even think that way. Don't worry you aren't the only one feeling that way.

I kept looking around to get better at logic building and be a efficient problem solver but many major platforms feel overwhelming even at the basics.

But I then came across Exercism. It's really a wonderful platform and as a beginner I would highly suggest. The platform supports multiple languages and has a ton of resource to look after.

**The following link will take you the website : 
https://exercism.org**

I have started to feel a little more comfortable with my problem solving so I highly suggest you to look into it.
Clipdrop - Image upscaler | Made with Next JS
Published: 2022-06-20 13:16:08

![Clipdrop - Image upscaler | Made with Javascript | Next JS](https://res.cloudinary.com/madewithjavascript/image/upload/v1655464075/large_clipdrop_image_upscaler_made_with_next_js_95239ff4ca.png "Clipdrop - Image upscaler | Made with Javascript | Next JS")


### Upscale your images in one click

> Upscale, denoise and enhance your images in 1 click with AI.
> 
> ⚡ Upscale your images 2x or 4x
> ⚡ Automatically remove JPEG compression artifacts
> ⚡ Sharpen blurry edges
> ⚡ 2x mode is 100% free :)
> ⚡ Integrate to your own apps & workflows with our public API

## Check out more such amazing projects on our website

[Made with Javascript](https://madewithjavascript.club)

## Want us to feature your project

[Submit your Project to Made with Javascript](https://madewithjavascript.club/submit-project)


You can also write to us for any of your queries at:

[Email Made with Javascript](mailto:madewithjavascript@gmail.com)

## Project already shared on our social media handles.

| SocialMedia | SharedLink |
| ----------- | ---------- |
| Twitter | [Clipdrop - Image upscaler on Twitter](https://twitter.com/withjavascript/status/1538872159640162305?s=20&t=Uhh1bKAbWGrYvaupudiHiQ)
 |
| Medium | [Clipdrop - Image upscaler on Medium](https://medium.com/@madewithjavascript/clipdrop-image-upscaler-made-with-next-js-5312c010d983)
 |
| Facebook | [Clipdrop - Image upscaler on Facebook](https://www.facebook.com/madewithjavascript/posts/pfbid02EUUPBtKtnJQQq87vx4aCRapadF4KTXkKm7xT5CkBJYGQKkJB3xcAmEXKgJecz8yol)
 |
| Tumblr | [Clipdrop - Image upscaler on Tumblr](https://www.tumblr.com/blog/view/madewithjavascript/687583550875287552?source=share)
 |
| LinkedIn | [Clipdrop - Image upscaler on LinkedIn](https://www.linkedin.com/feed/update/urn:li:activity:6944637964161363968)
 |
| Pinterest | [Clipdrop - Image upscaler on Pinterest](https://pin.it/6PVjNub)
 |


Filled Under:
 - [Made with Javascript](https://madewithjavascript.club)
 - [Made with Next JS](https://madewithjavascript.club/categories/next-js)

Make sure to give this post ❤ 50 ❤ hearts, click the 🦄 unicorns 🦄 and follow 👉 @madewithjavascript 👈 for more such awesome showcases. Show you love for the people who have worked so hard!
Meme Monday!?!
Tags: discuss, watercooler, jokes
Published: 2022-06-20 13:15:42

Welcome to another **Meme Monday** post! Today's cover image comes from my favorite submission from [last week's thread](https://dev.to/ben/meme-monday-1lnl). (MongoDB shade all in good fun).

DEV is an inclusive space! Humor in poor taste will be downvoted by mods.
Introducing the Offen Consent Tool
Tags: watercooler, webdev, opensource, privacy
Published: 2022-06-20 13:10:16

We are building [Offen,](https://www.offen.dev/?utm_source=socialmedia&utm_campaign=0230) a fair web analytics software that treats operators and users as equal parties. Operators can gain insights into how users interact with their services, while ensuring that they retain full control over their data.

Along the way, we created the **Offen Consent Tool**. A lightweight solution for managing user consent on websites. Read the full version of [this article on the Offen blog.](https://www.offen.dev/blog/consent-tool/?utm_source=forum&utm_campaign=0230) 

The Tool is using 1st Party Cookies to store user's consent decisions. To enable this mechanism, you need to deploy the respective server to a sibling domain, i.e. if you plan to use the tool on `www.example.com`, it should be served on a domain like `consent.example.com`. The tool can serve any number of domains at once, so it's possible to use the same deployment for multiple domains at once.

Next deploy the application to a domain like `consent.example.com`. On the host site `www.example.com` embed the client script:

```jsx
<script src="https://consent.example.com/client.js">
```

which exposed `window.ConsentClient`. In your client side code, construct a new client instance pointing at your deployment and request user consent for the desired scope(s):

```jsx
const client = new window.ConsentClient({ url: 'https://consent.example.com' })
client
  .acquire('analytics', 'marketing')
  .then((decisions) => {
    if (decisions.analytics) {
    // load analytics data
    }
    if (decisions.marketing) {
    // trigger marketing tools
    }
  })
```

The **Offen Consent Tool** further allows you to create the binary yourself and provides a development setup. It can also be used as a library and be integrated into any web server written in Golang. [Learn more](https://github.com/offen/consent)

Read the Docs for further assistance with installation and use. [Open Docs](https://github.com/offen/consent/blob/main/MANUAL.md)

If you have any feedback, comments or bug reports about this or other project, we would love to hear from you. Open an [issue](https://github.com/offen/consent/issues) on GitHub.

_
CRYPTO SPACE
Published: 2022-06-20 13:08:44


          We are living in a  world that is transforming to technology and everybody  wants to be modern and understand the tech world.By this people are investing in cryptocurrency which  some believe  crypto  will be the next big thing in the tech world space.But there are alot of false information about crypto and people tend to follow and lose their money when they trade. CRYPTO SPACE is the solution for educating and mentoring crypto traders on how to trade and latest news about the crypto market.
How to connect railway. app with nextjs using Prisma.
Tags: nextjs, railway, prisma, database
Published: 2022-06-20 13:02:01

Welcome 👋 friends to this new blog post where I will teach you how to connect railway and nextjs with the help of Prisma.

Requirements:

 1. Nextjs Project (Frontend Framework)

 2. [Railway.app](https://railway.app/) (This is for the database)

 3. Prisma (I will tell you how to install it.) (ORM tool)

Step1: Make a railway.app project

![](https://cdn-images-1.medium.com/max/3840/1*SN1VGofG8OfsrsZrqZeB8A.jpeg)

Then make a postgress database.

![](https://cdn-images-1.medium.com/max/3840/1*30ktdFEb0rFPe7LaMw5e7w.jpeg)

Step2: Open your nextjs project.

Then open a terminal and write this command.

    yarn add @prisma/client

Then write

    prisma init

Then you will find a new folder called **Prisma **in your root folder.

Then go to .env

![](https://cdn-images-1.medium.com/max/3840/1*4f_Z8arLSatOSDuDoE-GpQ.jpeg)

Before changing anything in .env , go to

![](https://cdn-images-1.medium.com/max/3840/1*dpNwiUmbdvMk59np-xDqxw.jpeg)

Then change this in your .env file.

![](https://cdn-images-1.medium.com/max/3840/1*FxtNJfaLV3-G-5rBlfgq6w.jpeg)

Now you can see this tutorial:

### 🤔Situation

Now you have two situations. **Either you have tables or you don’t have any tables inside your database.**

### 1. If you have tables in your database.

Just write the command

    prisma db pull

Then check out the **‘schema.prisma’** file

### 2. You have tables. But you want to update them by prisma file.

    prisma db push

### 3. You don’t have any tables in your database.

For example, write this command in your ‘**schema.prisma**’ to make tables.

![](https://cdn-images-1.medium.com/max/3840/1*QjAKAXssHs-Hcx3DY5355A.jpeg)

Code:
{% gist https://gist.github.com/studywithdesign/19b92b84b1db47743c7a008ad5e897d3.js %}
Now, you have to write the command

    prisma migrate dev
>  Then it will ask you for your migration name.
>  You can write there anything you want.

Then you will see one folder as **Migrations **in your **Prisma **directory.

You can check your database and see the results.

Thanks for reading this blog.

If any question arises in your mind, feel free to ask here 👇
[**Join the Next Dev Discord Server!**](https://discord.gg/hN4Wc5VR4M)

If you want to see a video tutorial in Hindi:
[https://youtu.be/Su047Z6FBN4](https://youtu.be/Su047Z6FBN4)
How to get mentally prepared for an interview
Tags: interview, programming, beginners
Published: 2022-06-20 13:00:15

I'll atempt to share tips and tactics based on my personal experience in order to help you prepare for an interview.

In terms of interviews, I have a sacred rule:

            **"Whatever happens is an experience."**

Remember that every time when you feel nervous or you're in a difficult situation. It's very normal to feel this way. I will made up this article in two parts:

**1: Preparing for the interview with HR
2: How to prepare for the technical interview**

The essential point is that interviewers are just like you, and you should be aware that interviewers don't have a greater standing than you. Indeed, they're going to decide if you're suitable for that position. Probably, you had a bad day and you didn't manage to look that you have qualities for that position in front of the interviewer and you think other candidates are more prepared than you. Whatever happens, you should put your fear aside and think rationally. I recommend you to do a list with pros and contras qualities about. Try to assess yourself from any viewpoint; after all, you know yourself best, and depending on how serious the issue is, try to find a solution. On contrary, don't overthink and act.


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

**1: Preparing for the interview with HR**

I'll provide a link to an excellent website with questions that most interviewers ask, which you should read and practice previously. I found that the majority of the questions were repetitive. So, keep your emotions under control and strive to be the greatest.

https://www.thebalancecareers.com/job-interview-questions-and-answers-2061204

You strive not to remember responses and to alter them based on your experience. I don't suggest memorizing since interviewers notice this detail; instead, I urge that you prepare ahead of time and that if you try to deliver a complex answer. The notion is that time is tight and the interviewer has no idea who you are. So, you should to give more information about you.

**2: How to prepare for the technical interview**

You should study the job requirements that you have applied for. The position may not require many algorithms and focus on other qualities. You need to study the company and look for a website where others shared their experience when they had the interview.

For algorithms, I recommend leetcode.

Whatever what happens, regardless of the stage, technical interview or hr, in the interview, I'd like you to ask questions. If you ask, you look interested in this position and you look like you want to to expand your knowledge.

 This is my first article and I hope that I could help you. 

Remember always that: **"Whatever happens is only a experience"** 

**Have a lovely day!** ❤︎
Make your life as frontend developer easier
Published: 2022-06-20 12:45:47

## List of JS snippets useful on a daily basis

### One liner snippets:

here is a list of my favorite javascript snippet, most of them are one-line code but solve a lot of tasks!

---


### Javascript: Copy text to clipboard
If you work on an e-commerce website sooner or later you need to create a "copy promo code" component. It could be a popup, a push notification, or a simple text on your website. With this one line of code, you rocket it!

```javascript
const copyToClipboard =  (text) => navigator.clipboard.writeText(text);

// usage example
document.addEventListener('selectionchange', () => {
  copyToClipboard(window.getSelection().toString())
});
```
 
**Pay attention:** 
my usage example could be dangerous for performance. Use the function with a specific event and not for a recursive one.

---


### Javascript: Is focused
In a complex application or website it can be helpful to know if an element is in focus.
For example, you may want to know if your login popup is active and in focus to perform some actions on it.

Here's an easy way to do it!

```javascript
const isOnFocus =  (el) => (el === document.activeElement);

// usage example
isOnFocus(document.querySelector('#popup'))
```

---


### Javascript: Scroll an element into view
Do you need to create a smooth anchor for your website? You can use this one-line function to put your element smoothly on top. 

```javascript
const scrollToTop =  (el) => el.scrollIntoView( { behavior: 'smooth', block: 'start'});

// usage example
scrollToTop(document.querySelector('#mySection'))
```

In the same way but changing only the "block" you can anchor your element to the bottom!

```javascript
const scrollToBottom =  (el) => el.scrollIntoView( { behavior: 'smooth', block: 'end'});

// usage example
scrollToBottom(document.querySelector('#mySection'))
```

---


### Javascript: Detect device type
Do you want to know if your user is browsing your website from a mobile or desktop device? Check the navigator agent in this way.

```javascript
const detectDevice =  () => /Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
  navigator.userAgent
)  ? 'Mobile' : 'Desktop'

// usage example
detectDevice()
```

---


### Javascript: Detect dark mode
Check if the user's preferred color scheme is in dark mode to offer them the perfect version of your website for them with this one line feature.



```javascript
const isDarkMode =  () => window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

// usage example
isDarkMode()
```

#### Do you want to create a dark mode for your site?
look at [this repository](https://github.com/luciacenetiempo/DarkThemeToggle) where I create a dark mode toggle with very few lines of code: link), but first you might need to know if the user

---


###[Star these snippets on github to keep them handy](https://github.com/luciacenetiempo/javascript-made-simple)


###What are the snippets you use every day in your work?
**Share them with me below!** 

####REMEMBER: Sharing is caring 😁
How to Create Scrolling Y Text With HTML + CSS
Published: 2022-06-20 12:42:16


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q1e2ofzkzp7unbc96081.jpg)
We’ll be using CSS animations paired with the transform: translateX and / or transformY 

Please add the folowing css to your css file.

```
.scroll {
height:245px; 
overflow-y: scroll;
}


.scroll::-webkit-scrollbar {
  width: 12px; 
}
.scroll::-webkit-scrollbar-track {
  background: #63a991; 
	border-radius: 20px; 
}
.scroll::-webkit-scrollbar-thumb {
  background-color: rgba(0,199,210,1);
  border-radius: 20px; 
  border: 3px solid orange; 
}
```
 Also you need to neast you text in <div class="scroll"> Your great text</div>

```
<div class="scroll"> Your great text</div>
```
The result you can see at [https://pdloans247.com/](https://pdloans247.com/) at the page's footer