teleren/devto huggingface dataset:
Tailwind expanding slider
Tags: tailwindcss, css
Published: 2021-04-01 15:14:02

Some time ago, I made this cool [expanding slider in CSS](https://daily-dev-tips.com/posts/css-only-expanding-slider-%F0%9F%98%B2/).
And I was intrigued if it was possible in Tailwind.

The short answer: Yes!

This is what it will look like:

{% codepen https://codepen.io/rebelchris/pen/oNBLBxV %}

## Tailwind expanding slider structure

We obviously have some help by already having made this before. For the Tailwind version, let's start by making the container and slider wrapper.

```html
<div class="flex w-full h-full items-center justify-center">
  <div class="flex w-5/6 h-5/6">
    <!-- Slides here -->
  </div>
</div>
```

Yes, that is basically it!
So far, we didn't need anything fancy, but let's move onto how a slide should look.

```html
<div
  class="slide relative flex-auto bg-cover bg-center transition-all duration-500 ease-in-out hover:flex-grow"
  style="background-image:url('img.png')"
></div>
```

There are two things to note here:

1. For the codepen, I used an inline background-image
2. I use the slide class for the hover

These two elements should be included in the tailwind.config.js file and extend Tailwind.

This config will look like this:

```js
module.exports = {
  theme: {
    extend: {
      backgroundImage: {
        1: "url('1.jpg')",
        2: "url('2.jpg')",
        3: "url('3.jpg')",
        4: "url('4.jpg')",
        5: "url('5.jpg')"
      },
      flex: {
        5: 5
      }
    }
  },
  variants: {},
  plugins: []
};
```

> Note: Check out this article for [custom config in Tailwind](https://daily-dev-tips.com/posts/using-google-fonts-in-a-tailwind-project/)

With the config in place we can convert our HTML to look like this:

```html
<div class="flex w-full h-full items-center justify-center">
  <div class="flex w-5/6 h-5/6">
    <div class="slide bg-1"></div>
    <div class="slide bg-2"></div>
    <div class="slide bg-3"></div>
    <div class="slide bg-4"></div>
    <div class="slide bg-5"></div>
  </div>
</div>
```

Way cleaner, right?

Now all we need to do is add the custom CSS.

```css
.slide {
  @apply relative flex-auto bg-cover bg-center transition-all duration-500 ease-in-out;
}
.slide:hover {
  @apply flex-5;
}
```

And that's it!
You can find this demo on the [Tailwind playground](https://play.tailwindcss.com/lsrb2bG5RP?file=css).

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
MY EXPERIENCE 
Published: 2021-04-01 15:13:29

Hello Dev Community, I wanted to share with you today a brief summary about my experience in the hacker community, I've started a few mounths ago and I can't describe how much it has changed my life, I've met new people made new friends and got to work with them and learn from them, it's an incridble journey so far and I can't wait for the rest of it!!
How to Change or Disable the Proxy Server on Google Chrome on a Mac
Published: 2021-04-01 15:07:32

Google Chrome on Mac used the Mac system settings to reach the proxy settings. This is how you open it.

Click on the Chrome menu and then select Preferences.
Scroll down the Settings page till you see the Advanced button.

Click on it, and it will open the Advanced Settings Panel.
Now scroll down if necessary to the System area, and you will see the link to Open your computer's proxy settings.
This will open Mac's system proxy preferences page.

To Disable Proxy Server

Simply uncheck the proxy settings here. Typically, it will be the Web Proxy (HTTP) or Secure Web Proxy (HTTPS) or SOCKS Proxy. Or it might be all of them. Go ahead and uncheck to disable proxy routing.

OR

To Change Proxy Server Settings

Click on the Web Proxy (HTTP) or Secure Web Proxy (HTTPS) or SOCKS Proxy, depending on what you want to change. Type in the new proxy IP and Port. Make sure you have typed in the Username and Password if applicable.

Once you are done changing or disabling the Proxy server, press OK.
That saves the proxy settings, and you can now navigate Chrome to a service like HTTPBin http://httpbin.org/ip to see if Chrome is using the proxy you typed in or not.
Ruby Scripting: Kill Process by Port
Tags: dotfiles, scripts, ruby
Published: 2021-04-01 15:06:59

---
title: Ruby Scripting: Kill Process by Port
published: true
description: Simple ruby script to find and kill processes by port usage.
tags: dotfiles, scripts, ruby
//cover_image: 
---

![Example]()

### Usage

`killports [PORT1] [PORT2] ...`

Example: `killports 3000 5000`


### Code

```ruby
#!/Users/eberry/.asdf/shims/ruby

# See https://www.devdungeon.com/content/enhanced-shell-scripting-ruby

require "amazing_print"

def echo_success(message, port, pid=nil)
  puts [
    "👍🏻",
    port.to_s.yellow,
    pid.nil? ? nil : pid.to_s.cyan,
    message.to_s.white
  ].compact.join(" ")
end

def echo_failed(message, port, pid=nil)
  puts [
    "👎🏻",
    port.to_s.yellow,
    pid.nil? ? nil : pid.to_s.cyan,
    message.to_s.red
  ].compact.join(" ")
end

ARGV.each { |arg|
  port = arg.chomp
  pid = `lsof -t -i tcp:#{port}`.chomp
  if pid.to_i > 0
    _result = `sudo kill #{pid}`

    if $?.success?
      echo_success("killed", port, pid)
    else
      echo_failed("no such process", port, pid)
    end
  else
    echo_success("was not in use", port)
  end
}

if ARGV.empty?
  puts "Usage: ".yellow + "killports [PORT1] [PORT2] ..."
end

exit(0)
```
Building a PlotLy $GME Chart in Python
Tags: python, programming, datascience, tutorial
Published: 2021-04-01 14:57:31

{% youtube 1ZcXmjZtJJ8 %}

A code-along video covering the coding process from start-to-finish.

Something a little different - it's pretty long - and is more of a 'figure it out as we go along' style video.

I haven't prepared anything beforehand, this is just going into the coding process with a rough outline of wanting to build a stock chart for GME (GameStop) and adding a few technical indicators - to get more familiar with PlotLy and the AlphaVantage API.

So, it's a weird one, but I hope a few of you enjoy it - thanks :)
Fundamentals of Testing in TypeScript #2
Tags: testing, typescript
Published: 2021-04-01 14:54:27

In the [previous article](https://dev.to/lukaspolak/fundamentals-of-testing-in-typescript-1-1hn3) we written our first testing assertion.

In this article we will abstract our assertion, which will help us with readability and avoiding unnecessary code duplication.

Our testing assertion is imperative. It would be appropriate to write a thin layer of abstraction to make it more universal. So first, we will write a simple function to encapsulate our assertion.

Our function `expect` will accept the `value` parameter. It will return an object with the assertion `toBe`, which accepts `expected` as a parameter.
Inner implementation of the `toBe` function will be the same as our previous article's assertion.

```ts
const expect = <T>(value: T) => {
  return {
    toBe(expected: T) {
      if (value !== expected) {
        throw new Error(`${value} is not equal to ${expected}`)
      }
    },
  }
}
```

Now we can remove code duplication and make our code more universal.

```ts
//...

expect(add(8, 16)).toBe(24)

expect(subtract(32, 16)).toBe(16)
```

If we rerun our tests, we will get the same error message. At the most basic level, our function takes a value, and then it returns an object with specialized assertion. Currently, we have only a `toBe` assertion. Still, we can easily create a `toEqual` for deep equality check, or `toBeLessThan` and `toBeGreaterThan` for comparing numbers.
LHD SHARE
Tags: localhackday, mlhgrad
Published: 2021-04-01 14:54:14

Wait! Are you telling me you aren't participating in Local Hack Day Share? You are missing out on so much fun! Let me point out a few different reasons as to why you should be participating in as many Hackathons as possible. 

Let's go back 2 months in time. I'm fairly new to college and I'm having a hard time coping up with a shit ton of assignments. Our seniors approached us and said, “Hey! We just started a guild for MLH Local Hack Day Share, why don't you guys join in and participate?” Um.. ok but what the heck is MLH. What does Local Hack Day even mean? 

Understanding how overwhelming that sounded, our seniors arranged a session to tell us what exactly was happening. 

An hour later we had an idea of what was happening and how to approach it. The guild members were extremely cooperative and helped us when needed. LHD Build was great and we had a lot of fun! Our guild ended up in 4th place!!

LHD Share has begun and I can't wait to climb up the leader board! You should join too.
Cascading permissions with inherited roles in Hasura
Tags: authorization, inheritedroles
Published: 2021-04-05 05:54:35

---
title: Cascading permissions with inherited roles in Hasura
published: true
date: 2021-04-01 14:43:48 UTC
tags: Authorization,InheritedRoles
canonical_url: https://hasura.io/blog/cascading-permissions-with-inherited-roles-in-hasura/
---

 ![Cascading permissions with inherited roles in Hasura](https://hasura.io/blog/content/images/2021/03/inherited_roles.jpg)

Inherited roles in Hasura have been one of the most requested features. Many times roles are a combination of roles that already exist in your system. A standard user may have unlimited read access, an editor the ability to update, an admin the ability to create and delete, and a super-user the ability to do all of those. Instead of replicating functionality across multiple role definitions, define each of those abilities in a descriptive way that can then be combined across multiple users.

## Inheriting Members and Member-Inheritors with Authorization Groups

Let’s explain this feature in more depth. Imagine a base role called Role A. Role A has the ability to edit items of X class. Role B has the ability to edit items of Y class. Role C has the ability to edit items of Z class.  
If we define B and C as member-inheritors of A, then B can now edit X,Y and C can edit X,Z respectively. We could add a third role D that inherits from A,B, and C and has the ability to edit X, Y, and Z class items.

## Multiple Roles in Practice

What may be confusing to read in enterprise speak, is very accessible in practice. With the Hasura console, CLI, and API all supporting role inheritance definitions – defining well architected roles is just a few clicks or commands away.  
To see how to enable role inheritance in Hasura Cloud, watch this feature’s deep-dive video below.

<iframe width="200" height="113" src="https://www.youtube.com/embed/BNq77Qk5dIE?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe><figcaption>Learn how to create inherited roles in Hasura</figcaption>
Report On My Earning Using Web Monetization
Tags: webdev, webmonetization, tutorial, beginners
Published: 2021-04-01 14:11:55

## Factual Truth About Web Monetization

The fact will still be a fact unit it finds a suitable and highly competent reality to override its existence. Don't mind me and my choice of diction, all I am trying to do is juxtapose why the convention well model of monetizing content via Google Adsense, Affiliate Marketing, etc. from this newly introduced Standard Web Protocol (SWP), known as Web Monetization. I made some dollars without having to use my money to advertise, all I use is my PC and Data, which I believe everyone in this 21 Century can not do without, so I am not considering that as a cost from my end.

One amazing fact I would like to talk about is the fact that  [**User Privacy is Secured**](https://webmonetization.org/docs/explainer) 
The Web Monetization model stands as an intermediary or decouples the user’s or sender (by making payments on their behalf) from the website’s receiver or content creator (a digital wallet capable of accepting micro-payments from the website). In plain terminology: the user pays to WM and the WM pays the content creator, this makes it absolutely impossible for websites (creator) to track users.

By using the browser as an intermediary the privacy of the user is preserved from both the website and the WM sender. Check the Flow below.

By providing an alternative revenue model to advertising, WM indirectly reduces the need for websites to do invasive tracking of their users.



I was able to set up my account in just three (3) major steps and since then date, I have been making a micro income, from just blogging and my youtube content. I won't be giving the steps and procedure for you to step up your account, but I have good news for you, you can always check out the following article to know more about the **How:** Click Introductiontion to understand the overview and Implementation to begin your process in Monetizing your content.  


![Uphold earning.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1614767699816/XWPT4zh7z.png)
I started monetizing my content in **mid-February 2021** and I am just less than a month into monetizing my content and I have just made about **3 USD**  it may look small, but the fact is that all my previous content have never generated a cent form me since I have been creating content. The most interesting aspect is that I can Bypass YouTube policies and still earn money from my content, without any form of infringement. Well, I stake my earning that is why it is lesser in value.

I would also advise you to check out my videos to help you get started on **Monetizing your content, step-by-step process.**

## Introduction On Web Monetization

{% youtube QTtQoKrwvU0 %}


## Step by step Process to Integrate Web Monetization

{% youtube 6-k4mlz0ibo %}


![Thanks.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1614767915125/kaVp7pu_c.jpeg)
Hi my fellow friend, I hope you can see that the future is bright.
Tutorial: Sudo commands that you should know as a web developer
Tags: tutorial, webdev, programming, codequality
Published: 2021-04-01 14:06:37

We're pleased to announce that the Codesphere IDE now supports sudo!
If you've ever worked in a Linux operating system, you're probably familiar with the "sudo" command. 

>Sudo is a program for Unix-like systems that allows users to run programs with privileges of another user. 

In the following article, we will show you some common sudo commands that you may come across as a web developer.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8emqtgejx6bl6j41ql3c.gif)

##Updating the npm version globally 
command: `sudo npm i -g npm`

Run **sudo npm i -g npm** in your terminal to update the npm version globally.


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/spe9lsd41ops4ck14qo9.gif)


##Changing the Node.js version
command: `sudo n <version>`
>N is a great tool for switching between Node.js versions with ease.
Simply execute sudo n latest to change your Node.js version to the latest version.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8a4kr11yxufs3b7c75yn.gif)

##Removing versions of Node.js
command: `sudo n rm <version>`

If you might want to remove an old version of Node.js, just run `sudo n rm <version>`.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/38uyhtqfpxp7m1i0xbyi.gif)

##Installing packages globally
command: `sudo npm i -g <package_name>`

Node.js has great package management, so installing packages globally is very simple. Sometimes installing packages globally gives you the ability to use NPM packages locally as well as globally, such as within other Node.js projects. 
In the following example, we are installing nodemon and eslint globally.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zwb1dtey90eqsb9b4un5.gif)

##Installing the create-react-app package globally
command: `sudo npm i -g create-react-app`

To install the create-react-app package globally use the command mentioned above.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9apkcc24qnhs5hjhl6kt.gif)

That’s all for now, we hope that you enjoyed the read! Our team is working hard to make Codesphere easier and even more enjoyable for you.

Thanks for using Codesphere.
Happy Coding!
My experience in Local Hack Day.
Published: 2021-04-01 14:05:32

##**What actually is local hack day?**
Local Hack Day: Share is a week-long celebration of sharing everything you’ve learned as a hacker. If you’ve been hacking with us all year, we’re excited to have you back. If this is your very first event, we’ve got a ton of beginner-friendly challenges for you to complete that’ll have you shipping your hack like a pro in no time. You’ll have your pick of technical, design, and social challenges to complete - each with an emphasis on sharing your work. The more challenges you conquer, the more points you’ll earn. Tune in each day to check out the leaderboards and share what you’ve built.

##**My experience so far...**
I'm attending the local hack day:share for the first time and so far it has been the best experience I have had. Connecting with my guild members, attending mini events, completing tasks have been really fun.
These kind of events really give you opportunities to explore more and share and learn with different people.
Ethical Hacking : Intellipaat
Published: 2021-04-01 14:01:42

Ethical Hacking is the case of intentionally hacking into a plan to find the insufficiencies present in it, which would then have the decision to be settled before a Black Hat Hacker finds those deficiencies and endeavors them. This Ethical Hacking instructional exercise will give you fundamental hacking works out, close by a verifiable Ethical Hacking guide. 

If you at whatever point pondered how to get the hang of hacking, today in this [Ethical Hacking course](https://intellipaat.com/ceh-ethical-hacking-certification-course/) you will track down a couple of arrangements concerning the significance of Ethical Hacking, close by the various new developments and contraptions that can be used by 'Ethical' or White Hat Hackers to get to a plan, application, or data. In case you by and large expected to learn Ethical Hacking, this web hacking instructional exercise will give you an idea concerning Ethical Hacking stray pieces. 

What is Hacking? 

Hacking is an unapproved way to deal with oversee access development, and it is changing into a fundamental zone of pressing factor with the presence of progress. Having said that, poisonous hacking comparably getting acclaimed. After a short time, you might be thinking about what Ethical Hacking is. 

What is Ethical Hacking? 

Way, recalling the 1970s, goliath attempts enlisted a lot of people they called the 'tiger gathering' to discover and address insufficiencies. Made by the tiger pack was to hack, by whatever philosophies open, the current developments of the affiliations and a short period of time later to share how they did the hack. 

A short period of time later, this 'hack' was fixed by the security gathering. 

The above approach for first breaking the system by enrolling 'architects' and from that point on fixing the security determination is called Ethical Hacking.
March Cloud Native Romandie Meetup
Tags: meetup, cloudnative, kubernetes, cicd
Published: 2021-04-01 13:44:49

---
title: March Cloud Native Romandie Meetup
published: true
description: The last Cloud Native Romandie Meetup took place on March 25th
tags: meetup,cloudnative,kubernetes,cicd
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cf6t3h6z8shvv26x7tqr.png
---

Last week, we organized our last Cloud Native Romandie Meetup. Due to the current situation, this was an online event like the previous occurrences.

The meetup was recorded and can be viewed again on YouTube.

{% youtube 21DZ6hD97kM %}


# Subjects

For this edition, we had presentations by [CloudBees](https://www.cloudbees.com/), [Exoscale](https://exoscale.com), and [Camptocamp](https://camptocamp.com).


## CloudBees CI

[Frédéric Gibelin](https://www.linkedin.com/in/fredericgibelin/) from [CloudBees](https://www.cloudbees.com/) presented [CloudBees CI](https://docs.cloudbees.com/docs/cloudbees-ci/latest/), a solution that helps users scale their Jenkins Enterprise platform in the Cloud.

[See the slides](https://drive.google.com/file/d/1u_pYAMA562a7Rzs2B-4XBImn6WsGHLpn/view)


## Exoscale SKS

Next [Pierre-Yves Ritschard](https://twitter.com/pyr) and [Mathieu Corbin](https://twitter.com/_mcorbin) from [Exoscale](https://exoscale.com) presented [SKS](https://community.exoscale.com/documentation/sks/), a Kubernetes as-a-Service, operating the user’s cluster on their behalf and taking care of the underlying infrastructure.

{% speakerdeck 080c0fc92a8a4d37b5d4ef02eb590d19 %}


## Camptocamp DevOps Stack

To finish, [Raphaël Pinson](https://twitter.com/raphink) presented Camptocamp's [DevOps Stack](https://devops-stack.io) project,  a framework to deploy a standardized Kubernetes platform and its ecosystem, using a GitOps approach.

{% slideshare j0zNBoH48aFEO2 %}


# Future Meetups

Don’t miss any more and join the [Cloud Native Romandie meetup group](https://www.meetup.com/Cloud-Native-Romandie). This way, you can be part of a local community and stay up-to-date on different Cloud Native technologies.

We look forward to meeting and exchanging with you during our next virtual meetup scheduled for Thursday, June 17th.

Also, if you are keen to present a technology or you would like to see more of a technology, please let us know, we would be happy to support your interest. If it interests you, it also interests the community.
Clean profile card with HTML & CSS
Tags: html, css, webdev
Published: 2021-04-01 13:43:38

Hello, today I created this simple profile card with HTML & CSS I hope you like also comments your thoughts. For more content follow me on Instagram @developer_nikhil27.
Thank you!

{% codepen https://codepen.io/NikhilBobade/pen/WNRpNjV %}
What are the top 5 things you consider while reviewing a code?
Tags: discuss, watercooler, webdev, javascript
Published: 2021-04-01 13:36:23

Hello folks,

I am always listening/reading about clean-code practices, dos and don't for certain programming languages etc. Though the base for everything is common, but there are many approaches one can take to write their code and all can be correct in some or the other way. 

There are also many practices like DRY, KISS, WET which are followed by many developers. While doing code reviews, we do check for all these things in the code. Code reviews are super important as they help to better your code and even reviewer gets to learn new things. 

So what are those things which you consider while doing a code review? What is your process for that?
Satisfaction of ✨ clean ✨ branding
Tags: productivity, design
Published: 2021-04-01 13:06:20

I love playing around in [Canva](https://www.canva.com), it's super easy to use and plenty of free and paid resources available e.g. icons, images. I saw a random post on LinkedIn a good while ago of someone's business card that had the layout you can see in the cover image, I was immediately drawn to it and thought it was really clever. I unfortunately didn't make note of the post but didn't forget it. I decided I wanted to make one of my own but not a business card, just a nice cover image for my LinkedIn profile (for now). Check of the initial version in the cover image and let me know what you think!

Have you done something similar?