teleren/devto huggingface dataset:
CREATE A CAT APP WITH HTML
Tags: html, webdev, programming, 100daysofcode
Published: 2021-07-31 15:24:21

We've learnt HTML5 from scratch and now it's time to create some apps using HTML.
In this post I am going to create a cat app using HTML without any style, so it is so ugly don't be scared right now when you learn CSS language we will apply our CSS into our cat app.
First add h1 heading element into app.
```
<h1>Cat Photo App</h1>
```
We have HTML semantic elements, what does it mean.
Semantics elements are elements that they have special like: header, section, aside, main, article, footor.
Beside semantics elements we have non-semantic elements they don't have special meanings like: div and section.
### Let me explain semantic elements
Header => From its name everyone knows it is used at the heading of a website.
Main => We wrap our web content inside main element.
Article => We put our content like: texts, images, videos , audios,...
Section => We can create multiple sections into our website which is so common.
Aside => Is used for sidebars, I fetch a photo of semantic elements on that time you will have a basic knowledge of semantic elements.
![HTML Semantic elements](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nueilht9q5hd4jjoqht2.gif)
Footer => Is used at the bottom of our website which is sticked at the bottom.

Let's add the image of cat into our website then add a link to our cat photos after that create an unordered list what our cat eat, after that create a basic form which defines the type and some other attributes of our cat.
As I said we wrap our content inside main element.
```
<main>
<img src="..." alt="my cat photo">
<p>Click <a href="..." target="_blank">here</a> to view more photos of my cat</p>
<h2>Things my cat eat daily</h2>
<ul>
<li>Meat</li>
<li>Bread</li>
<li>Bean</h2>
</ul>
<form>
<p>Cat Type</p>
<input type="radio" name="type" id="outdoor" value="outdoor">
<label for="outdoor">Outdoor</label>
<input type="radio" name="type" id="indoor" value="indoor">
<label for="indoor">Indoor</label>
<p>My Cat Attributes</p>
<input type="checkbox" id="lovely" value="lovely">
<label for="lovely">Lovely</label>
<input type="checkbox" id="lazy" value="lazy">
<label for="lazy">Lazy</label>
<input type="checkbox" id="energetic" value="energetic">
<label for="energetic">Energetic</label>
<input type="submit" value="Submit">
</form>
</main>
```
This was all about my cat photos' app.
Hope you enjoy the story.
If you have any questions or suggestions let me know.
Don't forget to like and share.
#11) Explain call(), apply() & bind() ❓
Tags: javascript, webdev, beginners, career
Published: 2021-07-31 15:13:42

##`🔰call()`
✔The _call()_ method calls a function with a given _this_ value and arguments provided individually.
✔_call()_ method allows object to use method/function of another object.
✔_call()_ accepts arguments.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ba4dwkan94mfjx0xm2s1.png)


##`🔰apply()`
✔It is similar to _call()_ method but _call()_ method takes argument separately whereas in _apply()_ method arguments are passed as an array.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d1npgqya5lu3o7v11o8x.png)

##`🔰bind()`
✔It creates a new function and when invoked has the _this_ keyword set to the provided value.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c55z3rm42ielbc7tlyrb.png)
✔In case of _call()_ & _apply() the function is immediately called but in case of _bind()_ it does not call in-fact it just return another function which you can call it later.
That's why in above example I've stored the value in a variable _fun_ and then invoked it.
__________________________________________________________________
Django Takeoff!! Book 2021
Tags: django, programming, python, webdev
Published: 2021-07-31 15:06:09

I just updated and re-published my Django Takeoff! book on Amazon.

Get it for free tomorrow and $9.99 afterwards. Enjoy 🥳

[Twitter](https://twitter.com/balt1794) 

[Django Takeoff!! Course](https://www.baltlogs.com/takeoff/)

[Django Takeoff!! Book](https://www.amazon.com/dp/B08H4W2WLD)

##Django Takeoff!! Course (2021)

###Table of Contents

###Chapter 1 : Django Web App Setup

- Visual Studio and Packages Installation
- Listings App
- Database Setup
- Static and Media Files Setup
- Linter Setup (Optional)
- Django Simple Web App

###Chapter 2: Django Basics

- Django MVC Pattern
- Django Admin Site
- Listings Model

###Chapter 3: Homepage

- Homepage URL
- Homepage View
- Homepage Template

###Chapter 4: Listings Page

- Listings URL
- Listings View
- Database Queries
- Listings Template

###Chapter 5: New Listing Page

- New Listing URL
- New Listing Form
- New Listing View
- New Listing Template

###Chapter 6: Navbar

- Homepage & Navbar
- Listings Page & Navbar
- New Listing Page & Navbar

###Chapter 7: Detail Listing Page

- Detail Listing URL
- Detail Listing View
- Detail Listing Template
- Listings Template – View Listing

###Chapter 8: My Listings Page

- My Listings URL
- My Listings View
- My Listings Template
- My Listings – Navbar

###Chapter 9: Edit Listing Page

- Edit Listing URL
- Edit Listing View
- Edit Listing Template
- My Listings – Edit

###Chapter 10: Delete Listing Page

- Delete Listing URL
- Delete Listing View
- Delete Listing Template
- My Listings – Delete

###Chapter 11: Users App

- Login URL
- Login View
- Login Template
- Login – Navbar
- Logout URL
- Logout View
- Logout – Navbar

###Chapter 12: Register Page

- Register URL
- Register Form
- Register View
- Register Template
- Register – Navbar

###Chapter 13: Foreign Key

- Listings Model – Foreign Key
- Listings View – Foreign Key
- Testing – Foreign Key
- My Listings View – Foreign Key
- Navbar – Foreign Key 

###Chapter 14: Images

- Listings Template – Images
- Detail Listing Template – Images

###Chapter 15: Django Filters

- Listings View – Filter
- Listings Template – Filter

###Chapter 16: Styling with Bootstrap (Part I)

- Navbar – Bootstrap
- Homepage – Bootstrap

###Chapter 17: Styling with Bootstrap (Part II)

- Listings Page – Bootstrap
- Detail Listing Page – Bootstrap
- My Listings Page- Bootstrap

###Chapter 18: Styling with Bootstrap (Part III)

- Django Crispy Forms
- New Listing Page – Bootstrap/Django Crispy Form
- Edit Listing Page – Bootstrap/Django Crispy Form
- Delete Listing Page – Bootstrap

###Chapter 19: Styling with Bootstrap (Part IIII)

- Login Page – Bootstrap/Django Crispy Form
- Register Page – Bootstrap/Django Crispy Form
- Search Filter – Bootstrap/Django Crispy Form

###Chapter 20: AWS – Amazon Relational Database Service (RDS)

- Amazon RDS Setup
- Connecting to Amazon RDS

###Chapter 21: Amazon S3 Buckets

- Amazon S3 Buckets Setup
- Amazon IAM (Identity and Access Management)
- Connecting to Amazon S3 Buckets

###Chapter 22: Heroku Deployment

- Heroku
- Heroku – Custom Domain
How to Embed JavaScript in Your HTML ??
Tags: html, webdev
Published: 2021-07-31 15:00:39

How many of you like dynamic web pages ? Using HTML and CSS you can create and style static web page but you cannot perform actions on it. To make your web page dynamic <b> JavaScript language </b> is used. 

JavaScript was created by <b>Brendan Eich</b>. It is a high-level, East to learn language use to create dynamic web pages. JavaScript is used to perform actions on elements like creating alert box on click of button. Performing some actions according to some condition by using if-else etc. 

There are many such applications of JavaScript.  

In JavaScript we select the element on which action is to performed by providing the id or class to it. 

Let's see how to embed your JavaScript in your HTML.

Like CSS we have multiple ways to embed our JavaScript in your HTML.

Method - 1 <b>Using script tag</b>

Like we used style tag in the same file to add styling to our pages here we use script tag. Inside script tag we write our script and add JS in our HTML. You can see the code below. Don't worry about the script that I write inside the script tag. 

Code :

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1r30udt3f529g2099abx.PNG)

Output :

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/knbm40d7xlooj06ixpik.PNG)

You can see that without writing a single word inside the p tag how I printed "Welcome to JavaScript" . That's the uniqueness of JavaScript. 

Let's see the second method

Method - 2 <b>Creating Separate JavaScript file</b>

Again like CSS we create a separate JavaScript file with extension <b>.js</b> . Now the question is how to link it in our HTML. So here again script tag is used. the <b>src</b> attribute is used to provide location of your JavaScript file. You can see the code below .

Code :

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wrhfoog8olzswzit3ps2.PNG)

Output :

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ggvd4hab7dzsnre3ea7.PNG)

That's the Second Method of adding your JavaScript inside your HTML. 

So that's it for today. Don't worry about the script that I wrote inside the script tag or js file.

In next post we will explore some more topic in JS .

Meet you next post 😊😊

Happy Coding 👩‍💻👩‍💻👩‍💻
[Marketing Digital] Como otimizar sua landing page usando player do Youtube 🚀
Tags: dicas, marketingdigital
Published: 2021-08-22 20:55:53

---
title: [Marketing Digital] Como otimizar sua landing page usando player do Youtube 🚀
published: true
date: 2021-07-31 14:52:17 UTC
tags: dicas,marketingdigital
canonical_url: https://jcmaciel.com/marketing-digital-como-otimizar-sua-landing-page-usando-player-do-youtube/
---

Hoje é uma dica rápida! Se você trabalha com marketing digital, sabe o quanto uma página com carregamento rápido influencia na sua conversão.

**Sei, mas qual o problema então?**

Quando usamos o código embed do Youtube ou Vimeo em nossas landing pages, a performance cai muito, ocasionando perda de tráfego ( muitos leads não esperam mais que **2 segundos** para aparecer alguma coisa em seu navegador)

**Direto ao ponto**

1 – Substitua o código **<iframe>** padrão do Youtube, pelo código abaixo: (troque o título e o id do vídeo)

```
<iframe
data-src="https://www.youtube.com/embed/IDdoSEUVideo"
srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:25px/1.5 sans-serif;color:black;text-shadow:0 0 0.5em black}</style><a href=https://www.youtube.com/embed/IDdoSEUVideo?autoplay=1><img src=https://img.youtube.com/vi/IDdoSEUVideo/hqdefault.jpg alt='Título do Video'><span></span></a>"
frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
title="Título do Video"
></iframe>
```

2 – Insira esse pequeno script javascript:

```
<script>
function init() { 
var vidDefer = document.getElementsByTagName('iframe');
for (var i=0; i<vidDefer.length; i++) {
 if(vidDefer[i].getAttribute('data-src')) {
  vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
 } } } window.onload = init;
</script>
```

Pronto, com essas alterações, você certamente terá uma melhora incrível no tempo de load.

Faça a medição no site [GTMetrix](http://gtmetrix.com) e compare!

Até! ![👊🏻](https://s.w.org/images/core/emoji/13.1.0/72x72/1f44a-1f3fb.png)

The post [[Marketing Digital] Como otimizar sua landing page usando player do Youtube 🚀](https://jcmaciel.com/marketing-digital-como-otimizar-sua-landing-page-usando-player-do-youtube/) appeared first on [JCMaciel.com](https://jcmaciel.com).
Mi primera entrevista técnica. 
Published: 2021-07-31 14:36:28

Y si no paso, será mi última gran oportunidad, y si me enredo. Yo sé que todos hemos tenido estás dudas, pero déjame decirte que lo mejor que me pudo pasar fue no haber pasado, yo que lo que estás pensando, que dice este man, pero déjame explicarte.

Reconocí muchas falencias que tengo, profundizar en unos temas, me da la oportunidad de crecer como profesional.
Gắn Định Vị Xe Máy Tại Quận 10

Tags: ddinhjdinhvixemayquan
Published: 2021-07-31 14:19:32

* Chỉ Cần Alo là có kỹ thuật đến lắp Định Vị Xe Máy Tại Quận 10 uy tín, Lắp đặt dấu kín bí mật, Chúng tôi không lắp bình ắc quy xe máy, vị trí này dễ bị phát hiện. Lắp tận nơi bảo hành tận nơi.

Bạn đang muốn lắp Định Vị Xe Máy Tại Quận 10 nhưng không biết đơn vị nào cung cấp uy tín ? sản phẩm nào chất lượng ? bạn muốn lắp định vị để theo dõi người thân? Bạn muốn lắp đặt dấu kín, bảo mật thông tin theo dõi một cách cá nhân. Đến với chúng tôi bạn hoàn toàn yên tâm về điều đó.

- Lắp Định Vị Xe Máy Để Giám Sát Con Em Đi Học tại quận 7
- Lắp Định Vị Xe Máy Để Giám Sát Nhân Viên.
- Lắp Định Vị Xe Máy Để Giám Sát Cá Nhân Vợ Chồng.
https://dinhvixemay.org/dinh-vi-xe-may-tai-quan-10.html
https://dinhvixemay.org/gan-dinh-vi-xe-may-tai-quan-10.html
SQL - NOT REALLY LANGUAGE.
Tags: sql, beginners
Published: 2021-07-31 13:42:04

## The SQL language 👨‍🚀

SQL is a tool for organizing, managing and retrieving data stored by a computer database. The original named by IBM was **Structured English Query Language** which we often call is **SEQUEL**. **SQL** - the shorten named by the Hawker Siddeley Aircraft Company of the United Kingdom after was a trademark owner. But somehow both them are correct.

SQL is a computer language that you can work with the database. In real life, you are often working with a special type of database and in SQL we are called it is the **relational database**.

The computer program that controls the database is called a database management system (DBMS).

When we use SQL to make request. The DBMS processes that request and retrieves the requested data and returns it to us. Whole this process we is called **query** - hence the name **Structured** ***Query*** **Language**.

```bash
----------------
  SQL Request 👨‍🚀 
  (Give me 🍎)
----------------
      | ^
      | | 🍎 Data
      v |
----------------
    DBMS 🏢
----------------
      | ^
      | | 🍎 Data
      v |
----------------
   Database
(Mysql, MSSQL,..)
     Store
🍓🍒🍎🍉🍑🍊🥭🍍🍌🍋🍈
🍏🍐🥝🍇🥥🍅🌶🍄🥕🍠🧅
----------------
```

## Database Management System (DBMS) 🏢
SQL is used to control all the functions in DBMS. It's include many tools to process data in the database.

- Data definition: allows a user define the structure and organization of the stored data and relations.
- Data retrieval: allows a user or and application program retrieve stored data and use it from the database.
- Data manipulation: allows a user or an application program to retrieve stored data from the database and use it.
- Access control: used to restrict a user permission to protected data.
- Data sharing: used to coordinate data sharing by the current users to make sure that changes at the same time will not impact another one.
- Data integrity: used to defines integrity constraints in the database. Protected it from inconsistent updates or system failures.


## Summary:
- SQL is comprehensive language for controlling and interacting with the database management system.
- SQL is not really a computer language like C++, C, Java,...
- SQL is a database sublanguage.
- SQL statements can be embedded into another language.
- SQL is used to control all the functions in DBMS.

- Enjoy your time 🪴

Thanks for reading.

<a href="https://www.buymeacoffee.com/hte305" target="_blank">
![Buy me a coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ddtyyk0zuud3h7o0sjpq.png)
</a>
Why are there so many tokenization methods in Transformers?
Tags: python, machinelearning, deeplearning, datascience
Published: 2021-07-31 13:14:32

{% youtube bWLvGGJLzF8 %}

HuggingFace's transformers library is the de-facto standard for NLP - used by practitioners worldwide, it's powerful, flexible, and easy to use. It achieves this through a fairly large (and complex) code-base, which has resulted in the question:

"Why are there so many tokenization methods in HuggingFace transformers?"

Tokenization is the process of encoding a string of text into transformer-readable token ID integers. In this video we cover five different methods for this - do these all produce the same output, or is there a difference between them?

📙 Check out the [Medium article](https://towardsdatascience.com/why-are-there-so-many-tokenization-methods-for-transformers-a340e493b3a8) or if you don't have Medium membership here's a [free access link](https://towardsdatascience.com/why-are-there-so-many-tokenization-methods-for-transformers-a340e493b3a8?sk=4a7e8c88d331aef9103e153b5b799ff5)

I also made a NLP with Transformers course, here's [70% off](https://www.udemy.com/course/nlp-with-transformers/?couponCode=MEDIUM2) if you're interested!
I made a Simple Sign In webpage. Check it out!
Tags: signin, webpage, html, css
Published: 2021-07-31 13:12:31

Hey there,

I have made a Sign In webpage 
Using html,css & my UI/UX skills.
Hope its good!

Check it out here and press the vote button that is on the above once pressing the link.
Appreciate U Doing that!

https://codier.io/creation/HJTkQdGJt


If u want to recommend some changes .
Please comment below

Thanks,
@theWebdroid 

Subscribe to my youtube channel,will start uploading in 3 days!
https://www.youtube.com/channel/UC972D3BDec2wz0lYWqT4o_Q?sub_confirmation=1

Also Pls Follow me 
Sp i can upload more Web dev and App Dev projects.
IIFE - Immediately Invoked Function Expression - JavaScript
Tags: javascript
Published: 2021-07-31 13:10:29

Topics covered:
1. Introduction
2. Why do we use IIFE
3. Alternative in ES6+

## Introduction

It is a function expression that runs as soon as we define it.

```javascript
(function(){
  console.log("My favorite hero is Captain America")
})()
```
The first parathesis make it an expression and last parathesis immediately invokes/calls it.

In short, it runs right away

## Why do we use IIFE
Most commonly use of IIFE is to avoid declaring variables in global scope

Let's see how
```javascript
var num = 20;
{
  var num = 10;
  console.log(num);
}
console.log(num);

// console
// 10
// 10
```
As javascript has function level scope, let's solve this problem by taking advantage of that
```javascript
var num = 20
(function consoleNum() {
  var num = 10;
  console.log(num);
})();

console.log(num);
// console
// 10
// 20
```

## Alternative in ES6+
In JavaScript ES6+, we can use the powers of **let** & **const** to replace IIFE as let & const has block level scope, so we don't pollute global name space.

```javascript
let num = 20;
{
  let num = 10;
  console.log(num);
}

console.log(num);
// console
// 10
// 20
```

This is much cleaner and readable.
Valid Mountain Array — Solution and Approch in Java
Tags: java, algorithms, programming
Published: 2021-07-31 12:59:48

I have started practising for my interviews on Leetcode and thought of sharing each problem and the approach i use for solving them through these blogs.
The first problem I chose is Valid Mountain Array and is an easy problem as compared to the one’s i’ve come across on leetcode.Each and every problem has an algorithmic approach one needs to understand before moving ahead with coding the solution.

>The problem we are going to discuss : 
###[Valid Mountain Array](https://leetcode.com/problems/valid-mountain-array/)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/msa2cd5o39euiea4n92z.png)
 
Given an array of integers arr, return true if and only if it is a valid mountain array.
Recall that arr is a mountain array if and only if:
*`arr.length >= 3`
*There exists some i with 0 < i < arr.length - 1 such that:
*`arr[0] < arr[1]` < ... < `arr[i - 1] < arr[i]`
*`arr[i] > arr[i + 1]` > ... > `arr[arr.length - 1]`

##Approach : 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eqc26lqap9c67thua5l7.png)

I solved it using two variables which were used to check the given conditions.
Do go through the above images to get a detailed approach and alogirthm how the problem was solved.


##Solution in Java !

```
// 941. Valid Mountain Array
// Easy
// Given an array of integers arr, return true if and only if it is a valid mountain array.

// Recall that arr is a mountain array if and only if:

// arr.length >= 3
// There exists some i with 0 < i < arr.length - 1 such that:
// arr[0] < arr[1] < ... < arr[i - 1] < arr[i]
// arr[i] > arr[i + 1] > ... > arr[arr.length - 1]

//Solution in java

class Solution {
    public boolean validMountainArray(int[] arr) {
        int i = 0;
        int j = arr.length - 1;
        int n = arr.length - 1;
        while (i + 1 < n && arr[i] < arr[i+1]) {
            i++;
        }
        
        while (j > 0 && arr[j] < arr[j-1]) {
            j--;
        }
        
        return (i > 0 && i == j && j < n);
    }
}
```

I hope the solution was easy to understand !If you still have any doubts feel free to reach out to me at Linkedin! I am attaching my linkedin id below, connect or follow to support and asks your doubts there !
Happy Coding! 🐱‍💻
Connect and Follow on [Linkedin](https://www.linkedin.com/in/rubleenkaur2201/) and [Github](https://github.com/rubleen1903) to show support !
Testing Environment variable in pytest
Tags: python, pytest, environment
Published: 2021-07-31 12:52:23

Suppose, we have a method that uses environment variables.
```python
import os
def get_env_vars():
    user = os.environ['USER']
    token = os.environ['TOKEN']
    return user, token
```

We need to test this method. We will see 3 ways to test this method.
## Using `monkeypatch` 
```python
def test_get_env_vars_with_monkeypatch(monkeypatch):
    monkeypatch.setenv('USER', 'hasan')
    monkeypatch.setenv('TOKEN', 'xxx')
    u, t = get_env_vars()
    assert u == 'hasan'
    assert t == 'xxx'
```

## Using `unittest.mock` module
from unittest import mock

```python
def test_get_env_vars_with_mock_module():
    with mock.patch.dict(os.environ, {'USER': 'hasan', 'TOKEN': 'xxx'}):
        u, t = get_env_vars()
        assert u == 'hasan'
        assert t == 'xxx'
```

## Using `pytest-env` plugin
We can use this plugin to set environment variables that don't really matter to the function implementations.

1. Install `pytest-env` plugin using `pip install pytest-env`.
2. Add the following portion to `pytest.ini`, `setup.cfg` etc files:
```ini
[pytest]
env =
    USER=hasan
    TOKEN=xxx
```
3. Then write test as following:
```python
def test_get_env_vars_with_pytest_env_plugin():
    u, t = get_env_vars()
    assert u == 'hasan'
    assert t == 'xxx'
```
Multiply a string? 🤔
Tags: computerscience, discuss
Published: 2021-07-31 12:39:18

Here's a simple thought, why can't you multiply, devide subtract a string?

In language design terms here's some examples.
```js
"Hello world" * 2 // ["Hello world", "Hello world"];
"Hello world" - 3 // "Hello wo"
"Hello world" / 3 ["Hel", "lo ", "wor", "ld"];
```

Umm yeah it's not so easy I suppose to handle remainders and it's a little confusing in some of the cases, what do you think?