teleren/devto huggingface dataset:
How to use ::before and ::after in Tailwind CSS
Tags: tailwindcss, webdev, css, beginners
Published: 2021-10-22 04:29:33

In this article we are going to learn that how you can use `::before` and `::after` selectors in Tailwind CSS. If you don't know what [Tailwind CSS](https://tailwindcss.com/) is then you should look into it because it's just awesome. And trust me If you got used to it then you could not leave.

Now let's continue with this article. This feature is only available in [Just-in-Time (JIT)](https://tailwindcss.com/docs/just-in-time-mode) mode. Tailwind has first-party support for styling pseudo-elements like `before` and `after`:

```html
<div class="before:absolute before:bg-blue-500 after:flex after:bg-blue-300" ></div>

```

It has `content: ""` by default so you don't need to worry about that. Any time you use a `before` or `after` variant to make sure the elements are rendered, but you can override it using the content utilities which have full arbitrary value support:

```html
<div class="before:content-['hello'] before:block ..."></div>
```

You can even grab the content from an attribute using the CSS `attr()` function:

```html
<div
  before="hello world"
  class="before:content-[attr(before)] before:block ..."
></div>
```

This can be super helpful when your content has spaces in it since spaces can't be used in CSS class names. You can use mostly any property with `before` and `after`

### Conclusion
Tailwind is the super awesome framework of CSS. According to me, it's the best so far. Everyone should learn it and it is very easy to learn and use. For more such articles consider a Follow.

#### Also Read 

- [Some Javascript Methods you should know](https://dev.to/j471n/some-javascript-methods-you-should-know-i15)
- [10 Git Commands everybody should know](https://dev.to/j471n/10-git-commands-everybody-should-know-3322)
- [Convert Next.js app to PWA](https://dev.to/j471n/convert-nextjs-app-to-pwa-3fd)
10 CSS tips you need to know right now.
Tags: webdev, beginners, programming, css
Published: 2021-10-22 04:12:20

### 1. Change the color of the cursor for any input field

![caret](https://i.imgur.com/F86kvJM.png)

### 2. Center any thing with just 3 lines of CSS

![Imgur](https://i.imgur.com/y7YOD55.png)

### 3. Add smooth scroll in just one line of CSS

![Imgur](https://i.imgur.com/uMQijje.png)

### 4. Add any image to the heading of a page to create a cool effect

![Imgur](https://i.imgur.com/8WsaZ1t.png)

### 5. Truncate text with plain CSS

![Imgur](https://i.imgur.com/8RpPVbu.png)

### 6. Make any element resizable

![Imgur](https://i.imgur.com/jCxw95f.png)

### 7. Add any image as the cursor

![Imgur](https://i.imgur.com/rSSW4b2.png)

### 8. Animate Scroll Behaviour

![Imgur](https://i.imgur.com/Fs2BJio.png)

### 9. Enable Blend Mode

![Imgur](https://i.imgur.com/ybYi0hi.png)

### 10. Select content with CSS

![Imgur](https://i.imgur.com/ce1unhw.png)

*** 

### Thank you for reading

If you liked this post, subscribe to my newsletter to never miss out on my blogs, product launches and tech news.

[Abhiraj's Dev-letter](https://getrevue.co/profile/abhiraj)
Trying to run getLocation app in background but it's getting stops while screen locks
Tags: android
Published: 2021-10-22 03:45:34

Hello Dear Comrades,
I am developing an android app to get location of the phone periodically. I am using a handler class with priority BACKGROUND, but it is not running when I locks the phone.
Please suggest a way to keep it running even when the phone is locked so that it can register location without needing attention everytime.
Many thanks :)
Write, write, write it down!
Tags: programming, productivity, writing
Published: 2021-10-22 03:42:40

Today I had a meeting with my mentor, Derek, over at [Perpetual Education](perpetual.education). I was confused about how to do something from a lesson the day before, so I asked if he could clarify some things about it and take a look at my code. Namely, this challenge required us to make the content of a webpage into a column while having the background extend the full width of the page. Sounds simple, right? In the end, *it was*.
</br>
##Avoidable mistakes.##
</br>
While attempting the challenge on my own, I was reviewing the instructions Derek had written as well as watching his video once more. While doing this, I was looking at the existing code of the webpage I was working on in order to see where I needed to make changes. As I was doing this, however, I was forgetting to do one critical thing: **write it down**. As a result, I started to feel somewhat overwhelmed. I lost focus and the whole thing became a mess.

The problem was not Derek’s instructions; his lesson was clearly written with each step explained in a way that was easy to understand. He’s a fantastic person who is more than willing to take the time to help his students. The problem is that I did not write down each step as he explained it. Doing so would have reinforced my understanding and allowed me to approach the challenge with proper scope and focus.
</br>
##Be patient with yourself.##
</br>
Give yourself an allotment of time to practice coding and **be patient** with yourself while you do. Write down what you study. Live it and breathe it; it will become clear to you. If for any reason it doesn’t, reach out! Ask for help. Many mistakes and roadblocks are avoidable if we follow these simple steps.

Best,

Andrew
Here is my new portfolio website made of PlainCSS And Javascript
Tags: codenewbie, javascript, webdev, beginners
Published: 2021-10-22 03:38:10

Hello Everyone 
Here is my new website made of PlainCSS And Javscript.
Here is the link
https://proharshit.ml
Here is the link of Github Repo
https://github.com/ProHarshit/ProHarshit
Thank you 
Please tell how did you like it
How to Enable Crosshair and Trackball in Blazor Charts
Tags: blazor, webdev, dotnet, csharp
Published: 2021-10-22 03:26:04

Learn how easily you can add a crosshair and trackball to Syncfusion [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts). 

In this video, you will learn how to make Blazor Charts more interactive by adding crosshair and trackball. You’ll also see how to customize a crosshair tooltip. 

Explore our tutorial videos: https://bit.ly/3lKnzxR 

Download this example from GitHub: https://bit.ly/2YS2Pv8 

Blazor Chart control includes functionality for plotting more than 30 chart types. Each chart type is easily configured with built-in support for creating stunning visual effects.

https://www.syncfusion.com/blazor-components/blazor-charts/chart-types

{% youtube LXCQFURC68U %}
MacBook Pro,  how to select discrete graphics card or integrated graphics card
Tags: macbookpro, battery
Published: 2021-10-22 03:19:33

Apple only provides an option to let them choose the best graphics models while you're running on battery.

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

But sometimes, many times... actually, I really need to be up with battery longer than 3-4 hours. Discrete graphic is one of the most battery consuming in my MBP. So, occasionally, I need to find a way to shut it off. (It may sound silly that you paid for a high performance graphic card, and you want to shut it off 🤧)

Did some quick research and found a command (from https://nathansnelgrove.com/how-to-force-your-macbook-pro-to-use-its-discrete-graphics-card-when-its-plugged-in/):

```
# Always use the integrated graphics card while running on battery power
sudo pmset -b gpuswitch 0
```

gpuswitch has 3 options

0 - use integrated graphics card
1 - use discrete graphics card
2 - automatically switch between discrete and integrated graphics card (default option)

and 
-b - battery
-c - plugged
-a - both battery and plugged

Hope I could be up with battery a bit longer...😥
October 22nd, 2021: What did you learn this week?
Tags: weeklylearn, discuss, weeklyretro
Published: 2021-10-22 03:05:33

It's that time of the week again. So wonderful devs, what did you learn this week? It could be programming tips, career advice etc.

<center>

![Information flowing through your brain](https://media.giphy.com/media/qKltgF7Aw515K/giphy.gif)
</center>

Feel free to comment with what you learnt and/or reference your TIL post to give it some more exposure.

{%tag todayilearned %}

<!--
And remember, if something you learnt was a big win for you, then you know where to drop it as well.👇👇🏻👇🏼👇🏽👇🏾👇🏿

{% link https://dev.to/devteam/what-was-your-win-this-week-145j %}

<center>

![Price is Right contestant celebrating](https://media.giphy.com/media/gF29UEqBhSoDY8LHKg/giphy.gif)
</center>
-->
code every day with me
Tags: javascript, programming, 100daysofcode, algorithms
Published: 2021-10-22 02:50:25

**--DAY 4--**
Hi, I am going to make #100DaysOfCode Challenge.Everyday I will try solve 1 problem from leetcode or hackerrank. Hope you can go with me until end.
**Now let's solve problem today:**
-Problem: Longest Common Prefix
-Detail: https://leetcode.com/problems/longest-common-prefix/
-My solution (javascript):
```
var longestCommonPrefix = function(str) {
    if(str.length==0) return '';
    let prefix='';
    for(let i=0;i<str[0].length;i++){
        let check=true;
        for(let j=1;j<str.length;j++){
            if(str[j].charAt(i)!=str[0].charAt(i)){
                return prefix;
            }
        }
        if(check) prefix+=str[0].charAt(i);
    }
    return prefix;
};
```
-->*If you have better solution or any question, please comment below. I will appreciate.*
Pivotal tracker - how i manage tickets from terminal
Tags: productivity, python, webdev, javascript
Published: 2021-10-22 01:56:55

Pivotal tracker is one of the task management platform for the teams. If you also use the same for managing your personal life or your team then you might have faced the hassle of going through the browser to manage your tickets. I also faced the same issue and created one command line app in python to fit my basic needs.

Here is how you can get started with it:

{% youtube r_2UfEOex78 %}

Let me know your thoughts on the comments below.
Happy Coding!! 🎉
5 Minutes Introduction to Pointers in C++
Tags: cpp, beginners
Published: 2021-10-22 01:30:49

_Note: This article assumes that you have basic knowledge of programming._

## Introduction to Pointer

Every variable is allocated a section of memory big enough to hold a value of the variable's data type. Since every byte of memory has a unique address, a variable's address is then determined by the first byte allocated to that variable. This is where the pointer is introduced to store the memory address of other object or variable.

Declare a variable as usual, but with asterisk added before identifier, indicates a pointer.
`int *pointer;`

> A pointer is a specialised variable to store the memory address of other variable or object of the same data type, except void pointer.

### Address of Operator (&)

We can place address operator (&), or ampersand in front of a variable name, or identifier to return the address of the variable.
`int variable = 88;`
`&variable`
Then, assign it to a pointer after pointer declaration.
`int *ptr;`
`ptr = &variable;`
Afterwards, you can print the memory address of variable to the console.
`std::cout << ptr << std::endl;`
Finally, the memory address is displayed in the form of hexadecimal numbers.
`0x1eed300`
You can also print out the address of that pointer.
`std::cout << &ptr << std::endl;`
The output will be something similar to this.
`0x7ffc426d3ec8`
> Address operator is meant to help you to store and retrieve memory address of a variable.

### Dereference Operator (*)

Aside from handling memory address, we can retrieve and modify the data using the pointer that we have declared just now. Simply place an asterisk in front of a pointer to return the value contained in that memory location.
`std::cout << *ptr << std::endl;`
The output will be the value of which variable was assigned.
`88`

> Dereference operator is used to access and modify data contained in a memory location pointed to by a pointer.

### Pointer to Pointer

What's more fun is you can create multi level pointers. The idea is that we create new pointers to store memory address of existing pointers. For instance, you create level 2 pointer.
`int **ptr2;`
Moving next, you assign it with the memory address of level 1 pointer.
`ptr2 = &ptr1;`
Lastly, you can choose to print the memory address or the value contained of that variable.
`std::cout << *ptr2 << std::endl;`
`std::cout << **ptr2 << std::endl;`
The output:
`0x1eed300`
`88`

### Pointer Size

The size of a pointer in C++ depends on the word size of processor on most occasions. For instance, pointer size is 4 bytes for a 32 bit computer and 8 bytes for a 64 bit computer, regardless of data types.

### Void Pointer

Void pointer is a pointer with no associated data type. It can hold address of any data type and can be typecasted to any data type. For the moment, we ain't going to talk about the implementation of void pointer.
How to Initialize a Firebase app in the new modular Web SDK in Next.js
Tags: firebase, react, nextjs
Published: 2021-10-22 00:44:47

## Previously in Version 8

Most devs migrating to the new modular approach for delivering the firebase API typically have this code snippet that initializes their firebase app.

We'll start off by exporting the most basic service, being `firebase/auth`.

```typescript
//initFirebase.ts
require("firebase/auth");

import firebase from "firebase/app";

const config = {
  // ...various env variables
};

export default function initializeFirebase() { 
  if (firebase.apps.length === 0) {
    return firebase.initializeApp(config);
  }
}

export const firebaseAuth = firebase.auth;
```



## Now in V9

In the latest version, we can re-factor the snippet into something like this:

```typescript
// initFirebase.ts

import { FirebaseOptions, getApp, initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

const config: FirebaseOptions = {
  // ...various env variables
};

function createFirebaseApp(config: FirebaseOptions) {
  try {
    return getApp();
  } catch {
    return initializeApp(config);
  }
}

const firebaseApp = createFirebaseApp(firebaseConfig);
export const firebaseAuth = getAuth(firebaseApp);
```

## Bonus: Initialize the latest Admin SDK version 10 for API routes

Similarly for the admin SDK, we create a similar function, but we also handle a check against the number of apps being initialized.

```typescript
// initFirebaseAdmin.ts

import {
  AppOptions,
  cert,
  getApp,
  getApps,
  initializeApp,
  ServiceAccount,
} from "firebase-admin/app";
import { getAuth } from "firebase-admin/auth";

const credentials: ServiceAccount = {
  projectId: process.env.projectID,
  privateKey: process.env.privateKey.replace(/\\n/g, "\n"),
  clientEmail: process.env.clientEmail,
};

const options: AppOptions = {
  credential: cert(credentials),
  databaseURL: process.env.databaseURL,
};

function createFirebaseAdminApp(config: AppOptions) {
  if (getApps().length === 0) {
    return initializeApp(config);
  } else {
    return getApp();
  }
}

const firebaseAdmin = createFirebaseAdminApp(options);
export const adminAuth = getAuth(firebaseAdmin);
```
Now we can make use of `adminAuth` in any API route handler to manage authenticated users.

And that's really it!
Please stop buying Cracking the Coding Interview for Big Tech interviews
Published: 2021-10-21 22:58:52

CTCI gives you a great birds-eye view of the relevant data structures and algorithms, but it doesn’t get deep enough into the fundamentals. FANG interviews are notorious for being very difficult because the problems are designed to test your fundamentals and your ability to apply them.

CTCI’s approachability is its downfall here. It’s designed to be a great resource for engineers looking to get a job at a mid-size or non-fang company. It’s meant to be a book you can study, take 30 interviews, and eventually, you’ll see something you saw in the book and get a job. Any developer looking to land a non-fang level company should consider using this book.

The problem with FANG interviews is you don’t have 30 chances and the odds of getting 5 interview questions directly out of the book are slim to none. There will always be a success story about how someone just did CTCI problems and landed the job. This is the exception to the rule. With Fang interviews, you need to prepare for problems you’ve never seen before. To do that you need a resource that gets into the thick of it.

Buy The Algorithm Design Manual by Steven Skienna instead
Why WIP limits?
Tags: wip, kanban, wiplimit, agile
Published: 2021-10-28 09:31:20

---
title: Why WIP limits?
published: true
date: 2021-10-22 00:00:00 UTC
tags: wip,kanban,wiplimit,agile
canonical_url: https://jhall.io/archive/2021/10/22/why-wip-limits/
---

The [Work-In-Progress (WIP)](https://en.wikipedia.org/wiki/Work_in_process) limit is a concept made popular by the [kanban](https://en.wikipedia.org/wiki/Kanban_(development)) development methodology. It’s a fairly simple concept. It’s simply a limit on the number of items that can exist at a given stage on a kanban board.

[![](https://jhall.io/images/kanban_board_hufd59074a87c7954cf4e35c23398981b8_363613_300x0_resize_q85_box_3.png)](https://commons.wikimedia.org/wiki/File:Kanban_board_example.jpg)

But why?

According to [Atlassian](https://www.atlassian.com/agile/kanban/wip-limits), “WIP limits improve throughput and reduce the amount of work ‘nearly done’, by forcing the team to focus on a smaller set of tasks.” That’s true, as far as it goes. Humans are notoriously bad at multitasking, and procrastinating on a partly-done project is not efficient. But this explanation actually overlooks the main benefit that WIP limits provide.

WIP limits were first used in manufacturing, where human multitasking and procrastination were not the problem.

WIP limits were originally designed to identify operational bottlenecks, by making clear the difference between work in a waiting state and work actively being done.

Imagine a 3-stage process without WIP limits:

 ![](https://jhall.io/images/flow-no-wip.png)

Stage two appears to have 6 items in progress. Is this because 6 items are actively being worked on, or has stage two over-committed? Let’s say stage two’s actual working capacity is only two items, so we impose a WIP limit of two:

 ![](https://jhall.io/images/flow-with-wip.png)

With a WIP limit in place, it becomes clear that there’s a backlog of work waiting for stage 2 to become available. Stage 2 is a bottleneck for the system. If the goal is to improve throughput, we should examine this stage to find ways of improving it. Perhaps the capacity can be increased by hiring more people or investing in more equipment. Or perhaps a new process can be implemented to make the existing staff and equipment faster.

This is the real power of WIP limits: To show you where your bottlenecks are, so you know where to focus your improvement attention.

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
Create S3 Lifecycle Rules with Tag Filters Using Python AWS CDK
Tags: aws, cloudnative, cdk, s3
Published: 2021-10-21 23:55:21

## Get right to it, here is the code
Python CDK code for creating an S3 bucket with a lifecycle rule which uses a tag filter.

```
bucket = s3.Bucket(self, "myBucket",
    lifecycle_rules = [
        s3.LifecycleRule(
            id="example-rule-made-with-python-cdk",
            expiration=core.Duration.days(1),
            tag_filters={ 
                'Key': 'delete_in_1_day', 
                'Value': 'true'
            }
        )
    ]
)
```

Relevant CDK docs:
* https://docs.aws.amazon.com/cdk/api/latest/python/aws_cdk.aws_s3/Bucket.html
* https://docs.aws.amazon.com/cdk/api/latest/python/aws_cdk.aws_s3/LifecycleRule.html#aws_cdk.aws_s3.LifecycleRule

**Note:** AWS Lifecycle rules do not get more precise than 24 hours[[docs](https://aws.amazon.com/premiumsupport/knowledge-center/s3-lifecycle-rule-delay/)]. 

## More CDK or AWS Serverless Questions?
Feel free to leave a comment here or hit us up on [LinkedIn](https://www.linkedin.com/company/signet-seal).

Want to learn more about how SignetSeal can help make your chats more secure? Read more about us on our website [SignetSeal.com](https://signetseal.com/)
Adding Quill Modules into ReactQuill in NextJS
Tags: nextjs, reactquill, react, javascript
Published: 2021-10-21 20:56:44

I notice that there isn't a clear solution to adding Quill Modules into ReactQuill on NextJS yet. In this example, I am importing blotFormatter into Quill.

The concept here is that since Quill needs document to be defined, we only tell Next to load in Quill and blotFormatter the moment the page is rendered. Since UseEffect only runs the moment the page renders, so we will start our call for these clientside imports there.

We use `promise` to ensure that Quill is loaded, and blot formatter is loaded, to be resolved so that the Quill.register function will be available to us.





```
let quillModules = {
	blotFormatter: {
		// see config options below
	},
	toolbar: [
		[{ header: [1, 2, 3, 4, 5, 6, false] }],
		["bold", "italic", "underline", "strike", "blockquote"],
		[
			{ list: "ordered" },
			{ list: "bullet" },
			{ indent: "-1" },
			{ indent: "+1" },
		],
		["link", "image"],
		["clean"],
	],
}

let quillFormats = [
	"header",
	"bold",
	"italic",
	"underline",
	"strike",
	"blockquote",
	"list",
	"bullet",
	"indent",
	"link",
	"image",
]

export default function createDocument() {
	const [enableEditor, setEnableEditor] = useState(false)
	const [editorData, setEditorData] = useState("")

	const loadQuill = async () => {
		return new Promise(async (resolve, reject) => {
			const Quill = await require("react-quill").Quill
			const BlotFormatter = (await import("quill-blot-formatter")).default
			resolve({ Quill, BlotFormatter })
		})
			.then(({ Quill, BlotFormatter }) => {
				Quill.register("modules/blotFormatter", BlotFormatter)
				return
			})
			.then((value) => {
				setEnableEditor(true)
			})
	}

	useEffect(async () => {
		await loadQuill()
	}, [])

	return (
			<div className='m-2 text-xs text-white'>
					{enableEditor ? (
						<div className='bg-white'>
							<ReactQuill
								value={editorData}
								onChange={setEditorData}
								modules={quillModules}
								formats={quillFormats}
							/>
						</div>
					) : null}
			</div>
	)
}
```

Hopefully this hellps someone who struggles with this same problem as me!
The #1 Mistake Companies Make When Creating Their Data Science Foundation
Tags: datascience, productivity, machinelearning, motivation
Published: 2021-10-21 23:29:51

Companies are obsessed with complex machine learning models. 

They want to use deep learning for all their problems. The problem is that these tools require a lot of data scientists' time, which is expensive. 

It turns out that simple statistical models are more than enough for most business problems! This blog post explains why they are beneficial for businesses. This alone can make or break a data science project. 

Simple statistical models work well in practice because they are easy to implement and explainable (e.g., "a customer's probability of purchasing our product increases by X% when he gets older"). 

[The #1 Mistake Companies Make When Creating Their Data Science Foundation](https://towardsdatascience.com/the-1-mistake-companies-make-when-creating-their-data-science-foundation-ff775d9e20b1)