teleren/devto huggingface dataset:
Code Smell 164 - Mixed Indentations
Tags: javascript, webdev, beginners, programming
Published: 2022-09-21 12:31:33

*Tabs vs Spaces. The most significant computer problem*

> TL;DR: Don't mix indentation styles

# Problems

- Readability

- Code consistency

- Standards violation

# Solutions

1. Choose one of them

2. Stick to it

3. Enforce it with code standards tests

4. Share the rules on all the codebase

5. Use an IDE like VS Code or WebStorm that doesn't include tabs at all.

# Context

Whenever I publish an article many people don't care about the sample intent and rush to point at indentation mistakes.

Choosing one standard over the other will be a great solution.

Spaces always count as one.

Tabs can count as many different options.

# Sample Code

## Wrong

[Gist Url]: # (https://gist.github.com/mcsee/17de024e249327b44a614f30e4961d94)
```javascript
function add(x, y) {
// --->..return x + y;

      return x + y;
}

function main() {
// --->var x = 5,
// --->....y = 7;

    var x = 5,
        y = 7;
}
```

## Right

[Gist Url]: # (https://gist.github.com/mcsee/49bfb99979315a69bfe809afb0ae2158)
```javascript
function add(x, y) {
// --->return x + y;
    return x + y;
}
```

# Detection

[X] Automatic 

Any parser can enforce this rule.

# Exceptions

Some languages like Python consider indent as part of the syntax.

In these languages, indentation is not accidental since it changes code semantics.

# Tags

- Code Standards

# Conclusion

There's been so much debate on this subject.

The smell is related to mixing them, not about using one instead of another.

Some IDEs automatically convert one convention to the other one.

# Relations

{% post https://dev.to/mcsee/code-smell-48-code-without-standards-2f5m %}

# More Info

- [ES Lint](https://eslint.org/docs/latest/rules/no-mixed-spaces-and-tabs)

# Disclaimer

Code Smells are just my [opinion](https://dev.to/mcsee/i-wrote-more-than-90-articles-on-2021-here-is-what-i-learned-1n3a).

* * *

![indentation joke](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rlhjzrsoadep96popul6.jpg)

> Whatever the device you use for getting your information out, it should be the same information.

_Tim Berners-Lee_

{% 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 %}
Setup Turbo on Vite
Tags: rails, vite, hotwire
Published: 2022-09-21 12:17:26

[Overview](https://dev.to/chmich/setup-vite-svelte-inertia-stimulus-bootstrap-foundation-on-rails-7-overview-1bk1)

**Prerequisites**

[Vite](https://dev.to/chmich/setup-vite-on-rails-7-f1i)

**Turbo**

See also: [Hotrails Tutorial](https://www.hotrails.dev/)[Docs](https://turbo.hotwired.dev/)

**Gemfile**

```
gem 'turbo-rails'
```

I prefere not using the [Gem installer](https://github.com/hotwired/turbo-rails#installation), just:

```
$ npm i @hotwired/turbo-rails
```

see: [GitHub Turbo/Installation](https://github.com/hotwired/turbo-rails#installation)

`frontend/entrypoints/application.js`

```
import '@hotwired/turbo-rails'
```

**Test**

How to check if Turbo works? see [Turbo/TurboDrive](https://www.hotrails.dev/turbo-rails/turbo-drive) aproximately on the middle of the page

You have to insert at least two links and correspondending views. Check the network tab on browser. Page Reload loads all the Javascript and Stylesheets while Turbo, by clicking a link, by default, just replaces the body.

**=>** Turbo should work. Check it by browser > developer tools > Network Tab

[Overview](https://dev.to/chmich/setup-vite-svelte-inertia-stimulus-bootstrap-foundation-on-rails-7-overview-1bk1)

**P.S.:**
**Page Initialization Event**

Like described on [Foundation](https://dev.to/chmich/setup-foundation-sites-on-rails-7-and-vite-23mm) Frontend setup needs a Initialization Event.

Full List of Turbo Events are on [Turbo/reference/events](https://turbo.hotwired.dev/reference/events)

Page Initialization is done with `turbo:render` or `turbo:load`

Attention: If you work inside a frame, like so:

```
= turbo_frame_tag 'mainFrame' do
  %h1 TurboFrame#first_content
```
=> none of that events will work! And it also not updates the Browser History

If you need an initialization Event, check [Handbook/Stimulus, MutationObserver](https://turbo.hotwired.dev/handbook/building#attaching-behavior-with-stimulus).

Changing the same frame to

```
= turbo_frame_tag 'mainFrame', 'data-turbo-action': :advance do
  %h1 TurboFrame#second_content
```
=> mentioned events are firing and Browser History is changed

[Overview](https://dev.to/chmich/setup-vite-svelte-inertia-stimulus-bootstrap-foundation-on-rails-7-overview-1bk1)
How to use Date-Range in react ?
Tags: javascript, beginners, react, nextjs
Published: 2022-09-21 12:14:13

Date-Range is a npm package that lets us to use and display modern looking calendar window on our website. To setup the Date-Range following steps

**Step 1:** First do `npm i react-date-range` install the package

**Step 2:** Import calendar along with its CSS file in the component file

```
import { Calendar, DateRange } from 'react-date-range'
import 'react-date-range/dist/styles.css'; // main style file
import 'react-date-range/dist/theme/default.css'; // theme css file
```

**Step 3:** Create a useState for the calendar.

```
import React, { useState } from 'react'

const [date, setDate] = useState([
  {
    startDate: new Date(),
    endDate: new Date(), // Use null if you don't want to have endDate
    key: 'selection'
  }
])
```

**Step 4:** We have to also add numbers `npm add date-fns`

**Step 5:** Add following component with a className to position using CSS. Note: that props name should be same that we created in step 3. `const [date, setDate] = useState`

```
<DateRange editableDateInputs={true} onChange={(item) => setDate([item.selection])} moveRangeOnFirstSelection={false} ranges={date} className="date" />
```

**Step 6:** If you want to show the selected date in format import ‘date-fns’

`import { format } from 'date-fns';`

**Step 7:** To display selected date

`{`${format(date[0].startDate, "MM/dd/yyyy")} to ${format(date[0].endDate, "MM/dd/yyy")}`}`



The above method only creates static calendar window. If we want to open date-range on click then add following code.



**Step 8:** Make a useState hook to open and close calendar window

`const [openDate, setOpenDate] = useState(false)`

**Step 9:** Wrap date component with `{openDate && <DateRange />}` and set `onClick={()=>setOpenDate(!openDate)}` 



Your final code should look like this

```
import React, { useState } from 'react'
import { DateRange } from 'react-date-range'
import 'react-date-range/dist/styles.css'; // main style file
import 'react-date-range/dist/theme/default.css'; // theme css file
import { format } from 'date-fns';

const Component = () => {
  const [openDate, setOpenDate] = useState(false)
  const [date, setDate] = useState([
    {
      startDate: new Date(),
      endDate: new Date(),
      key: 'selection',
    }
  ])
  
  return (
    <div className='calendar'>
      <span onClick={ ()=>setOpenDate(!openDate) }>{ `${format(date[0].startDate, "MM/dd/yyyy")} to ${format(date[0].endDate, "MM/dd/yyy") }` }</span>
      { openDate && <DateRange editableDateInputs={ true } onChange={ (item) => setDate([item.selection]) } moveRangeOnFirstSelection={ false } ranges={ date } className="date" /> }
    </div>
  )
}

export default Header
```
💻🎉 Planet Crust released Corteza 2022.3.5
Tags: release, softwareimprovement, updates, lowcode
Published: 2022-09-21 11:28:32


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/91ioi7f5ngez6jpuqtoa.jpg)
Planet Crust, the driving force behind the Corteza open-source low-code development platform, has released a new update of Corteza that includes new features, along with many changes and fixes. Check out the release notes and see what is new that Corteza has to offer: https://www.planetcrust.com/planet-crust-releases-corteza-2022-3-5
Wrestling with Code
Published: 2022-09-21 11:39:10

Last few days have been 50/50 in terms of accomplishing daily coding goals. Between watching 'The Good Wife' and 'Billions' I wrestled with mastering JS and jQuery. Solving problems and knowing you've created something is both exhilarating and empowering. When you also come to realise that there is a possibility your product will be productively be used by another person, it brings a certain inner satisfaction, makes each breath taste sweeter.

So keeping this blog short today as I have to get back to wrestiling with some code.

See you soon blog !
The Next Level Time Picker For Your Next React App ⌚️
Tags: node, javascript, react, npm
Published: 2022-09-21 11:38:51

## React Ios Time Picker

> A modern way to pick time 

[![npm](https://img.shields.io/npm/v/react-ios-time-picker)](https://www.npmjs.com/package/react-ios-time-picker) ![npm](https://img.shields.io/npm/dm/react-ios-time-picker?logo=npm)



{% stackblitz react-ios-time-picker %}

![demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eyt803xa3krq21sq2yax.gif)

## Install

```js
npm install react-ios-time-picker
```

## Usage

24 hours format usage

![24hours-format](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1bglz02ec92799k2lxgi.png)

```js
import React, { useState } from 'react';
import { TimePicker } from 'react-ios-time-picker';

export default const  MyApp = () => {
   const [value, setValue] = useState('10:00');

   const onChange = (timeValue) => {
      setValue(timeValue);
   }

   return (
      <div>
         <TimePicker onChange={onChange} value={value} />
      </div>
   );
}
```

12 hours format usage


![12hours-format](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/98rftuczobn06w1yaqb2.png)

```js
import React, { useState } from 'react';
import { TimePicker } from 'react-ios-time-picker';

export default const  MyApp = () => {
   const [value, setValue] = useState('10:00 AM');

   const onChange = (timeValue) => {
      setValue(timeValue);
   }

   return (
      <div>
         <TimePicker onChange={onChange} value={value} use12Hours/>
      </div>
   );
}
```

## Contributions Welcome!

```js
git clone https://github.com/MEddarhri/react-ios-time-picker
cd react-ios-time-picker

```



## Issues

If you have any questions, suggestions for enhancements, or if you find any bugs, please raise them on the repo:
https://github.com/MEddarhri/react-ios-time-picker/issues
Weekly web development resources #116
Tags: webdev, weekly
Published: 2022-09-21 11:29:49



______

##[Tylify](https://tylify.app/pattern/)
[![Tylify](https://wweb.dev/weekly/content/116/tylify.jpg)](https://tylify.app/pattern/)
A tool to create repeating patterns with ease for fee.

______

##[lightGallery](https://www.lightgalleryjs.com/)
[![lightGallery](https://wweb.dev/weekly/content/116/lightgallery.jpg)](https://www.lightgalleryjs.com/)
A lightweight, modular, JavaScript image and video lightbox gallery plugin. Available for React.js, Vue.js, Angular, and TypeScript.

______

##[Mockoops](https://mockoops.mohitya.dev/)
[![Mockoops](https://wweb.dev/weekly/content/116/mockoops.jpg)](https://mockoops.mohitya.dev/)
Create stunning product mockups and simply drag-drop to present your screen-recordings beautifully.

______

##[OneDev](https://github.com/theonedev/onedev)
[![OneDev](https://wweb.dev/weekly/content/116/onedev.jpg)](https://github.com/theonedev/onedev)
A self-hosted Git Server with CI/CD and Kanban.

______

##[Half baked ideas](https://halfbakedideas.app/)
[![Half baked ideas](https://wweb.dev/weekly/content/116/halfbaked.jpg)](https://halfbakedideas.app/)
A website where everyone can add their ideas for products.

______

##[Microstartup alternatives](https://microfounder.com/alternatives)
[![Microstartup alternatives](https://wweb.dev/weekly/content/116/microfounder.jpg)](https://microfounder.com/alternatives)
A list of small internet startups built by solo developers as alternatives to big tech.

______

##[novu](https://github.com/novuhq/novu)
[![novu](https://wweb.dev/weekly/content/116/novu.jpg)](https://github.com/novuhq/novu)
A fully-featured microservice to send SMS, E-mail, Slack and Push notifications.

______

##[Internxt Send](https://send.internxt.com/)
[![Internxt Send](https://wweb.dev/weekly/content/116/internxt.jpg)](https://send.internxt.com/)
A website, that allows you to encrypt and share files fast. 

______

##[Imagator](https://imagator.co/)
[![Imagator](https://wweb.dev/weekly/content/116/imagator.jpg)](https://imagator.co/)
A tool to compress, convert, edit and resize your images online without uploading.

______

##[Lapa Ninja](https://www.lapa.ninja/)
[![Lapa Ninja](https://wweb.dev/weekly/content/116/lapa.jpg)](https://www.lapa.ninja/)
A gallery featuring the best 5245+ landing page examples.

______

##[Diffusion Bee](https://github.com/divamgupta/diffusionbee-stable-diffusion-ui)
[![Diffusion Bee](https://wweb.dev/weekly/content/116/diffusion.jpg)](https://github.com/divamgupta/diffusionbee-stable-diffusion-ui)
An application to run Stable Diffusion locally on your M1 Mac.

______

To see all the weeklies check: [wweb.dev/weekly](https://wweb.dev/weekly)
How to improve your merge request 🤯
Tags: javascript, tutorial, programming, productivity
Published: 2022-09-21 11:05:34

## Create a DRAFT merge request
Creating a Draft merge request will allow your team to help you achieve better coding since they will do it as soon as possible the code review. Also, they will be able to raise your attention to some points that maybe you are missing.

## Write a clear description
This will help your teammates understands what they are reviewing
All merge requests are able to receive a description, which may sound simple, but can help you a lot to check all points that you were supposed to cover, and also it will help your team understand what is your code about.

## Small functions
Long functions are hard to debug and maintain. It is really hard to test it and understand its context of it.
```
function testing() {
    // ... really long function
}
```
Small functions will help you handle the cases easily when you are writing test cases, and also it will help you to understand easily what is the context of a specific method/function.
```
function testing() {
    // smallFunction_1();
    // smallFunction_2();
    // smallFunction_3();
}
```
## A more descriptive variable names
Are you able to understand what is this if condition about?
```
  if (
            PUBLIC_FILE.test(nextUrl.pathname) ||
            nextUrl.pathname.startsWith("/_next") ||
            nextUrl.pathname.includes("/api") ||
            nextUrl.pathname.includes("/log")
        ) {
            return undefined;
        }
```
## Small merge requests
Sometimes we get so excited coding that we create huge monster requests 👹.
This is not a good practice because it will require so much effort in testing, doing the code review, and discussing improvements since the developed code could be really tight to each developed part. Small merge requests will help you handle this smoothly.

## Write tests
Tests are the natural way to prove that something is working as supposed to, and from the logical perspective, you will be totally able to understand what the code does if you have it well tested.

## Add comments
Adding comments to your code is a really powerful way to explain the core functionalities and responses from your code. Some people will argue that you need to avoid comments because if the code requires comments it is not clear, but this is not a necessary truth. Sometimes, we are dealing with so many cases and logic that it will help you and your team to understand why you decided to implement something using the XYZ method.

As you can see, these are simple suggestions but really powerful that will help you and your teammates with coding reviews.

👇 Let me know what you think about this topic in the comments section.
👉 Follow me to know more about it.
✅ This is my [medium](https://melloo.medium.com/) where I write all type of topics.
👋 This is my [LinkedIn](https://www.linkedin.com/in/matheus-da-silveira-mello/) where I share some of my thoughts.
Project Management
Published: 2022-09-21 10:59:29

## PROJECT MANAGEMENT


### Collaborators
Role: Python Developer
*He developed a python Api using flask*

{% embed https://dev.to/valentinesean22 %}



This project allows users to manage their projects by planning, organising and managing different required aspects.

### Basic Functionality:

1. Auth(JWT)
2. Create,Edit,Delete Projects
3. Create,Edit,Delete Project Tasks
4. Track Project Tasks(from todo -> in progress -> completed)
5. Create Project Budget
6. Download Budget as pdf
7. Generate Project Summary/Report
8. Download Report as pdf
9. Generate Project Gantt Chat from Tasks
10. Download Gantt Chat as pdf
11. Add project Files


## Languages Used:

``Javascript(Vue,js)``  ``html``  ``Tailwindcss``   ``Python`` ``mosaic-Tailwindcss-template``  ``mySql``  ``flask``

## Screen screenshots

### Landing Page

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

### Dashboard Page


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

### Projects Page

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

### Project Page

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

### Tasks Page

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


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


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

### Project Gantt Chat Page


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

### Settings Page


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

### Reports Page


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v2qy2r4zhegdfbrrvyjy.png)
Unsafe Android Apps
Tags: apk, apps, applications, unsafe
Published: 2022-09-21 10:13:00

Unsafe Android Apps
Unsafe Android Apps
Whenever we upload an app to an android store( Google play store), Google checks it for unsafe android apps. Android apps are designed in such a way that they give the capability for developers to load code at runtime. Sometimes the sandbox (app checking software) doesn’t check for code loading in runtime,, which offers an advantage for malicious developers to add malware during runtime.

Introduction
The recent boost in the Android industry has given developers the to showcase their application development skills and creativity. Around 900 million android devices are currently active around the world. With advancement, there is a tradeoff as well. Suppose a hacker hacks an android device. It means that he can control 900 million users around the world.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mvst1j10z8hrs132qbmo.png)
Unsafe Android Apps
In 2012 Google started their first App analyzer software known as Google Bouncer, which analyzes unsafe android apps offline. The inner working of google bouncer is still unknown, but some researchers say it uses dynamic analysis techniques.

Read more at: https://hecodesit.com/unsafe-android-apps/
Python Random Password Generator
Tags: python, programming, javascript, beginners
Published: 2022-09-21 10:56:12

Hey there, In this short article, I will show you how you can create a simple [password Generator with Python](https://www.alixaprodev.com/2022/09/python-project-random-password-generator.html). Of course, this is just a python script that will generate a random password.

To create a **random password Generator** Follow these steps

- Import random module
- import python string module
- create total characters
- Define the length of the password
- Join the password with Empty String
- See the Random Password Generator and Other Python Projects Here.


![Python code for random password generrator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nls62g79klfbgcykpwmt.png)
React Conditional Rendering
Tags: beginners, react, tutorial, career
Published: 2022-09-21 10:48:10

## What is conditional rendering in React?

Conditional rendering is a key concept in React since it allows you to display some components or elements that depend on a specific condition.

---


## When you use the ‘&&‘?

What’s on the right side of this sign is what you want to display or achieve and what’s on the left side is the condition you put to evaluate. If this condition is truthy, the right side will be executed.

---

## When you use a ternary?

When you have two or more options you want to display, you can use the ternary operator to nest more conditions. However, for code readability, you should stick with two options.. If you find yourself needing to put more than two conditions, you should use the ‘if...else’ statement or ‘switch’.

Please note that this ternary can happen inside your function’s return, while the ‘if … else’ statement needs to go outside of the return in your function.

---
[ReactNative] How to control view orientation for Native Module
Published: 2022-09-21 10:46:08


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


## 3 Steps

1. Modify `AppDelegate.h` / `AppDelegate.m`
2. Create `AppUtility.swift` for update orientation easily
3. Fix view's position for ReactNative


**Step1: Modify AppDelegate**

AppDelegate.h
```
// add property
@property (nonatomic, assign) UIInterfaceOrientationMask orientationLock;
```

AppDelegate.m
```
- (UIInterfaceOrientationMask)application:(UIApplication *)application supportedInterfaceOrientationsForWindow:(UIWindow *)window
{
  return _orientationLock;
}

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{ ...
// default value
_orientationLock = UIInterfaceOrientationMaskPortrait; 
...
}
```

**Step2: Create AppUtility.swift**
```
struct AppUtility {
  static func lockOrientation(_ orientation: UIInterfaceOrientationMask) {
    if let delegate = UIApplication.shared.delegate as? AppDelegate {
      delegate.orientationLock = orientation
    }
  }

  /// OPTIONAL Added method to adjust lock and rotate to the desired orientation
  static func lockOrientation(_ orientation: UIInterfaceOrientationMask, andRotateTo rotateOrientation:UIInterfaceOrientation) {
    self.lockOrientation(orientation)

    UIDevice.current.setValue(rotateOrientation.rawValue, forKey: "orientation")
    UINavigationController.attemptRotationToDeviceOrientation()
  }
}
```

**Step3: Fix view's position for ReactNative**
When you update orientation, view's position will move wrong position. So, when it's happened call this function.

```
private func fixViewPosition() {
    // Wait 0.1 sec and fix position.
    // It wont be fixed position in some case, so fix twice with 0.1 sec delay for that wired bug.
    DispatchQueue.main.asyncAfter(deadline: .now()+0.1) { [self] in
      let fixedPosition = CGPoint(x: -UIScreen.main.bounds.midX + targetView.bounds.midX, y: -UIScreen.main.bounds.midY + targetView.bounds.midY)
      view.bounds.origin = fixedPosition
      DispatchQueue.main.asyncAfter(deadline: .now()+0.1) { [self] in view.bounds.origin = fixedPosition }
    }
  }
```