teleren/devto huggingface dataset:
Tailwind CSS responsive square divs
Tags: tailwindcss, css
Published: 2021-09-15 06:16:57

You might have encountered a situation where you needed a fully responsive square div.

In my case, I was working on a responsive portfolio kind of layout, and I soon realized it's pretty hard to get a responsive square based on the width.

However, I found the perfect solution and will be showing you how to achieve this in CSS and even in Tailwind!

Let's take a look at the result:

![Tailwind CSS responsive square divs](https://cdn.hashnode.com/res/hashnode/image/upload/v1631686570201/bC9TGq8gS.png)

## CSS Responsive square div

Let's first look at how we would achieve this effect in pure CSS before moving to Tailwind.

The general concept is pretty simple. We want to create a percentage-based width div and use the same percentage as our padding-bottom.

Let's see that in action:

```html
<div class="square"></div>
```

And then for the CSS:

```css
.square {
  width: 50%;
  padding-bottom: 50%;
  background-color: teal;
}
```

And this will result in a div that is 50% of the parent.
The height will reflect this as well.

You can have a play with this CodePen to see it in action. (Try to resize your screen)

{% codepen https://codepen.io/rebelchris/pen/BaZpZMj %}

## Tailwind responsive square div

Now taking this concept, we can achieve the same effect in Tailwind. However, we'll need to make one addition to our config for it.

Let's start with the basics:

```html
<div class="w-1/2 bg-purple-300"></div>
```

However, we don't see anything with the above code as we don't have the padding option.
And the padding options in Tailwind don't have a percentage-based value.

But, no worries, we can fix that.
Open up your `tailwind.config.js` file and extend the padding section.

In our case we are using a 50% div (`w-1/2`) so we need a 50% padding as well:

```js
module.exports = {
  mode: 'jit',
  purge: ['./public/**/*.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      padding: {
        '1/2': '50%',
        full: '100%',
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};
```

As you can see, you can add multiple versions for whichever size you need.

Now let's add this class to our div as well to see the result:

```html
<div class="w-1/2 pb-1/2 bg-purple-300"></div>
```

And that gives us a perfect square in Tailwind!

I've created a tailwind playground for you to see this in action:

[Visit the Tailwind playground](https://play.tailwindcss.com/KiXGVqfKix)

### 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)
#update My experience in creating Css with Pubg UC online store
Tags: css, design
Published: 2021-09-15 06:13:33

Update My Pubg UC sell store. All the website’s images were designed by photoshop. The web page was built by CSS code.
[متجر شدات](https://saudi-uc.com/)
What do you think about it? If you have any further recommendations, please let me know.

Site Sections :
[شدات ببجي](https://saudi-uc.com/%D8%B4%D8%AF%D8%A7%D8%AA-%D8%A8%D8%A8%D8%AC%D9%8A/c1676374952)

thank u
¿Cómo conseguir tu primer trabajo en TI?
Tags: latam, career, spanish, beginners
Published: 2021-09-15 06:01:21

Esta es una pregunta recurrente que de forma constante se hacen las personas que deciden ingresar a la industria de Tech.

La intención es enseñar que no existe un solo camino para conseguir tu primer empleo, estas anécdotas espero que te sirvan.

En este blog recopilaré las historias de algunas personas de mi red de contactos, en donde les hago preguntas sobre cómo consiguieron sus primeros dos empleos en la industria de TI. 

##Las preguntas que todos responderán:
1. ¿Quién eres hoy? ¿Cuántos años de experiencia tienes en TI? 
2. Platícame de tu primer empleo en TI, ¿qué puesto tenías?, ¿cuántos años tenias?, ¿qué empresa o tipo de empresa era?
3. ¿Cómo conseguiste ese empleo? ¿Cuál dirías fue la clave para que lo consiguieras?
4. ¿Cuánto duraste en ese empleo?
5. ¿Qué lecciones aprendiste en ese empleo?
6. ¿Algún mito que quieras romper acerca del primer empleo que a ti no te aplico?
7. ¿Algún proyecto que quieras compartir?

## Seguridad de la Información
* [Hiram Camarillo](https://dev.to/marianorenteria/hiram-camarillo-8ip)

## Ciencia de Datos
* [Yecely Díaz (Yesi Days)](https://dev.to/marianorenteria/yecely-diaz-yesi-days-5a84)

## Desarrollo de Software
* Héctor de León (próximamente)

---

Me gustaría me des retroalimentación y que me recomiendes a personas de las cuales quisieras saber como consiguieron su primer empleo

---- 

Sigo trabajando en mis productos con el fin de ayudar de forma más estructurada a la comunidad de TI, si te interesan [pásale a mi perfil de Gumroad](https://marianorenteria.gumroad.com/)
- 📕 Líder Técnico
- 📘De Junior a Senior
- 🗓 Mentorías
- 📑 Revisión de C.V.

Te invito a que **[me sigas en Twitter](https://twitter.com/marianorenteria/)** para que te enteres de todo el contenido que hago normalmente 🙃.

También soy creador del [podcast Chile, Mole & Tech](#)(https://dev.to/chilemoleytech), el cual esta [en todas las plataformas](#)(https://linktr.ee/chilemoleytech).

**Si te gusto este post, no dudes en compartirlo, me ayuda mucho.**
----
Weekly web development resources #87
Tags: webdev, weekly
Published: 2021-09-15 06:00:54



______

##[Design Junction](https://designjunction.xyz/)
[![Design Junction](https://wweb.dev/weekly/content/87/junction.jpg)](https://designjunction.xyz/)
A curated list of design resources, handpicked from around the web.

______

##[Figen](https://figen.cc/)
[![Figen](https://wweb.dev/weekly/content/87/figen.jpg)](https://figen.cc/)
A cool post cover & background generator tool.

______

##[Gokarna](https://github.com/526avijitgupta/gokarna)
[![Gokarna](https://wweb.dev/weekly/content/87/gokarna.jpg)](https://github.com/526avijitgupta/gokarna)
A minimal opinionated theme for Hugo with a focus on simplicity.

______

##[SpeedVitals](https://speedvitals.com/)
[![SpeedVitals](https://wweb.dev/weekly/content/87/SpeedVitals.jpg)](https://speedvitals.com/)
A performance testing tool to improve your website performance.

______

##[Solid](https://www.solidjs.com/)
[![Solid](https://wweb.dev/weekly/content/87/solid.jpg)](https://www.solidjs.com/)
A declarative, efficient, and flexible JavaScript library for building user interfaces. 

______

##[notistack](https://iamhosseindhv.com/notistack)
[![notistack](https://wweb.dev/weekly/content/87/notistack.jpg)](https://iamhosseindhv.com/notistack)
A highly customizable notification library for React.

______

##[Profiling React.js Performance](https://addyosmani.com/blog/profiling-react-js/)
[![Profiling React.js Performance](https://wweb.dev/weekly/content/87/profiling.jpg)](https://addyosmani.com/blog/profiling-react-js/)
An article about measuring React component render performance.

______

##[Free Developer Resources](https://zerotomastery.io/resources/)
[![Free Developer Resources](https://wweb.dev/weekly/content/87/Resources.jpg)](https://zerotomastery.io/resources/)
A list of free resources of different categories.

______

##[whatamesh](https://whatamesh.vercel.app/)
[![whatamesh](https://wweb.dev/weekly/content/87/mesh.jpg)](https://whatamesh.vercel.app/)
A nice tool to create mesh gradients. 

______

##[Design Junction](https://github.com/rocksdanister/lively)
[![Design Junction](https://wweb.dev/weekly/content/87/lively.jpg)](https://github.com/rocksdanister/lively)
An open-source project that allows users to set animated desktop wallpapers.

______

To see all the weeklies check: [wweb.dev/weekly](https://wweb.dev/weekly)
Developing Hotel Management App With Radzen Blazor WebAssembly (Lesson 9) Custom Security Part 5
Tags: radzen, webassembly, customsecurity, blazor
Published: 2021-09-15 05:59:31

In this lesson, I replace the textbox control for password on the login page with a password control. I then proceed to create custom tables to store roles and users in roles. Appropriate relationships between appusers,approles and usersinroles tables are created. I proceed to update the application model to generate C# POCO model classes for these tables.
I customize the  AppUser  model generated by RADZEN by adding a new partial class definition for the AppUser class which contains a property called RoleNames so that when a user is authenticated, the list of roles associated with the user is fetched as well. RoleNames property is decorated with NotMapped attribute. I scaffold BLAZOR pages for the two new tables using RADZEN. Lastly, I update LoginUser method inside MyAppUser controller so that when a user is authenticated, the list of roles associated with the user is fetched as well.

{% youtube sWfTtdmVdKE %}
HTML tags | strong-b
Tags: html, tags, strong, b
Published: 2021-09-15 05:52:03

`<strong>` is used to **define a text that has great importance, seriousness or urgency**, and is usually rendered visually in bold by the browser, while `<b>` is used exclusively to **attract the attention of the reader by defining a text in bold, without no special importance**.

**Highly important content on a page** can be a notice, a prominent phrase, or just a few words in the middle of a text.

Also the paragraph tags that represent notes or warnings within the text of a page. All of them will be marked with `<strong>`.

Do not confuse the use of `<strong>` with that of `<em>`, which is used to emphasize specific parts of a text (eg: `<p> I <em>love</em> chocolate</p>`).

`<b>` **should be a last resort and only used when no other tag is available, never for styling**. In case you want to use bold it is better to use the CSS `font-weight` property. If you want to indicate that the text it contains is of special importance then use `<strong>`.

Nor should you use `<b>` to highlight titles or headings, for that you will use `<h1>-<h6>` together with CSS.

**Valid uses of** `<b>` could be keywords in a summary, product names in a review, or other pieces of text whose typical presentation would be in bold but without adding special importance.

- Type: *inline* / *inline*
- Self-closing: *No* / *No*
- Semantic value: *No* / *No*

[Definition and example `<strong>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong) - [Definition and example `<b>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b) | [Support `<strong>`](https://caniuse.com/mdn-html_elements_strong) - [Support `<b>`](https://caniuse.com/mdn-html_elements_b)
Create a Netflix clone from Scratch: JavaScript PHP + MySQL Day 51
Tags: php, javascript, webdev, tutorial
Published: 2021-09-15 05:26:22

Netflix provides streaming movies and TV shows to over 75 million subscribers across
the globe. Customers can watch as many shows/ movies as they want as long as they are
connected to the internet for a monthly subscription fee of about ten dollars. Netflix produces
original content and also pays for the rights to stream feature films and shows.


In this video,we will be     Creating createHomeEntityPreviewSquare method
{% youtube ijMuPB6Xmjs  %}



If you like my work, please consider
[![Buy me a coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jm11knj7d8zwcvo150q2.png)](https://www.buymeacoffee.com/cglikpo)
so that I can bring more projects, more articles for you

If you want to learn more about Web Development, feel free to [follow me on Youtube!](https://www.youtube.com/c/ChristopherGlikpo)
Create an infinite scroll website using JavaScript
Tags: html, css, javascript, api
Published: 2021-09-15 05:22:17

##Create an infinite scroll site using javascript.

Live : https://javascript-scroll.netlify.app/
1. Create an HTML file(index.html) and add below code to it.
![index](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/auyvhls15qmm18ny0kf2.png)
 
2. Create a javascript file and add the below code to it.
![javascript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mwvod8cstfjs01qqi6be.png)

3. you can write your own CSS or get the CSS file from my git repo given below

## Points : 1. all the data is coming from API.
            2. as you scroll down the API get called and data get 
               loaded.

{% github Aman2221/Infinite_Scroll_JS %} 

Thank you ❤️️
Alexander Zingman on Mechanisation Facility
Published: 2021-09-15 05:20:26

In June 2020, Zimbabwe’s Honorary Consul to Belarus, Alexander Zingman, the $58 million deal between the two countries will revolutionalise Zimbabwe’s agriculture industry.

“This deal brings Belarusian expertise in agriculture and engineering to Zimbabwe. Both countries have been expanding ties since 2015 and this deal is a win-win for both,” said Alexander Zingman at the time.

Read more here : https://newscentral.africa/2020/09/30/zimbabwes-president-commissions-58m-belarus-mechanisation-facility/
Script to Generate Table-of-Content for Markdown file
Tags: markdown, help, blog, tutorial
Published: 2021-09-15 04:32:46

## Table of Content
- [Introduction](#introduction)
- [Script Source](#script-source)
- [Input File Sample](#input-file-sample)
- [Script Execution and Output](#script-execution-and-output)

## Introduction
- I've been writing quite a number of blogs off-late and 
It is always good practice to have a `Table of content` to summarise the topics in the blog.
- Same thing applies to the README.md documentation as well, to have TOC for easy reference and summary
- But it is a **time consuming** task to create Table of content for each blog or README documentation
- So I've created this utility script, which creates the table of content `ready to be pasted` in the blog markdown file
- Feel free to use it, in case if you need to create TOC for your `README.md` file
- This Utility Script Can be Used to create TOC for Blogging websites which supports `MARKDOWN` formatting

## Script Source
```sh
#!/bin/sh
#############################################################
## Script to Create TOC reference in README files
## Step1: Create a file contains with the headings of README file
## Step2: Execute the script with filename as argument
## ./toc-from-headings.sh <file_name_contains_headings>
## The console shows the output with TOC formatting
## Just Copy Paste the Content in your README.md file
#############################################################
toc_filename=$1
echo "## Table of Contents"
cat $toc_filename  | while read line
do
        field2=`echo $line | tr [:upper:] [:lower:] | tr " " "-"`
        echo "- ["$line"]""(#"$field2")"
done

```

## Input File Sample
```text
Introduction
Kubernetes objects
Functionality of Pod
Run the Pod Definition
Verify Pod
Verify the Container Content
Conclusion
Further Reference
```
- Save the file as `headings.txt`

## Script Execution and Output
- Execute the script with file name as input argument
```
$ ./toc-from-headings.sh headings.txt 
## Table of Contents
- [Introduction](#introduction)
- [Kubernetes objects](#kubernetes-objects)
- [Functionality of Pod](#functionality-of-pod)
- [Run the Pod Definition](#run-the-pod-definition)
- [Verify Pod](#verify-pod)
- [Verify the Container Content](#verify-the-container-content)
- [Conclusion](#conclusion)
- [Further Reference](#further-reference)
```

- Tada! Now the TOC is ready in `Markdown` format and can be pasted in your markdown file.

- Please note, this script can be used to generate TOC for `top level parent` headings

- Visit GitHub repo [here](https://github.com/chefgs/sh_workouts) for more utility scripts
bind(), call() & apply() in JS
Tags: javascript, beginners
Published: 2021-09-15 04:22:01

In this you will get a deep knowledge about how call(), bind() and apply works.

These methods are available to every function in JavaScript. which are all used to change the scope of what this is equal to inside of a function or a method. Let's see the following examples.

``bind()``
-----
We will start with a simple example of an object that has a method on it. With bind(), we can tell the JavaScript engine where to look for this.
```
const person = {
  name: "Saurabh",
  myFunction: function () {
    return(`Hello ${this.name}`)
  }
}

function greetPerson() {
  console.log(this.myFunction())
}

const bindPerson = greetPerson.bind(person)

bindPerson();
//Expected Output :- Hello Saurabh
```
Things to notice here are : 
* The ``bind()`` creates bindPerson, and a copy of the greetPerson function.
* bindPerson when called will have it's this variable pointing to the person object

``call()``
----------
The ``call()`` calls a function with a given this value and arguments provided individually.

``call()`` essentially does the same thing as ``bind()`` except that ``call()`` actually executes the function

```
const Saurabh = {
  name: "Saurabh",
  myFunction: function () {
    return(`Hi, I'm ${this.name}`)
  }
}

function callingFunction(age, hobby) {
  console.log(`${this.myFunction()}, my age is ${age} and I 
  like to ${hobby}`);
}

callingFunction.call(Saurabh, 26, 'reading');

// Expected Output :- Hi, I'm Saurabh, my age is 26 and I like reading

```

``apply()``
-------
``call()`` and ``apply()`` do the exact same thing except that ``call()`` expects all parameters to be passed in individually, but ``apply()`` expects all additional parameters to be passed as an array.
so this what our existing sample code will look like : 
```
const Saurabh = {
  name: "Saurabh",
  myFunction: function () {
    return(`Hi, I'm ${this.name}`)
  }
}

function applyingFunction(age, hobby) {
  console.log(`${this.myFunction()}, my age is ${age} and I like 
  ${hobby}`)
}

applyingFunction.apply(Saurabh, ``[26, 'Reading']``)

// Expected Output :- Hi, I'm Saurabh, my age is 26 and I like Reading
```

Hope you find it useful and learned something new from it.
Best Free Courses to learn Python 2021
Published: 2021-09-15 04:06:48

Hello and welcome in this post we are going to discuss about best free courses to learn Python for free. I am going to mention three course that you can use to learn python. So without wasting any more time let’s get started.

## Google Python Classes
You can learn Python from Google’s Python classes which is a free resource available on internet. You do not have to pay anything to access Google Python classes. Google Python classes will give you basic understanding of Strings, lists, sorting, dictionaries, files, regular expression and utilities of python.

Link to [Google Python Classes](https://developers.google.com/edu/python)

Read full post and get free python courses link from [here](https://crunchythings.xyz/best-free-courses-to-learn-python/)
How To Install TinyMCE Editor In Laravel
Tags: laravel, tinymce, texteditor, javascript
Published: 2021-09-15 03:26:28

In this artical we will give you example how to Install tinymce editor in laravel, Tinymce editor is rich-text opensource editor, It has the ability to convert HTML textarea fields or other HTML elements to editor instances, here we will see how to use tinymce editor in laravel.

Tinymce provides many features like PowerPaste, Spell Checker Pro, Image Upload, Accessibility Checker, Link Checker, Format Painter, Premium Skins & Icons and many more.

So, let's see how to implement tinymce editor in laravel.

```
<html>
<title>How To Install TinyMCE Editor In Laravel - techsolutionstuff.com</title>
<head>
  <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
  
</head>
<body>
    <h1 style="text-align: center;">How To Install TinyMCE Editor in Laravel - techsolutionstuff.com</h1>
  <textarea id="texteditor"> </textarea>
</body>
</html>
<script>
tinymce.init({
    selector: '#texteditor',
    height:350,
});
</script>
``` 

![How To Install TinyMCE Editor In Laravel
](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dzzm81y5nuhbrdt0yfcf.png)

---

You might also like :


- **_[Read More : How To Generate QRcode In Laravel](https://www.techsolutionstuff.com/post/how-to-generate-qrcode-in-laravel)_**

- **_[Read More : How To Generate Barcode In Laravel](https://techsolutionstuff.com/post/how-to-generate-barcode-in-laravel)_**

- **_[Read More : How To Delete Multiple Records Using Checkbox In Laravel] (https://www.techsolutionstuff.com/post/how-to-delete-multiple-records-using-checkbox-in-laravel)_**
Git aliases that I use weekly
Tags: github, git, cli
Published: 2021-09-15 03:22:30

I know that there is a lot of posts like "My top bash commands", "My favorite git commands".
But this morning I said to myself: "Come one! You know nice tricks too! Share them!".
So this aliases I'm using a lot of time because I prefer to work with git by CLI. I will not repeat common and simple aliases like `commit -m`.

## 1. `git h`
Git history. A picture is worth a thousand words
![Screenshot_20210915_110054](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xyt75v6qybf6jfep818r.png)

Alias for this command:
````
h = log --pretty='format:%Cred%h%Creset %C(yellow)%d%Creset - %s %C(green)%ar%Creset %C(blue)%an%Creset' --graph --all --decorate
```

You can write your own format, all variables described at [documentation](https://git-scm.com/docs/git-log#_pretty_formats)

## 2. `git cs ${COMMIT_HASH}`

Find branches that contains specific commit
![Screenshot_20210915_110120](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tz5kohmfvamiqzny4sor.png)

Alias for this command:
````
cs = "!f() { git branch -r --contains $1; }; f"
``` 

## 3. `git bd ${BRANCH_1}..${BRANCH_2}`

Difference between branches. Output same as for `git h`, but shows only commits between this branches pointers.

Alias for this command:
```
bd = "!f() { git log --graph --pretty=format:\"%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr)%Creset\" --abbrev-commit --date=relative $1; }; f"
```

## 4. `git cleanup`

Removes all branches that already merged.

Alias for this command:
```
cleanup = "!git branch  --no-color --merged | /usr/bin/grep --color=none  -v '\\*\\|master\\|develop' | xargs -n 1 git branch -d"
```

As you can see I've hardcoded branches `master` and `develop`, but you can have different names for branches.

## How to add this aliases

You can add those commands at git config(for global aliases `~/.gitconfig` or `.git/config` for project specific)
```
[alias]
    h = log --pretty='format:%Cred%h%Creset %C(yellow)%d%Creset - %s %C(green)%ar%Creset %C(blue)%an%Creset' --graph --all --decorate
    cs = "!f() { git branch -r --contains $1; }; f"
    bd = "!f() { git log --graph --pretty=format:\"%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr)%Creset\" --abbrev-commit --date=relative $1; }; f"
    cleanup = "!git branch  --no-color --merged | /usr/bin/grep --color=none  -v '\\*\\|master\\|develop' | xargs -n 1 git branch -d"
```

Maybe you are using something interesting too?
Moving from WordPress to Jamstack
Tags: webdev, javascript, beginners, podcast
Published: 2021-09-15 03:13:27


Original: https://codingcat.dev/podcast/1-11-moving-from-wordpress-to-jamstack

{% youtube https://www.youtube.com/watch?v=WYiHVIKRN4w %}

## Questions

1. What is Jamstack and what does it mean to you?
2. You always hear WordPress holds 30% of the internet. Is this still the case and are we starting to see them lose ground? Why do you think that is?
3. What are the benefits of moving off of WordPress and into a Jamstack ecosystem?
4. Is Jamstack lacking any capabilities that WordPress provides?
5. We are currently building out a backend similar to WordPress with the Jamstack in NextJS. What would you say are the key features WordPress provides its users?
6. If you were to use any CMS today to create a Next.js application and host it on Netlify what would it be? And why?
7. Can Netlify host a Next.js application with regeneration capabilities yet?