teleren/devto huggingface dataset:
Rails 7, Bootstrap 5 and importmaps without nodejs
Tags: rails, ruby, turbo, bootstrap
Published: 2022-01-12 20:01:48

## Our goal: remove nodejs

As many other people in the Rails community, I started setting up brand new Rails 7 projects, and I need to re-learn, at least partially, how to bundle the assets and distribute them.

I never fell in love with TailwindCSS, and therefore I usually setup my Rails apps to use Bootstrap as default.

But what I really like about Rails 7, is the idea of being able to get rid of not only webpack, but of nodejs entirely. The new importmaps feature is really appealing to me and I'd like to use it as long as I don't need to bundle my javascript.

I have to say that `esbuild` does already a pretty cool job compared to `webpack` to simplify our lives, and make the process faster, but as long as I don't need bundling, I'd like to not have a package.json file and being dependent on nodejs for my Rails app. 

A pure and simple sprockets + importmaps app with no Foreman, no `bin/dev`, no `yarn build --watch` stuff.

Bootstrap is made of two parts: CSS and javascript. So I want to use importmaps for the javascript part and rely on sprockets for the CSS compilation from SCSS.

## Rails default

By default, Rails 7 provides a new option `--css=bootstrap`, 
but with my great surprise, this option adds both `jsbundling-rails`, `cssbundling-rails`, a `package.json` and `esbuild`.

**Not as expected. Not what I want.**

# How to configure Rails and Bootstrap without nodejs

Default is not what I want, but I can still reach the goal and here I'll explain how:

**Stick with just `rails new myapp`**
This will setup exactly the tools I want: `sprockets` and `importmaps`. It will also setup automatically for me stimulus and turbo, which is great because I use them most of the time anyway.

**Add `bootstrap` gem** and enable the gem `sassc-rails` in the Gemfile. This will allow us to compile bootstrap from SCSS without node.

You can simply import Bootstrap styles in `app/assets/stylesheets/application.scss`:

```scss
// here your custom bootstrap variables...
@import "bootstrap";
```

That's it for the CSS part. Running `rails assets:precompile` will generate what you want.

**For the javascript part** we need to do three things:

* Precompile the bootstrap.min.js that comes with the gem, by adding to `config/initializers/assets.rb`

```ruby
Rails.application.config.assets.precompile += %w( bootstrap.min.js popper.js )
```

* pin the compiled asset in `config/importmap.rb`:

```ruby
pin "popper", to: 'popper.js', preload: true
pin "bootstrap", to: 'bootstrap.min.js', preload: true
```

* Include bootstrap in your `app/javascript/application.js`:

```js
import "popper"
import "bootstrap"
```

I prefer this approach rather than pinning a CDN because we avoid diverging versions of Bootstrap.

## Conclusion

This is all you need to have Bootstrap fully working on Rails 7 without using node. 

If you like this guide you can [follow me on Twitter](https://twitter.com/coorasse).
Valid N Queens
Tags: java, programming, algorithms, 100daysofcode
Published: 2022-01-12 19:55:55

# Description

The `n` queens puzzle asks to place `n` queens on an n×n chessboard so that no two queens are attacking each other.

Given a two-dimensional integer `matrix` where `1` represents a queen and `0` represents an empty cell, return whether the board is valid solution to the puzzle.

**Constraints:** 

- `1 ≤ n ≤ 10` where `n` is the number of rows and columns in `matrix`

## Example 1

### Input

```
matrix = [
    [1, 0, 0, 0, 0],
    [0, 0, 0, 0, 0],
    [0, 0, 0, 0, 1],
    [0, 0, 0, 0, 0],
    [0, 0, 0, 1, 0]
]
```

### Output

```
false
```

### **Explanation**

```
There are no queens on the 2nd or 4th row.
```

---

## Example 2

### Input

```
matrix = [
    [0, 0, 0, 1, 0],
    [0, 1, 0, 0, 0],
    [0, 0, 0, 0, 1],
    [0, 0, 1, 0, 0],
    [1, 0, 0, 0, 0]
]
```

### Output

```
true
```

### **Explanation**

```
This is a valid n queens solution.
```

---

# Intuition

we need to know what is the Queen.
A queen can move in any of the following direction:

- along the row in which it is currently placed
- along the column in which it is currently placed
- or along any of the diagonal direction

# Implementation

```java
import java.util.*;

class Solution {
    public boolean solve(int[][] matrix) {
        int queens = 0;
        int n = matrix.length;
        for (int row = 0; row < n; row++) {
            for (int col = 0; col < n; col++) {
                if (matrix[row][col] == 1) {
                    queens++;
                    if (!isOK(row, col, matrix)) {
                        return false;
                    }
                }
            }
        }
        return queens == n;
    }

    private boolean isOK(int row, int col, int[][] matrix) {
        // row
        for (int i = col + 1; i < matrix.length; i++) {
            if (matrix[row][i] == 1) {
                return false;
            }
        }
        // \
        for (int i = row + 1, j = col + 1; i < matrix.length && j < matrix[0].length; i++, j++) {
            if (matrix[i][j] == 1)
                return false;
        }

        // /
        for (int i = row + 1, j = col - 1; i < matrix.length && j >= 0; i++, j--) {
            if (matrix[i][j] == 1)
                return false;
        }
        return true;
    }
}
```

## Time Complexity

- Time: O(n*2)
- Space: O(1)
From Devs, to VPs, to Co-Founders: 10Xing a Startup 5,000 Miles Apart
Tags: startup, devops, techtalks, podcast
Published: 2022-01-12 19:54:48

We knew we had to kick off the new year with something big - so welcome to Season 2 of Dev Interrupted!

This episode probes the murky depths of a time before the pandemic by exploring the story of [LinearB](https://linearb.io/)'s founding in 2018, how co-founders Dan Lines and Ori Keren met at Cloudlock in 2012 - and how they decided to co-found a company while 5,000 miles apart.

Listen as Dev Interrupted host and all-around renaissance man, Dan Lines, steps behind the mic to be interviewed not as host of the podcast, but as COO and co-founder of LinearB. Joining Dan is his good friend and fellow co-founder, Ori Keren, LinearB’s CEO.

With Producer Conor Bronsdon stepping in to guest host, Dan and Ori detail their transition from developers and VPs at Cloudlock, to deciding to found a company while on separate continents.

{% spotify spotify:episode:77933JVQMAULdpjMYHEzHI %}

## Episode Highlights Include:
* [LinearB](https://linearb.io/metrics-and-visibility/)’s founding story
* Managing [hypergrowth](https://linearb.io/blog/linearb-series-a/) 5,000 miles apart
* The importance of choosing the right investors: alignment > money
* Designing a [product](https://linearb.io/product-manager/) with the goal of a million end users
* How to 10x your startup
* Dan’s favorite guest from season 1 of the [Dev Interrupted Podcast](https://devinterrupted.com/podcast/no-continuous-delivery-then-walk-out/)

_____________________

***Starved for top-level software engineering content? Need some good tips on how to manage your team? This article is inspired by [Dev Interrupted](https://devinterrupted.com/podcasts/) - the go-to podcast for engineering leaders.***

*Dev Interrupted features expert guests from around the world to explore strategy and day-to-day topics ranging from dev team metrics to accelerating delivery. With new guests every week from Google to small startups, the Dev Interrupted Podcast is a fresh look at the world of software engineering and engineering management.*

[***Listen and subscribe on your streaming service of choice today.***](https://devinterrupted.com/podcasts/)

![https://devinterrupted.com/podcasts/](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wpadq6f64w3zdescv1s3.png)
LIVE Streamed My Project on YouTube Every Week for 1 YEAR!
Tags: javascript, react, webdev, programming
Published: 2022-01-12 19:37:14

It all started on the first Saturday of 2021 (January 2nd). That's when I began my adventure on YouTube with [my first live stream](https://youtu.be/S-rF5rkhaJ0), discussing my [new passion side project](https://github.com/DustinBrett/daedalOS).

{% youtube S-rF5rkhaJ0 %}

I continued these streams every Saturday of every week in 2021. I've created a [playlist](https://youtube.com/playlist?list=PLM88opVjBuU7xSRoHhs3hZBz3JmHHBMMN) that has these streams as well as my continued videos related to this project.

{% youtube U9nsxgCQZjk %}

The project has been [released](https://youtu.be/U9nsxgCQZjk) on my personal website @ [https://dustinbrett.com](https://dustinbrett.com/) for a week now and has received lots of great feedback.

I am still on my journey to my original goal of 1,000 subscribers. This year has brought in 700 which is amazing and I am grateful for those subscribers who have decided to support me by following my [YouTube channel](https://www.youtube.com/c/DustinBrett/).
SearchNote - A lightweight, quick, keyboard-centric, search-oriented desktop(linux) app
Tags: atlashackathon, mongodb, java, linux
Published: 2022-01-12 18:59:03

![Search Note](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ds0g6dpd1t8262hlnhg7.png)


## SEARCH NOTE



### Overview of My Submission

I do most of my work using just my keyboard and a lot of the everyday tasks requires fetching some saved data (credentials, queries, etc) and saving some more of it just to fetch it back again. ClipIt is good, but I couldn't customise it to an extent where it would match my hierarchical data persistence need. 

So as a fresh engineer, ignoring the "Don't reinvent the wheel" ideology, I went ahead and made myself (and everyone else, if they please) a note-taking application that hierarchically saves data (tables -> entries) and fetches all of those super-quickly while you're typing (thanks to MongoDB Atlas). Also, all actions have keyboard shortcuts mapped to them.

#### Technology Stack
- JavaFX
- MongoDB Atlas

The current release has a .deb and .jar available to download. Compatible releases for other OS are definitely in-progress.



### Submission Category: 

Choose Your Own Adventure



### Link to Code

{% github https://github.com/shayannasir/search-note %}



### Additional Resources / Info

Attaching a bunch of screenshots below. 



![Authentication](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lrk0jni6flqkx6rxyepa.png)
![Table View](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cvz4fghdb4rd9rm99im2.png)
![Table View](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8zyhz3qhy2tibpwqin0g.png)
![Entry View](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tystjx3y1vhxi1oyxm32.png)
![Add Entry](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/paqaswsjhym17688xi93.png)


---
And of course, any feedback, opinion, extensions, critism, etc is appreciated
MERN Stack Web Application - Property Bookings Catalog
Tags: atlashackathon, mongodb, javascript, mern
Published: 2022-01-12 18:57:44

## Overview of My Submission
- Created a MERN stack website application used for `Property Bookings Catalog` for the submission of *__Dev community X  MongoDB Atlas Hackathon__*
- I've used `MongoDB Atlas` AWS Cloud based database Cluster and it serves as the back-end database to the application
- This is my first 3-tier web app development and thanks to this #Atlashackathon for making the opportunity to learn :)

## Submission Category: 
Choose Your Own Adventure

## Link to Code
- Repository is available to view in GitHub and have the detaied `README.md` file to explain the project
{% github https://github.com/chefgs/mern-app %}

## Additional Resources / Info
- [Link to the screenshots](https://github.com/chefgs/mern-app#testing-application-and-accessing-ui) of the application up and running

> Application up and running
>
![Screenshot](https://github.com/chefgs/repo_images/blob/master/mern_app.png?raw=true)

## Developer Details
- [Saravanan Gnanaguru](https://www.linkedin.com/in/saravanan-gnanaguru-1941a919/) - LinkedIn
- [User Chefgs](https://github.com/chefgs) - GitHub
Testing a Generic Fetch Item List hook with Mock Service Worker
Tags: testing, react, reactquery, mswjs
Published: 2022-01-12 18:56:16

### Subject Under Test
A generic fetch item list hook used to fetch data from the API server, designed for a generic item list component template, part of a set of generic CRUD templates/schematics that I use for most of my entities.

### Behaviours
1. it takes a required `entityName` option to determine which API endpoint to make the HTTP call.

2. it takes an optional `queryKey` as the query key of `useQuery` from `React-Query`. The query key is used to invalidate the query cache when appropriate to show the latest data for the users.

3. it takes an optional `requestConfig` of type `AxiosRequestConfig` to be passed to the HTTP call. So that components can add params to the HTTP request.

4. it takes an optional `t` to translate the error message.

5. it sends error messages to the Message Context.

### Mocks
1. Mock Service Worker
The test uses MSW to mock the API calls and respond appropriately for the tests. The mocked API code is as below.
{%gist
https://gist.github.com/rexebin/373e8e987e872f36e785596451b2a452
%}

2. `useTranslationForTest.ts` is a test double to replace the real localisation solution that requires loading dictionaries from a remote API server.


{%gist
https://gist.github.com/rexebin/a10c4926277aa77434cc72ed34397333
%}

### Common Test Setup
`QueryClientProviderForTest.ts` is used to test all `React-Query` hooks.
{%gist
https://gist.github.com/rexebin/34699149ac60b30c15f7b6cbf28553de
%}

### Code
{%gist
https://gist.github.com/rexebin/aceaec77e29f4010b849918c2246872a
%}

### Notes

1. `TestComponent` shows how the SUT is to be used. 

2. the template of `TestComponent` is designed specifically for the tests. `isSuccess` and `isError` ensure that the elements are only shown when the HTTP calls are done, making the tests short and straightforward.

3. `TestComponent` uses the hook's params as its props so that the tests can customise most of the options outside of the component.

4. only unmanaged dependencies are mocked: API server and Localisation(because it requires API calls to get dictionary).

5. I debated if the SUT is too trivial to test because it is a wrapper of `useQuery` and contains hardly any logic. I decided to write the tests because the SUT has been used heavily.
Is it worth to learn Python in 2022?
Tags: python, webdev, programming, beginners
Published: 2022-01-12 18:55:19

Python has gained a massive amount of attention in the past 5 years. Anyone who is related to the development industry hears the word Python (the first thing that jumps in mind is programming language) instead of a snake. We are in 2022 and we should change the working trends and patterns we were following in the previous year 2021, Why? It helps to innovate and make the mind more productive. This is the reason every year we got 60k search count on python programming language, **is python worth learning in 2022?** (w.r.t years)

Here is why you should or should not learn python this year! 

_**Pros:**_

**1**. Python is a beginner friendly language. It is very simple to understand. Any non tech can learn this language.
**2**. According to 2021 development market python developers are taking high salaries from 72,000$ - 1,44,000$ per year as comparing with other developers.
**3**. Python is very popular because of it’s multi-platform integration as well as with other major and minor programming languages.
**4**. Thousands of Multinational companies and organizations are using python such as Uber, NASA, Instagram, NSA and many more.
**5**. Python is [open-source](https://github.com/python) so it has the most powerful and massive frameworks and libraries which are more secure and faster than most of the other languages. Such as, Pandas & Numpy for Data Science and Deep Machine learning.

**_Cons_**:

**1**. Lack of logic in design programs.
**2**. Slightly slower than other major languages.
**3**. Python programs do not compile before execution instead under development you have to run it each time.

As we can see Python don't have any major issues for not eligible to be learned in 2022. I personally suggest every beginner to start learn Python as your basic machine language.


**_Comment your views &
Follow me on [Github](https://github.com/thehassantahir) & [Twitter](https://twitter.com/thehassantahir) and Sponsor me on_** 👇


[![Patreon Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n16ri16f50t2xf348879.png)](https://www.patreon.com/hassantahir)
React js Error message error 0308010C digital envelope routines unsupported(Solution)
Published: 2022-01-12 18:31:57

basically  this type of error happen from node runtime not from react js. 
.
dont worry i will tell you why its happen.

at this time i am working with node js v17 which not LTS and this version is not compatible with some of webpack, and my previous Node version was v16 which is LTS. in here everything is okey. there is no any error.

If you use the current LTS version of Node.js then this error will not come.
but
.
to solve this i will not recommend you, to uninstall Node.js version 17+ and reinstall the Node.js version 16+. (This is most common solution but not exact)
but
if you wish you can do this.
.
so, what is the actual solution for
 **Error message error 0308010C digital envelope routines unsupported**
 in node v17.
trust me this is every simple and magical. please see below what it should be.

Go to In your package.json: and change this line

"start": "react-scripts start"
to

"start": "react-scripts --openssl-legacy-provider start" 

you can see my screen shot, its not more than those previous 2 line.

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

Thank you
Happy Coding
.
osman forhad
Full-Stack Developer💻 (Mobile App & Web App)
developer.osmanforhad@gmail.com
MANGO - An service directory to find experts and book appointments
Tags: atlashackathon
Published: 2022-01-12 18:24:27

### Overview of My Submission
**Mango**
An service directory to find experts in any field and book appointments with the experts


### Submission Category: 
E-Commerce Creation


### Link to Code

_Frontend Code_
[https://github.com/problemsolver03/Mango-Frontend](https://github.com/problemsolver03/Mango-Frontend)

_Backend Code_
[https://github.com/problemsolver03/mango-serverside](https://github.com/problemsolver03/mango-serverside)



### Additional Resources / Info

**Features in the application**
 1. Add a service
 2. Add Reviews
 3. Book Appointments
 4. View Appointment Schedules
 5. Search for experts

**Mongo Features used**
 1. Atlas Search 
 2. Mongo DB cluster
 3. Realm for hosting and serverless functions

**Tech Stack**
 Frontend : _ReactJS, Tailwind UI_
 Backend : _NodeJS, ExpressJS, MongoDB_
 Authentication :_JWT based authentication , Cryptr for password encryption_

**Database Schema**
USER SCHEMA
```
username: {
    type: String,
    required: true,
  },
  password: {
    type: String,
    required: true,
  },
  name: {
    type: String,
    required: true,
  }
```
SERVICES SCHEMA
```
title: {
    type: String,
    required: true,
  },
  description: {
    type: String,
    required: true,
  },
  image: String,
  contactNo: {
    type: String,
    required: true,
  },
  email: {
    type: String,
    required: true,
  },
  address: String,
  price: {
    type: String,
    required: true,
  },
  category: {
    type: String,
    required: true,
  },
  user: {
    type: String,
    required: true,
  },
  rating: Number
```

APPOINTMENTS SCHEMA

```
  serviceID: {
    type: String,
    required: true,
  },
  user: {
    type: String,
    required: true,
  },
  date: {
    type: Date,
    required: true,
  }

```
  REVIEWS SCHEMA
```
  review: {
    type: String,
    required: true,
  },
  rating: {
    type: Number,
    required: true,
  },
  serviceID: {
    type: String,
    required: true,
  },
  user: {
    type: String,
    required: true,
  }
```
**Screenshots of Application**

![Homepage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bdghrg79cu9xngcheckk.png)
![Dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hqx6u2uxjof2nghuwwq9.png)
![Appointments](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wtxh9418z36sibebekob.png)
![Search](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/88au5gu84vesrbaik0a6.png)
![Details](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sv43kmhhoszb7zqq9v9o.png)

**Link to Application**
  [Application Demo](https://appointmentschedulerapp-ojqay.mongodbstitch.com/)

  Test credentials for application
  email:test@test.com
  password :123
ADRs Done Right
Tags: programming, productivity, architecture, writing
Published: 2022-01-12 18:22:45

As a Software Engineer, I have had the opportunity to write multiple [Architecture Decision Records(ADRs)](https://en.wikipedia.org/wiki/Architectural_decision).

Head over to [Spotify's Blog Post](https://engineering.atspotify.com/2020/04/14/when-should-i-write-an-architecture-decision-record/) for in-depth reading.

An ADR answers two questions -

> What is the problem?
> How should we solve it?

Writing ADRs brings clarity and binds teams to a _common goal_.

ADRs serve as suitable _communication mediums_ for new team members - they can live the past without being there.

Let's dive deeper into the art of writing an ADR.

## Depth of Solution

ADRs should solve the problem, but the way it's solved shouldn't matter if the constraints are apparent.

_Ex: Rotate credentials every 24 hours._

The implementation doesn't matter - it could be a cron, manual or a scheduler service; the details lie with the folks who work on it.

What is necessary is that the credentials should have a shelf-life of 24 hours.

## State Your Assumptions

State assumptions to gauge if the design becomes obsolete.

_Ex: How much data traffic rate can the software support?_

Provided the technique is reliable and resilient, we should -

> **Architect for the future, but settle for simplicity.**

## Security Aspects

Security is vital for software dealing with sensitive customer information, including accessing customer data.

A ["Threat Modeling"](https://en.wikipedia.org/wiki/STRIDE_%28security%29) exercise done in advance to cover all security breaches goes a long way.

## Costing Aspects

Every offering of your software product has a fixed, affordable budget, and a technical decision is almost always strongly linked with this cost.

Does the design involve a managed service? It's good to include baseline costing for data transfer, hourly rates and so on.

## Single Decision Record

Before writing the ADR, an array of discussions happen in the background.

Every ADR should have a **"decision"** section which states a single locked-in decision - assimilation of all the discussion meetings.

**In conclusion, when it comes to writing ADRs -**

> The key is to promote _transparency and participation_ while maintaining _focus and ownership_ of the architecture.

That's all for today! Until later!