teleren/devto huggingface dataset:
chromedp: How to get the URL of the current page
Published: 2021-09-21 17:15:07

---
title: chromedp: How to get the URL of the current page
published: true
date: 2021-01-04 19:05:16 UTC
tags: 
canonical_url: https://devmarkpro.com/chromedp-get-current-page-url
---

In the [previous article](https://devmarkpro.com/chromedp-get-started/), we developed a simple application and open google.com with chromedp. in this article we are going to take a look and one of the chromedp functionalities to deal with the page and URL.

The way that the developers decided to use to do that is a very popular way along with the golang developers, Passing the reference of a variable to the function. I see the same pattern a lot in go libraries, for example, [GORM](https://gorm.io/index.html) also using the same pattern.

In today’s scenario, we want to open the chromedp Github page and go to one of the files inside the repository and print the URL of the page. Simple and easy! so let’s get started!!!

For this purpose, we need to select the element that we want to click on it. Remember we just want to make things that we do manually, automatically. it means if we want to open the file named util\_test.go, first, we need to go to the URL https://github.com/chromedp/chromedp then find the file inside the list and then click on it. For finding the elements inside the page we can simply use [CSS Selectors](https://www.w3schools.com/cssref/css_selectors.asp).

```
// our selector to find the file inside the page.
selector := "a[title='util_test.go']"
tasks := chromedp.Tasks{
  // go to the page
    chromedp.Navigate("https://github.com/chromedp/chromedp"),
  // wait until the elemnt is visible and available inside the page
    chromedp.WaitEnabled(selector),
  // do a click on it
    chromedp.Click(selector),
}

```

so we already go to the page that we wanted the only step that still remains is getting the page URL. For this purpose, we define a string variable and pass it to the Location function of chromedp.

```
var u string
...
chromedp.Location(&u),

```

and here's the complete code:

```
package main

import (
    "context"
    "fmt"

    "github.com/chromedp/chromedp"
)

func main() {
    var u string
    opts := append(
        // select all the elements after the third element
        chromedp.DefaultExecAllocatorOptions[3:],
        chromedp.NoFirstRun,
        chromedp.NoDefaultBrowserCheck,
    )
    // create chromedp's context
    parentCtx, cancel := chromedp.NewExecAllocator(context.Background(), opts...)
    defer cancel()

    selector := "a[title='util_test.go']"
    tasks := chromedp.Tasks{
        chromedp.Navigate("https://github.com/chromedp/chromedp"),
        chromedp.WaitEnabled(selector),
        chromedp.Click(selector),
        chromedp.Location(&u),
    }
    ctx, cancel := chromedp.NewContext(parentCtx)
    defer cancel()
    if err := chromedp.Run(ctx, tasks); err != nil {
        panic(err)
    }
    fmt.Printf("URL => %s\n", u)
}

```

the output is:

```
URL => https://github.com/chromedp/chromedp/blob/master/util_test.go

```
Implementing Pull-to-refresh in Xamarin.Forms
Tags: xamarinforms, mobile
Published: 2021-01-04 19:03:29

You can wrap any content in a `RefreshView` to add pull-to-refresh functionality. Yes, ANY! 

While `ListView` has this baked-in, newer controls such as `CollectionView` don't. All you need to do is surround the control or layout, add a command and boolean indicator, and viola!

{% youtube yT9dhRdF91c %}

{% gist https://gist.github.com/davidortinau/1a8d0e10512669cbd82aa7410bbe203c file=RefreshView_Snippet.xaml %}

{% gist https://gist.github.com/davidortinau/1a8d0e10512669cbd82aa7410bbe203c file=BlogViewModel_Snippet.cs %}

### Resources:
* [Docs: RefreshView](https://docs.microsoft.com/xamarin/xamarin-forms/user-interface/refreshview)
* [Source repository](https://github.com/davidortinau/Xappy/tree/feature/refreshview)
How to Build a Beautiful Calculator Using Simple HTML and CSS
Tags: html, css, javascript, calculator
Published: 2021-01-04 19:02:26

In this article, I am going to show you how to build a beautiful calculator using simple HTML and CSS programming code. You may have built many types of calculators using JavaScript programming code. But if you want to build a calculator very easily, you can do so using HTML programming code. You can easily create a calculator using HTML code. You can design that calculator using CSS code. 

This article will be very good for those who know simple HTML and CSS programming code and want to make a calculator. Here I will try to explain to you step by step [how to make a calculator](https://www.foolishdeveloper.com/2021/01/make-calculator-in-html.html) with the necessary source code and video. You can easily learn what it is to design in general. Earlier I shared with you the method of making different types of calculators like [Neumorphism](https://www.foolishdeveloper.com/2020/12/neumorphism-calculator-ui-design-using.html), [responsive](https://www.backlinkn.com/2020/11/make-calculator-using-.html), [Casio Company](https://www.backlinkn.com/2020/11/how-to-make-calculator-using-javascript.html), etc. Like a simple calculator, it has all the facilities. Here you can easily solve simple mathematical calculations like addition, division, multiplication, subtraction, etc.

 The video below will help you complete this design. If you want to know step by step how to create and learn which programming code is used to create an element. But be sure to watch the video below.
{% youtube SgYdp5muZhc %}

Hopefully by watching the video above you have learned how to make it. You can easily download the required source code by clicking on the download button below.

[Demo and Download Source code](https://www.foolishdeveloper.com/2021/01/make-calculator-in-html.html)
Imagens no HTML
Tags: html, braziliandevs, beginners, webdev
Published: 2021-01-04 19:02:26

No início da _Web_ não utilizavam imagens devido às conexões lentas que demoravam bastante para carregar, mas com o passar do tempo as conexões ficarão melhores e assim possibilitou o tráfego rápido de imagens para serem exibidas nos navegadores.

Para adicionar uma imagem no documento `html` utilizamos a _tag_ `img`, conforme o código abaixo:

```html
<img src="foto-do-autor.png" alt="Foto do autor">
```


{% jsfiddle https://jsfiddle.net/franciscochaves/ch8n7m0r/3 result,html %}

Como podemos observar que a tag `img` é _self closing_, ou seja, não precisa de _tag_ de fechamento, o atributo `src` (_source_) é utilizado para indicar o caminho onde a imagem está localizada, pode ser localmente ou uma URL externa. Já o atributo `alt` (_alternative_) é um texto descrevendo a imagem, e caso a imagem não seja carregada por algum motivo o texto é exibido.
Code  is Love
Tags: programming, javascript, codenewbie
Published: 2021-01-04 18:59:02

One of the most amazing things about life is family and friends. The fact that we get to bond with other people is absolutely amazing, we are able to connect with people on a daily basis and talk about how our day went, maybe about that new tech job you just landed at Google.
Success just seems worth it when we get to share it with the people we care about the most.

Learning to code programs is togetherness because it brings individuals of all walks of life together under one umbrella called the Web. 

Writing programs is my way of giving back to the universe forming bonds with others through hashes, objects, Ruby , JavaScript, React, Redux and Sinatra connecting them together in a web of information.

To be honest most programmers might just think of coding as a way to provide for their families (although true) However, it’s much more than that!

It’s feeding people who are less fortunate than ourselves through organizations like Feeding America https://www.feedingamerica.org/ who secure a significant amount of their donations online. Coding is to reach out to the world gathering resources to provide food, clothing, and shelter to those in need.

Coding enables us to intertwine with people who do not look like us or sound like us in native languages, unraveling the mystery of cultures from all over the globe. 

Coding isn’t judgmental or racist, it’s inviting and accepting. When we code we unlock the potential of humanity bringing everyone together under the magnificence of humanity. 

Whenever you turn on your monitor think of these things before you enter your first line of code, and then my friend, you will truly code happy.
My understanding of TCP three way handshake
Published: 2021-01-04 18:54:30

---
title: My understanding of TCP three way handshake
published: true
description: A short explanation of my current understanding of the three way handshake.
tags: 
//cover_image: https://images.unsplash.com/photo-1580893246395-52aead8960dc?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1234&q=80
---

I recently did a dive on TCP and got to understand a bit about the three way handshake. In an attempt to solidify my knowledge I'm writing an article on what I learnt. So let's get started.

### What's the Three way handshake?

Well, for starters the three way handshake is simply a way for both the client and server to acknowledge that they're both communicating on the right socket. It is also used to initiate, negotiate and separate TCP sockets connections at the same time. 

### How does it work?

So the journey of the three way handshake starts from the client. The client sends a packet to the server 

`SYN: A`
*Where A is any random number*


This basically means "Hey server synchronize with my random number A" which also means "Hey server all my messages will start with A"

Then the server ACKnowledge the client's synchronization, and then sends its own synchronization number

`ACK: A+1; SYN: B`
*Where B is also any random number*

That basically means "Hey client I'm acknowledging your Syn number, Also all my messages will start with B".

Then finally the client responds with 

`ACK: B+1`

Which basically means "Hey server, I'm acknowledging your syn number too. Cheers".

### Additional resources

Here are additional resources to questions I had about the three way handshake.

**Why do we need a 3 way handshake**
https://pcarleton.com/2018/06/06/why-does-tcp-need-a-3-way-handshake-anyway/

**Why does the ACK bumb the number by 1**
https://stackoverflow.com/questions/6804979/why-does-tcps-three-way-handshake-bump-the-sequence-number-when-acking

**Why not just use 2 way handshake**
https://networkengineering.stackexchange.com/questions/24068/why-do-we-need-a-3-way-handshake-why-not-just-2-way

Thanks for reading this far. That's my basic understanding of the three way handshake.

Thanks again ;)
#Day 20 & 21: Hackerrank Waiter problem and Units in CSS 
Tags: 100daysofcode
Published: 2021-01-04 18:52:08

Yesterday, I solved the Waiter problem related to Stack on HackerRank. The question was much more difficult to understand than to solve it. Even the example had a typo which confused me a lot. It took me the entire evening to solve that question.

Today I studied about the Absolute and Relative Units in CSS and so different examples for each unit. w3schools aids a lot in learning all the small little details. I'm enjoying learning Web Dev. It is so interesting.
GumLab - My first ever software product
Tags: showdev, gumroad, gitlab
Published: 2021-01-04 18:45:41

![GumLab Banner](https://dev-to-uploads.s3.amazonaws.com/i/uweceb5gev7j4dh7xvsm.png)

I actually did it and created my first ever software product!

And once again, it is something created to scratch the itch of it's creator.

For my upcoming PowerShell book I wanted to give buyers access to a GitLab project with all the code snippets from the book.

Unfortunately I could not find any ready made solution, but given the great APIs from Gumroad and GitLab I set out to build one. The result is GumLab, a easy way to sell access to GiLab projects through Gumroad.

It deploys on Vercel with just about 5 minutes of total setup time.

If you want to try it out you can get 5$ off by using [this link](https://gumroad.com/l/gumlab/launchweek) until next sunday, 10.01.2021

PS: I actually dog-food GumLab to sell GumLab, isn’t that something?
How to Deploy React Apps to Netlify(Part 1)
Tags: netlify, react, deploy, beginners
Published: 2021-01-04 18:44:34

Hello Developer Friends.2021 is here and I hope you are learning React and would have created few apps and uploaded it on Github.Now hopefully you might be looking for hosting it on some platform so that your friends,family and whole world can see the live App which you have built.Hence,I am sharing one of the ways to deploy your React App on Netlify which is free.

Prerequisites:

1.Create your account on Netlify: 
Netlify link-https://www.netlify.com/
You can sign up using your Github account.
Once you have created your account successfully and connected to one of the Git Providers(here Github) now let us proceed further.
2.Make sure you have pushed your complete code on github and it should not contain any errors.As per my personal experience if my code contain any errors then deployment fails on Netlify.

Steps for Deployment:

1.Connect to Github.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/25b6jac9q4uw0wj2x4va.JPG)
2.Click on "Configure the Netlify app on Github" and choose the repository which you want to deploy.I have taken the example of one of my repositories on Github.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1cwskjdocg6lsid95r10.JPG)
3.Now click on the right arrow next to your repository name and click on "Deploy site".

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6f20ppei55pjx1jc3pnp.JPG)
4.After few seconds your site will be generated which you can open to test your app and share it with others.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5c578ayx3h5hmc8n829n.JPG)

Further to explore & Google:

1.In case you have used React router Netlify creates problem sometimes.You can google it further how to avoid it.
2.You can also set up a custom domain for your site on Netlify.
3.In case of deploying MERN App you can use Heroku and Netlify together.
4.You can also use Github pages for deploying your React Apps.

Happy Deployment Friends.Do share your App links with me :)

You can follow me on [Twitter](https://twitter.com/kritikasri27) and [Github](https://github.com/kritika27). You can also subscribe to my
[React Newsletter](https://mailchi.mp/6ef47ffb6f9b/reactnewsletter)
Day 2 :100DaysOfCode
Tags: 100daysofcode, codenewbie, cpp, productivity
Published: 2021-01-04 18:34:25

Had classes till 7 :(

So tried some leetcode problems in the meantime.
After classes gave contest(on codeforces),was able to solve two ques on my own.

At last did some basic ui changes in a project.
Lets see... what tmrw brings!

You can Follow me->
https://github.com/singhtaran1005
https://www.linkedin.com/in/taranpreet-singh-chabbra-27517918a/
BigInt and JSON.stringify/JSON.parse
Tags: javascript, bigint, json
Published: 2021-01-04 18:25:10

As of this writing, JavaScript's `JSON.parse` cannot serialize the new JavaScript type `BigInt`.

Imagine you have the following:

```js
const data = {
  value1: BigInt('1231231231231231213'),
  deep: {
    // NOTE the "n" at the end -- also a BigInt!
    value2: 848484848484848484884n,
  }
}
```

If you try to just `JSON.stringify(data)` you will get the error `TypeError: Do not know how to serialize a BigInt`.

## Serialization and Deserialization

It should be noted that how you choose to serialize your BigInts affects how you deserialize your BigInts. Generally, I serialize them by doing appending the "n" suffix to the end, similar to how we can declare a BigInt inline. (`BigInt(0)` and `0n` yield the same result).

### Serialization

Here we use `JSON.stringify`'s second argument (It's not always `null`!!! haha.) which is the `replacer`. The job of this function, if provided, is to determine how to serialize something based off of it's key and value. If the `typeof` the `value` is `"bigint"`, we're going to convert it to a string, and tack an `"n"` to the end.

```js
// Serialization
const json = JSON.stringify(data, (key, value) =>
  typeof value === "bigint" ? value.toString() + "n" : value
);
```

The result: `json` is:

```json
{
  "value1": "1231231231231231213n",
  "deep": {
    "value2": "848484848484848484884n",
  }
}
```

### Deserialization

In order to deserialize what we have above, we can use the second argument to `JSON.parse()`. (I bet most people didn't know it has a second argument) This is called the `reviver`, and it's job is to do basically the opposite of the `replacer` above.

Here we'll test for the type and shape of the value to see that it matches a bunch of numbers followed by an `"n"`.

```js
// Deserialize
const backAgain = JSON.parse(json, (key, value) => {
  if (typeof value === "string" && /^\d+n$/.test(value)) {
    return BigInt(value.substr(0, value.length - 1));
  }
  return value;
});
```

## Alternative serializations

This is all a little tricky, because you have to be sure that none of your other data is in a format where it's a bunch of numbers and an `"n"` at the end. If it is, you need to change your serialization strategy. For example, perhaps you serialize to `BigInt::1231232123` and deserialize the same at the other side, such as the example below:

```js
// Serialize
const json = JSON.stringify(data, (key, value) =>
  typeof value === "bigint" ? `BIGINT::${value}` : value
);

// Deserialize
const backAgain = JSON.parse(json, (key, value) => {
  if (typeof value === "string" && value.startsWith('BIGINT::')) {
    return BigInt(value.substr(8));
  }
  return value;
});
```

The choice is really up to you, just as long as you have the tools to do it.
Send Emails To Different People Based On Dropdown Selection: Contact Form 7
Tags: wordpress
Published: 2021-01-04 18:23:19

Read More: [https://www.scratchcode.io/send-emails-to-different-people-based-on-dropdown-selection-contact-form-7/](https://www.scratchcode.io/send-emails-to-different-people-based-on-dropdown-selection-contact-form-7/)
Personal Portfolio: Inspiration
Tags: dohackathon, personal, webdev, design
Published: 2021-01-04 18:12:32

I think it's been more than a year or so that I wished I had time to work on my personal website. I would always end up taking up other side projects, pushing back this personal project always on the back of my list. While the year 2020 was coming to end, I had almost wrapped around most of my projects and the DigitalOcean hackathon announcement gave me the final jolt to go ahead with building my portfolio application. 

![Let's go!](https://media2.giphy.com/media/S5yqNNTQlEZfqQ7InC/giphy.gif?cid=ecf05e47pzrwga9bbtf089ziyma58xcan0nsulitfeskv9m2&rid=giphy.gif)

# Inspiration 
Though I'm a developer by profession, I have a strong inclination towards design. I'm always on the lookout for interesting and innovative UIs. I won't lie, I had thought about a lot of designs over the past few months whenever I would imagine working on this project, but now I had to actually make a call. Decide a design, and get going with it. And so did I start working on it. 

It would be unfair to not mention the brilliant resources and ideas shared by designers all across the globe on [Pinterest](https://pinterest.com), [Dribble](http://dribble.com), [Awwwards](http://awwwards.com/) and multiple [Instagram](http://instagram.com) channels. 

# What did I decide?
After a lot of contemplation (by a lot, I mean a lot 😅), I questioned myself what if I built a city for myself. Does anyone remember [FarmVille](https://www.zynga.com/games/farmville/) game? I do remember being addicted to it at a certain point, maybe a decade ago! So I thought why not to draw inspiration from the age-old classic, and built something similar (of course, with much fewer complications - or well, so I thought so). 

For those who have never played Farmville, this was the original design before it got all *fancy*. 

![Farmville](https://media2.giphy.com/media/3o6ZsTgjNX7aFOTL44/giphy.gif?cid=ecf05e47j45bqvitg5rlm61x6w50awjauf0yr7q4cvesgr0v&rid=giphy.gif)
<figcaption>FarmVille by Zyanga</figcaption>

# How do I build it?
So, even before going to the technical dilemma, I faced the challenge of how to design this city of mine. Even after I build my city, how do you I build a webpage out of it? So, lots of questions had to be answered, and I sat down with my old pal, Adobe Photoshop, and started to draw some ideas into artboards. Found this really awesome [Mapita map builder](https://www.graphicpear.com/mapita-isometric-3d-map-builder/) which helped me layout my town.

On the technical side, I was faced with the question of whether to build it out with Vanilla JS or use some framework. After a lot of back-and-forths, I ended up using Vue. I envisioned a decent amount of animations, and basic CSS transitions weren't being very friendly on different browsers, so I ended up exploring this library called [GSAP](https://greensock.com/docs/v3/GSAP); and it's just great!


I promise to share some of the designs that I have been working on in the next post so you start getting a picture of what I have been working on in the past three weeks. Till then, take care everyone.
My channel-TESKCode
Tags: webdev, javascript, html, css
Published: 2021-01-04 17:59:55

Here I start a new journey of my youtube channel where we learn about web-development from scratch and all video episode are uploaded in hindi language. If u like it then share it who need it most😊😊😊😊😊🔥🔥🔥 
Link below👇👇👇👇
https://youtu.be/9KSv_GXDfZo
Inhumane stories from the tech industry: intro
Tags: story, watercooler, worklife, devlife
Published: 2021-01-04 17:35:26

## Timnit Gebru and the realization of abnormal
I was following the [Timnit Gebru vs. Google story](https://www.washingtonpost.com/technology/2020/12/23/google-timnit-gebru-ai-ethics/) for some time and I have read both sides a bit. When I read the answer of the team lead at Google, I reacted with _"Yeah, c'mon, she was openly complaining about things at the company! They would have fired me for less!"_ and _"What's the question about this? If they say 'you are no longer a team fit' then that's it!"_.

And then it hit me: as a **citizen of a democratic country** and as a **researcher** she really expected very normal things like:
- not getting fired for her opinion 🤐
- not getting punished for venting with other colleagues 😶
- not getting censored 🤫
- getting a sincere, impartial and thorough explanation 🤔

They seem totally normal unless you bring in the corporate world...

## 10 years in tech industry and none of these sound normal
Realizing this I decided to share with you, the dear reader, a couple of stories in the format of `dev.to` series that happened to me with my suggestions what could have been a `humane solution` to the problem.

Regarding Timnit Gebru and Google: I am too tiny and live too far from the United States to discuss the potential racial or cultural ingredients of the topic. I only mentioned her as her case was the catalyst and parts of the conflict were very familiar to me.

> We need to discuss how can we make the tech industry a humane place, where products are built and the people building them can also stay **mentally healthy**.