teleren/devto huggingface dataset:
How to make a Cypress test for prefers-color-scheme: dark
Tags: darkmode, cypress, testing
Published: 2021-12-19 16:48:07

---
title: How to make a Cypress test for prefers-color-scheme: dark
published: true
date: 2021-12-19 16:42:32 UTC
tags: darkmode,cypress,testing
canonical_url: https://relatablecode.com/how-to-make-a-cypress-test-for-prefers-color-scheme-dark/
---

![Darkmode](https://cdn-images-1.medium.com/max/1024/1*OSoCoERmRKSY9plRyBQlhA.jpeg)
_Photo by Terry Vlisidis on Unsplash_

Taking into account the user’s preferences before the page loads are becoming more important every day to deliver the best possible experience out-of-the-box. One such option is the CSS [media feature](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) of prefers-color-scheme. This can be set up through the operating system or user agent setting.

The following is an example of how to set up dark mode through CSS:

![css dark mode](https://cdn-images-1.medium.com/max/924/0*UmghPgAX-35EuM6X)

As an aside I also have an article on how to quickly set up dark mode with the use of CSS variables in React, check it out [here](https://relatablecode.com/how-to-easily-add-dark-mode-to-a-react-app/).

### Cypress Test

[Cypress](https://www.cypress.io/) is a testing framework that makes it super easy and fun to develop end-to-end tests! Cypress offers a function to set up variables before the page loads! We can use this to set up the preference for dark mode ahead of time.

![Cypress test for dark mode](https://cdn-images-1.medium.com/max/1024/0*6tOjBSJl8DKtx7UE)

Using the onBeforeLoad function when we visit the root page we can alter what happens when we interact with the matchMedia function. [matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) is a method on the window object that can check if the color scheme is dark. In my app I use a hook to check exactly this when applying dark mode, as its set to a variable in my global store:

![Hook to set dark mode](https://cdn-images-1.medium.com/max/1024/0*ZwBJEy1D6PKUcn3N)

Neat! Alright, the following parts of the Cypress test can directly look at the different CSS properties of the page to make sure everything is being applied correctly:

![Additional testing for CSS properties](https://cdn-images-1.medium.com/max/1024/0*EpK0PKdTWB2eEZTf)

As an example, the app is the overall wrapper of my app. Gave it a data-testid and then I test for the color of my dark mode. This can be done several times over for all the different types of dark mode properties that are being set!

And that’s it! If you have any questions or any other preferred methods of testing out dark mode let me know in the comments below!

More content at [Relatable Code](https://relatablecode.com/)

_Originally published at_ [_https://relatablecode.com_](https://relatablecode.com/how-to-make-a-cypress-test-for-prefers-color-scheme-dark/) _on December 19, 2021._
How to Style a Checkbox using CSS
Tags: webdev, beginners, tutorial, css
Published: 2021-12-19 16:42:12

![How to Style a Checkbox using CSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xmj027xwr34wxumi4qqf.jpg)CSS checkbox is used to choose various options from a list of options at a time. Usually, the checkbox is square with a place inside the box. When the user clicks on the box place then it is said to use is selected. The checkbox is the most excellent option for when someone decides on more than one option from the given list of choices then this will be the most suitable option but in the case of a radio button, we can choose only one radio button at a time.

**Example:** Let suppose in an exercise, the specific question commonly has 4 options. In that more question if more than 2 options are correct. We can select them together. But If we take the usual radio button we can select only 1 option at a time but that is not the case. We have to select more than 2 options at a time so we need to used the checkbox to achieve our requirements.

##Types of Checkboxes
1.Default checkboxes
2.Custom checkboxes

##Default checkboxes

The default checkbox is not required to add any additional styles. CSS libraries by default provided with some styles for this checkbox.
```HTML
<form action="cart.php">
<label>Have a bike?<br></label>
<input type="checkbox" name="bike">
<input type="submit" value="Submit">
</form>
```
##Custom Checkboxes

This Custom checkbox must require adding additional styles because these are user-required checkboxes so based on their requirement, they have to provide CSS styles.

```HTML
<h1>Custom Checkboxes</h1>
<p>CSS Stands for?</p>
<label class="container">Cascading Style Sheet
  <input type="checkbox" checked="checked">
  <span class="checkmark"></span>
</label>
<style>
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}
.container:hover input ~ .checkmark {
  background-color: hotpink;
}
.container input:checked ~ .checkmark {
  background-color: #2ef6F3;
}
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.container input:checked ~ .checkmark:after {
  display: block;
}
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
</style>
```
I have shared this post from [How to style a checkbox using CSS](https://softcodeon.com/css/how-to-style-a-checkbox-using-css.htm)
, You can read the details from there.

If you have any question please discuss below. Help to improve things for others. Thank you.
What Flex layout? Difference Flex and Grid layout?
Published: 2021-12-19 16:41:33

Flex layout stands for the flexible box. It gives a  way to control layouts, align items within them, and give out spaces among the items in responsive conditions.

**Flex**
- One dimensional
- Content first
- Being one-dimensional flex deals with only columns or rows.

**Grid**
- Two dimensional
- Layout first
- Being two-dimensional grid deals with both columns and rows.
Using Selectors & Combinators
Tags: id, selector
Published: 2021-12-19 16:39:58

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1xbcpuya5voei5hwaqbb.png)
بطور مشترک روی همه ی 
pها
اثر میزاره
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7svjafsbz41kmb8efrrr.png)

```html
    <header>
      <h1>My Upcoming Challenges</h1>
      <p id="description">These are my goals for the next days</p>
      <a href="index.html">View Today's Challenge</a>
    </header>
```
`id="description"`

```css
#description {
    margin-bottom: 36px;
}
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gq9twmswrf3myskkn7t8.png)
 

exactly the same result (**without the ID**):
```css
header p {
  margin-bottom: 36px;
}
```

## change all paragraph(p) in main section 

```html
<main>
      <ol>
        <li>
          <h2>Tuesday, April 2nd</h2>
          <p>Repeat what I learned about HTML & CSS</p>
        </li>
        <li>
          <h2>Wednesday, April 3rd</h2>
          <p>Do the exercises on HTML & CSS</p>
        </li>
        <li>
          <h2>Thursday, April 4th</h2>
          <p>Dive deeper into HTML & CSS and build more complex websites</p>
        </li>
        <li>
          <h2>Friday, April 5th</h2>
          <p>Practice advanced HTML & CSS concepts</p>
        </li>
      </ol>
    </main>
```

```css
main p {
    margin: 12px;
    color: rgb(71, 29, 22);
}
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l28kb4jwqnumv4s8dpmb.png)
CSS Box Model & Media Query Explained!
Published: 2021-12-19 16:36:53

**> CSS Box Model:**
When HTML elements are treated as a box, there are special benefits to web page design. This is a very convenient method to design the layout of any web page in particular. The CSS box model is the combined position of borders, margins, padding, and elements or content around HTML elements. Box model properties define border, margin, padding, or outline around any content.

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

**Parts of CSS Box Model:**
Margin - The margin is defined as the space around the border. No color can be used on the surface or background of the margin, it is completely transparent.
Border - The border is located around the content padding, that is, between the margins and the padding. The color of the surface or background influences the border.
Padding - The space around the content is determined using padding. No color can be used on the padding surface or background, it is completely transparent.
Content Itself- Any content in the box model is text, images, etc., which are displayed on the web page.

With CSS, when we define the width and height of an HTML element, we actually define the full width and height for only the content, such as - an image, a paragraph, etc. But in order to display any content beautifully on a web page, you must determine the padding, borders and margins.

**> Explanation of CSS Media Query:**
Media query is a method integrated with version 3.0 of CSS that makes it easy to make any web page responsive. Run or execute CSS style codes within the media query only if certain conditions are true.
The @media property is used to access CSS media queries. The width of the HTML elements is usually defined for different devices and a certain number of CSS style codes are specified for all devices of that width. 

There is an example below, where CSS's @media property has been used. Normally the color of the surface or background is blue, but when the browser window is 600px or less, the color of the surface or background will be light blue.

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

A web page should be designed for a mobile or smartphone device before it is designed to be responsive to the desktop screen, so that the web page loads or appears faster on smaller screens like mobile.
What are Custom stores?
Tags: svelte, javascript, beginners
Published: 2021-12-19 16:25:25

## What are Custom stores?

Typically in a store (Writable), there are three methods:

1. subscribe()
2. set()
3. update()

As long as we implemented the subscribe() method, the javascript object is a store.

A store provides reactive data that can change over time. What if we want to create stores that restrict updates? It makes sense on large web/mobile applications, where we put restrictions on other components to overwrite the store variables.  In other words, we allow store variables to update within the store only.

To create a custom store:

1. Create a writable store in a function
2. Return subscribe() function on an object.

Let's assume we have a shopping cart, and we need to add or remove items from there. In this example, we only increase or decrease the count of the cart. We start with a simple prototype and then move to more complicated in the upcoming articles.

Create a new file `shoppingcart.js` under the `src` directory.

```javascript
import { writable } from 'svelte/store';

function addOrRemoveCartItems() {
    const { subscribe, set, update } = writable(0);

    return {
        subscribe,
        add: () => { update(n => n + 1) },
        // Shopping Cart doesnot contain Negative Items
        remove: () => { update(n => n <= 0 ? 0 : n - 1 ) },
        resetCart: () => { set(0) }
    };
}

export const items = addOrRemoveCartItems();
```

And in the `App.svelte`

```javascript
<script>

    import { items } from "./shoppingcart";

</script>

<main>
    <p> Custom Store Example. </p>

    <h1> Total Cart Items { $items }</h1>

    <button on:click={ items.add }> Add to Cart </button>
    <button on:click={ items.remove }> Remove from Cart </button>
    <button on:click={ items.resetCart }> Remove All Items </button>

</main>

<style>
	main {
		text-align: center;
		padding: 1em;
		max-width: 240px;
		margin: 0 auto;
	}


	@media (min-width: 640px) {
		main {
			max-width: none;
		}
	}
</style>

```


Refresh the page and it'll look like this

![img](https://ashutosh.dev/content/images/2021/12/ezgif-3-2ccc84bcf921-1.gif)

In this article, we learn about custom stores. See you in the upcoming articles.
display 'none' vs visibility 'hidden'
Published: 2021-12-19 16:25:06

_**What are the difference between display ‘none’ and visibility ‘hidden’?**_
Using the attribute “visibility: hidden” for an HTML element will be hidden from the webpage but still, take up space. Using the attribute “display: none” for an HTML element will be hidden, and also it won’t take up any space on the webpage.

Remember it:

```
display: none;
```
and

```
visibility: hidden;
```
What is Amazon Aurora and How it's Work?
Tags: aws, aurora, overview, tutorial
Published: 2021-12-19 16:24:40

## What is Amazon Aurora?
Amazon Aurora is a MySQL and PostgreSQL-compatible relational database built for the cloud, that combines the performance and availability of traditional enterprise databases with the simplicity and cost-effectiveness of open source databases.

Amazon Aurora is up to five times faster than standard MySQL databases and three times faster than standard PostgreSQL databases. Amazon Aurora is fully managed by Amazon Relational Database Service (RDS), which automates time-consuming administration tasks like hardware provisioning, database setup, patching, and backups.

Amazon Aurora features a distributed, fault-tolerant, self-healing storage system that auto-scales up to 128TB per database instance. It delivers high performance and availability with up to 15 low-latency read replicas, point-in-time recovery, continuous backup to Amazon S3, and replication across three Availability Zones (AZs).


`Here is the full tutorial video (Overview + Demo) based on AWS Aurora👇👇`
[![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k7409nxxsepgemfiye4h.png)](https://www.youtube.com/watch?v=FIa7BfqYVu8)

## Features of Amazon Aurora

- Scalability
- High throughput
- Instance monitoring and repair
- Encryption
- Easy to use
- Cost-effective
- Migration support
- Fully Managed

## Amazon Aurora DB Cluster
Amazon Aurora DB cluster is a virtual database storage volume that spans multiple availability zones. Each Amazon Aurora Database Cluster is made up of two or more DB instances and a cluster volume that primarily manages the data for those DB instances. The following are the two types of DB instances that make up an Amazon Aurora Cluster: 

### Primary DB instance
: This type of DB instance supports read and write operations and performs all data modifications to the cluster volume. Each Aurora DB cluster has one primary DB instance. 

### Aurora Replica
: Unlike the primary DB instance, Aurora Replica only supports read operations. It is connected to the same storage volume as the primary DB instance. By locating Aurora Replicas in separate availability zones, high availability can be maintained.

## Amazon Aurora Pricing
Amazon Aurora is paying as you go. It is comprised of 3 parts:

Hosting. You can choose from 3 different types of hosting depending on your needs
Storage and Operations. Storage is billed per gigabyte per month, and I/O is billed per million-request
Data transferred


---

▬▬▬▬▬▬ WANT TO LEARN MORE? ▬▬▬▬▬▬
Full Terraform tutorial ► [https://bit.ly/2GwK8V2](https://bit.ly/2GwK8V2)
DevOps Tools, like Ansible ► [https://bit.ly/3iASHuP](https://bit.ly/3iASHuP)
Docker Tutorial ► [https://bit.ly/3iAT9Jx](https://bit.ly/3iAT9Jx)
AWS Tutorial ► [https://bit.ly/3iAT9Jx](https://bit.ly/3iAT9Jx)
GCP Tutorial ► [https://bit.ly/3mwh412](https://bit.ly/3mwh412)
Jenkins Tutorials ► [https://bit.ly/3iHnfv4]
Code Smell 111 - Modifying Collections While Traversing
Tags: oop, programming, cleancode, codesmell
Published: 2021-12-19 16:21:23

*Changing a collection while traversing might lead to unexpected errors*

> TL;DR: Do not modify collections while traversing them

# Problems

- Unexpected Results 

- Concurrency problems

# Solutions

1. Avoid altering the collections 

2. Make collection copies

# Context

We over-optimize our solutions with the prejudice that copying collections is expensive. 

This is not true for small and medium-size collections. 

Languages iterate collections in many different ways. 

Modifying them is generally not safe.

# Sample Code

## Wrong

[Gist Url]: # (https://gist.github.com/mcsee/9d66e179c57495aa7c2080ee34152c11)
```java
Collection<Integer> people = new ArrayList<>();
//here we add elements to the collection...
  
for (Object person : people) {
    if (condition(person)) {
        people.remove(person);
    }
}
//We iterate AND remove elements 
```

## Right

[Gist Url]: # (https://gist.github.com/mcsee/18369eb8798462ef04372be56827c9d6)
```java
Collection<Integer> people = new ArrayList<>();
//here we add elements to the collection...

List<Object> iterationPeople = ImmutableList.copyOf(people);
    
for (Object person : iterationPeople) {
    if (condition(person)) {
        people.remove(person);
    }
}
//We iterate a copy and remove from original

coll.removeIf(currentIndex -> currentIndex == 5);
//Or use language tools (if available)
```

# Detection

[X] Semi Automatic 

Many languages provide control both in compile and run time-

# Tags

- Fail Fast

# Conclusion

This is something we learn in our first courses.

It happens a lot in the industry and real-world software

# Relations

{% post https://dev.to/mcsee/code-smell-53-explicit-iteration-40hl %}

# More Info

- [Stack Overflow](https://stackoverflow.com/questions/223918/iterating-through-a-collection-avoiding-concurrentmodificationexception-when-re)

# Credits

Photo by <a href="https://unsplash.com/@agent_illustrateur">Christine Roy</a> on <a href="https://unsplash.com/s/photos/travel">Unsplash</a>
  
* * *

Bugs are bugs. You write code with bugs because you do. If it’s a safe language in the sense of run-time safe, the operating system crashes instead of doing a buffer overflow in a way that’s exploitable.

_Ken Thompson_
 
{% post https://dev.to/mcsee/software-engineering-great-quotes-26ci %}

* * *

This article is part of the CodeSmell Series.

{% post https://dev.to/mcsee/how-to-find-the-stinky-parts-of-your-code-1dbc %}
মাত্র ২ টি CSS Class দিয়ে Card এ Hover করলে Text দেখানো যায় যেভাবে!
Tags: css, bootstrap, html
Published: 2021-12-19 16:17:43

এই ব্লগে আমি দেখাবো কিভাবে একটা bootstrap card image এর উপর hover করলে text দেখায়। এটা খুবই পপুলার এবং সহজ একটি কাজ।

প্রথমেই ২ টা div নিতে হবে। প্রথম div এ থাকবে image, আর দ্বিতীয় div এ থাকবে text. এখন যদি text যে div টায় আছে তার position: absolute এবং top: 0 করে দেই তাহলে এই text এর লেখাটা নিজের জায়গা থেকে উঠে image এর উপর গিয়ে বসে যাবে। প্রাথমিক অবস্থায় text দেখা যাবে না, তাই card-text এর display: none করে দিতে হবে।

যেহেতু card এ hover করলে card-text দেখাবে তাই .card:hover করলে .card-text এর display: block করে দিতে হবে।

এই টুকু করলেই আমাদের কাজ শেষ। এরপর বাকী কাজ টুকু ডিজাইন অনুযায়ী কাস্টোমাইজ করে নিতে হবে।

এতক্ষণ যা বললাম তার Demo দেখতে এই লিঙ্কে ক্লিক করুনঃ https://codesandbox.io/s/beautiful-hellman-gcwho
How to Get Grammarly Premium Free Trial – Pricing, Codes, Discounts 2022

Published: 2021-12-19 16:11:26

Grammarly is one of the most popular and reputed writing tools that supports users to check their grammar and enhance their writing skills. People who have taken writing as their profession eg. Bloggers, content writers, social media marketers cannot avoid Grammarly. If you want to deliver a mistake-free content then Grammarly is the only choice.

Grammarly comes with two versions where the basic version is completely free to access and the grammarly premium is the advanced version of the basic one. Grammarly premium has extraordinary features when compared to the basic version and grammarly premium is quite chargeable. In this article we will find ways on how to [get grammarly premium free trial](https://www.wellonus.com/grammarly-premium-free-trial). Before we get into the procedure we need to know what grammarly premium holds in its basket for its users.
23rd weekly post, server implementation. Also, Pari.
Published: 2021-12-19 16:06:13

## Items of the week

- **Webpack** - when using the dev server, we can visit the `/webpack-dev-server` route to access a list of all the files being served, this is mentioned as [a tip on the official documentation page](https://webpack.js.org/configuration/dev-server/#devserver).

- **HTTP/2** - just because a server speaks the protocol doesn't mean the underlying implementation is correct and given that HTTP/2 clients rely more on the server compared to older versions of HTTP, the impact might be worse. Got that from chapter 13 of [High Performance Browser Networking](https://www.goodreads.com/book/show/17985198-high-performance-browser-networking).

- **On the week 50 of 2021**, we saw a demo from Dell on Concept Pari - a magnetic webcam that can be attached to anywhere on a monitor screen, allowing video call participants to have eye contacts, or at least virtually. [The demo was covered by Ars Technica with some comparison on Dell's previous webcam designs](https://arstechnica.com/gadgets/2021/12/dells-magnetic-wireless-webcam-might-help-you-forget-about-that-infamous-nose-cam/).

This is a weekly bite-sized post on web app development from JavaScript to UX and technology in general. Thank you for reading and have a nice day!
Recipes for Success
Tags: programming
Published: 2022-01-31 18:04:56

---
title: Recipes for Success
published: true
date: 2021-12-19 16:06:00 UTC
tags: #programming
canonical_url: http://oldmrcrankypants.blogspot.com/2021/12/recipes-for-success.html
---

There are multiple recipes for success in technology, and like chefs, they vary from place to place and person to person.

What works for one person won't for another, without some adjustments.

In many ways the Local Sourcing movement changed the ways in which cuisine was made, gone in some places were the Special of the Day (to go on a tangent that was often a way for kitchen's to get rid of stock that was getting old) to be replaced with a full seasonal menu.  Just like companies that use different technologies in different ways so the environment is different in what a Developer, Tester, or Manager needs to know in order to stay current or be ready to make the next step.

Recipes handed down in a family are based on a point in time where ingredients were local and available, some at only certain times of year so they were "in Fall we had" or "on this holiday my grandmother made...".  When shipping became more immediate and being able to send produce and meats long distances with a relative amount of freshness so more ingredients became available in wider times.  That removed the specialness of certain things that could only be found at certain times of the year, and how foodies looked only for certain ingredients at certain times because only THEN were they tasty.

Technology evolves but in companies with established practices there are certain things that remain in a specific way with people having to learn how to use that version of a software with another.  Change comes slow, and with new versions of Java, Python, and dare I say Perl (though who even uses that anymore...) at times you need to adjust how software is built and when bringing build recipes current there are adjustments that need to be made.  Some easy, some not.  Some complex, some not.  In the end its the result you want, and like a tasty dish, you want the build to be complete, whole, and workable.

Correlations are fun, and there is more to be done with cooking (a fave of mine) and software, but more on that later.  I have a special dish I need to get ready for....