teleren/devto huggingface dataset:
Let’s talk about Coded Bias
Tags: womenintech, diversyintech, codedbias, ai
Published: 2021-04-06 08:04:17

👋🏾 Hi there. I re-watched #CodedBias yesterday and...

💯 I find it better than The Social Dilemma. At least more useful.

✅ More and more, #algorithms will decide who gets hired, who gets healthcare, who gets police scrutiny.

✅ Meanwhile, those same systems (that we now trust) have not been vetted for racial o #genderbias, or for #discrimination.

✅ We are increasingly dependent on #AI technologies to make decisions for us. There is simply way too much data to be considered. Thousands of job or college applications, uncountable products to consider on Amazon, so much content available on Netflix.

👉🏿 What's next? I truly think, just from a citizen's perspective, we need to able to talk about:

⏩ Data and who owns it (for real). Should data rights be considered civil rights or even human rights?
What can we all do to advance diversity in tech, as one of the several ways to mitigate the risk of bias in AI.

⏩ One of the many tools to mitigate the risk of bias is by having diverse teams. If the world is 51% women, your team should be 51% women. The same for different demographics profiles.

👉🏿 What do you think? But more important… What do you have to say?
Transitions an element's height 😍
Tags: html, css, javascript, 100daysofcode
Published: 2021-04-06 07:46:25

Transitions an element's height from `0` to `auto` when its height is unknown.

- Use `transition` to specify that changes to `max-height` should be transitioned over.
- Use `overflow: hidden` to prevent the contents of the hidden element from overflowing its container.
- Use `max-height` to specify an initial height of `0`.
- Use the `:hover` pseudo-class to change the `max-height` to the value of the `--max-height` variable set by JavaScript.
- Use `Element.scrollHeight` and `CSSStyleDeclaration.setProperty()` to set the value of `--max-height` to the current height of the element.

```html
<div class="trigger">
  Hover me
  <div class="el">Additional content</div>
</div>
```

```css
.el {
  transition: max-height 0.3s;
  overflow: hidden;
  max-height: 0;
}

.trigger:hover > .el {
  max-height: var(--max-height);
}
```

```js
let el = document.querySelector('.el');
let height = el.scrollHeight;
el.style.setProperty('--max-height', height + 'px');
```
Nimbella in a nutshell
Published: 2021-04-06 07:39:12

So you may wonder what is Nimbella.



Nimbella is a serverless development platform, similar to Amazon Lambda and similar serverless offerings by other cloud providers.



The distinctive feature of Nimbella is that is based on open-source software, [Apache OpenWhisk](https://openwhisk.apache.org/) and it is portable among different cloud providers, so you can also install it in your private cloud on-premises.



Nimbella's goal is to make easy cloud-native development and provide an awesome development experience. Developers are entitled to build their applications with microservices from the ground up.



Nimbella offerings include the multi-tenant public offering allowing developers to build their applications in the cloud. 



Their applications can then be deployed in a private cloud, either on-premises or in any other public that provides a Kubernetes cluster.
Goutte Vs Proxies API
Published: 2021-04-06 07:35:56

The world of web scraping is varied and complex, and Proxies API sits at one of the most crucial junctions. They are allowing web scrapers/crawlers to bypass IP blocks by using a single API endpoint to access our 20 million-plus high-speed proxies on rotation.
One of the questions we get frequently is how we are different from services like OctoParse or Diffbot. Many times it is like comparing Apples and Oranges. Still, when we send this comparison table to our customer's developer team, their CXO, their marketing, or SEO team, they typically get it quite quickly if we are a convenient service or not.

So here is how we are different from Goutte.

Goutte is a screen scraping and crawling web library for PHP.

Goutte provides a nice API to crawl websites and extract data from the HTML/XML responses.

PHP Version: PHP 7.1 .

Example of submitting a form in Goutte
How To Scrape Amazon Product Data and Pricing using Python
Published: 2021-04-06 07:34:47

One of the most significant applications of Web Scraping in retail and e-commerce is in monitoring competitor product intelligence. This, when done well, can mean extra revenue and also will allow the retailer to ensure that they are always in the game and are not taken by surprise by anything the competition is doing.

Here is a simple script that does that. We will use BeautifulSoup to help us extract product and pricing information on Amazon.

To start with, this is the boilerplate code we need to get a page on Amazon and set up BeautifulSoup to help us use CSS selectors to query the page for meaningful data.
We are also p[assing the user agent headers to simulate a browser call, so we dont get blocked.

Now let's analyze the Amazon page for this Turntable.
And when we inspect the page, we find that each of the items. HTML is encapsulated in a tag with the id product title.
Things cannot get simpler for us.

This code should be able to retrieve the Title.
Putting the whole thing together, the code will look like this.
You will see that for the features, we have created an addition for each loop. This is because we find that the features are bullet points inside a tag with the id feature-bullets. And when you run it.
You get this data.
We get the Title, Original price, Discount price, Shipping info, and the feature breakdown.

You can now save this to a db and run this script every day or every hour and on different products as needed.

In more advanced implementations, you will need to even rotate the User-Agent string, so Amazon cant tell it the same browser!

If we get a little bit more advanced, you will realize that Amazon can simply block your IP, ignoring all your other tricks. This is a bummer, and this is where most web crawling projects fail.

Overcoming IP Blocks

Investing in a private rotating proxy service like Proxies API can most of the time make the difference between a successful and headache-free web scraping project, which gets the job done consistently and one that never really works.

Plus, with the 1000 free API calls running an offer, you have almost nothing to lose by using our rotating proxy and comparing notes. It only takes one line of integration to its hardly disruptive.

Our rotating proxy server Proxies API provides a simple API that can solve all IP Blocking problems instantly.

With millions of high speed rotating proxies located all over the world
With our automatic IP rotation
With our automatic User-Agent-String rotation (which simulates requests from different, valid web browsers and web browser versions)
With our automatic CAPTCHA solving technology
Hundreds of our customers have successfully solved the headache of IP blocks with a simple API.

A simple API can access the whole thing like below in any programming language.
Build .NET 5 Azure Functions with Azure DevOps pipeline
Tags: azure, function, devops, dotnet5
Published: 2021-04-06 07:23:45

I believe most of us already migrate our Azure Functions from older .NET version to .NET 5!! And most of us uses Azure DevOps to build them, am I right?

I encounter an issue when I build the function app so I like to share it so that others won't suffer from the issue.

# Issue

When using Azure DevOps pipeline to build Azure Function with .NET 5, I encountered following error.

**[error]/home/vsts/.nuget/packages/microsoft.net.sdk.functions/3.0.11/build/Microsoft.NET.Sdk.Functions.Build.targets(32,5): Error : It was not possible to find any compatible framework version
The framework 'Microsoft.NETCore.App', version '3.1.0' was not found.**

# Cause

The root cause is that I need both .NET Core 3 and .NET 5 to successfully build the application. Therefore, I simply need to add UseDotNet task twice with different versions!

```yaml
- task: UseDotNet@2
  displayName: 'Use .NET Core 3.1 sdk'
  inputs:
    packageType: sdk
    version: '3.1.x'

- task: UseDotNet@2
  displayName: 'Use .NET 5 sdk'
  inputs:
    packageType: sdk
    version: '5.0.x'
```

I hope we can build the app only with .NET 5 SDK in the near future, as this was a bit confusing :)

# Reference

[Stackoverflow:.NET 5 - The framework 'Microsoft.NETCore.App', version '3.1.0' was not found](https://stackoverflow.com/a/66938753/10874571)
Some small Css tips #013
Tags: webdev, css, html, beginners
Published: 2021-04-06 07:21:06

---
title: Some small Css tips #013
published: true
description: I try to tweet a small css tip every day. Here is a collection of some of them.
canonical_url: https://since1979.dev/some-small-css-tips-013/
cover_image: https://since1979.dev/wp-content/uploads/2021/04/small-css-tips-013.jpg
tags: webdev, css, html, beginners
---

To continue on my [previous post](https://dev.to/vanaf1979/some-small-css-tips-012-1l30) here are some more tweets with little Css tips that might help you in your projects. 

### Css @import.
{% twitter 1367097500872683533 %}
@import docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

--- 

### Select every 3th, 4th, 5th etc item.
{% twitter 1368895606991814660 %}
{% codepen https://codepen.io/Since1979/pen/qBqMQYQ %}
:nth-child doc: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

--- 

### Css prefers-color-scheme.
{% twitter 1369276757656895496 %}
{% codepen https://codepen.io/Since1979/pen/rNWZoYR %}
Prefers color scheme docs: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

--- 

### Css prefers-reduced-motion.
{% twitter 1369616681362939910   %}
{% codepen https://codepen.io/Since1979/pen/xxRammG %}
Prefers reduced motion docs: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion

--- 

### Subscribe and Follow

**[Subscribe to my Youtube channel.](https://www.youtube.com/channel/UCeyqA3y26RlnfUSx3ufgFoA)**

**[Follow me on Twitter](https://twitter.com/Vanaf1979)**

**Thanks for reading/watching and stay safe**
Make Your Screen Look Like Hacker In Ubuntu
Tags: linux, ubuntu
Published: 2021-04-06 07:15:06

while i was searching for fun things we can do in Linux, i found one of the package named `cmatrix`, which will display a screen like hacker, so to start with we need to install the package by running following command in ubuntu

```
sudo apt-get install cmatrix
```

after this just run the following command in your terminal

```
cmatrix
```

Thats it, enjoy the screen.

if you want to see the demo , please watch my video on [YouTube](https://www.youtube.com/watch?v=dJEKO6kvhIU)

I have made a video on [Basic linux commands](https://www.youtube.com/watch?v=ARkbgoq239k&t=25s) for beginners also if you are interested
C Programming Cheat Sheet - 2
Tags: c
Published: 2021-04-06 07:01:37

Here is the C Programming Cheat Sheet - Part 2

###2.Expression & Operators Precedence
Following table summarizes the rules for precedence and associativity of all operators, including those that we have not yet discussed. Operators on the same line have the same precedence; rows are in order of decreasing precedence, so, for example, *, /, and % all have the same precedence, which is higher than that of binary + and -. The ``operator'' () refers to function call. The operators -> and . are used to access members of structures;

| Description              |Operators| Associativity |
| -------------------------|:--------:| ------------:|
| Function Expression      | ()      | Left to Right |
| Array Expression         | []      | Left to Right |
| Structure Operator       | ->      | Left to Right |
| Structure Operator       | .       | Left to Right |
| Unary minus              | -       | Right to Left |
| Increment/Decrement      | ++, --  | Right to Left |
| One’s compliment         | ~       | Right to Left |
| Negation                 | !       | Right to Left |
| Address of               | &       | Right to Left |
| Value of address         | '*'     | Right to Left |
| Type cast                | (type)  | Right to Left |
| Size in bytes            | sizeof  | Right to Left |
| Multiplication           | '*'     | Left to Right |
| Division                 | /       | Left to Right |
| Modulus                  | %       | Left to Right |
| Addition                 | +       | Left to Right |
| Subtraction              | -       | Left to Right |
| Left Shift               | <<      | Left to Right |
| Right Shift              | >>      | Left to Right |
| Less Than                | <       | Left to Right |
| Less Than or Equal to    | <+      | Left to Right |
| Greater Than             | >       | Left to Right |
| Greater Than or equal    | >+      | Left to Right |
| Equal to                 | ==      | Left to Right |
| Not equal to             | !=      | Left to Right |
| Bitwise AND              | &       | Left to Right |
| Bitwise exclusive OR     | ^       | Left to Right |
| Logical AND              | &&      | Left to Right |
| Conditional              | ?:      | Left to Right |
| Assignment               | =, *=, /=, %=, +=, -=, &=, ^=, =, <<=, >>=                          | Left to Right |
| Comma                    | ,       | Right to Left |
Day 23 of 100 days of SwiftUi
Tags: swift, 100daysofcode
Published: 2021-04-06 07:00:52

I just completed day 23 of 100 days of SwiftUi. Today, I learnt a lot about SwiftUI views and modifiers. 

SwiftUI uses structs for views. This is because structs are very lightweight. Structs allow us to model our data without the performance overhead of classes.

View Modifiers are methods used to modify the style of your views. Since views are structs, view modifiers always return a new view when applied to an existing view. Using extension functions, you can create your own custom view modifiers. 
Custom modifiers allow you to reuse a chain of modifiers instead of copy-pasting them.

You can create a custom view modifier in Swift like so:

```swift
struct Title: ViewModifier {
    func body(content: Content) -> some View {
        content
            .font(.largeTitle)
            .foregroundColor(.white)
    }
}

Text("Hello World")
    .modifier(Title())

Text("Sanmi")
    .modifier(Title())
```
The code above creates a custom view modifier that takes a view and returns a new view with a large title font and white background applied.

Since structs are used as Views in SwiftUI instead of classes. That means there's little to no performance overhead when they are destroyed and created anytime your app state changes. They also make us use composition instead of inheritance when modelling our views since Struct do not support Inheritance. This leads us to an approach called view composition. With view composition, you break down your UI into the smallest reusable component and compose them together to create your UI.
View composition in SwiftUI can be done like this

```swift
struct LargeText: View {
    var text: String

    var body: some View {
        Text(text)
            .font(.largeTitle)
            .foregroundColor(.white)
    }
}

struct ContentView: View {
    var body: some View {
        VStack(spacing: 10) {
            LargeText(text: "First")
            LargeText(text: "Second")
        }
    }
}
```
The code above creates two views the first is a large text view that takes a text and creates a `TextView` with a large font style and white text colour applied.
This view is then composed into SwiftUi `ContentView`. Instead of copy-pasting two `TextViews` into into SwiftUi `ContentView`, SwiftUI allows us extract our views and reuse them wherever we can
Draw Dash and Solid Line to PDF using Java
Tags: java, pdf, line
Published: 2021-04-06 06:29:48

In daily work, we may need to draw lines to a PDF document so that the text content inside it can be easily divided into several different parts. Beyond that, drawing lines can also serve the purpose of decoration. This article will show you how to draw dash and solid line using a free Java API.

**1# Import the jar dependency of the free Java API (2 Method)**
● Download the free API ([Free Spire.PDF for Java](https://www.e-iceblue.com/Download/pdf-for-java-free.html)) and unzip it.Then add the Spire.Pdf.jar file to your project as dependency.

● Directly add the jar dependency to maven project by adding the following configurations to the pom.xml.
```xml
<repositories>
        <repository>
            <id>com.e-iceblue</id>
            <name>e-iceblue</name>
            <url>http://repo.e-iceblue.com/nexus/content/groups/public/</url>
        </repository>
</repositories>
<dependencies>
    <dependency>
        <groupId>e-iceblue</groupId>
        <artifactId>spire.pdf.free</artifactId>
        <version>4.3.0</version>
    </dependency>
</dependencies>
```

**2# The relevant code snippet**
```java
import com.spire.pdf.*;
import com.spire.pdf.graphics.*;
import java.awt.*;

public class DrawLines {
    public static void main(String[] args) {

        //Create a new PdfDocument instance and add a new page
        PdfDocument pdf = new PdfDocument();
        PdfPageBase page = pdf.getPages().add();

        //Set location and size
        float x = 150;
        float y = 100;
        float width = 300;

        //Create pens
        PdfPen pen = new PdfPen(new PdfRGBColor(Color.red), 3f);
        PdfPen pen1 = new PdfPen(new PdfRGBColor(Color.blue), 1f);

        //Set dash style and pattern
        pen.setDashStyle(PdfDashStyle.Dash);
        pen.setDashPattern(new float[]{1, 1, 1});

        //Draw lines to the PDF page
        page.getCanvas().drawLine(pen, x, y, x + width, y);
        page.getCanvas().drawLine(pen1, x, y+50, x + width, y+50);

        //Save the document
        pdf.saveToFile("output/drawLines.pdf");
    }
}
```

**3# A screenshot of the generated PDF document**
![line](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gbqfpgyeayemhir4isrv.jpg)
How to Architect Your Project's Directories
Tags: webdev, tutorial, programming, architecture
Published: 2021-04-06 06:29:37

One of the important things that are overlooked by developers while building applications is the **folders' structure and names**.

## **Where did it all go wrong?** 😬

While learning a new framework, for example, We tend to keep using the structure that we learned during the tutorial in our production code.

**How does this structure look mainly?**

It describes what are the main building blocks of the framework, and not the application we were building in the tutorial.

**What building blocks?** 🧙🏼‍♂️
- Controllers
- Services
- Views
- Models
- DTO

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2zeuccyw6fhlitoqjdfn.PNG)

**Is it really this bad?** 🤷🏽
Well, for the sake of understanding how the framework works, it's totally valid.
However, when we go on to build production systems with complex business requirements, this approach becomes impractical.

## Why do it differently?

In big systems, while debugging or trying to understand how a piece of code works it would be helpful to view the folders as an open book that tells us:
- What does this system do.
- What are the components that build the system.
- What is the hierarchy the components follow.

## Let's look at some examples 👴🏼
Here is one of the **Standard naming conventions** of a Spring Boot application.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/06nmfh3w5ta7bgp2y1ui.PNG)

It's like saying, I am building this thing, I will use those tools

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

On the other hand, we have a naming convention that **describes** the application

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1qjv20jvyepm65lc6pzg.PNG)

It's clear from this structure what's going on:
- Delivery has Request and Shipment components under it.
- We also have a Payment component.

it's like saying I am building a restaurant and this is the layout
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z4rc4pmwz4tq6ywjdvyk.png)

## Conclusion 👇🏼👇🏼

The folder structure of our application is very crucial to help us understand what is going on in the system and we should take care of making it as clear and descriptive as possible.
Prepare for telescope 2.0
Tags: opensource, nextjs
Published: 2021-04-06 04:10:59

This week, I've been working mostly with UI changes, including user accessibility and investigating an [issue in landing page for UI 2.0](https://github.com/Seneca-CDOT/telescope/issues/2041).

### User accessibility

Use accessibility is one thing that I want to focus on telescope 2.0 release. There are many rules to follow to improve our user accessibility, and I started with the obvious one, which is checking the color contrast and size of all our pages and components. I've found [the links color in dark mode](https://github.com/Seneca-CDOT/telescope/issues/2048), [contribution card in dark mode](https://github.com/Seneca-CDOT/telescope/issues/2049), [search help](https://github.com/Seneca-CDOT/telescope/issues/2051), [slack icon](https://github.com/Seneca-CDOT/telescope/issues/2050) can be improved. Also, since I'm working with mostly color styling, I also start to update the colors in our dark and light mode palette for better management.

Royce will be working with me on user accessibility, looking forward to working with him!

### Landing page for UI 2.0

In Pedro's UI 2.0 project, he also plans to modify our banner. I'm assigned the part of moving nav bar from banner to timeline. The goal is to remove the nav bar from the banner, but show the nav bar when the user scrolls to timeline (posts). I've considered different solutions so far,

1. Move nav bar to timeline (posts) component
Currently, nav bar is above `<main>` so that we can always see it in the top-right corner of the page.

2. Only display nav bar when the timeline component touches the top of the screen
This one is challenging for me. I haven't worked with element positions with screen before, not sure how much time do I need to investigate it.

3. Make the nav bar component invisible in banner
If we don't want it to be showed on the banner area, why don't we make it invisible in that area? For example, make the navbar element "under" the banner element?

### Developer experience

As mentioned in previous post(s), I've been updating documents to follow the changes in telescope (mostly microservice). I closed my old PR for adding a new, temporary document for microservice transition. Instead, I go back to existing documents, and update them. Start with [environment-setup.md](https://github.com/Seneca-CDOT/telescope/pull/2081), I believe there are lots of documents can be updated.
Top integrations with Google Tasks


Published: 2021-04-06 05:41:48

Using Quickwork you can integrate Google Tasks with other applications. Some of the automated/integrated business workflows possible using Quickwork are:

Gmail to Google Task:
Create a new Google Task when a labelled email is received via Gmail 
Every new email you receive will automatically create a new Google Task

Google Calendar to Google Task:
Add Google Tasks tasks for new Google Calendar events
Quickwork will automatically add tasks to your Google Tasks to-do list whenever you add a new event in Google Calendar.

Google Task to Asana:
Add new Google Tasks items to Asana
Once you set up this Google Tasks and Asana integration, new tasks are automatically added to Asana.

Google Sheets to Google Tasks:
Create Google Tasks from new Google Sheets rows
This integration can help by automatically creating a new Google Task from every new Google Sheets row you create. 

Quickwork helps companies integrate multiple systems and applications, to design delightful user journeys using Quickwork automation builder. Quickwork automation builder is an API-driven, zero-code, DIY tool, enabling any user to design and implement workflows with ease and speed.