teleren/devto huggingface dataset:
The CSS: is () pseudo-class
Tags: tutorial, css, development
Published: 2021-03-22 00:45:14

The CSS: is () pseudo-class function takes a list of selectors as its argument and selects any element that can be selected by one of the selectors in that list. This is useful for writing large selectors in a more compact way.


## Don't do this
```css
.content h1 {
  color: red;
}
.content h2 {
  color: red;
}
.content h3 {
  color: red;
}

header p:hover,
main p:hover,
footer p:hover {
  color: blue;
  cursor: pointer;
}
```

## Do this
```css
.content :is(h1, h2, h3) {
  color: red;
}

:is(header, main, footer) p:hover {
  color: blue;
  cursor: pointer;
}
```
Pure CSS Tooltip
Tags: css, html, frontend
Published: 2021-03-22 00:40:51

ig [@r_zue](https://www.instagram.com/r_zue/)
twitter [@re_zue](https://twitter.com/re_zue)
website [zueprojects.dev](https://zueprojects.dev)

I am currently working on the development of a CSS framework [[Z.CSS](https://github.com/R3zu3/z.css)], one of the objectives is to make it as simple, functional and with the least use of js as possible.

It is very common to use tooltips based on js, but in this approach I leave you the code and some examples to use the tooltips based on pure CSS that I implement for my framework.

The content of the tooltip is defined in the element through the attribute

`data-tooltip-text="Tooltip Left"`

which is referenced in the css as follows

`content: attr(data-tooltip-text);`

I hope it helps for something ;)

{% codepen https://codepen.io/R3zu3/pen/XWprbEK %}

#### Compatibility

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ekq5wmww0qachxo738q8.png)

[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/attr())
Leetcoder talks about his job hunt - coding interview parody
Tags: webdev, career, javascript, humor
Published: 2021-03-22 00:05:00

{% youtube 5MYPVS91dcY %}

Sometimes making fun of something is the best way to change things, the state of interviewing is a mess so I thought I'd remix a classic meme.

I'm also going to make a video going over a fairly recent study done by Microsoft that showed their own coding interviews failed miserably and more accurately predicted ability to handle stress rather than actual coding ability.

Not surprisingly software engineers don't usually code with a stranger staring at them in a semi-hostile environment, so the standard coding interview isn't very useful.

**Be sure to follow or subscribe if you're interested in learning about that Microsoft study**
Make React Perform An Action Whenever The Enter Key Is Pressed
Tags: javascript, react, webdev
Published: 2021-04-08 14:34:40

---
title: Make React Perform An Action Whenever The Enter Key Is Pressed
published: true
date: 2021-03-22 00:00:00 UTC
tags: [javascript, react, webdev]
canonical_url: https://thomasstep.com/blog/react-perform-an-action-when-enter-is-pressed
---

A while ago I wanted to add functionality to a React page to do something when a user pressed the enter key on a Material UI `TextField`, and the solution I found involves capturing events. Of course, the events can be applied to other elements as well, but for my sake, I’ll use a `TextField` in the code snippets. I already had a `Button` set up to take action, but I wanted the same behavior when the enter key was pressed, which is fairly common web app behavior.

```
<Button
  variant="contained"
  onClick={(e) => doSomething(e)}
>
  This button does something
</Button>

```

The `doSomething` function was the desired shared behavior. Setting up the same thing for `TextField` was much easier than I thought it would be.

```
<TextField
  onKeyDown={(e) => (
    e.keyCode === 13 ? doSomething(e) : null
  )}
/>

```

Now, I get the same behavior as clicking the `Button`. The `onKeyDown` event captures keyboard input and a `keyCode` of `13` means that the user pressed enter. There is more information about keycodes [on the MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode) if anyone would like to know more. One thing worth mentioning is that this only works when the `TextField` is being focused on by the user. Granted, that was my desired outcome, but it’s still something to be made aware of.
How to get the name of the operating system platform in Node.js?
Tags: node
Published: 2021-03-22 00:00:00

---
  title: How to get the name of the operating system platform in Node.js?
  published: true
  tags: Nodejs
  date: Mon Mar 22 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/get-the-platform-name-of-os-nodejs
  cover_image: https://melvingeorge.me/_next/static/images/main-8ce96219019f74ff83b0d1231188dbe4.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/get-the-platform-name-of-os-nodejs)
  
To get the name of the operating system platform, you can use the `platform()` method from the `os` module in Node.js.

```js
/* Get OS platform in Node.js */

// import os module
const os = require("os");

// get platform name
const platformName = os.platform(); // linux
```

- The method returns the name of the operating system platform as a `string`.
- There are 8 possible values that the method can return, those are:
  - `linux`
  - `win32`
  - `darwin`
  - `aix`
  - `freebsd`
  - `openbsd`
  - `sunos`
  - `android` (Experimental value)

See the above code live in [repl.it](https://replit.com/@melvin2016/get-operating-system-platform-name-nodejs#index.js).

### Feel free to share if you found this useful 😃.

---
What does a DevOps engineer do?
Tags: devops
Published: 2021-03-23 11:25:46

---
title: What does a DevOps engineer do?
published: true
date: 2021-03-22 00:00:00 UTC
tags: devops
canonical_url: https://jhall.io/archive/2021/03/22/what-does-a-devops-engineer-do/
---

I’ve said before that “DevOps engineer” is a bit of an oxymoron. I want to explore this idea a bit, by looking at what “DevOps engineers” do.

When I do a job search for “DevOps engineer” on LinkedIn, here are some of the commonly required skills and experience:

- CI/CD pipelines
- Build automation
- Cloud providers (AWS, Google, Azure)
- Configuration management (Ansible, Chef, Puppet, etc)
- Containerization (Docker, Kubernetes)

When we plot these skills and activities against the [DevOps lifecycle](https://commons.wikimedia.org/wiki/File:Devops-toolchain.svg), we see something like this:

 ![](https://jhall.io/archive/images/devops-engineer.png)

Practically _everything_ a DevOps engineer does falls on the “Operations” side of the chart. This is why I think it’s much more accurate and honest to call this role simply “Operations Engineer.”

Now some of you may be thinking that “DevOps Engineer” is a specific type of Operations Engineer; one who works according to DevOps principles. But then wouldn’t we also have DevOps Developers?

In my view, “DevOps” belongs in the job description (along with things like “Agile”, “Scrum”, “Kanban”, “Remote-first”, and other ways of working), not in the job title.
Glass Morphism create 3d shapes using pure css
Tags: css, html, figma, codepen
Published: 2021-03-21 23:43:58

![Create Glass morphism in pure css](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gdn49mqm9eff3p013uzh.png)

Few days ago I was experimenting in figma to find different use cases for the new trend "Glass Morphism. More specifically i was trying to find that can it be used to create 3d glass shapes. Yes with a few layers stacked together it can be done. One has to have little knowledge of perspective. 

Checkout the design files.

[Behance Post](https://www.behance.net/gallery/115664441/Glass-Morphism-to-render-3d-products-in-figma)

####Use Cases
1. The trick can be used to create 3d assets, specially frosted glass.

2. It can used to create complex gradients.



Checkout the HTML and CSS version here. Mix and Match play with the code on code pen. do let me know your thoughts.

[CodePen Post](https://codepen.io/rahulkuulsingh/pen/GRNVJLL)


1. how to create a div in perspective, 
2. how to apply gradient background/color to a Text element
3. how to create objects that look like frosted glass

If you have any question, do let me know.
What ports are I serving?
Tags: linux, fullstack, server
Published: 2021-03-21 23:39:13

Sometimes we need to know what ports are our server/pc serving.

Few years ago netstat was the command that have us a clue about the ports a machine was listening to. I usually launch 

$ netstat -putona

And we got the ports our machine is listening to. 

But nowadays Linux servers don't install the net-tools package and we have to use another tools. This case suggest us using ss command. ss is a tool that allow us knowing what ports are listening in our system. ss is netstat replacement and we can do many operations with this command:

ss -a

This command list all ports our system has opened

ss -l

Only returns listening ports

ss -p

Returns the PID of the process running a networking activity.

I use ss -lt | grep "*:" to get current listening ports and check what is happening in my network.
My first program
Tags: python, beginners, law, firstpost
Published: 2021-03-21 23:21:33

Hello, readers -- I am a lawyer looking to expand my skillset -- I wrote my first program this evening and was hoping for frank and honest feedback (following CodeAcademy prompts).

It is a program designed to advise a claimant on how to frame his/her claim for damages, i.e. it provides a specific type of legal advice in the field of commercial contracts disputes.

Please let me know what you think! Happy to chat about this  more etc.

https://github.com/Gezdaman/Contractual_Or_Tortious_Damages.git

Thank you for reading
Solution for time machine backup stuck on Big Sur
Tags: apple, timemachine, backup, bigsur
Published: 2021-03-21 23:02:05

Backups are important, but should they take infinite amount of time?

No

My last backup was in 2018, and since then I didn't backup my Macbook as it didn't complete at all. I have a patience of 0 it seems.

Googling all possible solutions, I found this interesting article https://medium.com/macoclock/time-machine-backups-too-slow-5ed1e5e347a4

Following the article we can do
`sudo sysctl debug.lowpri_throttle_enabled=0` to speed up the backup, by removing limits on background jobs such as timemachine backups.
And after backup we have to revert the settings to `sudo sysctl debug.lowpri_throttle_enabled=1`


Now, I followed the command `sudo sysctl debug.lowpri_throttle_enabled=0` to increase the speed of background job done on the backup, but I am still stuck, so let's investigate the source. But according to article, I have to run this `sudo fs_usage -w |grep -i backupd |grep -i fsctl` to find the source of problem, but it doesn't print anything on the terminal. Maybe `sudo fs_usage -w | grep -i backupd` works? 

Yes, it works. I see, now that timemachine is trying to figure out .cocopods directory, which has bazillion files. I don't need them, so I excluded them from the backup, and voila, I can now backup my whole machine in an hour
Day 003: Crafting Interpreters
Tags: 100daysofcs
Published: 2021-03-21 23:00:33

In the winter of 2019, protests erupted across my city when an anti-Muslim bill (now act) – CAA – was proposed in the Indian parliament. To stop the protestors from organizing, the city was cut off from the Internet. The shutdown (which would last for 8 days) didn't stop the protestors, but in a strange turn of events, it helped me finally pick up and start reading [Bob Nystrom's Crafting Interpreters](https://craftinginterpreters.com/contents.html), wherein he walked us through the design and development of a language he called "Lox".

In the first half, we created "jlox", a Java implementation of the language. He in fact walked us through **every** line of Java code required to build the language from the ground up.

Partly, because I didn't want to do a copy-paste job with the code, but to be engaged with the material, and partly – em, mostly –  because I don't know Java, I decided I would write it in Python. I got started, and one word at a time, I fell in love with it (and Bob and his writing). I got hard at work, borderline maniac, cranking at my computer screen almost every waking moment. And it took me exactly 8 days, and [plox](https://github.com/RJ722/plox) was finally there. It was very rewarding, seeing it alive and breathing.

The next half of the book discussed the implementation of the same language in C. It was called, you guessed it .. "clox". It wasn't just jlox written in c instead of Java, but it followed another execution model, the **Bytecode virtual machine**.

You see, jlox and plox were both "interpreters" for Lox. They worked by what's called "walking the tree", that is to say, they parse the user's program into a tree structure (which is very similar to ASTs I talk about in my [other post](https://dev.to/deepsource/static-code-analysis-what-it-is-how-to-use-it-4b79)) and then executed a block of code in Java/Python corresponding to each node in that tree. This made them heavily reliant on the machinery provided by the source language. 

clox, on the other hand, would compile the program to bytecode (a series of instructions, many of which are one byte long, hence the name) and this bytecode would then be fed to a virtual machine which will execute those instructions and run the program.

I found this interesting and planned to finish the other half the next week, and that plan never got to _C_ the light of the day.

But, I've scratched this itch to go, complete that part enough times for me to commit to it, and what better time than this 100-day challenge. This should hopefully also solve the problem of me spending way more time thinking about _what_ to write for the challenge, instead of, you know, writing it.
How I got my first Flutter freelance job?
Tags: flutter, firebase, freelance, fiverr
Published: 2021-03-21 22:59:53


After self-learning flutter for over six months, I thought about monetizing my skill. But I was a little confused. How to monetize it? Where to provide my services?

But after a week or two of thinking, I made my gig on [Fiverr](https://www.fiverr.com/users/aiwahlaofficial). And after creating my first flutter gig, I got my first 1000$ order. At least that's what I wish would have happened. Undoubtedly, that was not the case.

After creating my gig, I waited, waited, and waited. After 20 days, I did not get any orders and was very disappointed. I started doubting my skills. But after watching a ton of videos on youtube on how to make a perfect Fiverr gig, I updated the gig and got my first 500$ order. But again, that was not the case. I did not have any reviews on my profile, so I had to something to get reviews. So I took my brother's laptop, navigated to the Fiverr website, and placed my first order. After completing the order, I got 5-star reviews 😅 through my hard work.

After this, I got my first order for 250$.

But again, that was not the case. I had to wait for around 5-8 days that I got my first order. And it was *drum-roll* 50$ 😅. Maybe not what you were expecting after reading through 200 words, but this is the reality. It may seem insignificant to me now, but when I got my first order it was a wave of happiness.

And that is the story of my first freelance order.

If you have any interesting stories, feel free to share them.

  

  

You can follow me :

[LinkedIn](https://www.linkedin.com/in/aasharwahla) -> [AasharWahla](https://www.linkedin.com/in/aasharwahla)

[YouTube](https://www.youtube.com/channel/UCVYgX4d8kQvR3XbQEm7b4Zg) -> [Aashar Wahla](https://www.youtube.com/channel/UCVYgX4d8kQvR3XbQEm7b4Zg)

[Instagram](http://instagram.com/aasharofficial) ->[@AasharOfficial](http://instagram.com/aasharofficial)
How to un-CMS a website
Tags: drupal, wordpress, javascript
Published: 2021-03-21 22:56:00

## The problem

I have some legacy projects running on ancient versions of CMS (Drupal, WordPress) that are way past their reasonable lifetime. But I have no time or energy to maintain them anymore.

Over the years I found that using a CMS for these simple presentation websites is not a good choice for me because:

- Popular CMS are often target for hackers
- During upgrades all sort of things can and will go wrong and waste my time
- Those sites consume unnecessary resources on MySQL, PHP and Apache levels when all they do is show some static information

## The solution

I simply wanted to make a mirror of what I have and display simple static HTML files instead of those backed by the CMS.

There are some solutions around, but I very much recommend giving [website-scrapper](https://github.com/website-scraper/node-website-scraper) a try. It does require a little bit of coding (in JavaScript), but I'd say it's as much as learning to work with some tool (looking at you [HTTrack](https://www.httrack.com/)) and is for free.

## Example

Here is the code that worked for one of my projects and might give you a quick start:

```js
const scrape = require('website-scraper');

const options = {
  urls: ['http://www.example.com'],
  directory: './out',
  sources: [
    {selector: 'img', attr: 'src'},
    {selector: 'link[rel="stylesheet"]', attr: 'href'},
    {selector: 'script', attr: 'src'}
  ],
  recursive: true,
  maxRecursiveDepth: 10,
  subdirectories: [
    {directory: 'img', extensions: ['.jpg', '.png', '.svg']},
    {directory: 'js', extensions: ['.js']},
    {directory: 'css', extensions: ['.css']}
  ],
  requestConcurrency: 1,
  urlFilter: function(url) {
    return url.includes('www.example.com');
  },
};

scrape(options);
```

## Conclusion

If you have a project that rarely ever gets any content update and you constantly have to fight with CMS / hosting issues, then:

1. Write a script using [website-scrapper](https://github.com/website-scraper/node-website-scraper) that downloads your CMS backed website as a series of static files.
2. Deploy the heap of static files on your hosting.
3. Profit! No upgrade pain, no security issues, no server load.

-----
Photo by <a href="https://unsplash.com/@ryanyeamanphoto1?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Ryan Yeaman</a> on <a href="/s/photos/boxes?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Programming is about Problem-Solving
Published: 2021-03-21 22:52:01

After all, programming is more about problem-solving than actually writing code. I would like to share my take-away from this podcast episode by [Developer Tea - Interview w/ Nicole Archambault (Part 1)](https://developertea.simplecast.com/episodes/interview-w-nicole-archambault-part-1-zRGjMAGl).

##8 Steps in Problem Solving
####1. Read and Understand The Problem
Understand the problem thoroughly by reading the question out loud at least 3 times. In a live coding interview session, I usually clarify the question with the interviewer to make sure we are on the same page.
####2. Rephrase The Problem
Rephrasing the problem by putting it into different teams allows us to really understand it. By doing so also allows us to see the problem from different perspectives.
####3. Identify Input, Output and Variables
Ask yourself, what input and output are we expecting? What given variables do we have? Does it expect a different data structure as an output?
####4. Break Down The Problem
As an example, go grocery shopping: make a shopping list, go to the store, pick out items, pay for them, carry them into your car, etc. You are going to break down the problem into bite-sized pieces that you can do something with.
####5. Pseudocode
Pseudocode your solution in plain English. What is pseudocoding you may ask? Here's an [example](https://www.geeksforgeeks.org/how-to-write-a-pseudo-code/) of how to write pseudocode.
####6. "Translate" Your Code
"Translate" your code from plain English to a programming language.
####7. Debug Your Code
####8. Optimize Your Code
You can post your solution and get perspectives from others.

I like to put it this way, we programmers are like magical translators, what sets us apart from non-coders is that we basically problem solve by translating English to computing languages all day.
How to send data from Gatsby to Gravity Forms in Wordpress
Tags: gatsby, graphql, wordpress
Published: 2021-03-21 20:39:16

I have been struggling with this problem for around two weeks now. I am building a Jamstack application with Gatsby on the Frontend and WordPress on the backend and I wanted to use Gravity Forms for my form component since it's compatible with Graphql.

The right way to actually do this is with Netlify functions. You send a post request to your function and then your function sends a request to WordPress. This is actually how I would have preferred to do this but I just couldn't get my functions to work properly. I discovered this little hack after a lot of trials and I felt like sharing it out there. I am still working on getting my functions to work and would put up another article when it's done.

The first thing I would do to get Gravity forms to work with WordPress is to download the gatsby form component by rob marshall from   [https://github.com/robmarshall/gatsby-gravityforms-component/tree/master/src](Link). I would download the whole folder and place it right into my component folder for my frontend and then just follow the instructions the readme file with getting the right graphql query for the component. With the form component in your folders. You can easily style them or use any design system(Material UI, Chakra UI,  Rebass, etc) components to override the components there to give your forms a really nice look. You won't be able to do this if you install it as an NPM package and it ships the ugly barebones styles from WordPress.

Set up your environment variables. The document recommends that you just create a .env file and create a GATSBY_LAMBDA_ENDPOINT in the file. The problem with that is that gatsby will never read your endpoints on the client-side. To get Gatsby to read your endpoints you create your environment variables in the this structure: For Development, .env.development and For Production, .env.production. You can then define your variables and endpoints in those files.

The next thing I would do would be to create a route in wordpress. You do this in the functions.php file of the activated theme.

Just paste the code below to your functions.php


```
add_action( 'rest_api_init', 'form_submit_endpoint');

function form_submit_endpoint() {
    register_rest_route('formsubmit/v1', 'submit', array(
        'methods' => 'POST',
        'callback' => 'form_submit_func',
    ) );
}

function form_submit_func( WP_REST_Request $request ) {
    //echo('hello world');
    $data = (array) $request->get_params();
    $form = $data['formid'];
    $payload = $data['payload'];
    return GFAPI::submit_form($form, $payload);
}
``` 

You can then define your GATSBY_LAMBDA_ENPOINT to point to your wordpresssite/formsubmit/v1/submit and then pass those environment variables to the lambda of the form component and it works. You can then send form data directly from Gatsby to Wordpress.

You can always reach out if you have any questions and I would be more than glad to help you out.