teleren/devto huggingface dataset:
8 CSS Properties you must know in 2021 and beyond
Tags: css, codenewbie, beginners, webdev
Published: 2021-02-22 13:24:49

If you found value in this thread you will most likely enjoy my tweets too so make sure you follow me on  [Twitter](https://twitter.com/VladPasca5) for more information about web development and how to improve as a developer. This article was first published on my [Blog](vladpasca.hashnode.dev).

## 1. Display

This property specifies the display behavior of an element.

The most important values: block, inline, inline-block and none.

[More](https://t.co/JIgQ51eKG3?amp=1)

## 2. Width and Height

These 2 properties are used to set the height and width of an element.

They can have the following values: auto, length, %, initial or inherit.

[More](https://t.co/K6dI8AwAug?amp=1)

## 3. Margin and Padding

These 2 dictate the spaces between elements on your website.

Margins affect the area outside of borders whereas paddings affect areas inside the border.

[More](https://t.co/VZRANs4d5I?amp=1) 

## 4. Border

This one is pretty much self self explanatory, it specifies what kind of border to display.

A few if the values that are allowed: solid, none, hidden, dotted, double.

 [More](https://t.co/3sf0tQsxhM?amp=1) 

## 5. Floats

This property is used for positioning and formatting content on your website.

It can have the following values: left, right, none, inherit.

 [More](https://t.co/e98723sNjc?amp=1) 

## 6. Flexbox

The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.

Some properties are: justify-content, align-items, align-content.

 [More](https://t.co/7nR663jqqe?amp=1) 

## 7. Color

This property specifies the color of text.

You can use an RBG value, a HEX value or the actual name of the color you want to use.

 [More](https://t.co/A80nFVXD5B?amp=1) 

## 8. Background

This property specifies the background color of an element.

You can use the same values like for the color property.

 [More](https://t.co/NrzgnBtbzc?amp=1) 

## The End

I hope found this useful and if you did please let me know. If you have any question feel free to DM me on  [Twitter](https://twitter.com/VladPasca5) .
AWS API Gateway and Lambda
Tags: aws, apigateway, lambda
Published: 2021-05-27 19:24:21

---
title: AWS API Gateway and Lambda
published: true
date: 2021-02-22 13:21:00 UTC
tags: AWS,apigateway,aws,lambda
canonical_url: https://javascriptwebscrapingguy.com/aws-api-gateway-and-lambda/?utm_source=rss&utm_medium=rss&utm_campaign=aws-api-gateway-and-lambda
---

<iframe title="AWS API Gateway and Lambda." width="640" height="360" src="https://www.youtube.com/embed/mGJDP1Q0EZg?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Most of this process is documented really well by AWS here – [https://docs.aws.amazon.com/apigateway/latest/developerguide/api-gateway-create-api-as-simple-proxy-for-lambda.html](https://docs.aws.amazon.com/apigateway/latest/developerguide/api-gateway-create-api-as-simple-proxy-for-lambda.html)

The most important parts that I believe are missed are when it comes to using the custom domain name. You have to set up a CNAME record to the API Gateway domain name shown in the Custom domain names section.

You do NOT want to point your CNAME to the test URL provided. Also…the stage is only used in the test URL, not the actual one used in your custom domain name API mapping.

## Looking for business leads?

Using the techniques talked about here at [javascriptwebscrapingguy.com](https://javascriptwebscrapingguy.com), we’ve been able to launch a way to access awesome web data. Learn more at [Cobalt Intelligence](https://cobaltintelligence.com)!

The post [AWS API Gateway and Lambda](https://javascriptwebscrapingguy.com/aws-api-gateway-and-lambda/) appeared first on [Javascript Web Scraping Guy](https://javascriptwebscrapingguy.com).
A Chrome Extension to access GitHub1s with shortcut keys
Published: 2021-02-22 13:12:55

I released [github1s-shortcut](https://github.com/katsuhisa91/github1s-shortcut), launch [github1s](https://github.com/conwnet/github1s) with Ctrl(Win)/Command(Mac)+Shift+1. :tada:

Try it out!

#### Chrome Extension
https://chrome.google.com/webstore/detail/shortcut-to-github1s/gfcdbodapcbfckbfpmgeldfkkgjknceo

#### GitHub
https://github.com/katsuhisa91/github1s-shortcut

## Motivation
I am very grateful for [github1s](https://github.com/conwnet/github1s). I also created a Chrome Extension to launch github1s with a shortcut key so that more people can use it conveniently.

## Future Works
I also want to publish browser extensions for Edge and Firefox.
Dashboard Bitcoin – Power BI
Tags: powerbi, dataviz, api
Published: 2021-02-22 13:11:48

Simple dashboard showing the evolution of Bitcoin and some curiosities, made as a study object for testing using connection to a JSON file via API.

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

See more:

[https://www.gustavoandrade.net.br/projetos/dashboard-bitcoin-power-bi/](https://www.gustavoandrade.net.br/projetos/dashboard-bitcoin-power-bi/)
Daily Developer Jokes - Monday, Feb 22, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-02-22 13:00:19

---
title: "Daily Developer Jokes - Monday, Feb 22, 2021"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Monday%2C%20Feb%2022%2C%202021"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1259924ce05.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q___: What did the command line die of?

___A___: A Terminal illness.
 -->
Super readable String operations with `delete_prefix` and `delete_suffix`
Tags: ruby, webdev
Published: 2021-02-22 14:45:59

---
title: Super readable String operations with `delete_prefix` and `delete_suffix`
published: true
date: 2021-02-22 13:00:00 UTC
tags: ruby,webdev
canonical_url: https://boringrails.com/tips/ruby-delete-prefix-suffix
---

One reason I love writing Ruby is that it’s optimized for programmer happiness. The Ruby community values code that is super readable.

Programmers coming from other ecosystems are often shocked at much Ruby looks like pseudo-code. Between the standard library and extensions like `ActiveSupport`, working with Ruby means you can write code in a natural way.

A great example of this are the String methods `delete_prefix` and `delete_suffix`.

## Usage

You can use `delete_prefix` to, as the name says, delete a substring from the beginning of a string.

```ruby
"BoringRails!".delete_prefix("Boring")
#=> "Rails!"

"#programming".delete_prefix("#")
#=> "programming"

"ISBN: 9780091929787".delete_prefix("ISBN: ")
#=> "9780091929787"

"mailto:test@example.com".delete_prefix("mailto:")
#=> "test@example.com"

github_url = "https://github.com/rails/rails"
repo_name = github_url.delete_prefix("https://github.com/")
#=> "rails/rails"
```

Compare this method to other options like `gsub`:

```ruby
github_url = "https://github.com/rails/rails"
repo_name = github_url.gsub("https://github.com/", "")
#=> "rails/rails"
```

While `gsub` is more flexible (it can take a Regex and swap multiple occurences), the code doesn’t read as naturally as `delete_prefix`. And `delete_prefix` is [more performant](https://docs.rubocop.org/rubocop-performance/cops_performance.html#performancedeleteprefix)!

If you want to remove characters at the end of a string, you have two main options: `chomp` and `delete_suffix`.

```ruby
"report.csv".chomp(".csv")
#=> "report"

"report.csv".delete_suffix(".csv")
#=> "report"

"150 cm".delete_suffix("cm").to_i
#=> 150
```

Stylistically, `chomp` has a bit more of the whimsy that you might expect from Ruby, while `delete_suffix` is a nice mirroring of `delete_prefix` and more explicitly named. Both have similar [performance benchmarks](https://github.com/JuanitoFatas/fast-ruby#stringsub-vs-stringchomp-vs-stringdelete_suffix-code) and are faster than `sub`.

## Additional Resources

Ruby API Docs: [String#delete\_prefix](https://ruby-doc.org/core-2.5.1/String.html#method-i-delete_prefix)

Ruby API Docs: [String#delete\_suffix](https://ruby-doc.org/core-2.5.1/String.html#method-i-delete_suffix)

Ruby Bug Tracker: [Feature discussion](https://bugs.ruby-lang.org/issues/12694)

String method benchmarks: [Fast Ruby - String](https://github.com/JuanitoFatas/fast-ruby#string)

* * *
[![](https://boringrails.com/images/twitter-banner.png)](https://twitter.com/_swanson)
Lens v4 2021 : The best k8s IDE for debugging and monitoring
Tags: productivity, webdev, kubernetes, devops
Published: 2021-02-22 12:48:29

## Concepts

![Image](https://k8slens.dev/images/header-lens.png)

Lens is the most powerful Kubernetes IDE on the market. It is a standalone application, and it is available on macOS, Windows, and Linux. Some of the benefits of using Lens include:

* Confidence that your clusters are properly setup and configured.

* Increased visibility, real time statistics, log streams, and hands-on troubleshooting capabilities.

* The ability to work with your clusters quickly and easily, radically improving productivity and the speed of business.

## Key features

<h4><strong>Multiple Workspaces</strong></h4>

<h4><strong>Multi Cluster Management</strong></h4>

![Image](https://docs.k8slens.dev/v4.1.2/clusters/images/add-cluster.png)

<h4><strong>Built-In Prometheus Stats</strong></h4>

![Image](https://opensource.com/sites/default/files/uploads/lens2.png)

<h4><strong>Context Aware Terminal</strong></h4>

![Image](https://miro.medium.com/max/4400/0*F8t55qrQEdfh7GfH.png)

<h4><strong>Helm Charts Management</strong></h4>

![Image](https://docs.k8slens.dev/v4.1.2/helm/images/helm-charts.png)


## Introductory video

Watch this introductory video to see Lens in action:

[![Image](https://docs.k8slens.dev/v4.1.2/img/lens-intro-video-screenshot.png)](https://www.youtube.com/watch?v=eeDwdVXattc)

## Link

* [https://github.com/lensapp/lens/releases/tag/v4.1.2](https://github.com/lensapp/lens/releases/tag/v4.1.2)

* [https://k8slens.dev/](https://k8slens.dev/)
what are the benefits of learning data science and what can I do with it
Tags: datascience, machinelearning, algorithms, computerscience
Published: 2021-02-22 12:46:58

Data Science utilizes numerical, logical, and factual strategies and calculations to gather data from different dependable sources and examine them to produce experiences. These bits of knowledge are valuable to associations for better dynamic and streamline activities just as improve incomes. Data Science is an enormous favorable position to have due to this reality. 

Data Science has broad applications and sought after across different areas of the business. Here are a couple

Healthcare

Logistics

Sports

Digital Marketing

Financial Institutions and Banks

Travel

Crime Investigations

E-Commerce

Social Media

Search Engines

Data Science is firmly identified with Machine Learning, Big Data, and Artificial Intelligence so, you should get to know more about [Data Scientist Training in Chennai](https://intellipaat.com/data-scientist-course-training-chennai/), and when utilized related, can have a heap of different applications. In the present age, without Data Science, gadgets as straightforward as your cell phone will lose the very highlights that make it shrewd and stop to give you the experience you want
Keycloak - Your own OAuth platform
Published: 2021-02-22 12:37:27

# What is Keycloak?

Keycloak is an open source solution to manage Identity and Access to apps and services. 🔒

It supports **Single-Sign-On**, **Standards Protocols** *(OAuth 2.0, OpenID Connect, SAML 2.0)*, **LDAP and Active Directory**...

---

# Why using Keycloak?
## Open Source
The first reason is really simple, it's an open source project so it will help you to save your money. 💵

If we just compare with Okta, the usage of the Single-Sign-On feature is **2$ per user per month**. So for personal projects or other contexts where you don't want to pay or the minimum possible, it can be a great solution.

## Multi-platform
Following the documentation, Keycloak can be installed on 
- **Docker**
- **Kubernetes**
- **OpenJDK**
- **Podman**
- **Openshift**

And secure applications in **Vue.js**. So it can be integrated into a lot of infrastructures.

[Installation guides](https://www.keycloak.org/getting-started)

## Complete
Keycloak is a complete project to help you to manage authentication and authorization. They are many features in it (Realm, Users, Clients, Roles...) with a lot of possibilities, which can be a little bit confusing at the beginning but really powerful. 

*(I don't want to detail all and explain each feature, it's not the objective. Go check the Keycloak documentation which is really interesting.)*

Also, it embeds all that you need for user account creation and login. The user creation is customizable, you can choose which informations must be provided...

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

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

With the available customization, you are also able to change the design of this page to adapt it to your site. (*[Tutorial to do it](https://www.baeldung.com/keycloak-custom-login-page)*)

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

---

# How to use it?

There already are a lot of tutorials, so just go check them :
- https://www.keycloak.org/docs/latest/getting_started/
- https://developers.redhat.com/blog/2020/11/24/authentication-and-authorization-using-the-keycloak-rest-api/

---

In conclusion, Keycloak is a powerful all-in-one Identity and Access Manager, and it continues to evolve.

--- 

### Links

* Website: https://www.keycloak.org/
* GitHub: https://github.com/keycloak/keycloak
* Twitter: https://twitter.com/keycloak
* Guide to use keycloak with Spring Boot: https://www.baeldung.com/spring-boot-keycloak 

---

I hope it will help you!
How To Export Data To Excel From Api Using React
Tags: react, javascript, excel, api
Published: 2021-02-22 12:24:46

### UPDATED version of this tutorial available [here](https://dev.to/jasurkurbanov/simple-way-to-export-data-from-api-to-excel-using-reactjs-3eep)
## CREATE AND INSTALL
Create new react project
```bash
npx create-react-app react-data-to-excel
```
Now start project
```bash
npm start
```
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ws0evrvag88gk0j65e3.png)

Project successfully created.
Lets dive into installing neccassry libraries for our project. Install these three libraries.

```bash
npm install xlsx file-saver axios --save-dev
```

👉**xlsx** - library for parsing and writing various spreadsheet formats
👉**file-saver** - library for saving files on the client-side
👉**axios** - promise based HTTP client for the browser and node.js. We will use it for fetching data from server

## UI AND LOGIC
Create a component namely ` ExportToExcel.js `
```bash
import React from 'react'
import * as FileSaver from "file-saver";
import * as XLSX from "xlsx";

export const ExportToExcel = ({ apiData, fileName }) => {
  const fileType =
    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8";
  const fileExtension = ".xlsx";

  const exportToCSV = (apiData, fileName) => {
    const ws = XLSX.utils.json_to_sheet(apiData);
    const wb = { Sheets: { data: ws }, SheetNames: ["data"] };
    const excelBuffer = XLSX.write(wb, { bookType: "xlsx", type: "array" });
    const data = new Blob([excelBuffer], { type: fileType });
    FileSaver.saveAs(data, fileName + fileExtension);
  };

  return (
    <button onClick={(e) => exportToCSV(apiData, fileName)}>Export</button>
  );
};
```

Sample data we will get from `https://jsonplaceholder.typicode.com/posts`
``` App.js ```
```bash
import React from 'react'
import axios from 'axios'
import './App.css';

import {ExportToExcel} from './ExportToExcel'

function App() {
  const [data, setData] = React.useState([])
  const fileName = "myfile"; // here enter filename for your excel file

  React.useEffect(() => {
    const fetchData = () =>{
     axios.get('https://jsonplaceholder.typicode.com/posts').then(r => setData(r.data) )
    }
    fetchData()
  }, [])
 
  return (
    <div className="App">
      <ExportToExcel apiData={data} fileName={fileName} />
    </div>
  );
}

export default App;

```
Start project
```bash
npm start
```

Once it successfully started. You can see one button. By pressing this button you download excel file with data filled from `https://jsonplaceholder.typicode.com/posts`

#### Output
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/69qwmh0hk2dplf79117l.png)
 
#### Excel File
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dyzoqdcm77kx4dp0a0hr.png)
 
 
Github repo for this project [link](https://github.com/jasurkurbanovinit/react-apidata-to-excel)
Rails: define_method in Models
Tags: rails, technology, definemethod, railsdefineclassmeth
Published: 2021-02-25 12:01:08

---
title: Rails: define_method in Models
published: true
date: 2021-02-22 12:23:12 UTC
tags: RubyonRails,Technology,definemethod,railsdefineclassmeth
canonical_url: https://www.botreetechnologies.com/blog/rails-define-method-in-models/
---
![Rails: define_method in Models](https://www.botreetechnologies.com/blog/wp-content/uploads/2021/02/rails-define-method-in-models.png)

###Define_method is a method that allows you to create other methods.
The usual method for defining the method in [Rails app](https://www.botreetechnologies.com/) is to put your logic between the def and end block.

Now, there’s a situation where you have to build a series of methods and all methods have the same logic and structures to get the batch status. 

Let’s go through the example for better understanding.

There are scenarios where you need to check if your batch status is **drafted or emailed or approved**.

Now, you might say that we will just define one method and accept those statuses as a parameter, and we can use it whenever we want or require.

Yes, you are right! 

_**Example Code:**_

{% gist https://gist.github.com/Chandni-BTC/68c057cd09358ba2c110787ae3a6b3d4 %}

We have these three methods and all these methods have different names and the same logic. Each method returns the boolean value.

For the above situation, we have a powerful entity named **define_method**, which will dynamically create methods and will reduce the amount of code.

In our example for 3 different parameters, we can create one object which returns 3 different queries and different method names for those 3 different parameters, which means define_method is provided to the object’s function.

We can use define_method in [Ruby on Rails](https://www.botreetechnologies.com/ruby-on-rails-development) to make one method for the above 3 methods.

Do you want to check this? 

**Let’s check the below code.**

{% gist https://gist.github.com/Chandni-BTC/b54a6ff3296fcdc947c2dbaba5e53800 %}

###Let’s start from the first, adding methods based on a series of states:

The post [Rails: define\_method in Models](https://www.botreetechnologies.com/blog/rails-define-method-in-models/) appeared first on [BoTree Technologies](https://www.botreetechnologies.com/blog).
Exploring Bitcoin’s History
Tags: technology, cryptocurrency, bitcoin, money
Published: 2021-03-04 06:09:57

---
title: Exploring Bitcoin’s History
published: true
date: 2021-02-22 11:54:45 UTC
tags: technology,cryptocurrency,bitcoin,money
canonical_url: https://medium.com/coinmonks/exploring-bitcoins-history-ecbf1c59952c
---

[![](https://cdn-images-1.medium.com/max/2600/0*U6wqnas5Zdv3Hhqv)](https://medium.com/coinmonks/exploring-bitcoins-history-ecbf1c59952c?source=rss----721b17443fd5---4)

It took 40 years of discoveries and inventions for BTC to become a reality

[Continue reading on Coinmonks »](https://medium.com/coinmonks/exploring-bitcoins-history-ecbf1c59952c?source=rss----721b17443fd5---4)
How to run tests simulating mobile devices with Cypress
Tags: cypress, testing, automtion, e2e
Published: 2021-02-22 11:54:11

## Today in the “**Pinches of Cypress**” series, learn how to run tests in a mobile viewport

One of the great advantages of **automated tests** is that they do not get tired. Therefore, they can be executed in different operating systems, browsers, and viewports to guarantee the application's functioning in these different “environments”.

Currently, an increasing number of people access the internet daily through their mobile devices. As professionals in software development, our responsibility is to ensure the perfect functioning of applications in the desktop viewport and mobile.

With [**Cypress**](https://cypress.io), we can run the tests simulating a mobile device easily. Let's look at a couple of options.

### From the command line

To run tests simulating a mobile device via the command line, use the following command:

```sh
cypress run --config viewportWidth=375,viewportHeight=667
```

**Note:** The height and width values can be changed according to your needs. 

### Via config file

By default, Cypress uses a width of `1000px` and a height of `660px`.

However, it is possible to override these values via the configuration file (`cypress.json`). See an example below, using the same values used in the previous section.

```json
{
  "viewportWidth": 375,
  "viewportHeight": 667
}
```

The tests will be performed in a mobile viewport with the above-configuration, both when running in headless mode (with `cypress run`) and when executed in interactive mode (with `cypress open`).

That's it.
___

For more details, visit the [**official Cypress documentation**](https://docs.cypress.io/).
___

Did you like today's Pinch?

Leave a comment with your experience or any curiosity about the subject.
___

This post was originally published in Portuguese on the [**Talking About Testing**](https://talkingabouttesting.com/2021/02/22/como-rodar-testes-simulando-dispositivos-moveis-com-cypress/) blog.
___

Would you like to learn about **test automation with Cypress**? Get to know my online courses on [**Udemy**](https://udemy.com/user/walmyr).