teleren/devto huggingface dataset:
Some small Css tips #008
Tags: webdev, css, html, beginners
Published: 2021-03-01 08:56:30

---
title: Some small Css tips #008
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-008/
cover_image: https://since1979.dev/wp-content/uploads/2021/03/css-tips-banner-008.jpg
tags: webdev, css, html, beginners
---

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

### Alternating stripes with css gradients.
{% twitter 1354761745441681409 %}
{% codepen https://codepen.io/Since1979/pen/poNzVvJ %}
Css linear gradient docs: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient()

--- 

### Css caret-color and placeholder
{% twitter 1355117545133666305 %}
{% codepen https://codepen.io/Since1979/pen/eYBYBYG %}
Caret-color docs: https://developer.mozilla.org/en-US/docs/Web/CSS/caret-color
::placeholder docs: https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder

--- 

### Making selections with Css pseudo-selectors.
I didn't put out a new video this week, but you might have missed this first one.
{% youtube 6JZ2sUL-Jhc %}
Also check out my blog post: https://dev.to/vanaf1979/making-selections-with-css-pseudo-selectors-30p7

--- 

### Responsive images with object-fit cover.
{% twitter 1356207400949190664 %}
{% codepen https://codepen.io/Since1979/pen/xxRbrKB %}
Object-fit docs: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

--- 

### Multi-step animations with @keyframes
{% twitter 1356581612725624835 %}
{% codepen https://codepen.io/Since1979/pen/QWKmNKe %}  
Keyframes mdn docs: https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes

--- 

### 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**
How to activate Web Monetization on Hashnode
Published: 2021-02-20 01:32:41

Web Monetization is something I stumbled on, a month ago. The first time I heard about it was at Africahacks2020 Hackathon. I got really interested and wanted to learn more, so I applied to AfricaHacks Web Monetization for the passion economy program. We are expected to submit breakthrough each week, while the first week is about sharing the secret of web monetization, hence the reason for this article.

 Web Monetization is simply a way for content creators to receive payment from their users. You are only able to generate revenue when users who use web monetization access your content. In exchange, the users can get exclusive access to the content without ads etc. This way both the content creators and the users get to benefit.

I will walk you through how I activated web monetization on [Hashnode](https://hashnode.com/) . Let's go!

**What you will need**

1. A payment pointer ( [Uphold](https://uphold.com/en-us)  ,  [GateHub](https://gatehub.net/) )
2. A  [Hashnode](https://hashnode.com)  account 

I used Uphold.

First,  create and verify your account on  [Uphold](https://uphold.com/en-us)  . Go to your uphold dashboard and click ADD FUND, scroll down to *from Interledger Payment Pointer*


![uphold21.jpeg](https://cdn.hashnode.com/res/hashnode/image/upload/v1612014044682/b9XDCZkml.jpeg)

![uphold22.jpeg](https://cdn.hashnode.com/res/hashnode/image/upload/v1612014314571/5150_XgxI.jpeg)


***Copy the address***

![uphold23.jpeg](https://cdn.hashnode.com/res/hashnode/image/upload/v1612014548114/ItO6tlsSw.jpeg)


Secondly, **Create an account on  [Hashnode](https://hashnode.com)  . Go to your dashboard**

![hashnode1.jpeg](https://cdn.hashnode.com/res/hashnode/image/upload/v1612015660412/gb5kvCday.jpeg)


**Scroll to *Integrations* and click on it**


![hashnode2.jpeg](https://cdn.hashnode.com/res/hashnode/image/upload/v1612015860088/0YZAPCehp.jpeg)



**Then go to *Web Monetization Payment Pointer* and paste in the address you copied from Uphold**


![hashnode3.jpeg](https://cdn.hashnode.com/res/hashnode/image/upload/v1612016134483/C3YcH_UMl.jpeg)



That's all, congratulations! your blog page is now monetized. 

Be free to drop any comment. Check me out on [twitter](https://twitter.com/MichelleMichy_d) 

Check out this resources to read more on Web Monetization:
 [webmonetization](https://webmonetization.org/) 

 [GateHub](https://support.gatehub.net/hc/en-us/articles/360021318533-Register-a-GateHub-Account
) 

 [Coil](https://developers.coil.com/)
CSS tricks you probably didn't know about.
Tags: webdev, css, html
Published: 2021-03-01 08:48:18

Today I'm gonna share with you some cool css selectors.  


### Let's start with counter.
To style numbers in a numbered list, we need to play with properties called CSS counters. CSS counters let you adjust the appearance of content based on its location in a document.
```html
<ul class="list">
	<li>Item</li>
	<li>Item</li>
	<li>Item</li>
	<li>Item</li>
	<li>Item</li>
	<li>Item</li>
</ul>
```

```css
li {
	font-size: 40px;
	margin-bottom: 20px;
	counter-increment: li;
}

.list li::before {
	content: counter(li);
	margin-right: 10px;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: inline-block;
	background-color: #f3b70f;
	color: white;
	text-align: center;
	line-height: 50px;
}
```  
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rm91xqxktfjn2bnvjqmz.png)  




### ::selection.
The ::selection pseudo-element applies to highlighted elements on the DOM. This is one of my favorite pseudo-elements. The syntax looks like this:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4m5jg2a7skm87kkuas28.png)
```css
p::selection {
  color: white;
  background-color: green;
}
```  


### Next is the attr() function.
It's used to retrieve the value of an attribute of the selected element and use it in the stylesheet.
```html
<h2 class="title" data-count="01">Section</h2>
<h2 class="title" data-count="02">Section</h2>
<h2 class="title" data-count="03">Section</h2>
```

```css
.title {
	font-size: 35px;
	letter-spacing: 3px;
}

.title::before {
	content: attr(data-count);
	font-size: 1.2em;
	color: steelblue;
	margin-right: 10px;
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mo8njuzbjf6mgzvtk5fi.png)  


### Adding Stroke to Web Text
```html
<h2>Css is Awesome</h2>
```
```csss
h2 {
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke: 3px tomato;
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w4f03si8mmcprgxaujid.png)
Android 12- Features That You Need To Know
Tags: android, webdev
Published: 2021-03-01 08:31:35

Android 12 is here! Google releases a major software update each year to its android mobile operating system. In 2020, it released Android 11. In 2021, it’s announced Android 12 and is now available in the form of a developer preview. With this initial build, users can now install the OS on compatible devices. Google is improving and presenting a host of features in its most recent iteration of Android. Changes to media handling and notification support, improvements to privacy and haptic feedback and more polished notification UI all make the cut. Let’s see the major confirmed features of Android 12.

#Features of Android 12-
**1. Easy Wi-fi Sharing-**
In Android 11, if you want to share your current Wi-Fi connection with anybody, you can create a QR code easily. But in Android 12, you can avoid barcode scanning and just click the “Nearby” button you can below the QR code. This will use Android’s Nearby Share feature to transmit the Wi-Fi credentials to whom you like. While scanning the QR code is quite simple, this new feature allows you to share the connection data to multiple individuals without handling your phone around for everyone to scan. That is certainly more helpful!

**2. More Screenshot Markup Options–**
With a Pixel device, if you capture a screenshot, you can markup that shot with paintbrush-like tools. With Android 12, you can add text, Emoji and stickers to your screenshots using the same tool. This is not a big change but, it may prevent users from needing a third-party app to do the same thing. 

**3. Improved Cookie Management-**
Android 12 is adding support for SameSite cookie behaviors to WebView. The SameSite feature enables developers to announce in the case a cookie must be restricted to a specific site. This inclusion must enhance the cookie management of Android 12 across various applications and OS. The top Android browsers already support this feature.

**4. AVIF Image Support-**
Know more at- [https://solaceinfotech.com/blog/android-12-features-that-you-need-to-know/]
Hack The Weather: our NewRelic hackathon submission
Tags: hacktheplanet, react, node, newrelic
Published: 2021-03-01 07:58:44


**Hack The Weather** is an app that uses historical weather data to show today's average temperature in a city as well as what was the temperature on the same day 1, 2, 3, 4 and (almost) 5 decades ago (that's as far as the API's historical data goes).

![Today's weather in Barcelona, Catalunya](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vgbp9n8eq2h352jtdeor.png)

To learn more about how we built it, how we integrated NewRelic into it and get a link to the live version so you can search for your city, visit [our official hackathon submission at The Relicans.](https://www.therelicans.com/anabellaspinelli/hack-the-weather-with-historical-weather-data-58c1) 

We built it together with my friend and colleague [Albarin](https://dev.to/albarin)

Leave us your comments!
Scraping Listings from Realtor with Python and BeautifulSoup
Published: 2021-03-01 07:55:14

One of the biggest applications of Web Scraping is in scraping hotel listings from various sites. This could be to monitor prices, create an aggregator, or provide better UX on top of existing hotel booking websites.

Here is a simple script that does that. We will use BeautifulSoup to help us extract information and we will retrieve hotel information on Realtor.com.

To start with, this is the boilerplate code we need to get the Realtor.com search results page and set up BeautifulSoup to help us use CSS selectors to query the page for meaningful data.
We are also passing the user agent headers to simulate a browser call so we don't get blocked.

Now let's analyze the Realtor.com search results for a destination we want. This is how it looks.
And when we inspect the page we find that each of the items HTML is encapsulated in a tag with the class component_property-card.
We could just use this to break the HTML document into these cards which contain individual item information like this.
And when you run it.
You can tell that the code is isolating the cards HTML.
On further inspection, you can see that the cost of the place is always has the property data-label set to pc-price. So let's try and retrieve that:
Produces all the info we need including address, summary, image link, etc.

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

If we get a little bit more advanced, you will realize that Realtor 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.

The whole thing can be accessed by a simple API like below in any programming language.
CSS Animation
Tags: css, webdev
Published: 2021-03-01 07:45:25

Whatever you do on CSS, you have to understand the roots and focus on the basic knowledge.

# 1. Flying Birds
![Hau Trung Nguyen Developer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w2bazm5cqtfv1kb5esak.jpg)

[View CSS code](https://codepen.io/matchboxhero/pen/RLebOY?editors=1100)

# 2. Perspective Split Text Menu Animation
![Hau Trung Nguyen Developer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/03irvvec4z0u9t7a42ce.jpg)

[View CSS code](https://codepen.io/bosworthco/pen/RjBvgw)

# 3. Dragon Loading Animation
![Hau Trung Nguyen Developer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gju5bbv4hli6o9ummd4b.jpg)

[View CSS code](https://github.com/devyumao/dragon-loading)

# 4. Falling Snow
![Hau Trung Nguyen Developer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5qy524sc7oogoruf5ksp.jpg)

[View CSS code](https://codepen.io/matchboxhero/pen/JrLJeb?editors=1100)

# 5. Store Loading Animation

![Hau Trung Nguyen Developer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t26mbne84snwzeqwmzoi.jpg)

[View CSS code](https://codepen.io/marianab/pen/XPOQaR)
Netlify Drop - the easiest deployment ever
Tags: netlify, serverless
Published: 2021-03-01 07:42:02

Alright, so we now made a super cool [HTML starter with tailwind](https://daily-dev-tips.com/posts/plain-html-starter-with-tailwind-css/), but how can we host this somewhere online, so people can view it?

As you may know, this website is [hosted on Netlify](https://daily-dev-tips.com/posts/hosting-a-static-blog-on-netlify/), and I love it!
The website is hosted through Git push and [GitHub actions](https://daily-dev-tips.com/posts/deploy-eleventy-to-netlify-using-github-actions/).

But for this one, I wanted to try Netlify Drop, the simple drag n drop deployment.

## Preparing the website upload

Before we can deploy anything, we need to make sure our upload file is ready.

If you are using the demo project ([HTML Starter](https://daily-dev-tips.com/posts/plain-html-starter-with-tailwind-css/)), we'll be using the `src` directory as the contents we'll upload.

Before that, we need to make sure all the CSS is in place.

Run the following command to build all the assets.

```bash
npm run build
```

Now the files inside the `src` directory are up to date.

## Uploading a static website to Netlify

Now let's head over to [Netlify Drop](https://app.netlify.com/drop).

![Netlify drop interface](https://cdn.hashnode.com/res/hashnode/image/upload/v1614148795623/GpZL_B8Rs.png)

Now, drop the `src` folder on that field above.

![Upload on Netlify done](https://cdn.hashnode.com/res/hashnode/image/upload/v1614149025928/TbLCJQWLv.png)

And there we go, nothing fancy needed, just a simple drag n drop, and our website is up and running.

You can visit my website here: [HTML Tailwind starter hosted on Netlify](https://wonderful-brahmagupta-0a70c9.netlify.app/).

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Typescript Implicit vs Explicit types 
Published: 2021-03-01 07:25:40

The expression implicit used to refer to something done behind the scene, on the other hand, explicit refers to the manual approach of applying things. from here let's discuss implicit and explicit typing in Typescript.
Type is the value that is annotated to a variable and it's compiled in run time, this helps catches errors in an early stage.

Implicit type means that the type is automatically declared for a variable.
So instead of annotating types explicitly  
```typescript
let isTrue: boolean = true;  
```
we can let the compiler do it for us

```typescript
let isTrue= true;  

isTrue= 10;

//$ error: Type '10' is not assignable to type 'boolean'
```
Arrays and objects also can be implicitly typed 
```typescript
let typescriptArr = [1,2]
typescriptArr = ['X','Y']
//$ error: Type 'string' is not assignable to type 'number'.

let typescriptObj = {
userName : 'Ahmed',
age:25
}

typescriptObj.age = 'something'
//$ error: Type 'something' is not assignable to type 'number'.
```

notes: It's important to use descriptive names when using implicit type.

One more thing about implicit typing, variables declared without value are automatically assigned to type any and we can reassign it to any type.

 ```typescript
let anyVar;

anyVar = 'Some String'
anyVar = 10
```
this will not through any errors, but take into consideration that it's not a good practice and the Typescript community does not encourage the use of any  Implicitly  or Explicitly 

Finally, let's talk about **the pros of implicit typing**
**1- Flexibility:** this is one of the Typescript compiler strengths, unlike other strongly typed programming languages, we don't need to define the type for everything in our code.
**2- Less Time Consuming**: imagine refactoring a codebase with too much explicit typing, It'll take much time and efforts regarding the change of the time
Typescript - Tips & Tricks - any vs. unknown
Tags: typescript, webdev
Published: 2021-03-01 07:11:42

Hi guys, today I'll talk about the difference between _any_ and _unknown_.

**Any**
Any type is a particular type in typescript.
If you use this type, the compiler doesn't check your code, and the power is in your hands, but from great powers comes great responsibilities. In this case, the compiler doesn't check your code, but maybe your code could have bugs; these bugs will most likely be found by a user during his operations.

**Unknown**
Unknown type is another particular type in typescript, it's similar to _Any_ type but it helps us to prevent bugs at build time.
The unknown type helps us to force the check of its type before using it.

Now let's turn to some examples.

_Any Type_
```ts
let myAny: any = true
myAny.trim().reverse().split(',');
let myAnyNumeric: number = myAny;
const sum = myAnyNumeric + 3;
```
In this case, we can see a problem right away; in the second line, we try to call the trim method on a boolean type. This code at runtime throws an exception, but we need to run this code to detect this bug.
In the third line instead, I set a boolean type to a numeric type, and in the next line, I add three to this value.
Ok, I think you have understood the possible problems you could have if you overuse any type.

_Unkown Type_
```ts
let myUnknown: unknown = true;
myUnknown.trim(); // Property 'trim' does not exist on type 'unknown'.ts(2339)
let myAnyNumeric: number = myUnknown; // Type 'unknown' is not assignable to type 'number'.ts(2322)
if (typeof myUnknown === 'string') myUnknown.trim();
if (typeof myUnknown === "number") {
  let myAnyNumeric: number = myUnknown;
  const sum = myAnyNumeric + 3;
}
```
In this example, we can see the power of using unknown type instead of any type.
This type doesn't stop the compiler check but it helps us to check our type to prevent bugs at runtime.
Typescript understands what you want to do, and it indicates you the correct way to prevent bugs.

After this post, I think that from now on you will prefer to use _unknown_ instead of _any_ and I know the reason ;)

That's all!
Bye-bye guy!!
Validate a local Variable in Laravel Livewire.
Tags: laravel, livewire
Published: 2021-03-01 07:11:18

Laravel LiveWire is a phenomenal framework for Laravel. Using it for 1 hour makes you fall in love with it. I use nowadays for any project i am doing in Laravel. Anyways recently i had to validate a variable which was not a public one. 

for Public variables its straightforward you define 
```
protected $rules = []
``` 
or define 
```
protected function rules(){
    return []
} 
```
and then call $this->validate(). Simple. 

But my requirement was to validate a variable which i was getting on click call `(wire.click)`.

```
<a wire:click="changeStatus({{ $row->id }},4)">Mark as Approve</a>
``` 

little did i know Livewire does have solution for it as well for validating a local variable you do something like this 

```
 $validate = Validator::make(
            ['status' => $status], // here you assign value for validation
            ['status' => 'required|integer|min:1|max:2'],
            ['required' => 'The :attribute field is required'],
        )->validate();
```
This is my complete code if you interested. 

```
public function changeStatus($id, $status){
        $request = PayoutRequest::find($id);

        $validate = Validator::make(
            ['status' => $status],
            ['status' => 'required|integer|min:1|max:2'],
            ['required' => 'The :attribute field is required'],
        )->validate();

        $request->status = $status;
        $request->save();
        session()->flash('status', "Status has been updated.");
    }
```

hope this will help someone save some time.
Journey out of Avolition
Tags: neurodiversity, mentalhealth, mindinnumbers
Published: 2021-03-01 06:49:41

---
title: Journey out of Avolition
published: true
description: 
tags: neurodiversity, mentalhealth, mindinnumbers, 
//cover_image: https://direct_url_to_image.jpg
---

I have this schizophrenia thing and it means there are times when I do not get any will, energy, motivation, spark or initiative, not an inkling of one, to get myself to enjoy and put action into my hobbies, works, art, music...
It could be related to flat affect and lack of enjoyment. 
It seems to be related to how much I get myself going by Starting Up with a morning routine, but there seem to be other factors.
So I am determined to find a route out of it.

So of course putting together a grand plan, I think writing a blog every morning and then moving into the 1000 words-per-day mark. That does not seem too daunting, as a 1000 words are only three pages in a book!

I am already fantasizing about the potential for a 100 days of blogging hashtag and a 100 day streak sticker... 
That does seem too big to comprehend in one go.
If I can do it, it would be soooo amazing an achievement.

Everything seems to be against it. Especially the avolition part in my life.

Not only that! It is not the only project that I am getting myself into.

There is the undercurrent of peace games. That is always undergoing. I also make board games.

AND now I am getting into the Journey I wanted to talk about...

I got into a conference call with Vivienne Ming and I got the inspiration to start looking for other people who have schizophrenia and want to research their condition with machine learning.

Because I am not great at finding people for any group I need to find a person who is interested and hopefully is an extrovert. That could lead us to get data from regular questionnaire filling to the gather data.

If you know of anyone who might fit this role drop me a note.

I am hoping that Vivienne Ming, PhD, would study the data that this potential group would gather.