teleren/devto huggingface dataset:
Day 39 of 100 Days of Code & Scrum: objectFit Cover In Next.js Images
Tags: 100daysofcode, beginners, javascript, programming
Published: 2021-11-16 11:01:02

Hello there, everyone!

Like every Tuesday, I had to visit my physical therapist. It's a bit unfortunate that I couldn't work on much today, but I managed to get a good amount of work done.

I was mostly working on the services and portfolio sections of my homepage.

Anyway, let's move on to my daily report!

## Yesterday

I worked on my services section yesterday, in which I finished the skeleton layout for mobile.

## Today

Here are the things I learned and worked on today:

### Next.js

- coded my services and portfolio sections for the homepage.
- skeletons are mostly there, but design is temporary and will be improved.

EDIT: Apparently, Next.js `<Image />` has `objectFit="cover"` as an attribute, which is helpful in making images more responsive by retaining aspect ratio is much as possible.

### Scrum

- I'm reading some resources on Scrum.org on my downtime.
- I did some practice flashcards for Scrum.
- reviewed some of the things I've learned before.

Have a great start to your week, everyone!

![Thank You Banner](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x9ayfxxxaz2g2hfcqbsk.png)

### Resources/Recommended Readings

- [Official Next.js tutorial](https://nextjs.org/learn/basics/create-nextjs-app?utm_source=next-site&utm_medium=nav-cta&utm_campaign=next-website)
- [Scrum Master learning pathway | Scrum.org](https://www.scrum.org/pathway/scrum-master)
- [The 2020 Scrum Guide](https://scrumguides.org/scrum-guide.html)
- [Mikhail Lapshin's Scrum Quizzes](https://mlapshin.com/index.php/scrum-quizzes/)

### Cover Image

- [Kate Stone Matheson on Unsplash](https://unsplash.com/photos/uy5t-CJuIK4)

### DISCLAIMER

**This is not a guide**, it is just me sharing my experiences and learnings. This post only expresses my thoughts and opinions (based on my limited knowledge) and is in no way a substitute for actual references. If I ever make a mistake or if you disagree, I would appreciate corrections in the comments!

<hr />

### Other Media

Feel free to reach out to me in other media!

<span><a target="_blank" href="https://www.rammina.com/"><img src="https://res.cloudinary.com/rammina/image/upload/v1638444046/rammina-button-128_x9ginu.png" alt="Rammina Logo" width="128" height="50"/></a></span>

<span><a target="_blank" href="https://twitter.com/RamminaR"><img src="https://res.cloudinary.com/rammina/image/upload/v1636792959/twitter-logo_laoyfu_pdbagm.png" alt="Twitter logo" width="128" height="50"/></a></span>

<span><a target="_blank" href="https://github.com/Rammina"><img src="https://res.cloudinary.com/rammina/image/upload/v1636795051/GitHub-Emblem2_epcp8r.png" alt="Github logo" width="128" height="50"/></a></span>
TeamCode Overview
Tags: programming, productivity, opensource, devops
Published: 2021-11-16 10:54:17

What is TeamCode?
TeamCode is a Cloud Dev Toolchain that helps developers work collaboratively in cloud, auto-generates, builds and deploys dev environment.

We are committed to building the world's leading cloud collaborative development platform, reconstructing the development process, providing end-to-end tools and services for cloud-based development, and helping developers improve their R&D efficiency.


Productive Dev Tools
Cloud-IDE：Lightweight Cloud-IDE supports multiple programming languages
DCS：Automates a scalable dev environment in the cloud
Tin：Generates runnable applications instantly

How TeamCode improve R&D efficiency?
Efficient Technology Decision, Less Proof of Concept(POC) Time: Out-of-the-box projects without installation.

Providing Source to Service capability, deployment from code to application in seconds.
Low cost, flexibility, release anytime.
Improve R&D Efficiency﻿, Focus on Coding: Generates dev environment and manages dependencies automatically.

Automated Git-based dev environment, no need to manage dependencies.
Elastic cloud compute&storage resources, not limited to local devices.
Cross-platform, Cross-device, Remote access: Support mainstream IDEs and browsers, work remotely with your team anywhere & anytime.

Coding in browser with Cloud-IDE, or connecting to local IDE through SSH.
Support IDE clients, just choose the way of development that you like!
Team Collaboration, Efficient Management: Centralized management and collaborative cloud dev environment improve R&D efficiency notably.

Join a project anytime & anywhere without the environment-building process.
Provides a collaborative development workspace, auto-manages the environment consistency.

Why choose TeamCode?
For Developers
Save time on the deployment of the dev environment.
Coding on any device anytime & anywhere with your team.
Less time on Technology Pattern Decision, easier to use project.

For Owners
Automatically manage the cloud dev environment, reduce the cost of R&D.
All development data are stored in the cloud, strengthen data security.
Manage the development process in the cloud, improve data transparency and management efficiency.

For Teams
Development in the cloud, collaborative processes, improving communication efficiency and collaboration capability.
Remote dev environment and management, support diverse ways of work, remote work.Standardize dev environment, code consistency, easy to switch among different projects.

TeamCode Website: https://www.teamcode.com
Facebook: https://www.facebook.com/TeamCodeCloud
Twitter: https://twitter.com/TeamCodeCloud
LinkedIn: https://www.linkedin.com/in/teamcode/
Let's create an animated landing page with React and Three.js 
Tags: react, javascript, webdev, beginners
Published: 2021-11-16 10:53:32

In this video, we will see how to create an interactive landing page with three js. We will add an awesome looking drone 3D model with three.js and also animate it using gasp. And that's not even all we will add multi-language support in our app. So this will be a really exciting project and you only need basic JavaScript and React JS knowledge to be able to follow this beginner friendly tutorial. Don't forget to share it with your friends if you like it.
{% youtube rvcudGsEY3M %}

## Make sure you checkout my other articles
{% user 0shuvo0 %}
## Was it helpful? Support me on Patreon
[![Patreon Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7vnw8g7vs5pok3jwgtgv.png)](https://www.patreon.com/0shuvo0)
Custom providers for Terraform
Tags: go, terraform, devops, showdev
Published: 2021-11-16 10:02:22

Terraform is a tool for managing infrastructure with config files. It supports many cloud providers like GCP, AWS but also Datadog, and many others. But if you are developing your own service, which should be manageable by Terraform, you have to write your own provider.

---

> 🇨🇿 V češtině si lze článek přečíst na [kutac.cz](https://www.kutac.cz/pocitace-a-internety/vlastni-provider-do-terraformu) 

Manage infrastructure without Terraform means to log in to the Console of the provider and set up everything **by clicking** in the UI. However, it is **hard to backup**, **version**, and **replicate** for other environments like staging. And that is the reason why we have Terraform. If you don't know much about Terraform, watch [Terraform in 100s](https://www.youtube.com/watch?v=tomUWcQ0P3k) video before we dive into **writing own providers**.

![Basic schema of Terraform](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4cc2ymcp1sab8q20hz9m.jpg)

## Behind the scenes

Before writing own provider, let's look at how Terraform works in the background. Terraform first reads all `*.tf` files and prepares **dependency graph** - the execution **plan**. Based on the plan Terraform then can perform **CRUD** operations. Those methods must be implemented in the provider which is responsible for calling **backend API**. So Terraform does not care if you use REST, gRPC, or SOAP gRPC API.

Terraform core just parses the file and performs the plan by calling the provider's CRUD functions. Theoretically, someone could write blog posts with Terraform.

![Schema of communication between Terraform Core and backend API](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y4jrfbnieum70m5p6quf.png)

## Demo app

I created a sample project which contains a simple **HTTP server** with REST API. And also a **custom provider** which is communicating with that HTTP server. So you can easily play with the provider and Terraform. Full code can be found on my GitHub [github.com/arxeiss/sample-terraform-provider](https://github.com/arxeiss/sample-terraform-provider)

```bash
# Start the HTTP server
make start_server 

# Build Terraform provider
make terraform_build 

# All *.tf files are in config subfolder
cd provider/config 
terraform plan # to show plan which will be executed
terraform apply # to execute the plan
```
Unable to display products from WooCommerce API in React Native
Tags: help, reactnative, wordpress, api
Published: 2021-11-16 09:54:38

I am using React Native and the WooCommerce API.

I am trying to display a list of all products in my WooCommerce shop. I can log the data just fine, but I can't return it in in the view.

Hope you can help, it is one of my first React Native projects.

```
import * as React from "react";
import { Text, View } from "react-native";
import WooCommerceAPI2 from './woocommerce/api';

WooCommerceAPI2.get('products').then(data => {
  console.log(data);
});


export default function App() {

  return (
    <View style={{ backgroundColor: 'white', flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text> {{product.item}}</Text>
    </View>
  );
}
```
Monokle 1.3.0 adds Cluster Compare and much more..
Tags: kubernetes, helm, kustomize, news
Published: 2021-11-16 09:39:32

We're thrilled to announce version 1.3.0 of our open-source tool Monokle - striving to make everyday tasks with k8s manifests, Kustomize and Helm a lot more easier.

The big feature in this release is Cluster-Compare - which allows you to compare a set of local resources (plain or generated with Kustomize/Helm) against your cluster.

A short demo is in order!

{% youtube 9ha3-aPgSt8 %}

Cluster Compare allows you to:
* easily see which of your local resources are different in the cluster
* deploy your local resources to the cluster
* replace your local resources with the ones from the cluster
* compare the resources from Helm chart and Kustomize previews to the cluster resources

Download the release from [Github](https://github.com/kubeshop/monokle/releases/tag/v1.3.1)

Read more about Cluster Compare and other 1.3.0 improvements [on our blog](https://kubeshop.io/blog/monokle-1-3-0-cluster-compare)

We're always looking for feedback - please join our [Discard Server](https://discord.gg/kMJxmuYTMu) to get in touch - thanks!
I am getting this type of error while executing enzyme test case in React. Below is my test case. Can anyone please help.


Tags: react, testing
Published: 2021-11-16 09:35:31

context("testing case1", () => {

  it("contains correct context notification text", () => {
    const date = "2019-05-05"
    const testOrder = Object.assign({}, XYZ, { type: ABC, status: A })
    const textExpected = `abc ${moment(date).format("DD.MM.YYYY")}`
    expect(renderCtxNotification(testOrder).find("section").text()).to.equal(textExpected)
  })
})

const renderCtxNotification = (orderData) => mount(resolveOrderStatusContents(orderData).ctxNotification.renderContents(orderData)
Below is the error:

Error: Method “text” is meant to be run on 1 node. 0 found instead.
    at ReactWrapper.single (node_modules/enzyme/src/ReactWrapper.js:1168:13)
    at ReactWrapper.text (node_modules/enzyme/src/ReactWrapper.js:629:17)
section is present in .jsx file:

             

               <section>
                <H4><LocalizedText locKey="text1" /></H4>
                <BodyText>
                  <LocalizedTextWithPlaceholders locKey="text2" placeholders={[formatFinnishDate(date)]} />
                </BodyText>
              </section>
First Hacktoberfest - The  stepping stone
Tags: hacktoberfest, opensource, programming
Published: 2021-11-16 09:31:23

I have successfully completed the Hacktoberfest 2021 and have ordered my badge today. Swags on the way as well.

It was my first time participating in an open-source contribution event, and am more than happy for it to be none other than Hacktoberfest.
It was indeed a great experience, I could actually implement what I had only learnt before.

A great way to start with open source.

Thank you Hacktoberfest!
Here’s the best way to pass Microsoft Azure Certification
Published: 2021-11-16 09:14:43

If you have a plan to sit in the Microsoft Azure certification exam and you are not ready for the exam, then you need to get help from right Microsoft [AZ-900 practice questions](https://www.justcerts.com/microsoft/az-900-practice-questions.html) that can build skills you need to prepare for Microsoft Azure Fundamentals Certification exam.

At JustCerts platform you will AZ-900 practice questions in three easy to use and compatible formats. These formats are.

1.	JustCerts AZ-900 PDF Questions
2.	JustCerts AZ-900 practice questions in desktop practice test software
3.	JustCerts AZ-900 practice questions in web based practice software

Choose the best one format that suits your exam preparation requirement and budget and start preparation right now.
Exploring Tree-Inorder Traversal
Tags: python, beginners, tutorial, computerscience
Published: 2021-11-16 09:07:58

In last post Introduction to tree data structures, I have give a brief introduction about tree data structure and its applications. Traversing a tree data structure is interesting as well as complicated as compare to linear data structures. Unlike arrays or linked list which are traversed in linear order, tree data structure can we traversed in multiple ways like depth first order (inorder, preorder, postorder) and breadth first order(level order traversal).
Read more-
https://paragnaik2019.medium.com/exploring-tree-inorder-traversal-70250862d5b1
Adding TailwindCSS to your Rails project with PostCSS 7 compatibility

Tags: rails, tailwindcss
Published: 2021-11-16 08:58:37

### Install Tailwind CSS with PostCSS 7 compatibility
Run the following command to add tailwind to your project and `package.json`.

```
yarn add tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
```

### Create Tailwind Configuration
The following command will create a tailwind.config.js file where you can setup the default configuration for TailwindCSS.

```
npx tailwindcss init
```

The Tailwind config file will be empty and should look like this:

```
module.exports = {
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}
```

If you compile all Tailwind CSS classes the generated CSS file will be huge. Let's enable Just-in-time compilation to only extract the classes we use from our views, helpers and javascript files.

```
module.exports = {
  mode: 'jit',
  purge: [
      './app/views/**/*.html.erb',
      './app/helpers/**/*.rb',
      './app/javascript/**/*.js',
  ],
};
```

### Adding Tailwind to PostCSS config
You will need to add the following line to the postcss.config.js file to include it in the compiling process.

```
require('tailwindcss')('tailwind.js'),    
```

Here is an example of my postcss.config.js file:

```
module.exports = {
  plugins: [
    require('tailwindcss')('./app/javascript/css/tailwind.js'),    
    require('postcss-import'),
    require('postcss-flexbugs-fixes'),
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3
    })
  ]
}
```

### Import Tailwind to your Javascript Pack
You will need to import tailwind via javascript.
Create an application.css file in app/javascript/css/

> I usually keep this in a folder called css, you could choose any other folder that's convenient for you inside the app/javascript directory  

Add the following to your application.css file that you just created:

```
/* tailwind */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
```

Import application.css in your app/javascript/packs/application.js file.

```
import  "../layouts/application.css";
```

### Import Tailwind to your layout
Now that you have added TailwindCSS to your application pack, you will have to import it in application.html.erb to use tailwind globally in your application and make it work with Webpack.

Add the following line to `app/views/layouts/application.html.erb` in `<head>`:

```
<%=  stylesheet_pack_tag  'application',  media: 'all',  'data-turbolinks-track': 'reload'  %>
```

And that’s it! 

**Instructions based on Bodhish Thomas post and tweaked to my personal usage.*
HTML Drag and Drop API
Tags: html, javascript, webdev
Published: 2021-11-16 08:49:11

**The Drag and Drop API** allows you to, as its own name indicates, to create drag and drop interfaces for the users to interact with.

This API will make available for the users to select elements you allow to with a click, and drag them to the droppable interfaces you also allow them to, this is all customizable you will be able to indicate which elements are draggables and where can be drop into as easy as with some simple functions with some basic functionalities.

I'll explain to you step by step how to do a simple drag and drop for text:

- First you need to identify what will be draggable, this can be done by adding the draggable attribute and the ondragstart handler:
```
<script>
  function dragstart_handler(el) {
    el.dataTransfer.setData("text/plain", el.target.id);
  }

  window.addEventListener('DOMContentLoaded', () => {
    // Reference to the element we will drag
    const element = document.getElementById("draggable");
    // Add the handler to the div to make it draggable
    element.addEventListener("dragstart", dragstart_handler);
  });
</script>

<div id="draggable" draggable="true">You can drag this element.</div>
```

- After this you need to define what will the draggable object do when you drag it and drop it on the droppable zone, this will be done by creating a function with a dropEffect, there are three dropEffects:
  1. **copy** the dragged object will be copied on the droppable zone.
  2. **move** the dragged object will move to the droppable zone.
  3. **link** indicates that some form of relationship or connection will be created between the source and drop locations.

For my example I will use the move dropEffect as follows:
```
function dragover_handler(el) {
  el.preventDefault();
  el.dataTransfer.dropEffect = "move";
}
```
- For the last step we need to define a droppable zone, and the function linked to it, in this example we are moving the draggable object into de droppable zone:
```
<script>
function drop_handler(el) {
 el.preventDefault();
 const data = ev.dataTransfer.getData("text/plain");
 el.target.appendChild(document.getElementById(data));
}
</script>

<p id="target" ondrop="drop_handler(event)" ondragover="dragover_handler(event)">Drop Zone</p>
```

When we combine all the steps we will end up with a code like [this codePen](https://codepen.io/diegocach/pen/eYEQYeZ) I created for you to test and see how its done, to test it you need to drag the text *You can drag this element.* into the text *Drop zone* for it to move.

To finish I will add that this is a little example on how can you use this API, there are many possibilities, for example you can also drag images, and drop them onto the droppable zone, not only text.
P42 Code Review: Inline Comments and Hints
Tags: javascript, github, typescript, codereview
Published: 2021-11-16 08:46:20

Code reviews and pull requests are essential for many teams to increase code quality and transfer knowledge. However, it is often tedious for reviewers to comment on minor issues such as readability and style. 

**[P42](https://p42.ai/p42-plus) automatically reviews the readability and style of your commits and pull requests** and suggests improvements and modernization opportunities. This automation frees up reviewers' time to check for potential bugs and the overall correctness of the pull request.

Starting November 2021, P42 for GitHub has several additional code review features:

### Inline Comments
P42 now shows hints directly in your diffs, so you can easily see them when reviewing the code. 
[Learn more...](https://p42.ai/documentation/code-review#inline-comments)

![Inline Comments](https://p42.ai/image/blog/2021-11-16-p42-plus-code-review-inline-comments-and-hints/inline-comments.png)

### Enhanced Code Review Report
The code review report that is part of the GitHub checks distinguishes between old and new suggestions for default branch commits, contains additional explanations, and lists annotations. [Learn more...](https://p42.ai/documentation/code-review#code-review-report)

### Hint and Blocker Setting for Code Actions
You can configure each [P42 code action](https://p42.ai/documentation/code-action) as either a hint (default) or blocker on the repository page. Hints leave messages on your pull requests, but do not fail the overall check. [Learn more...](https://p42.ai/documentation/repository-page#configuration)

![Hint and Blocker Setting for Code Actions](https://p42.ai/image/blog/2021-11-16-p42-plus-code-review-inline-comments-and-hints/code-review-hint-blocker.png)

Code reviews for pull requests and default branch commits can now be [enabled with a single click](https://p42.ai/documentation/repository-page#elements) for existing repositories. Code reviews for new repositories are enabled by default.

Curious about P42 for GitHub? [Check out this overview to see what it can do for you.](https://p42.ai/p42-plus)
code every day with me
Tags: javascript, programming, 100daysofcode, aws
Published: 2021-11-16 08:24:15

##--DAY 21--
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: Climbing the Leaderboard
- Detail: [here](https://www.hackerrank.com/challenges/climbing-the-leaderboard/problem?isFullScreen=false)
- Idea:
  - Remove the duplicate number of ranked
  - Because player array was sorted, we will find the rank from bottom to top by traversing from tail to head of array
- My solution(javascript):
```
function climbingLeaderboard(ranked, player) {
    ranked = [... new Set(ranked)];
    let ans=[],i=ranked.length-1;
    for(let score of player){
        while(i>=0){
            if(score<ranked[i]){
                ans.push(i+2);
                break;
            }
            i--;
        }
        if(i<0) ans.push(1);
    }
    return ans;
}
```
-->*If you have better solution or any question, please comment below. I will appreciate.*
share on social media in angular
Published: 2021-11-16 08:20:19

I want to give share on social media functionality in my website..i used ngx-share button and used URL="https:hh.com" but i dont want hard coded it i want to pass dynamically this string to URL in Angular
I refer Following Site:
https://dev.to/rodrigokamada/adding-the-social-media-share-buttons-component-to-an-angular-application-320h

Can anyone please help me how to do this
my code:

  <share-buttons theme="circles-dark" *ngIf="shareOnSocial"
    [include]="['copy', 'facebook', 'email', 'messenger', 'mix', 'line', 'linkedin', 'pinterest', 'print', 'reddit', 'sms', 'telegram', 'tumblr', 'twitter', 'viber', 'vk', 'xing', 'whatsapp']"
    [showIcon]="true"
    [showText]="false"
    [show]="5"
    url="https://rodrigo.kamada.com.br/"
    description="Angular Share Buttons"
    twitterAccount="rodrigokamada"
    class="pt-5">
  </share-buttons>