teleren/devto huggingface dataset:
Why Google FLoC trial has been labelled by privacy advocates as a worse idea!!!
Tags: privacy, security, watercooler, news
Published: 2021-04-18 19:56:29

The Google FLoC trial has been labelled by privacy advocates as a worse idea than cookie tracking, and here’s how you can stop Google from doing so.

A news website ( link at end) reported as under:
*Highlights*
-Federated Learning of Cohorts (FLoC) wants to choreograph its user tracking based on 'behaviours'
-With FLoC, Google Chrome is taking more onus of tracking users into its own hands
-Alongside being deemed even more controlling, FLoC is being criticised for its potential to be massively invasive.


FLoC trials for 0.5 percent of all Chrome users are now active alongside standard cookie tracking as well.

To understand simply, FLoC claims that it will no longer allow websites across the internet from tracking you by inserting scripts that trace what you do on the internet. While that sounds great, things aren’t particularly all that simple. With FLoC, Google is essentially bringing more control of how user activity is tracked under its own umbrella, while not exactly benefitting users as much as it would want everyone to believe. Essentially, FLoC reads your browsing activity and history, checks in on all the sites that you have visited, and classify them into compartments, or ‘cohorts’

For complete story visit : 
https://www.news18.com/news/tech/google-chrome-floc-trial-how-to-know-if-youre-being-tracked-and-opt-out-of-it-3650072.html
Product View Website Design | Using HTML CSS and JQuery
Tags: html, css, javascript, beginners
Published: 2021-04-18 19:51:32

Product View Website Design | Using HTML CSS and JQuery

Demo == > https://codepen.io/Bilal1909/pen/RwKYrxY

 <img src="https://i.postimg.cc/BQT5hkDF/090.png">
Dynamic Dimension React Container with Transition Effect - Part 2, Resize Observer
Tags: observer, javascript, react, css
Published: 2021-04-18 19:49:49


In part one, we create a dynamic dimension container that can handle child elements with static dimensions.

In this part, we are going to create a dynamic dimension container that can handle child elements that have dynamic dimension.

In order to do that, we need use the Resize Observer API

### What is Resize Observer API?
In short term, it's like the `onresize` event that trigger when, instead of the browser viewport, a document dimension have changed.

For more detail, please refer to [MDN](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)

### The Code

First, let's create a hook with Resize Observer.

```javascript
export function useResizeObserver(ref) {
  const [element, setElement] = useState(null);
  const [rect, setRect] = useState({});
  const observer = useRef(null);


  //Clean up observer
  const cleanOb = () => {
    if (observer.current) {
      observer.current.disconnect();
    }
  };

  useEffect(() => {
    setElement(ref.current);
  }, [ref]);

  useEffect(() => {
    if (!element) return;
     // Element has changed, disconnect old observer
    cleanOb();

    const ob = (observer.current = new ResizeObserver(([entry]) => {
      // inlineSize and blockSize in entry.borderBoxSize and contentBoxSize
      // inlineSize means height when write-mode is horizontal, and width when write-mode is vertical.
      // blockSize means width when write-mode is horizontal, and height when write-mode is vertical.
      // So, for the sake of simplicity, I will use getBoundingClientRect
      setRect(entry.target.getBoundingClientRect());
    }));
    ob.observe(element);

    // disconnect when component is unmounted
    return () => {
      cleanOb();
    };
  }, [element]);

  return rect;
}

```

Note: You can use `inlineSize` and `blockSize` in `entry.borderBoxSize` and `entry.contentBoxSize`. However, they represent height or width depend on `write-mode` of target element.

And `entry.contentRect` may be deprecated in future versions.

Therefore, for the sake of simplicity, I will use getBoundingClientRect here.

Now, let's use this hook in the container we created in [part1](https://dev.to/anxinyang/dynamic-dimension-react-container-with-transition-effect-47a9)

```javascript
function DynamicContainer({ children, className, style }) {
  const content = useRef(null);
  const rect = useResizeObserver(content);

  return (
    <div
      className={className}
      style={{
        transition: "0.3s",
        height: `${rect.height}px`,
        width: `${rect.width}px`,
        overflow: "hidden",
        ...style
      }}
    >
      <div
        ref={content}
        style={{
          width: "fit-content",
          height: "fit-content"
        }}
      >
        {children}
      </div>
    </div>
  );
}
```

And here is a demo, try hover the mouse over the dropdown items.
The dropdown item will change it's text to random length string when hovered.

{% codesandbox hprsv %}


Thank you all!
Domino's India database  hacked
Tags: news, watercooler, discuss, security
Published: 2021-04-18 19:49:01

A news website (Link at end) reported as under:

HIGHLIGHTS
-Hackers reportedly have access to Domino’s India 13TB of internal data.
-Employee details, order, and credit card details of customers have likely been compromised.
-The hackers are aiming to sell the entire database for $550,000.

Popular pizza outlet Domino’s India seems to have fallen victim to a cyber attack. 
According to Alon Gal co-founder of an Israeli cybercrime intelligence, the hackers have access to Domino’s India 13TB of internal data which includes employee details of over 250 employees across verticals such as IT, Legal, Finance, Marketing, Operations, etc.

The hackers claim to have got all customer details and 18 crore order details which include customer's names, phone numbers, email IDs, delivery address, payment details including more than 10 lakh credit card details used to purchase on Domino’s India app.

Further, the hackers are aiming to sell the entire data to a single buyer. According to Alon Gal, the hackers are looking for $550,000 (around Rs 4 crores) for the entire database. The hackers also have plans to build a search portal to enable querying the data.

The sale is apparently happening in the dark web and likely on a website frequented by cyber scammers. For now, Domino's India has neither confirmed nor denied that data of its consumers has been stolen or leaked from its servers.

For full story refer to:
https://www.indiatoday.in/amp/technology/news/story/domino-s-india-database-likely-hacked-1-million-credit-card-details-leaked-along-with-mail-ids-cell-numbers-1792305-2021-04-18
Learning Rust
Tags: rust, learninpublic, livecoding
Published: 2021-04-18 19:47:05

My awesome coworker @citizen428 dropped a new resource for learning the Rust language care of Microsoft. It's called [Get started with Rust](https://docs.microsoft.com/en-us/learn/paths/rust-first-steps/).

I keep saying to myself that I want to learn Rust, so I'm killing two birds with one stone, since I [wanted to start streaming again](https://dev.to/nickytonline/my-twitch-stream-setup-2m0c) on [my own stream](https://livecoding.ca), and not just the [DEV stream](https://twitch.tv/thepracticaldev). 😎

This is the inaugural post of my series on learning the Rust language.

<em>I'd love it</em> if you popped by on my stream on Tuesdays at 4pm UTC (noon Eastern for me) so we can learn together.

If you aren't already subscribed to my Twitch and YouTube channels, what are you waiting for? 😎

* [livecoding.ca](https://livecoding.ca)
* [YouTube](https://www.youtube.com/watch?v=eSVxhbbfT34&list=PLcR4ZgxWXeIAFF1MYfuoGa6FeksKcMz-O)

Update 2022: I've finished this so you can check out the replay if you're interested in the course as well.

{% embed https://www.youtube.com/watch?v=eSVxhbbfT34&list=PLcR4ZgxWXeIAFF1MYfuoGa6FeksKcMz-O&index=1 %}

---

Photo by <a href="https://unsplash.com/@chanphoto?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Chandler Cruttenden</a> on <a href="https://unsplash.com/s/photos/crab?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
4 easy ways to add some Visual Pizzaz to your site
Tags: html, webdev, javascript, css
Published: 2021-04-18 19:46:26

Here's four easy ways to add a little style to your website, with just a few lines of code.  

###1. Make the button/link pulse on hover.  
This effect is subtle, but noticeable, Just increasing the size of an element a little bit when the user hovers over it.  For an example, See the nav bar on my [Tacocat Project Page](https://tacocat-seth.netlify.app/). The code for this is quite simple, in your css style, define a new style, I called mine nav-hover for easy reference, that contains the line `transition:all 250ms;` you can change the time if you like, but 250ms feels about right.  Then you need another definition with a :hover right after.  For my nav-hover class it looks like this: 
```
.nav-hover {
    transition: all 250ms;
}
.nav-hover :hover {
            transform: scale(1.1);           
}
```
You can increase the scaling if you like (or even use a value less than 1 to shrink it) and apply the class to whatever you like.  
  
###2. SweetAlerts
Vanilla Javascript alerts look plain and boring, sweetalerts is a great library that is super simple to use.  Just import their cdn (found at [their website](https://sweetalert2.github.io/)) at the bottom of your html page. And put any of the premade recepies in your js file, then tweak to your liking.  I tend to use their simple error message as a starting point, but there are many more!
```
Swal.fire({
  icon: 'error',
  title: 'Oops...',
  text: 'Something went wrong!',
  footer: '<a href>Why do I have this issue?</a>'
})
``` 

###3. AnimateCss
Something I found out about from SweetAlerts was that their library can use [Animate.css](http://animate.style) for more complex animations.  In the same way, their cdn is all you need, then you can add the animation classes directly to your html elements!

###4. Confetti
When the user does something great, or you just want a bit of a celebration to finish a process running, look no further than [confettijs](https://www.cssscript.com/confetti-falling-animation/) This script allows you to trigger a brief confetti animation with a line of Javascript.  You just need `confetti.start(1000)` replacing that number with the amount of miliseconds before the animation should stop.  No need to set a timeout seperately!  

As a bonus, if you want to customize the color of the confetti, just edit the colors array on line 29 of their js module, inserting in whatever rgb color you like in the following format :`"rgba(255,0,0,", "rgba(0,0,255,", "rgba(128,0,128,", "rgba(202,218,210,"`

What are some quick things you've used to improve the look of your website and give it a bit of flash?
LeetCode 15. 3Sum
(javascript solution)
Tags: algorithms, javascript
Published: 2021-04-18 19:44:26

###Description:
Given an integer array nums, return all the triplets [nums[i], nums[j], nums[k]] such that i != j, i != k, and j != k, and nums[i] + nums[j] + nums[k] == 0.

Notice that the solution set must not contain duplicate triplets.

###Solution:
Time Complexity : O(n)
Space Complexity: O(n)

```javascript
function threeSum(nums) {
    // If less than 3 elements then we can't have 3 numbers that add to 0
    if(nums.length < 3) return []
    const output = []
    
    // Sort the array in descending order. Must add order function to sort. If not we will not get the right order. Sort converts everything to a string and sorts the array by charCode. Adding the order function to sort guarantees we will get the array in the proper descending order.
	nums.sort((a,b) => a - b)

    for(let i = 0; i < nums.length - 2;i++) {
        // we don't want repeats, so skip numbers we've already seen
		if (i > 0 && nums[i] === nums[i - 1]) continue
        
        let left = i+1
        let right = nums.length-1
        
        // Current number at i will be added to the current sum. We will move a left and a right pointer in the subarray of elements to the right of i to try and get a sum that will equal 0
        while (left < right) {
            // Get the current sum with with number at i and numbers at the left and right pointers
            const sum = nums[i] + nums[right] + nums[left]
            // If we get 0 then we add all the numbers to output and move our left and right pointers to look for more numbers that will add to 0 with the current number at i
            if(sum===0) {
                output.push([nums[i], nums[left], nums[right]])
                // We will move the pointers until we find a number that is not equal to each pointers current number
                while(nums[left]===nums[left+1]) left++
                while(nums[right]===nums[right+1]) right--
                left++
                right--
            } else if (sum > 0) {
                // If the sum is greater than 0 that means we need smaller numbers to get 0 so we move the right pointer to the left
               right--
            } else {
                // If the sum is less than 0 that means we need higher numbers to get 0 so we move the left pointer to the right
                left++
            }
        }
    }
    
    return output
};
```
How to effectively develop optimized and professional websites
Tags: cms, webdev, wordpress, optimization
Published: 2021-04-18 19:40:35

At first, I couldn't believe it when I heard about web development without writing any piece of code. Normally, to build a website you need to have skills in HTML which is used to create web blocks, CSS describes the pages' appearances and Javascript for adding interactivity. Alternatively, I am going to talk about WordPress which is used to achieve the same thing. WordPress is a CMS(Content Management System), It is used to build websites by using already built templates. Now the question is how to get the most out of it? Don't worry I've got you covered...just keep reading.

Once a friend of mine who is a music producer asked me to build in 1 week a website where they can demonstrate services they offer as a music studio. I did research on CMS and ultimately I was able to deliver that attractive website with all information about their studio. Just visit www.ndajemusic.com in case you would like your eyes to have fun.

Basically, I built that website with help of already built-in templates, additional custom designs, and installing the plugins, and configured them in a way that matches the expected results. This saved time and worked perfectly. However, last week I learned that using custom code instead of plugins is an effective and optimized technique. For instance, rather than using a plugin, you can customize your WordPress code and create your own popup. This fixes WordPress themes and plugins versions compatibility issues.

In conclusion, although on one hand, WordPress has made building websites much easier due to plugins usage and drag and drop options, on the other hand, it costs optimization and requires extra maintenance. Therefore, one of the best solutions to get maximum benefits is to add custom code that is maintainable and increases website optimization.
What is an Object Model
Published: 2021-04-18 19:31:56

# Introduction
What is an object model?  This document explores this medium to complex computer science topic.  It first explains in plain english and then pictorially a simple real world model.  It concludes with a more complex and purely abstract model invented by the internet.
## Document Management
This source Libre Office document resides at the following URL:  https://hsanchezii.wordpress.com

This document’s status is: Work-in-progress.


## Acronyms

* DOM - Document Object Model.  This is the data representation of the objects that comprise the structure and content of a document on the web. 

* HTML - Hyper Text Markup Language.  This is the language in which most websites are written. It is used to create web pages and make them functional.

## What is an Object Model
An object model is a computer science mechanism employed in order to be able to define or replicate real world “things”, aka objects in terms that a computer program can understand and manipulate.

-----------

# Real World Model
Let us suppose we wanted to build an object model for a book.  See the figure "Simple Book Model".  The way to read this is as follows:

* A Book has a table of contents and chapters.
* A Chapters has Paragraphs
* A Paragraph has Sentences
* Sentences have Words
* Words consist of a fixed set of Letters


![BookModel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h7vmc5102q1fxq1zz99a.png)
 
----------
# The Internet's Document Object Model

The figure "Simple Web Dom" is a simplified and incomplete representation of an HTML DOM

It says:
* A Documents consists of a Head tag and a Body tag
* A Body may contain
    * Titles (realistically you only have a single Title tag)
    * Paragraphs
    * Tables
    * UnOrderLists
    * Divs
* Tables consist of Rows
* Rows consist of Table Rows and Table Data

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

---
# Summary
With these simple examples you can see it is easy to think in terms of object models.
How to Enable Google Chrome Extension In Incognito mode
Tags: watercooler, webdev, productivity, googlecloud
Published: 2021-04-18 19:29:33

Ever tried to use an extension while in incognito mode but you could not trace it even though you had it installed? Coz I have.
Hey, but don't worry because I got a way to fix that problem for both of us.
First just a recap, what is Incognito mode?  
Just like the word sounds Incognito(* not known), incognito mode is an online privacy feature that prevents your browsing history from being stored. This means all the browsing you will do in this mode won't be stored in your browsing history with google.  
Those who like to hide their browsing history, this is for you for sure 😊.  
#### Steps to Add the Extensions  
1. Open Google Chrome Browser on your PC
1. Click the Extensions Icon on the toolbar, usually at the top right corner of your window, select Manage Extensions. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/57z3pm8njl8coqkk8wsc.png)  
1. By clicking this, it will open chrome's extension page.
1. Now locate the extension that you would like to add/enable in your incognito mode and click on the details button. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pyo2reuj9ryjl47o3wdo.PNG)
1. On the next page after clicking the details button, choose 'Allow on incognito'. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3fl385ak367toujfyhn5.PNG) 
1. Now open your window in incognito mode to confirm your added extension is working. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tdzec5e7dspho6r5e3wb.PNG)  
That's it, You have successfully added the extension you need in Incognito mode.  

Support me: 
[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/V7R03ZL69)

If You have read this far I really appreciate, Help me to grow my community:

Also check out my other article on: 
[7 Best Visual Studio Code Extensions Every Web Developer Should Have.](https://dev.to/larymak/7-best-visual-studio-code-extensions-every-web-developer-should-have-2m1c) 

Connect With me at [Twitter](https://twitter.com/larymak1) | [Insta](https://www.instagram.com/nextgencoders/) | [YouTube](https://www.youtube.com/channel/UCrT1ARRZfLOuf6nc_97eXEg) | [LinkedIn](https://www.linkedin.com/in/hillary-nyakundi-3a64b11ab/)  | [GitHub](https://github.com/larymak)  

Do share your valuable opinion, I appreciate your honest feedback!   

Enjoy Coding ❤
C# Static Variables
Tags: csharp, codenewbie, beginners, webdev
Published: 2021-04-18 19:17:21

**Terminology**

**Static method**: A method called on a class.

**Static variable**: A variable scoped to the class.

### **Declaring Static Variables**

A static variable includes the `static` keyword. For instance:

```csharp
private static List<Item> _instances = new List<Item> {};
```

Static variable names always begin with an `_`.
Bubble sort
Tags: ruby, sorting, algorithms
Published: 2021-04-18 19:17:13

---
title: Bubble sort
published: true
description: A very naive sort that keeps swapping elements until the array is sorted.
tags: ruby, sorting, algorithms
cover_image: https://miro.medium.com/max/388/1*7QsZkfrRGhAu5yxxeDdzsA.png
---

Bubble sort is a sorting algorithm, which is commonly used in computer science. Bubble sort is based on the idea of repeatedly comparing pairs of adjacent elements and swap their positions if they exists in the wrong order.

Another words a bigger elements will 'bubble' towards the end and the smaller elements will 'bubble' towards the beginning until all elements are in the correct location.

Naive implementation:

```ruby
def bubble_sort(array)
  return array if array.size <= 1

  swap = true
    
  while swap
    swap = false
    (array.length - 1).times do |i|
      if array[i] > array[i+1]
        array[i], array[i+1] = array[i+1], array[i]
        swap = true
      end
    end
  end
  array
end
```  

- method takes single array parameter.
- return array if it's empty or consist of one element
- swap is the variable (flag) to indicate whether or not swap occurred during a given pass of the array. Set initially to `true`
- create a while loop that will run as long as swap is true
- sets swap to `false` since immediately after the beginning of your loop there have been no swap  
- in the loop, iterates through array and if value of the element bigger than value of the next element, swapped them and set swap to `true`
- the loop repeats until every item is in order and value of swap remains at `false`, the loop will terminated and return the sorted array.

> Time Complexity: О(n^2)
> Space Complexity: О(n)

*PS. thanks Michelle for inspiring.*
Keep working on accessibility
Tags: ux, opensource, react, a11y
Published: 2021-04-18 19:00:46

Keep working with user accessibility this week. A simple change on our [search help](https://github.com/Seneca-CDOT/telescope/pull/2152), the old font color is hard to read with the background color. I also make the title of the search help bolder and have some padding to make it more like a title.

Meanwhile, Royce is working with [improve search help logic](https://github.com/Seneca-CDOT/telescope/pull/2163). The search help was only appeared before the user search anything. However, when the user can't find any result after the searching, it is possible that she could use some search help to get the wanted searching result. I believe this change of search help makes more sense and can be more helpful for the user.

When I was testing this PR, I found another issue related to user accessibility. (I thought I've been checking all corners already) There is a line of message telling the user "No results found" or "No more posts". This line of message in the search page has black color in both light and dark mode. Therefore, this line can't be seen in dark mode.

The issues that I've been working but not able to finish is to [improve contrast ratio of slack icon](https://github.com/Seneca-CDOT/telescope/issues/2050). This [slack icon](https://github.com/Seneca-CDOT/telescope/blob/master/src/web/public/slack-logo.svg) is a svg file that we include in our repo. The color is white, and I'm not able to convert or fill in a darker color into it. This is my first time working with svg, the team gave me some suggestions in the weekly meeting, I will try to find out a fine solution to it!
nerd_splash: a newsletter for nerds 👩🏻‍💻
Published: 2021-04-18 18:48:29

Hey dev community! 👋🏼

I'm starting a newsletter on **technology trends**, the future of **education**, and people's strange, yet **insightful behaviors**. 

I'm specifically tailoring it to the most **curious, nerdy** people out there - those who happily indulge in a good rabbit hole and a concisely written idea splash.

3 intellectual goodies, 2 brain farts, 1 funky audio. 

Join the cyber community [here](https://newsletter.juliet.tech)!