teleren/devto huggingface dataset:
Facebook Sign Up | Login using HTML & CSS FOR BEGINNERS
Tags: webdev, html, codenewbie, developers
Published: 2021-06-23 10:46:44

In this tutorial, you will get an in-depth overview of how you can build a facebook Sign Up | Login using HTML & CSS FOR BEGINNERS

I will lay out how I built a facebook Sign Up | Login using HTML & CSS and the concrete steps you can take in order to build your own along with other video-based apps like it.

Through this the video,I will teach you everything you need to know to create facebook sign Up | Login using HTML & CSS FOR BEGINNERS.

Do you want to improve your HTML & CSS skills?Then this video is for you.

{% youtube LPHobzrF8xw %}


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)
Why mail is not shown in Mailchimp's oubound mail when I send it via SMTP using custom headers?
Tags: help, laravel
Published: 2021-06-23 10:42:24

I have the following problem:

{% stackoverflow 68098034 %}

What I try to do is to send a email using mandrill template via SMTP using laravel but I have no clear indication that email has been sent.

Can you help me?
Installing Tailwindcss V 2.2
Tags: tailwindcss, css, frontend
Published: 2021-06-23 10:33:08

Installing Tailwind Css now has never been easier than ever Just add inde.html and style.css file. 
Though can use it directly through CLI.It si sipired from the [video](https://www.youtube.com/watch?v=NoetF4IDOEY)
**First step**
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yw45736pa5z12r92zayw.png)
**Second stop** 
We will see the style.css file with a huge file we need to purge it 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/byej7xfeflq9mrowuj2t.png)

**Third** 
You if you want to always watch for changes
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zmldlc3ssl5awst169gl.png)
  
**At the end you need to run cause when you are running watcher you need to realize it doesnt remove any class you have changed its still there is the style sheet**
**After finishing everything**
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/klxv51i3py3k482lqin8.png)
My journey to be a Developer
Published: 2021-06-23 10:17:02

My name is Diego I'm Italian living in Dublin Ireland.
I was always uncertain about what to do in my life, until around 3 years ago.
I was working in hospitality for long time but I was not happy at all.
I wanted to do something different but didn't know what, so I just did the same job for years.
I tried accounting for a career change but I didn't like it.
I tried coding around 3 years ago, doing a small course at the Dublin Institute of design, where I learned the basic of HTML and CSS and some design skills like Photoshop.
I enjoyed and I did a full year at the same college, where I got an higher certificate in media production.
Honestly I didn't like it because In my opinion we did too much theory and not so much practice.
Especially I was really fed up of the amount of blog articles we had to write, and my schoolmates as well.
At the time I didn't understand that write a blog article, it's important to give you some visibility on the web.
It's an important part of networking that is something crucial for a developer.
After the college I did several online courses, also the Techdegree in Front end by Treehouse that is an online Bootcamp.
I like coding especially the UI/ Fronted part.
I love in particular CSS and animations.
I still have a lot to learn, improving my JavaScript and learn React for example.
I get often discouraged by the amount of skills company requires, even for a junior role.
I was looking for a junior position since September more or less, but I just had some interviews and nothing more.
Anyway this is what I really wanna do, I think create a website It's like painting and related to art.
I also love photography and I have a SDL camera.
If someone wants to have a look to my website
https://www.diegoraffa.com
I would love to hear somebody else options and struggles to become a Developer.
Have a good day to everyone
Used OLDSMOBILE Engines
Published: 2021-06-23 10:02:50

Used OLDSMOBILE Engines Used OLDSMOBILE Engines
Used OLDSMOBILE Engine
Have any real options squared up in your quest for a used Oldsmobile engine for sale in the USA? Let us thank you for visiting our automiles-parts.com website before we reveal that, like everyone else, we can assist you. We thank you sincerely. Here you can avail of the complete details of rebuilt Oldsmobile engines & all models.

USED OLDSMOBILE ENGINES FOR SALE
Your Oldsmobile car most likely requires a replacement or refurbished engine, which is why you've arrived at our website. Your quest is only a subset of your interests. To meet your goals, you have a lot more to face. Engine installation and any maintenance are your real challenge with the understanding that your Olds will only be operable after you fail to look for an engine, funding, ordering, shipping, and technical labor. Success relies heavily on the quality of the Oldsmobile engine you purchase and its initial miles, the present state of the refurbished engines, or the quality of workmanship. Warranties support.

 

Get 25% off on Orders at Autoparts-miles.com - Click Here

 

Perhaps the aims are better fulfilled by purchasing a restored Oldsmobile engine or a remanufactured Oldsmobile engine. Autoparts-miles.com also sells splendid low miles used Oldsmobile engines. Win quotations for FREE right now. Quick outbound delivery if you have agreed to order.

Get the Oldsmobile's VIN while calling.

What shop address do you take into account?

What portion of Oldsmobile? (All the big Oldsmobile components we sell.)

AVAIL USED OLDSMOBILE ENGINES WITH REASONABLE PRICES
It is at this stage in the trip where the majority of the engine maintenance costs can be considered. These activities can be smoothed out by a reputable used engine dealer to have cost savings. Usually, this is precisely where our opponents, by catering to your sense of urgency, call things nice for themselves.

 

Used Oldsmobile Alreo engine for sale

 

If your Oldsmobile is your main vehicle, or if you are going to bust your knuckles in your scarce spare time, the urgency is real for you. You must choose a used engine dealer who has actual availability as well as real pricing quotes at the cost of availability. Know that there is a surplus on the market for regular Oldsmobile engine sizes and the need for urgency to spell extreme prices is categorically incorrect for you. Call the below number and place your order for used oldsmobile engines in USA!!!

 

Get Quote for Free 1-888-855-1808

 

We're understanding. All the time, we learn about rivalry draining bank balances. A large number of our consumers are sole fans of Oldsmobile. Several Oldsmobile owners can be seen restoring a car that has been sitting idle in the garage for several years.
Introducing Rsyncinator
Published: 2021-06-23 09:40:59

In March last year, I released a web tool for building rsync commands via a GUI. I've now further developed it into it's own Mac app which is named Rsyncinator.

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

The Mac app adds some niceties, such as being able to store and load commonly used rsync commands and using a convenient file picker for local paths. It also comes with all the goodness of a native Mac app:  It's fast, small, and has multi window/tab support.

After I finished building it, I decided it needed a website of its own. So I've rewritten the old Rsync for Snipline website from the ground up. You can still use the web tool, although it's slightly different now (More inline with the Mac app).

You can see the [new website here](https://rsyncinator.app) and if you like the look if it, you can get the Mac app on the [App Store](https://apps.apple.com/gb/app/rsyncinator/id1569680330?mt=12).
Creating a Google Kubernetes Engine Autopilot cluster using Terraform
Tags: googlecloud, kubernetes, terraform
Published: 2021-06-23 09:29:01

In the [previous part][part-2] we created our network stack. In this part we will configure the GKE Autopilot cluster.

The following resources will be created:

* GKE Autopilot Cluster 
 
![GKE autopilot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/spfjljzha4zfxddqquo7.png)

# GKE Autopilot Cluster 

Our GKE Autopilot Cluster is hosted in the Web subnet. The public API server endpoint can only be accessed from a specific range of IP addresses.

Create the terraform file `infra/plan/gke.tf`:

```terraform
resource "google_container_cluster" "private" {
  provider                 = google-beta

  name                     = "private"
  location                 = var.region

  network                  = google_compute_network.custom.name
  subnetwork               = google_compute_subnetwork.web.id

  private_cluster_config {
    enable_private_endpoint = false
    enable_private_nodes    = true
    master_ipv4_cidr_block  = var.gke_master_ipv4_cidr_block
  }

  master_authorized_networks_config {
    dynamic "cidr_blocks" {
        for_each = var.authorized_source_ranges
        content {
            cidr_block = cidr_blocks.value
        }
    }
   }

  maintenance_policy {
    recurring_window {
      start_time = "2021-06-18T00:00:00Z"
      end_time   = "2050-01-01T04:00:00Z"
      recurrence = "FREQ=WEEKLY"
    }
  }

  # Enable Autopilot for this cluster
  enable_autopilot = true

  # Configuration of cluster IP allocation for VPC-native clusters
  ip_allocation_policy {
    cluster_secondary_range_name  = "pods"
    services_secondary_range_name = "services"
  }

  # Configuration options for the Release channel feature, which provide more control over automatic upgrades of your GKE clusters.
  release_channel {
    channel = "REGULAR"
  }
}
```

Complete the file `infra/plan/variable.tf`:

```terraform
variable "gke_master_ipv4_cidr_block" {
  type    = string
  default = "172.23.0.0/28"
}
```

Let's deploy our cluster

```shell
cd infra/plan

gcloud services enable container.googleapis.com --project $PROJECT_ID
terraform apply
```

Let's check if the cluster has been created and is working correctly:

GKE Autopilot cluster

![Cluster basics](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2mmkyw49jcfd7dfwx5cq.png)![Automation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1loocxelilxwr8pflak0.png)![Networking](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hb72ootiyxocpnw5foof.png)![Security](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fn2dwv45vsnuz40pd6vi.png)![Metadata & Features](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s5ajj1t3n1vx6fvdj86j.png)

# Conclusion

Our GKE cluster is now active. In the [next part][part-4], we will focus on setting up the Cloud SQL instance.

[part-2]: https://dev.to/stack-labs/configuring-an-isolated-network-in-google-cloud-5cib
[part-4]: https://dev.to/stack-labs/securing-sensitive-data-in-cloud-sql-23hg
The one about API's and boobies - WEEK 7
Tags: javascript, beginners, codenewbie
Published: 2021-06-23 09:26:51

Good vibes, well...it didn’t last long. I moved onto creating an API. Lo and behold, we are all in the same boat. Even those who have a lot of experience, were feeling a little on edge. 

Using supertests, error handling with Express and creating routers, controllers and models was like exploring a new planet and writing a map to navigate, both at the same time.

There was a lot of support from tutors via zoom calls and some absolutely amazing, selfless friends to help me along the way. 

Simple GET requests, took a sharp turn to the dark side quickly, when queries got involved. Again, its all new territory. I had to remind myself, that this what I signed up for and to keep going. Sure enough, with some guidance, I was hitting my goals.

We learnt how to host a Psql Database and express server using Heroku. This will allow YOU, to see what I’ve been up to, and it not just running my own computer.

 I reached the HALF WAY POINT !!!

Admittedly, up until now, there have been times where I’ve turned off the video during a lecture to have a little cry, burnt the chicken Jalfrezi whilst thinking of '.then blocks' and forgotten to brush my teeth. However to think that my journey as a complete novice started on the 12th April and it is the 18th June now, I have come so so far in such a short space of time. 

Juggling a top to bottom house renovation, bringing up three children aged 10 and under, living at my inlaws, family commitments, challenging cultural taboos and having developed two breast lumps within these 7 weeks ohh and the usual drama of life...I can STILL sleep soundly knowing I've reached half way.

Oh and yes, after numerous scans, thankfully, I’m clear of cancer. Fibroidema it is..and what’s the first question the consultant asked ? “Are you under any stress lately?" My facial expression, well, I’ll leave that to your imagination.
Best way to store images on server
Tags: help, mongodb, node, explainlikeimfive
Published: 2021-06-23 09:21:50

I am an amateur in node and currently working on a realistic e-commerce project with mern-stack for my portfolio. And I have a problem on how to store images on node-express server. I have searched the web and found out that multer is quite good but it saves on my computer, I want to know from y'all here what methods you use to store your images whenever you are making an ecommerce website for a client. 

Thank you...
셀레늄 막기, 그리고 뚫기
Tags: webdev, testing, korean, selenium
Published: 2021-06-23 09:16:59

## 셀레늄 막기

보통 사이트들도 당연히 사용하고 있고, 간단하게 막을 수 있다. 당연하겠지만 WebDriver 를 막을 수 있는 웹 사이트의 유일한 방법이기도 하다.

```js
if(navigator.webdriver) {
  alert('어디서 우리 신성한 사이트에 봇질이야?');
  // 진입 못하게 막는 예시. 응용하여 캡챠라던가 여러 조치 수행 가능
  document.write('');
}
```

[Navigator.webdriver - MDN](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/webdriver)

진짜 셀레늄 막고 싶으면 캡챠 솔루션 써라 병시나.

## 셀레늄으로 뚫기

웹 사이트가 할 수 있는 방법은 위 방법 뿐이기 때문에 대부분의 셀레늄으로 일반 브라우저를 위장하여 접속하고 테스트 자동화를 수행할 수 있다.
**양심껏 쓰기 바란다.** 물론 그래도 일부 무서운 사이트(특히 구글 등)는 알아채고 캡챠를 보여주거나, 액티브엑스 떡칠한 미친 사이트는 웹드라이버 프로세스를 죽이기도 한다.

```java
System.setProperty("webdriver.chrome.driver", "C:\\Utility\\BrowserDrivers\\chromedriver.exe");
ChromeOptions options = new ChromeOptions();
options.setExperimentalOption("excludeSwitches", Collections.singletonList("enable-automation"));
options.setExperimentalOption("useAutomationExtension", false);
WebDriver driver =  new ChromeDriver(options);
driver.get("https://www.google.com/");
```

```python
from selenium import webdriver

options = webdriver.ChromeOptions()
options.add_experimental_option("excludeSwitches", ["enable-automation"])
options.add_experimental_option('useAutomationExtension', False)
driver = webdriver.Chrome(options=options, executable_path=r'C:\path\to\chromedriver.exe')
driver.get("https://www.google.com/")
```

출처: 
[Selenium webdriver: Modifying navigator.webdriver flag to prevent selenium detection](https://stackoverflow.com/questions/53039551/selenium-webdriver-modifying-navigator-webdriver-flag-to-prevent-selenium-detec/53040904#53040904)
Perfoming Cross-browser Testing Is Easier With Comparium
Published: 2021-06-23 09:11:50

Website builders can often overlook technical problems, minor errors and bugs. Therefore, site testing is a vital final step in website development. However, let's talk about one of the best tools for cross-browser testing Comparium.

Comparium is a perfect [Firefox browser emulator](https://comparium.app/firefox-emulator.html) that can guarantee your site to be compatible with any version of the browser on any OS in a matter of a couple of clicks. Run real-time tests, check the site’s behavior, easily interact with web resources without worrying about any necessary software.
The one about Aysnc and Await - WEEK 6 
Tags: javascript, codenewbie, beginners, bootcamp
Published: 2021-06-23 08:56:38

You can only go up from the bottom right. That’s what they say.

I did solo sprint on Monday morning and got a couple of green ticks in my tests. I was back again ! 

I’ve never been a quitter. Life has taught me so much. Getting engaged at the sweet age of 18, married at 20, three miscarriages and now blessed with three beautiful children at the back end of extremely difficult pregnancies is one small chapter of my life. I’m in no position to be ungrateful or feel sorry for myself. I have to be a role model… I have to rock on. 

Sitting through a lecture about Async and Await,  my confidence levels were rising. I understood it. Its an easier way to read code, compared to promises and blocks but slowly but surely, the lines start to blur. I had to remind myself to take baby steps. Slow down and work with what I know is better than moving forward too quickly and mushing everything up.

I am confident that soon enough, with more practise, I can go back and refactor my code. 

I’ll feel dead clever then too. 

Advanced error handling using pg-format for formatting query strings was a little intense, theory wise, but implementing it was much easier. It makes sense to create default errors to keep the code tidy. So far, this was one of the toughest weeks, mentally.
Header Some useful icons helpers for xamarin forms
Tags: xamarinforms
Published: 2021-06-23 08:49:40



1. https://andreinitescu.github.io/IconFont2Code/

download font awesome or Material icons
upload it on the site
the generate the c# equivalent and copy it toyour project.
2.
https://coolsymbol.com/
this is an emogis website, just copy the icon and paste on your xaml text.

thanks.
Error when calculating sum of 2 number in JS
Published: 2021-06-23 08:41:00

I try write JS to calcalculating sum of 2 number in JS, but I get error !
This is mycode: 

```html
<!DOCTYPE html>
<HTML>

    <HEAD>
    <TITLE>Thay đổi giá trị của thuộc tính</TITLE>
    <META http-equiv="Content-Type" content="text/html; charset=utf-8">
    </HEAD>
    
    <BODY>
    <h2>Hãy nhập hai số và click vào nút Tính tổng</h2>
    <INPUT type="text" name="SoHang1" > +
    <INPUT type="text" name="SoHang2"> =
    <INPUT type="text" name="KetQua">
    <INPUT type="button" value="Sum"
    onClick="KetQua.value = parseFloat(SoHang1.value) + parseFloat(SoHang2.value)">
    </BODY>
    
    </HTML>
```
So, I hope everyone can help me fix this error ! Thanks !
The one about being dumped - WEEK 5
Tags: javascript, beginners, codenewbie, impostersyndrome
Published: 2021-06-23 08:35:50

Going into the second week of Backend, we had a Bank Holiday. Spending the whole weekend running around finding bathroom fixtures, flooring and whatever else I needed for my home renovation was a refreshing but at the same time, I was itching to get back to the crux of coding, out of fear of forgetting.

Tuesday onward, we were exposed to Express.js, Sql and MVC and Insomnia. Moving from Node to Express was a wobbly transition but it surely did mould the code in a neater way. Sql is fun ! I feel like I’ve dipped my toe in the ocean however, there’s a lot yet to explore. MVC patterns were a little mind boggling but when putting it into practise, it came together...she says.

Insomnia was cool. It allowed me to send and get information from my laptop and it was a really easy way to do it. 

I learnt a value life lesson this week through pair programming. My partner unfortunately, didn’t have much patience and was I was dumped in the first 5 minutes into the sprint. Admittedly, this did knock my confidence alittle...ok, ALOT.  However I came out much stronger. The weekend was spent rethinking life. So far, my experience on the course has been a self learning voyage. Not just coding wise but finding more about myself. Re-evaluating my choices was terrifying. Can I do this mindset kicked in !
Setup a HTML tooltip on hover using CSS
Tags: tutorial, html, css
Published: 2021-06-23 03:31:24

Tooltips are little boxes containing helpful text that appear when you hover over certain elements in a web page. They’re a useful UI component for providing additional information to users without having to clutter the interface. In this tutorial we’ll be creating a simple tooltip using HTML & CSS with no JavaScript required.

Let get started with the HTML markup:

```html
<p>Example CSS Tooltip <span data-tooltip="Tooltips are used to provide information about an element on a web page.">i</span></p>
```

The tooltip will appear when we hover over the `<span>` element displaying the text from the data attribute. Alternatively you could apply the data attribute to a hyperlink or button and the tooltip will function the same way.

Now for the CSS starting with the tooltips trigger element:

```css
[data-tooltip] {
  position: relative;
  cursor: pointer;
  background: black;
  color: white;
  font-size: 12px;
  border-radius: 1em;
  padding: 0 0.5em;
}
```

As we’re using a data attribute we can use the CSS `[attribute]` selector which selects all elements with a specified attribute (`data-tooltip`). The actual tooltip that appears on hover will be constructed using `:before` and `:after` pseudo elements:

```css
[data-tooltip]:before {
  content: attr(data-tooltip);
  position: absolute;
  opacity: 0; 
  width: 150px;
  transform:translateX(-50%);
  bottom: 25px;
  padding: 0.5em;
  background-color: black;
  border-radius: 0.25em;
  color: white;
  text-align: center;
  transition:0.2s;
}
```

Next we’ll a small arrow shape so the tooltip looks like a speech bubble:

```css
[data-tooltip]:after {
  content: "";
  position: absolute;
  opacity: 0; 
  bottom: 15px;  
  margin-left: -5px; 
  border: 5px solid black;
  border-color: black transparent transparent transparent;
  transition:0.2s;
}
Code language: CSS (css)
Finally we need to set the opacity to be visible when the tooltip element is hovered:

[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  opacity: 1; 
}
```

That’s all for this tutorial, we’ve just created a animated tooltip using only HTML and CSS. The only drawback when creating tooltips using this method is data attributes don’t support hyperlinks so these tooltips are unable to contain links and are purely text only.
Top 7 Popular Npm Packages
Tags: npm, node, javascript, programming
Published: 2021-06-23 08:22:00

Node.Js Applications Benefit From More Than A Million Open-Source Packages Available In The NPM Package Registry.

#Dotenv
.env file into process.env. storing configuration in the environment eparate from code is based on the twelve-factor app methodology.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3gc6am7dhot6s10f1zny.png)

#Bcrypt
bcrypt is a library that help youeasily hash password and compare
the in node.js
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1kxbvin838mt0dxt2qku.png)

#Uuid
uuid is a unique random ids values generator. it generates strong random values 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fzd0ufidy7k2naafek8q.png)

#Axios 
axios is a popular promise based http client for the browser and
node.js
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xvecwxm963k15muecayl.png)

#Socket.Io
socket.io enables realtime bi-directional communication between web clients and servers 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gdhf1t8v2eqxqjrmuo9b.png)

#Moment
moment.js is a data library for parsing, validating, manipulating
and formatting dates 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n8mnellhezhj5leld3md.png)

#Lodash
loadsh is very useful, when working with numbers, array, objects,
strings, etc. 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5u137dz6bpqcr1s6vdd0.png)

**Follow on instagram for more content like this**:- https://instagram.com/innocentcoderr/

**Note:-** visit my youtube channel for frontend tutorials

**subscribe to my youtube channel :-** https://www.youtube.com/channel/UCR64vQptythbJ1SmI-ub0Rg

**Resent post :-** 
{% link https://dev.to/innocentcoder/my-secret-design-resources-27f4 %}