teleren/devto huggingface dataset:
How to get Pundit to work with Rails View Component
Tags: rails, webdev
Published: 2021-10-11 15:06:10

In [facture.lu](http://facture.lu/) we use [Pundit](https://github.com/varvet/pundit) as our authorization system and [Devise](https://github.com/heartcombo/devise) for authentication. This allows us to assign each signed-in user a role - admins can do everything, read-only user can only read.

I also included [View Component](https://viewcomponent.org/) in this project as I noticed in previous apps that it is very difficult to maintain a coherent design over the years if the html and css for each component (e.g. a button or dropdown menu) is not centralized.

After setting up Pundit and creating policies for each user role, we can hide or show different elements based on the current user's role - f.ex. the button to add a new team member will only be visible to admins.

In a view we can simply verify `if policy(User).create?` and Pundit will call the `current_user` method to check if the signed-in user is allowed to perform this action.

In a view component, this does not work out of the box however, as a component is generally agnostic about the view context.
As such `policy(current_user, User).create?` will give you an error:
```
  undefined method `current_user' for nil:NilClass
```
Several solutions to this problem are described in [issue#310 (View Component)](https://github.com/github/view_component/issues/310). I prefer the [CurrentAttributes api solution described by jaredcwhite](https://github.com/github/view_component/issues/310#issuecomment-650823756).

In order to get our `current_user` to our components, we take advantage of [ActiveSupport::CurrentAttributes](https://api.rubyonrails.org/classes/ActiveSupport/CurrentAttributes.html):
```ruby  
  class Current < ActiveSupport::CurrentAttributes
    attribute :user
  end
```
In an ApplicationController before_action callback, we set the current user:
```ruby
  before_action :initialize_component_context

  def initialize_component_context
    Current.user = current_user
  end
```  
In our view component, we can then access the user via the new class:
```ruby
  Pundit.policy(Current.user, Offer).edit?
```
In the issue comments, you can read more about how to make it work for previews as well. As I'm not using previews at the moment, I didn't include all the recommendations from the post.
Kept running "source .bashrc" every time I open WSL
Tags: devops, linux, devjournal
Published: 2021-10-11 14:51:22

I was playing around and testing some stuff in Linux when i suddenly did a tweak which changed how my WSL terminal opens up. This is what my terminal looks like - notice it doesn't the distinct green + blue colors.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qapwn98ag3dpjgmd9gaf.png)

After some searching I found two articles (links at the bottom) which describes the "sequence" which Unix follows when reading files. As summary, here's the files (in order):
1. /etc/profile
2. ~/.bash_profile
3. ~/.bash_login
4 ~/.profile

I added the function for .bashrc at the top of the **.bash_profile**:
```bash
## Loads .bashrc
if [[ -f ~/.bashrc ]] ; then
        . ~/.bashrc
fi
```

Closed terminal and reopened it 
Voila! It now shows the green and blue colors.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3a4vvlafznzvn2wdm4pz.png)

Adding this great explanation from the reference link:
> *By default, Terminal starts the shell via /usr/bin/login, which makes the shell a login shell. On every platform (not just Mac OS X) bash does not use .bashrc for login shells (only /etc/profile and the first of .bash_profile, .bash_login, .profile that exists and is readable). This is why "put source ~/.bashrc in your .bash_profile" is standard advice*

---

### References

- [Why doesn't .bashrc run automatically?](https://apple.stackexchange.com/questions/12993/why-doesnt-bashrc-run-automatically#comment13715_13019)
- [How do I set up my shell execution PATH?
](http://hayne.net/MacDev/Notes/unixFAQ.html#shellStartup)
- [What is the difference between .bash_profile and .bashrc?](https://medium.com/@kingnand.90/what-is-the-difference-between-bash-profile-and-bashrc-d4c902ac7308)
Easily structure your Sass
Tags: sass, scss, css, cli
Published: 2021-10-11 14:41:59

Hello everyone 👋,

## Intro

A year ago, I published an NPM package to generate a Sass file structure at the root of a project. 

The goal behind this idea was to help our dev team to have "one source of truth" regarding the way we organized our code. And it worked well at first. We all used it, to start a new project, and it became more maintainable.

But there was one big issue that we could not solve with this package, it was not **flexible** enough.

Because not all projects are the same, having to use the same template for all our projects was not ideal. 

The solution: create a CLI to give more options to the devs, like choosing the path of installation, multiple templates, "helper" code, etc.

## The CLI

<img src="https://res.cloudinary.com/mdaraize/image/upload/v1633280171/create-scss-cli/cscli.png" alt="create-scss-cli setup example">

The CLI generates a Sass file structure based on the 7-1 pattern. You can choose where you want to install it into your project. It comes with (variables, mixins, functions, and maps to generate helper CSS classes). 

If you only want to file structure, but without any code, you can select the "clean" template. It will generate all the files, without any starter code.

Otherwise, you also have the option to remove the specific folder from the structure. Don't need a vendor or theme folder, no problem, simply select which folder you want to discard from the original structure.


## Structure

```bash
scss
    │
    ├── abstracts
    │   ├── colors
    │   ├── fonts
    │   ├── index
    │   ├── mixins
    │   ├── spacing
    │   └── helper
    │
    ├── base
    │   ├── global.scss
    │   ├── shame.scss
    │   └── typography.scss
    │
    ├── components
    │   ├── alert.scss
    │   ├── banner.scss
    │   ├── buttons.scss
    │   ├── card.scss
    │   ├── forms.scss
    │   ├── icons.scss
    │   ├── menu.scss
    │   ├── modal.scss
    │   ├── progress.scss
    │   └── table.scss
    │
    ├── layout
    │   ├── footer.scss
    │   ├── grid.scss
    │   ├── header.scss
    │   ├── navigation.scss
    │   └── sidebar.scss
    │
    ├── pages
    │   └── home.scss
    │
    ├── themes
    │   └── dark.scss
    │
    ├── vendor
    │   └── normalize.scss
    │
    └── main.scss
```

## Installation

### Prerequisites

- [Node 14](https://nodejs.org/en/)
- [Npm](https://www.npmjs.com)

You can install the package globally or execute it right away with npx.

### Global install

```sh
npm i -g create-scss-cli
```

After that, you'll be able to use the create-scss-cli command in your project like so:

```sh
cs-cli
```

### NPX

```sh
npx create-scss-cli
```

## Documentation

👉 https://www.createscss.com/ <br>
👉 https://github.com/maximedaraize/create-scss-cli <br>
👉 https://www.npmjs.com/package/create-scss-cli

## Conclusion

I would really appreciate any feedback. This is a side-project but I have the intention to keep working on it. [Contribution is welcome](https://github.com/maximedaraize/create-scss-cli/issues) 🤙

Thanks for reading,

Max
Crack DevOps Interview by these top questions
Tags: devops, career, questions, 2021
Published: 2021-10-11 14:31:53

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nz8q21v6gegtk55zxsku.png)
-> Image Credit: https://www.sevenmentor.com/ 

The most popular set of skills that organizations look out for in an ideal candidate applying for a DevOps role is –


* Experience in tools that allow us to automate the infrastructure such as Ansible, Puppet, Chef, etc.
* Hands-on expertise on container orchestration and management tools like Docker, Kubernetes, etc. can be helpful.
* Popular backend languages for programming such as Java, PHP, etc.
* Cloud computing platforms and infrastructures such as GCP, Amazon Web Services, etc.
* Version control and management tools like Git, BitBucket, etc.

Once you are confident that you have enough of these skills to ace any DevOps job interview with flying colors, you can move ahead and start practicing some of the most frequently asked DevOps job interview questions and answers that we have mentioned below.


1. What can you tell me about DevOps?
2. What is the need for DevOps in the current market?
3. Explain the difference between DevOps and Agile in SDLC? (DevOps Vs Agile)
4. List a few tools that might be handy for end-to-end DevOps.
5. Explain how these tools work together to carry out DevOps practices?
6. Enlist the advantages and benefits that DevOps brings to the table.
7. What are some of the anti-patterns in DevOps?
8. Explain the different phases in DevOps?
9. Differentiate the terms Continuous Delivery (CD) and Continuous Deployment with respect to DevOps?
10. Explain the role of Continuous Monitoring in DevOps?
11. In DevOps, explain the purpose of Configuration Management (CM)?
12. Explain the role of Amazon Web Services (AWS) in DevOps?
13. Explain the phrase “Infrastructure as a Code” that is often used in DevOps?
14. Explain some key KPIs related to DevOps?
15. What is the reason behind the demand for DevOps in the past few years?
16. What do you mean by Version Control Systems that are heavily used in DevOps?
17. Explain the two types of Version Control Systems.
18. Differentiate between the pull and fetch commands in git?
19. Explain branching in Git?
20. Differentiate Git Merge with Git Rebase?

Want to know more questions on DevOps, then go through this blog on [interview questions for DevOps engineer](https://www.techgeekbuzz.com/devops-interview-questions/).
Minesweeper Terminal Game
Tags: python, programming, gamedev, github
Published: 2021-10-11 14:31:51

I have created this game as part of the Python3 CodeCademy course, in which the final task is to create a terminal game. I chose Minesweeper because I wanted to challenge myself and as I didn't even know how to play it at the time, it seemed like the perfect challenge to attempt.

![Screenshot of game running in terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pnhoepv9utx6rzx723x0.png)

My implementation of this game includes 3 different difficulties, each with a different number of squares and mines. At the start of each go, the player must choose whether they want to "dig" or "flag" and which square they wish to do this in. If the player chooses dig, the game will then detect whether that square is a mine, and if so, will immediately end the game. If it is not a mine, the game will show that square to the player. When the player flags a square, the game checks if all of the mines have been flagged. When this is the case, the game will end and the player will be told that they have won.

{% github adrianhuuk/Minesweeper %}
Design buttons like a Pro with Tailwind CSS
Tags: css, tailwindcss, webdev, beginners
Published: 2021-10-11 14:31:16

Let's get down to business, today I'll show you some easy steps for creating clean, functional buttons with Tailwind CSS.

**1. HTML markup**

First, we need some basic HTML markup, all styling will happen through Tailwind classes.

```html
<a href="#" class="...">
  Button
</a>
```

**2. Display and spacing**

Now on to adding classes to the `class` attribute. On mobile our button will be full-width otherwise, it will have some sane spacing defaults. The content is centered vertically as well as horizontally.

```
flex sm:inline-flex justify-center items-center px-5 py-2
```

**3. Color**

Next, we are adding background and text colors.

```
bg-blue-500 text-white
```

**4. Text**

Some simple text styling.

```
font-semibold text-center
```

**5. Decoration**

We are adding rounded borders and removing the default outline for a more polished look.

```
rounded-md outline-none
```

**6. States**

Don't forget to add states. `Hover`, `active` plus `focus`. These are important to give the user proper feedback.

```
hover:bg-blue-600 active:bg-blue-700 focus-visible:ring ring-blue-300
```

**7. Transition**

Finally adding a transition between the different states. Faster transition times usually work better for buttons *(50ms to 150ms)*.

```
transition duration-100
```

**Final result**

![Tailwind CSS Buttons](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8iet940vlba3u154afy0.png)

---

```html
<div class="bg-gray-100 py-16">
  <div class="flex flex-wrap justify-center gap-4 p-4">
    <a href="#" class="flex sm:inline-flex justify-center items-center bg-gradient-to-tr from-indigo-500 to-purple-400 hover:from-indigo-600 hover:to-purple-500 active:from-indigo-700 active:to-purple-600 focus-visible:ring ring-indigo-300 text-white font-semibold text-center rounded-md outline-none transition duration-100 px-5 py-2">
      Button 1
    </a>

    <a href="#" class="flex sm:inline-flex justify-center items-center bg-gradient-to-tr from-pink-500 to-red-400 hover:from-pink-600 hover:to-red-500 active:from-pink-700 active:to-red-600 focus-visible:ring ring-pink-300 text-white font-semibold text-center rounded-md outline-none transition duration-100 px-5 py-2">
      Button 2
    </a>

    <a href="#" class="flex sm:inline-flex justify-center items-center bg-blue-500 hover:bg-blue-600 active:bg-blue-700 focus-visible:ring ring-blue-300 text-white font-semibold text-center rounded-md outline-none transition duration-100 px-5 py-2">
      Button 3
    </a>

    <a href="#" class="flex sm:inline-flex justify-center items-center bg-green-500 hover:bg-green-600 active:bg-green-700 focus-visible:ring ring-green-300 text-white font-semibold text-center rounded-md outline-none transition duration-100 px-5 py-2">
      Button 4
    </a>
  </div>
</div>
```

**More**
> 👉 If you want to see more Tailwind CSS components and examples head over to [Flowrift](https://flowrift.com?utm_source=devto&utm_medium=organic). It's a library full of beautifully designed Tailwind CSS UI blocks.
You don't seem to have a generator with the name “react-native-ignite:model” installed.
Tags: javascript, reactnative, ignite
Published: 2021-10-11 14:26:38

You don't seem to have a generator with the name “react-native-ignite:model” installed.
But help is on the way:

You can see available generators via npm search yeoman-generator or via http://yeoman.io/generators/.
Install them with npm install generator-react-native-ignite.

To see all your installed generators run yo without any arguments. Adding the --help option will also show subgenerators.

If yo cannot find the generator, run yo doctor to troubleshoot your system.

solution : 

there are 2 solutions

1)run this command npm install generator-react-native-ignite (or with yarn)
2°if 1 didnt work then you have to follow these steps :
download this folder ( ignite ) ( https://drive.google.com/drive/folders/14thitkLxWl93OJ_z2EndeIcZhAaeBIJ0?usp=sharing)
3)you put the folder on this path "project_ignite/app/"
then install ignite react native genetator : use this command **npm install generator-react-native-ignite (or with yarn)**
4)now you can generate anything you want ( screens , models ..etc ) ( for example generate a model named hello **npx ignite-cli generate model hello**)
Just Ask Ipython for help
Tags: python
Published: 2021-10-11 14:24:25

---
templateKey: blog-post
tags: ['python']
title: Just Ask Ipython for help
published: true
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nd22rxpvemrth4in6kwe.png

---

## It happens to the best of us

We can't all remember every single function signature out there, it's just not
possible.  If you want to stay productive while coding without the temptation
to hit YouTube or Twitter.  Use the built in help.  Here are 5 ways to get help
without leaving your terminal.

{% youtube TZrRAP-9UMk %}

## Docstrings

In any python repl you can access the docstring of a function by calling for `help`.

``` python
help(df.rolling)
```

In Ipython we can even get some syntax highlighting with the `?`.

``` python
df.rolling?
```

## Source Code

Sometimes the docstrings are not good enough, and don't give us the content we
need, and we just need to look at the source.  Without leaving your terminal
there are two ways I often use to get to the source of a function I am trying
to use.

``` python
import inspect
inspect.getsource(df.rolling)
```

The more common way I do it is with the ipython `??`.

```
df.rolling??
```

## Bonus rich.inspect

You thought the syntax highlighting was good with ipython, check out what
`rich.inspect` can do! As far as I know there is no way to get to source code,
but the results are still fantastic.



``` bash
pip install rich
```

> Install rich

``` python
from rich import inspect
inspect(cars.rolling, help=True)
```

> then inspect

## Connect with me

If you liked this one, check out the YouTube Channel, catch me live on twitch,
or connect on twitter, I'd love to hear from you.

twitter:  https://twitter.com/_WaylonWalker
twitch: https://www.twitch.tv/waylonwalker
github: https://github.com/waylonwalker/
twitch: https://www.twitch.tv/waylonwalker
Some Tips How to Become a Web Developer
Published: 2021-10-11 14:11:43

The individual requirements of every company will determine what role the Web Developer is going to play on your team. There are many possible responsibilities that a Web Developer could be associated with, such as: Build and optimize a safe, reliable, and effective web page for meeting business requirements. This role is also often referred to as Content Developer. It's very important that a Web Developer is able to understand how to use the most up-to-date tools and platforms.

A web developer can specialize in a range of areas. Generally, a web developer works on basic website design, or a basic web development. Other skills that you may need to demonstrate before being hired as a web developer include CSS and HTML knowledge, as well as basic software development experience. Some web developers are involved in more complex projects, however, such as building an e-commerce site, or a web application (a program that runs on a web server).

Web developers require a certain amount of job experience and training. Generally speaking, it takes around two years of full-time employment with a web development company before you're eligible for an entry-level job, usually on a part-time basis. If you have the necessary skills, you can find a position in a large development firm or go freelance. However, there are also opportunities at smaller firms that don't require a specific level of experience.

Many companies have moved from full-time to part-time developers. Part-time developers are generally employed by small companies who have limited budgets. As these companies grow they can outsource positions to freelance web development professionals, but there is still a requirement for these individuals to demonstrate serious quality in their work. You will need to have a certain level of skill, and be able to follow instructions.

One field that is growing in popularity is computer science. Software engineers are responsible for creating the software that web designers use, as well as creating new software for new platforms. Software engineers are required to have a solid background in programming, and have a strong understanding of how networks, servers, and software work together. Computer science graduates with a strong computer science background can quickly move into a number of [web design](https://www.webyurt.com/web-design-and-development) careers.

Freelance web developers work independently, typically as contractors. The majority of freelancers start out working for larger companies, where they learn the ropes and develop skills needed to create websites on their own. From there they can branch out into marketing or design, or even start their own company. In addition to being extremely flexible, freelancers are also typically interested in the subject matter, and can often create websites within their budget and time frame.
Wipro Coding Question "Company Target Sale "
Published: 2021-10-11 10:04:34

An apparel company has a list of sales rates of N items from its website. Each item is labeled with a unique ID from 0 to N-1. The company has a target sales rate, say K. The company wishes to know the two items whose total sales rate is equal to the target sales rate. The list of sales is prepared in such a way that no more than two items' total sales rate will be equal to the target rate.

Write an algorithm to find the ID of the items whose total sales value is equal to the given target value.

Input:-
The first line of input consists of two space separated integers-numitems and target, representing the total number of selected items (N) and the selected target sales rate(K), The second line of input consists of N space-separated integers- item[0], item[1],item[2]................item[N-1]. representing the sales rate of the selected items.

Output:-

Print two space-separated integers representing the ID of the items whose total sales rate is equal to the given target rate. If no such item exists then print-1.

Constraints

0 ≤ numitems ≤ 10^6

-10^6 ≤ items ≤ 10^6

O ≤ i ≤ numitems

Example

**Input:**

```
5 14

6 5 3 11 10
```

**Output:**
```
2 3
```
**Explanation**

The ID of two items with a total sales rate of 14 are 2 & 3 (3+11-14).

**Solution:-**
To run the code [Click here](https://www.onlinegdb.com/edit/113Qo6MwZk)
```
import java.util.*;
public class Main
{

	public static void main(String[] args) {
		Scanner sc = new Scanner(System.in);
	
		int n = sc.nextInt();
		int num = sc.nextInt();
		int arr[] = new int[n];
		
		for(int i=0; i < n; i++){
		    arr[i]= sc.nextInt();
		}
		for(int i=0;i<n-1;i++){
        for(int j =i+1; j<n-1; j++){
            if(arr[i]+arr[j]== num){
                System.out.println(i+" "+j);
            }
            
        }
    }

	}
}


```