teleren/devto huggingface dataset:
Sass(SCSS) @mixin, @extend
Tags: sass, scss, css
Published: 2021-11-26 14:59:46

# @mixin
Mixin allows you to <em><strong>define style that can be re-used</strong></em> throughout your stylesheet.
(They make it easy to avoid using non-semantic classes like .float-left, and to distribute collections of styles in libraries.)
###How to use @mixin
```scss
@mixin name{ ... }  //create
@include name(arguments..)  //use
```

You can make a file and import or can declare mixin in the file you are working. If you'd like to make multiple mixin and use, create _mixins.scss to manage.

<strong>Using @mixin</strong>
```scss
// SCSS

@mixin center-xy{
	display: flex;
	justify-content : center;
	align-items : center;
}

// You can used @mixin center-xy like below, It's done by one line because of @mixin

.card{
	@include center-xy; 
}

.aside{
	@include center-xy; 
}
```
**But putting all the code inside one @mixin isn't a good way of using it. You should add related styles in @mixin so that you can make more reusable set.

#Arguments
@mixin can take arguments after its name. It allows their behavior to be customised when they are called.
<strong>SCSS</strong>
```scss
//SCSS
@mixin image-style($ul, $size, $repeat, $positionX, $positionY) {
  background-image: url($ul);
  background-size: $size;
  background-repeat: $repeat;
  background-position: $positionX $positionY;
} 
//background related code.
//You can style element differently depending 
 arguments of mixin.

.profile {
  @include image-style("./assets/user.jpg", cover, no-repeat, center, center);
}

.box-one {
  @include image-style(url("/images/poster1.svg"), cover, no-repeat, 40%, 50%);
}
```
<strong>CSS</strong>
```css
/* CSS */
.profile {
  background-image: url("./assets/user.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.box-one {
  background-image: url(url("/images/poster1.svg"));
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 40% 50%;
}
```

##Setting default value
```scss
// SCSS
// $positionX, $positionY  have default value now. If they don't receive value, it takes default value.
@mixin image-style($ul, $size, $repeat, $positionX : 50%, $positionY : 50%) {
  background-image: url($ul);
  background-size: $size;
  background-repeat: $repeat;
  background-position: $positionX $positionY;
}

.profile {
  @include image-style("./assets/user.jpg", cover, no-repeat);
}
```
```css
/* CSS */
.profile {
  background-image: url("./assets/user.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

// profile and .box-one are not related elements but because they have similar styles related to background, you can make @mixin about the background and use them to each elements instead of repeating code.
```

```
Grab your first Internship
Tags: career, beginners, webdev
Published: 2021-11-26 14:43:22

1. Start Applying Early
2. Use Your Network Effectively
3. Connect with Real People
4. Stand Out with your Portfolio
5. Prepare for the Technical Interview
6. Track Everything

### Let's connect 💜

You can follow me on [Twitter](https://twitter.com/MrDanishSaleem), [Instagram](https://www.instagram.com/mrdanishsaleem/) & [GitHub](https://github.com/mrdanishsaleem/)

If you like this post. Kindly support me by [Buying Me a Coffee](https://www.buymeacoffee.com/mrdanishsaleem)

![Buy Me a Coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fefzbxbnwww7tkght33w.png)
Sharing code in Ansible Collections
Tags: ansible, automation, ansiblecollections
Published: 2021-11-26 14:00:56

Any Ansible Collection of non-trivial size will eventually have to deal with shared code. One option is to copy-paste the code all around, but let us not go there, OK? So, we need a place to store shared code. 

For Ansible modules, things are straightforward: any shared code goes into the `plugins/module_utils` directory. Other types of Ansible plugins can also use code from the `module_utils` directory. But because of some technical details that we will not go into today, not all shared code can live there. At least not without sanity tests yelling at us, that is ;) 

So, where should non-module shared code go then? There used to be no official directory for it. However, this all changed when the `plugins/plugin_utils` became the official location for shared plugin code. 

So now you know. And if you want more information, you can find it [here] (https://github.com/ansible-collections/overview/blob/main/collection_requirements.rst#modules-plugins). Or ping us, we’re happy to help.
C/C++ Lint Action | clang-format & clang-tidy
Tags: actionshackathon21, opensource, githubactions, clangformat
Published: 2021-11-26 13:49:33

### My Workflow

A Github Action for linting C/C++ code integrating clang-tidy and clang-format to collect feedback provided in the form of thread comments and/or annotations.

### Submission Category: 

Maintainer Must-Haves


### Yaml File or Link to Code
{% github cpp-linter/cpp-linter-action %}

[cpp-linter.yml](https://github.com/cpp-linter/cpp-linter-action/blob/master/.github/workflows/cpp-linter.yml)
```yml
name: cpp-linter

on:
  pull_request:
    types: [opened, reopened]  # let PR-synchronize events be handled by push events
  push:

jobs:
  cpp-linter:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: cpp-linter/cpp-linter-action@v2
        id: linter
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        with:
          style: file

      - name: Fail fast?!
        if: steps.linter.outputs.checks-failed > 0
        run: |
          echo "Some files failed the linting checks!"
        # for actual deployment
        # run: exit 1
```

### Additional Resources / Info

https://cpp-linter.github.io/cpp-linter-action/

### Example

Annotations

![annotations-clang-format](https://github.com/shenxianpeng/cpp-linter-action/raw/master/docs/images/annotations-clang-format.png)

![annotations-clang-tidy](https://github.com/shenxianpeng/cpp-linter-action/raw/master/docs/images/annotations-clang-tidy.png)

Thread Comment

![Thread Comment](https://github.com/cpp-linter/cpp-linter-action/raw/master/docs/images/comment.png)
My Experience going through Scrimba's Javascript Course
Published: 2021-11-26 13:47:40

**Hello everyone,** 

I have recently completed this course on the 22nd November 2021, it took me about 2 weeks to complete this course as I was working and trying to make time to learn.

######What I like about this course :
1. You will do the coding and not just a follow along course.
2. It forces you to do research on google , example : How to store arrays in LocalStorage , save it and retrieve it.
3. After each project that you built, you'll get a Practice Exercise on the concepts that you've just learnt. 

######What can be improved for this course? 
1. The only thing I will like to see is more hands-on coding for the students. 

######What did I learnt from this course?
**First Project - Building a Passenger App**
*Concepts*
1. Basic mathematical operations in JS
2. Onclick event listener 
`<button id="save-tab" onclick="save()"></button>`
3. Writing a function that logs out the sum
4. The DOM - Using Javascript to modify the website
5. Using Innertext to display the Count
6. First String Variable
7. Using += 
8. Debugging Online - Use TextContent

**Second Project - BlackJack Game**
*Concepts*
1. If Else Conditional 
2. Boolean Conditions - True/False
3. Intro to Arrays 
4. For Loop
5. Push/Pop Method 
6. Math.random() - get random number
7. The Logical And operator - checking if 
8. Objects - store data
9. Method on Objects

**Final Project - Chrome Extension**
*Concepts*
1. Const 
2. addEventListener()
3. innerHTML 
4. input.value
5. function parameters - parameters only exist inside function
6. template strings 
7. LocalStorage
8. JSON Object
9. Objects in Array

Thank you for the free course and this is for me to refer back whenever I need to.

*Best Regards,
Guo Jing*
Autotab To Next Input Field JQuery Example
Tags: javascript, jquery, php, beginners
Published: 2021-11-26 13:45:46

n this example I will give you example of autotab to next input field jquery or move cursor to next input jquery when maxlength is reached, some time we have requirement to restrict user to add more character than set limit at that we can use autotab to next input field javascript.

Here, I will give you jquery autotab to next input field when fill 1 character jQuery or move cursor to next input jquery or javascript focus next input

 
```
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
input { 
width: 25px; margin: 5px; height:25px;  
}
</style>

</head>
<body>

<input class="inputs" type="text" maxlength="1" />
<input class="inputs" type="text" maxlength="1" />
<input class="inputs" type="text" maxlength="1" />
<input class="inputs" type="text" maxlength="1" />
<input class="inputs" type="text" maxlength="1" />
<input class="inputs" type="text" maxlength="1" />
<script>
$(".inputs").keyup(function () {
    if (this.value.length == this.maxLength) {
      $(this).next('.inputs').focus();
    }
});
</script>
</body>
</html>
```
 
---

You might also like :

- **_[Read Also : CRUD Operation In PHP](https://techsolutionstuff.com/post/crud-operation-in-php)_**

- **_[Read Also : How To Check RAM And CPU Usage In Laravel](https://techsolutionstuff.com/post/how-to-check-ram-and-cpu-usage-in-laravel)_**

- **_[Read Also : How To Check Email Already Exist Or Not In Laravel](https://techsolutionstuff.com/post/how-to-check-email-already-exist-or-not-in-laravel)_**
How Fluent Interface Design Pattern extends capability of Java record
Tags: java, designpattern, record, fluentbuilder
Published: 2021-11-26 13:31:32

In this short post, I do not intend to make a comparison between using the `record` in Java 17 and `Lombok`, but since nowadays the use of `record` is controversial, I think it is good to have a look at how to use it with builder pattern although inherently lacks this feature.

Suppose we are going to define an address using `record`. Depending on the number of required fields, your `record` will have a sequence of parameters in its constructor. So using `new` do you instantiate your address with large number of parameters and face with the code bloating or do you have another thought to increase the code readability?

In the absence of `Lombok`, it is internally possible to reinforce constructing capability of the record adding a real **Fluent Builder pattern**.

First, it is supposed to define some interfaces:

```
public interface Country<T> 
    T country(String T);
}

public interface City<T> 
    T city(String T);
}

public interface Street<T> {
    T street(String T);
}

public interface Building<T> {
    T building(String T);
}

public interface Flat<T> {
    T flat(String T);
}

public interface PostalCode<T> {
    T postalCode (String T);
}

public interface Build<T> {
    T build();
}
```
Then we implement our customized record:

```
public record Address(String country, String city, String street , String building , String flat, String postalCode)
{
    public static Country<City<Street<Building<Flat<PostalCode<Build<Address>>>>>>>

    builder() {
        return (country) ->
               (city) ->
               (street) ->
               (building) ->
               (flat) ->
               (postalCode) ->
               () -> new Address(country,city,street,building,flat,postalCode);
    }
}
```

Great! Just assign values to our implementation:

```
Address.builder()
    .country(“Russia”)
    .city(“St.Petersburg”)
    .street(“Kolomenskaya")
    .building(“12a”)
    .flat(“234”)
    .postalCode(“200567”).
    build();
```
## Recap
Even if using Java 17 new language features, many developers still prefer to use `class` instead of `record` as this asset inherently lacks using builder now. However, I think it perhaps a good idea to implement constructor for record called by the builder. In this short post I attempted to show how it is possible to use this ability!
Reversing a string but word wise! using char array. No string library.
Tags: programming, algorithms, cpp, beginners
Published: 2021-11-26 13:31:15

* Input: **Reverse this word**                 
* Output: **word this Reverse**
```
#include <iostream>
#include<cstring>
using namespace std;

void reverseStringWordWise(char input[]) {
    // Write your code here
    int sp = strlen(input);
    int o_size = sp;
     char output[sp];
    int p = sp;
    int j = sp-1;
    int i=0;
    while(j>=0 || j==-1) // Since the first word will not have any space before it So it wont count
    {
        
        if(input[j]==' ' ||j==-1)
        {
            for(int k = j+1; k<p;k++) // j gets iterated from -1 to 0. Thus giving the frist word upto the the last space traced.
            {
                output[i++] = input[k];
            }
             p = j;
             j--;
            
            output[i++] = ' ';
        }
        else
        {
            j--;
        }
        
    }
  for(int l=0;l<sp;l++)
  {
      input[l] = output[l];
  }
}


int main() {
    char input[1000];
    cin.getline(input, 1000);
    reverseStringWordWise(input);
    cout << input << endl;
}
```
Smarttechpros
Published: 2021-11-26 13:27:23

Who We Are
Smarttechpros, explore the world.

Smarttechpros was born in 2020 from the desire to decipher innovations, technologies, and news from updated information to transfer them to all the necessary keys in a world in constant change.

When mistrust is at the forefront, and the flow of information becomes increasingly complex, Smarttechpros is committed today and more than yesterday to decipher the great news and innovations in five categories: Science, Technology, Planet, Health, Home.

 Our Mission
Promote the development of a critical mind and assist all citizens in their search for truth. Smarttechpros wants to relay the correct information with the only compass in technology.

 Our Passion
Explore the world at Quark scale at the heart of AI in the privacy of the latest connected technology, from the forefront of renewables, IoT, AI, or millions of light-years away.

Know More @ https://www.smarttechpros.com/
Flutter and Dart beginner to Study together ; )
Tags: flutter, dart, discuss, beginners
Published: 2021-11-26 13:20:28

I began to learn dart and flutter mobile development, I thought it will be better if I had Someone to learn with me, help me and study together , we can also build some projects after we learn some basics . Anyone there to study together ? 
If so , tell me in the comments below !

If someone has good resource to learn from , also tell me in the comments. 

Note : I don't study more than once a week (but sometimes I do more), because I have alot of school work these days as I am a preparatory 3 student and my exams drew near. 

Go to see some of my posts (written totally be me) and encourage me to write more by following me , react and comment.

Thanks for reading 💜💜💜 !

My blog : https://codewithrona.blogspot.com/
How to Create NFT Preview card with HTML CSS
Tags: css, tutorial, webdev, beginners
Published: 2021-11-26 13:15:29

{% youtube dyf3aLZ7Dyo %}

How to create nft preview card using only html and css.

---

HI 👋
I'm Sadee (webdev)
In this channel I make videos about Complete Responsive website.
You can checkout my channel 👇

📺 My Channel : [codewithsadee](https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g)
🔔 Subscribe : [subscribe now](https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g?sub_confirmation=1)
🕐 New videos Every Friday & Tuesday

---

🔗 Essential links
-----------------------------
[All Images](https://drive.google.com/file/d/15oZdeoaPOLzARmjAqWloneGji9dohbyg/view?usp=sharing)
[Font - Outfit](https://fonts.google.com/specimen/Outfit)
[Source Code](https://www.patreon.com/codewithsadee)
[Github Repo](https://github.com/codewithsadee/nft-preview-card-component)

---

📹 Others Videos
-----------------------------
[Loopstudios Landing Page](https://youtu.be/lDHspzUov88)
[Clipboard Landing Page](https://youtu.be/ATRQj60Q3S0)
[Personal Portfolio Website](https://youtube.com/playlist?list=PLasZMtSCguZbYYb7uzDMAC0rg49A8XOsS)
[Toggle Button with 3d Effect](https://youtu.be/OpbbPLPqSDc)
[Awesome Card Design for Website](https://youtu.be/g9VdvKx8fuM)

---

💜 Like - Follow & Subscribe Me
-----------------------------
Twitter : https://twitter.com/codewithsadee
Github : https://github.com/codewithsadee
YouTube : [codewithsadee](https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g)
Buy Me A Coffee : https://www.buymeacoffee.com/codewithsadee
Patreon : https://www.patreon.com/codewithsadee

---

[![Buy Me A Coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9kn6vwn4mulhsx6o69is.png)](https://www.buymeacoffee.com/codewithsadee)
CSS Flexbox!
Tags: css, webdev, programming, productivity
Published: 2021-11-26 13:11:41

###The challenge.###
Over the past week and a half at [Perpetual Education](https://perpetual.education), our goal was to create a responsive webpage using this design template as guidance:
![layout](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7weck27nzdz7tzq2ff2a.png)

The template starts by showing us what the narrow form of the webpage should look like followed by two breakpoints as the window is expanded. After taking a good look at the sections of the template and opening up my boilerplate, I was ready to hit the ground running.

###The process.###
The first step was to break down each part of the webpage into sections. As Derek puts it, “everything is rectangles!” That is, every tag we use in HTML to build each part of website creates a box for content. Each box can then have its own boxes *(parent > child)*.

After that was done, I started coding using the smallest screen first with the goal of expanding toward the two breakpoints. I knew that I had multiple sections to work with, so I kept in mind the question, *“How can I position these sections to appear as needed at each breakpoint?”*

My first run-through of the challenge was somewhat successful in terms of positioning the mid-page content as the page expanded. However, once I got to the second breakpoint, the content was not flexing as intended. At this point I decided to reach out to a classmate so we could work on it together. He helped me fix the content so that it was properly aligned as the page expanded.

After trying it myself and talking with my classmate, I watched Derek’s video outlining the creation process. I realized that I missed some of the background graphics, so I followed along with Derek’s coding to learn how to properly integrate them into the code. In addition, I fine-tuned some styling in areas such as the mid-section links, which were supposed to have gray-filled background colors with rounded corners (border radius).

###The outcome.###
While coding along with Derek’s video, I wasn’t only *coding*; I was comparing my code to his and learning where I could improve for similar future projects. Not only was this a great experience with CSS flexbox, I also learned more about how to organize code and name HTML classes. This will help me write code more efficiently and do so in way that makes it easier for fellow developers to read.

[Here is my outcome.](https://peprojects.dev/alpha-3/andrew/super-layout-challenge/index.html)

Regards,

Andrew
Unit Testing Localization in React App. Solution for Mocking Intl API
Tags: jest, javascript
Published: 2022-03-06 01:12:23

---
title: Unit Testing Localization in React App. Solution for Mocking Intl API
published: true
date: 2021-11-26 12:58:57 UTC
tags: Jest,JS
canonical_url: https://thoughtsandstuff.com/unit-testing-localizations-in-react-app-solution-for-mocking-intl-api
---

Are you adding localization to your app and trying to test it with Jest unit tests and React Testing Library?

Are you using the Intl Internationalization API and running into problems mocking it?

------------------

This article was originally posted (and is more up to date) at https://thoughtsandstuff.com/unit-testing-localizations-in-react-app-solution-for-mocking-intl-api/

------------------

I have recently been working on an app that used the [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) and [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) functions. Adding localization to an app is a fairly substantial feature. It effects ALL users and it makes sense to make sure that all components and functions are properly tested.

There were several articles that said using [IntlPolyfill](https://www.npmjs.com/package/intl) would do the job.

The advice was import the polyfill into the test-utils.js file like so:

```javascript
// test-utils.js
import IntlPolyfill from 'intl'
import 'intl/locale-data/jsonp/pt'

export const setupTests = () => {
  if (global.Intl) {
    Intl.NumberFormat = IntlPolyfill.NumberFormat
    Intl.DateTimeFormat = IntlPolyfill.DateTimeFormat
  } else {
    global.Intl = IntlPolyfill
  }
}
```

This worked for testing localized currencies and number formatting. However I could not use timezone string except in UTC. When trying to unit test functions using the `Intl.NumberFormat` API it produced this error:

`RangeError: timeZone is not supported.`

Turns out that the `IntlPolyfill` only does half the job, and Node doesn’t support time zones.

## The Solution

The solution was to use the [IntlPolyfill](https://www.npmjs.com/package/intl) alongside the [date-time-format-timezone](https://www.npmjs.com/package/date-time-format-timezone) package like this:

```javascript
// test-utils.js
import IntlPolyfill from 'intl'
import DateTimeFormatTimezonePolyfill from 'date-time-format-timezone';
import 'intl/locale-data/jsonp/pt'

if (global.Intl) {
    Intl.NumberFormat = IntlPolyfill.NumberFormat;
    Intl.DateTimeFormat = DateTimeFormatTimezonePolyfill;
} else {
    global.Intl = IntlPolyfill;
}
```

And now all of the unit tests pass!