teleren/devto huggingface dataset:
Rise Of Tailwind
Tags: tailwindcss, css, webdev, frontend
Published: 2022-02-14 10:19:36

Tailwind is a utility-first CSS framework packed with classes that can be composed to build any design, directly in your markup. 
Tailwind is highly customizable and makes your design easy to implement without putting too much effort into CSS. you can style your whole page without ever leaving your Html file. It comes with the most commonly used CSS property and the color pallets that are so easy to use.

## Why Tailwind CSS?
when trying to make a design we all know it's pain in the ass to make it responsive, and sometimes CSS Behaves unexpectedly. Also coming up with a new name for every new class is the bigger task which should follow some type of naming convention. With all of this, I am spending a lot of time designing things correctly rather than working on important features. this is so time-consuming. Here comes tailwind to rescue us.

## Advantages

- Tailwind comes with a lot of utility which are commonly used. All of these are highly customizable. we can easily override the default styles by introducing tailwind.config.js file in our project's root directory. that can be composed to build any design, directly in your markup.

- A major advantage of using tailwind CSS is that optimization can be done using purge CSS. which can remove unused classes and decrease the file size.

- It becomes easier to build complex a responsive layout as tailwind itself follows a mobile-first approach by default. Tailwind comes with default breakpoint for responsive designs which makes it easy to use.

## Disadvantage

- the only disadvantage I have come across is that it makes your semantic file look ugly. But if we compare it to its advantages I think once you get a hang of it, it becomes easier to debug an overflowed class in HTML tags.
FLoC & Topics API by Google against Interoperable Private Attribution by Mozilla
Tags: mozilla, advertising, tracking
Published: 2022-02-16 11:35:05

---
title: FLoC & Topics API by Google against Interoperable Private Attribution by Mozilla
published: true
date: 2022-02-14 10:08:20 UTC
tags: Mozilla, advertising, tracking
canonical_url: https://daniele.tech/2022/02/floc-topics-api-by-google-against-interoperable-private-attribution-by-mozilla/
---

A review of three different ad technologies by Google and Mozilla/Meta and why is not so bad after all

The post [FLoC & Topics API by Google against Interoperable Private Attribution by Mozilla](https://daniele.tech/2022/02/floc-topics-api-by-google-against-interoperable-private-attribution-by-mozilla/) appeared first on [Daniele Mte90 Scasciafratte](https://daniele.tech/eng).
Building a Chat App in React and Socket.IO
Tags: react, javascript, node, webdev
Published: 2022-02-14 09:58:31

YouTube Video Tutorial: Create a chat project in Node.js and React based on the Socket.IO library for creating a WebSocket communication channel between server and client. We will also be using TailwindCSS to style our client application.

Watch now:
{% youtube N0bWqo--tWk %}
A step-by-step guide to becoming an SDET.
Tags: sdet, testautomation, testing, qa
Published: 2022-02-14 10:28:24

---
title: A step-by-step guide to becoming an SDET.
published: true
date: 2022-02-14 09:55:15 UTC
tags: sdet, testautomation, testing, qa
canonical_url: https://mszeles.com/a-step-by-step-guide-to-becoming-an-sdet
---

A few days ago I stumbled upon a great article related to Software Development Engineer in Test. I really enjoy **being an SDET and is a fun and profitable journey.** A good SDET is a scarce resource so **you can find many job opportunities** working in that field.

In case you are interested in how to become an SDET, I recommend reading [The Test Lead](https://thetestlead.medium.com/?source=post_page-----9f75cc03007c-----------------------------------)'s article:

[https://thetestlead.medium.com/becoming-an-sdet-qa-automation-test-engineer-road-map-step-by-step-in-2022-9f75cc03007c](https://thetestlead.medium.com/becoming-an-sdet-qa-automation-test-engineer-road-map-step-by-step-in-2022-9f75cc03007c)

📚Join the Selenide community on [LinkedIn](https://www.linkedin.com/groups/9154550/)! ✌
Need an honest review of our Free Trial Product Tour
Published: 2022-02-14 09:50:10

Hi everyone!
I'm Louis, Product Marketing Manager at Flagship.io, our feature management platform.
I'm currently working on redesigning the product tour and since our solution is meant to be used by you guys, I'd like to know if you can sign up at https://www.flagship.io/sign-up/, then take the product tour and finally share your honest feedback [on this survey?](https://docs.google.com/forms/d/e/1FAIpQLSdwQjiFrQDucmzJspvxO1AuBZD7K2H9Xe04K9To-s2bqx_DYg/viewform?usp=sf_link)
While you are there, please feel free to try the platform, I am also collecting feedback about it.
Thank you very much, it would help me a lot.
Handling Incoming HTTP Requests In GO
Tags: go, backend, webdev
Published: 2022-02-14 08:22:03

Go is a very powerful tool in the development of web services. In this article i will be covering how to handle HTTP Requests with Go. 
Go has a powerful internal package `http` that provides HTTP client and server implementations.There are two ways to handle incoming HTTP Requests:

1. **Using The HTTP Handle `func Handle(pattern string, handler Handler)`**

Handle registers the handler for the given pattern in the DefaultServeMux.

```
package main

import (
	"fmt"
	"log"
	"net/http"
)

type helloHandler struct {
   message string
}

func (h *helloHandler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
   w.Write([]byte(h.message))
}

func main() {
	http.Handle("/hello-handler", &helloHandler{message: 'hello world')
	log.Fatal(http.ListenAndServe(":8080", nil))
}
```

2 . **Using HTTP HandleFunc `func HandleFunc(pattern string, handler func(ResponseWriter, *Request))`**

HandleFunc registers the handler function for the given pattern in the DefaultServeMux. 
```
import (
	"log"
	"net/http"
)

func main() {
	hello := func(w http.ResponseWriter, r *http.Request) {
		w.Write([]byte("Hello, world!, From a handleFunc"))
	}

	http.HandleFunc("/hello-handleFunc", hello)
	log.Fatal(http.ListenAndServe(":8080", nil))
}
```

Personally i prefer the handle function as it is much easier to write
Day 21/100 Java
Tags: 100daysofcode
Published: 2022-02-14 09:43:39

Week 3 Complete. We continue the grind!

Day 21/100

**Language:**
JAVA

**Time Period Spent:**
2 hrs

**Course Taken:**
Udemy: Java Programming Masterclass - Tim Buchalka

**Todays Learning:**
- List
- Array List
	- Part 1
	- Part 2
	- Part 3
- NULL


**Additional Notes:**
Today’s course episodes were enjoyable, I picked up the concepts quite quick and was able to interpret what the tutor was going to write prior to what and when he wrote it. I was able to fluidly understand what he was typing, how it worked and why it was written. I am keen on progressing onto the arraylist challenge. I will leave this for tomorrow like this I can assure that I remember how to use it and complete the challenge from knowledge.
Enabling the Customer Data Stack: RudderStack Series B Funding
Tags: seriesb, cdp, rudderstack, dataengineering
Published: 2022-02-14 09:42:55

Today, I'm thrilled to announce RudderStack's $56 million Series B funding led by Insight Ventures with continued support from Kleiner Perkins and S28 Capital. This brings our total funding to $82 million. Our Series B is a big step forward in helping our customers build the best data stacks possible.

![RudderStack customer data platform UI](https://cdn.sanity.io/images/97bpcflt/production/6b0d64bbd94878dc68c02d7be6c9cad6f7ade7f0-1706x865.jpg?auto=format)

In 2019, I co-founded RudderStack with the goal to help data engineers build the infrastructure required to help their businesses understand their users and serve their needs. I was inspired by my experience at my previous company, where I spent a year building customer data pipelines. In the process, I learned about many of the challenges that both myself and my peers were facing as we were collecting and processing customer data at enterprise scale. This funding round is a testament to the progress we have made in addressing these challenges for our customers.

With this funding round, we intend to accelerate investments in our product to enable engineers everywhere to build future-proof customer data infrastructure.

I am proud of what this team has accomplished in just a few short years and am looking forward to what the future holds.

Read the [TechCrunch article](https://techcrunch.com/2022/02/02/rudderstack-raises-56m-for-its-customer-data-platform/) featuring our Series B to learn more.
Map over "null" before next.js/image and provide a fallback
Tags: nextjs, javascript
Published: 2022-02-14 09:31:19

With the use from "Inline If-Else with Conditional Operator" from the react-libary we can easily set up an fallback image if for example your API is providing a "null" for the url. 

```
import Image from "next/image";
import fallbackimg from "../assets/fallbackimg.jpg";
...

{
  data.image != null ? (
    data.image.map((img) => (
      <Image
        alt={img.title}
        src={img.url}
        layout="fill"
        objectFit="cover"
      />
    ))
  ) : (
    <Image
      alt="Fallback"
      src={fallbackimg}
      layout="fill"
      objectFit="cover"
    />
  );
}
```
Allow Containers to run as root on OpenShift 4 : Hack
Tags: openshift, root, container
Published: 2022-02-14 09:30:01

🤫 Don’t tell anyone that i shared this trick with you

Let me tell you that OpenShift is the most secure Kubernetes distribution on this planet. So OpenShift has the responsibility to secure your apps, which is why OpenShift does not allow containers to run as root.

> **“ First Principles : Never ever run your containers as root user”**

Having said that, there are some instances when you want to run a pokemon container image that you found on some random container repository and want to run that to your OpenShift homelab/dev/test clusters.

Well to do so, you need to allow running container image as root and this is how you can do it.

1.  Login to OpenShift as system:admin

```
oc login -u system:admin -n default
```

2\. Create a new project where you will be running that in-secure container

```
oc new-project pokemon-prj
```

3\. Add the security policy `anyuid` to the service account responsible for creating your deployment, by default this user is default. The dash `z` indicates that we want to manipulate a service account

```
oc adm policy add-scc-to-user anyuid -z default
```

4\. You are all set, go and deploy or re-deploy your containers, it should work now, in `pokemon-prj` project

Summary
=======

*   Don’t ever run containers as root in production environments
*   Don’t tell anyone that you learned this hack from this blog
CSS Box Model
Published: 2022-02-14 09:26:09


When you're learning CSS it can be hard to distinguish between margins, borders and padding. When should you use negative numbers? How do these elements interact? This blog covers the box model, or how these elements work together to create the layout on the page. 

HTML elements are organized into boxes. Text, images, and other features are can be sized, but what if you want to control how close elements are to one another? That's where padding, borders and margins come in. Together they make up the box model. 

Let's inspect these pieces starting with the innermost layer and working our way out. 


#####Padding#####

Padding is the space between the content and the border. It's often whitespace. It starts at the content edge. Some examples of padding include the whitespace between the text and the border in an advertisement in a newspaper that's outlined. Buttons typically have padding between their text and the edge of the button. 

Padding provides visual rest for the eye and keeps things from getting overcrowded. 

With CSS you can specify padding for the entire box or for specific sides. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/byyawox417byppntrvr8.png)
 


#####Borders#####

Moving outward from the padding, the next layer is the border. There are plenty of border properties that allow you to create exactly the trim you need to set an element out from the rest of the page. 

Width - thickness of the border itself
Style - solid, dotted, dashed, double, ridge, inset, outset..
Color - includes transparency
Position - specify side(s) that will have a border
Radius - curve the edges or your border to a custom radius. You can specify which corners

Here one element, heron has three properties. You can combine these using only ‘border’ as seen with hibiscus



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x1yawadl6vmb4bxrd6sj.png)
 


#####Margins#####

Margins are the space around your borders. Like padding, they create whitespace and visual rest. Specifying a margin ensures other elements won't crowd this one. 
 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wojvzw5k2v2u8wzr2g0q.png)

 

#####A final note#####
on the box model: CSS' width property applies to the box itself. Margins, borders and padding are all extra. 

If your width is 400px and you have 10px padding, a 2 px border and a 30 px margin, the whole element is 484px (assuming you have the same size padding, boarder and margin on all sides).
Function Pre-conditions & Post-conditions (What are they?)
Published: 2022-02-14 09:22:21

> Note: Code examples NOT written in JS.


## Components of a function
- **name:** used identify function
- **args:** containing objects to operate on
- **body:** Transform args and execute the logic
- **return:** Specifies the result from the given function

```
Function: {     
   name: 'addOne',     
   args:  numeric,     
   body: sum = numeric + 1,     
   return: sum  
}
```

### Pre-condition of a function

A **pre-condition** defines a condition that must be true before a function can be run.

For example, we could conditionally confirm that `numeric` is an integer. 

```js
function addOne (numeric) {
   if (typeof numeric !== 'integer') {
     throw new Error('parameter must be an integer')
   }
   
   let sum = numeric + 1

   return sum
}
```

We have added a pre-condition to our function. The condition states that `numeric` arg must be of type integer. 


A concise way to add a pre-condition is to use type checking on the function input. (given your language allows it typescript, Java, C++, etc...).

```js
function addOne(integer numeric) {   
   let sum = numeric + 1
      
   return sum
}
``` 

Type checking numeric pre-conditionally enforces that numeric must of type integer. This is an example of a pre-condition. 



A post-condition defines a condition that must be met in order to return the result from said function.

```js
function addOne(numeric) {    
    let sum = numeric + 1     

    if (typeof sum !== 'integer') {       
       throw new Error(`addOne must return integer type`)
    }
    return sum
}
```

An example of a post-condition is to type check the returned result of the function. (Given the language you're using allows type checking return values - typescript, PHP, Java, etc...)

```js
function addOne (numeric) : integer {    
   return numeric + 1
} 
```


And adding both a pre-condition and post-condition.

```js
function addOne (integer numeric) : integer {
   return numeric + 1
}
```


Pre-conditions and post-conditions, especially via type checking are extremely powerful concepts to understand.

They narrow down the number of side effects incurred throughout an application, are used to enforce powerful design principles like the infamous L from SOLID: Liskov's Substitution Principle, and when used within both Functional and Object Oriented Programming empower developers to better scale as well as re-use their code with confidence. 


---

[Clean Code Studio](https://cleancode.studio)
[Liskov's Substitution Principle](https://www.cleancode.studio/series/solid-principles/episodes/3)
[Functional Programming](https://www.cleancode.studio/functional)
[Functional Programming - First Class Functions](https://www.cleancode.studio/functional)
[Interfaces in Object Oriented Programming](https://www.cleancode.studio/series/object-oriented-programming/episodes/5)
[Cryptocurrency](https://cleancode.studio/crypto)
[Cardano](https://cleancode.studio/crypto/cardano)
[Cardano Unspent Transaction Output](https://www.cleancode.studio/crypto/cardano/unspent-transaction-output)
3 Array methods every JavaScript developer should know
Tags: javascript, beginners, webdev, programming
Published: 2022-02-14 09:18:13

Arrays are something all of us come across every day. Today I'll share my picks for 3 of the most uncommonly used Array methods.

## isArray

In JavaScript, we have to infer the data type of variables way too often, even more often in nested Objects. One of the ways most JavaScript developers do it _(including myself)_ is to check the length property

```ts

const data = { ... }

// true, if arrayKey exists and the arrayKey has a length property
(data?.arrayKey && data.arrayKey.length) 

```

Although this works, what if I told you there is even a better way to do this?

The `Array.isArray(param: any)` call checks if the passed value is indeed an array or not and returns a boolean value. 

```ts

Array.isArray([]); // true
Array.isArray(new Array(22)); // true

Array.isArray(0) // false
Array.isArray({}); // false
Array.isArray(null); // false
Array.isArray(undefined); // false

```

---

For the next two, let's consider a situation

You have to rate some students based on a test as follows
- failed: if **all** answers were _wrong_
- passed: if **some** answers were _correct_
- excellent: if **all** answers were _correct_

## some

The `Array.some()` methods run the provided function on each item of the array and return **true**, if the provided function returns true for **any** of them, otherwise **false**. 

So in our scenarios, we can apply `Array.some()` for the second use case.

```ts

function isCorrectAnswer(answer) { 
 // return true if the answer was correct, otherwise false 
}

const answers = [{ ... }]

// didStudentPass will be true, if any of the answers were  // correct
const didStudentPass = answers.some(isCorrectAnswer)

```

---

## every

The `Array.every()` methods run the provided function on each item of the array and return **true**, if the provided function returns true for **all** of them, otherwise **false**. 

`Array.every()` seems like a perfect fit for the other two scenarios. 

```ts

function isCorrectAnswer(answer) { 
 // returns true if the answer was correct, otherwise false 
}

function isInCorrectAnswer(answer) { 
 // returns true if the answer was wrong, otherwise false 
}

const answers = [{ ... }]

// didStudentFail will be true, if all of the answers were incorrect    

const didStudentFail = answers.every(isInCorrectAnswer)

// didStudentExcel will be true, if all of the answers were correct    

const didStudentExcel = answers.every(isCorrectAnswer)
```

---

That's it for now. I hope you find this article helpful! Should you have any feedback or questions, please feel free to put them in the comments below, I would love to hear and work on them.

For more such content, please follow me on [Twitter](https://twitter.com/sun_anshuman)

> Until next time

<img width="100%" src="https://media.giphy.com/media/kRkJXYahXjSE0/giphy.gif" />
Awesome Shopify Resources for 2022
Tags: engineeringmonday, shopify, resource, ecommerce
Published: 2022-02-14 09:04:18

Shopify released a lot of new features in 2021, and naturally new tools and resources needed to be developed to cover new features. Next is a list of awesome Shopify Resources for 2022 which will help you to create modern Shopify storefronts.

###1. [Dawn](https://github.com/Shopify/dawn)

Dawn is Shopify's own open source theme with performance, flexibility, and Online Store 2.0 features built-in and acts as a reference for building Shopify themes. Its great for using it as a starter theme for your new Shopify project.

###2. [Dawn Figma files](https://www.figma.com/community/file/1017615468313501249)

If you will use Dawn as a starter theme for a Shopify project, Shopify give us this great Figma file with all Dawn's components/sections/templates that you can send to designer to speed up the design process.

###3. [Shopify Markets](https://www.shopify.com/markets)

In my opinion Shopify Markets will be the biggest update to Shopify since releasing Online Store 2.0 but will be even bigger than that. Markets will finally allow us to create Market-specific buying experiences. That means native multiple currencies, languages, language specific domains, duties collection for each market etc. It's currently available as a preview feature so I suggest that you don't sleep on this one!

###4. [Hydrogen](https://hydrogen.shopify.dev)

Another great open source Shopify resource, but this time for creating headless experience. Hydrogen is React-based framework for building custom storefronts on Shopify which gives you everything you need to start fast, build fast, and deliver the best personalised shopping experiences.


###5. [Helium](https://github.com/idbakkasse/helium)

Helium is a great resource for using newest Online Store 2.0 features with modern build tools. Helium will allow you to use ES6, SCSS and hot module reloading for both. Great to use in combination with Shopify's Dawn.
 
###6. [HULL](https://github.com/ndimatteo/HULL)

Hull is another resource for creating headless experiences, but Hull is a complete starter powered by Next.js + Sanity.io. It has a lot of features so you can use it as a complete solution for your headless project.

###7. [Shopify Theme Lab](https://github.com/uicrooks/shopify-theme-lab)

Another complete headless solution, but this time for the Vue.js fans, and also you can swap Vue.js for pretty much anything if that stack is not suitable for project.

###8. [goCart.js](https://github.com/bornfight/goCart.js)

A complete open source Shopify Ajax cart solution written in vanilla JS. This plugin includes Ajax cart drawer, Ajax mini cart, add to cart modal, and error modal. Developed by Bornfight's frontend team and new, re-written version will be released this year.