Forem: Priyanka Kore

Chrome Local Overrides

Priyanka Kore — Sat, 23 Nov 2019 21:34:24 +0000

Don't we all just love devtools. They make our lives so better. Recently I learned about a supercool chrome devtool feature. It's actually been available since chrome 65 release. If you haven't heard about it yet, well, you are in for a REAL TREAT.

Local Overrides lets you make code changes in devtools, which are persistent across page loads. 🤯 In short, it’s like having a devtools instance that doesn’t change when you reload.

This can be immensely useful to debug production errors, performance problems or style related issues. It can be also useful to all the freelancers who don't get the access to the actual codebase.

Let's get you set up!!

Go to the sources tab and click on overrides. If you don't see overrides right away, you can click the two arrows icon and a dropdown will show, it might be hiding there.

Create a folder on your local machine. Let's name it local-overrides. In devtools click on select folder for overrides and select the folder. This is the folder chrome will use to save and access your changes. Don't forget to allow devtools access to our folder.

A new checkbox Enable local overrides will appear, Check that.

You are now ready to start playing around!!

Editing styles: Go to elements tab and edit any style and reload. You will see that styles are persistent. You can also see that the source of the file is now changed.

Editing Header: Go to sources tab and as the message suggests press cmd + p (Mac OS) or ctrl + p (Windows) a search dropdown will appear. Search for the file you want to edit. Edit the title and reload.

Edit Image: Open the image you want to change from the webpage in sources. Now just drag the new image onto this and reload, and as you can see the changes are persistent.

Changes

If you look closely at one of the above changed files in sources tab, you will see all the changed lines are displayed with a purple mark to the left. You can also see all the changes at once using the changes panel. To open the panel you can press cmd + shift + p (Mac OS) or ctrl + shift + p (Windows) and type show changes thereby selecting that option from dropdown.

This is such a lightweight solution. If you go back to the ‘local-overrides’ folder you will see only those files are saved the one's you changed.

Limitations

As you could edit the styles in elements. You cannot edit the HTML the same way. You have to search that particular file in sources and edit it there.
You cannot edit the styles to be persistent in elements at element.style

Now that you know about this feature. Go out there and have fun debugging :) :)

Photo by Priscilla Du Preez on Unsplash

5 non tech podcasts you should listen to

Priyanka Kore — Sat, 27 Jul 2019 07:28:08 +0000

If you have a longer commute, podcasts are really good to utilize that time. There's some really amazing technical podcasts out there. but sometimes after along day at work, you are not up to listing to any more tech talk but you still want to gain some value out of it. That's where this blog post can help you.

Below are the 5 non tech podcasts you should absolutely subscribe to

Soft skills engineering

Soft skills podcast is not not really a tech one(get it 👈🏻). Dave and Jamison are the most hilarious duo. I can't tell you how many times I burst out laughing in a silent train to get strange looks from people. With all the fun you always end up learning something.

Curiosity Daily

If you are a science trivia connoisseur, Curiosity is just the podcast for you. It'll just take 10 minutes of your time (lesser when you 2x ;)) and you always end up learning something interesting. I enjoy this podcast so much, there's just so much out there that we don't know.

Planet Money

All the economy aficionados will love this one. Planet money's tagline says, Economy explained. and it does just that. I like to know, what'a happening in the world. Sometimes we listen to some economy related news, without knowing why certain thing is happening and how it is all connected. Planet money does a great job explaining the little things.

How I Built This

This one will overcharge you with full of inspiration. Innovators from different backgrounds talk about how they build their company. There are such beautiful inspirational stories. For me, when I listen to something like this, it sets a positive and productive tone for the whole day.

Meditation minis

This the goto podcast when you've had a busy day, stressed about something or deal with anxiety. As the name suggests it's little nuggets of relaxation and mindfulness to leave the stressful parts of days behind you.

Thank you for reading! 🙏

If you liked the article, please share it with your friends and coworkers!

Photo by Tiard Schulz on Unsplash

An introvert's guide to making the most of meetups

Priyanka Kore — Sat, 20 Jul 2019 06:32:06 +0000

Meetups are a great place to meet like minded people and share the thoughts and ideas. But honestly, being an introvert at a meetup is NOT fun. You know you wanna learn but you are constantly thinking about, how you are not contributing to any conversation. And just thinking about how intimidating this whole thing is. I am from a foreign country and live in Germany. It's even harder to jump into conversation in a language you barely know.

I just want to clear that, I am not a subject matter expert. I go to a lot of meetups and have personally gone through some problems with talking to people. This is kind of my experience and How I am trying to get over that fear.

It's Okay

if you are nervous
if you don't know anyone
if you just feel like leaving, because you feel nobody's gonna miss you, if you're gone

It's all okay, these things have happened to most people. Just remember, you are here to learn.

Find the right meetup for you:
If you are at a meetup, where you cared about the topic, you will feel like you know the topic or you don't know and are very curious about it. Both of these things can help with starting a conversation
Listen attentively:
Listening sounds so simple yet is very helpful. You become a more active listener: you’re guaranteed to learn more and have a good reason to start a conversation with speakers during or after the event. When you listen to what people are talking about. It is often easier to ask counter questions
Body language:
Maintaining eye contact, having an open posture establishes you as a confident person. Right alignment shows you are interested in a conversation. Greeting people with smile and handshake just sets the tone for whole conversation.
Smile:
It is sometimes very hard to break the ice. In this case, smile goes a long way. If you have met someone at another meetup, just say Hi to people you’ve already met. You’ll be able to politely join conversations and meet more people.
Importance of starting the conversation:
Don't wait around thinking that someone will notice and speak with you. Chances of that happening are very slim. Instead just find a group of people you feel you can talk to. Go over there, introduce yourself, just be curious about the person and about their tech stack and within no time, conversation will flow.
Ask a lot of questions:
If you don’t make your experiences engaging for yourself, you are guaranteed to be bored. Talk to the speaker or the people sitting next to you, whoever. Ask for recommendations for books, websites or other meetups. If you don’t become an active participant in your own learning, don’t be surprised if not much of what you experience is relevant to you.
Keep trying:
Every person is unique. If one approach isn't working for you. Just change the approach and "rinse and repeat" again till you find the right approach for yourself.

So now go out there and get the most learning experience out of the meetup. Here are some of the questions you can start with

How did you find this meetup?
Is this your first time here?
What interesting approach you take to solve a similar problem?
Book and website recommendations on the topic

Stay positive and happy Learning!!!

Traveling Salesman Problem

Priyanka Kore — Fri, 12 Jul 2019 17:25:39 +0000

A couple of weeks ago, I heard about a mathematical problem, which is unsolvable. It peaked my interest. I researched about it and here's what I found out. This blog post is dedicated to all the math nerds out there.

Since the Renaissance, every century has seen the solution of more mathematical problems than the century before, yet many mathematical problems, both major and minor, still remain unsolved. Traveling salesman problem is one of those classic algorithm problems from the class of hard optimisation problems, which has been marked as unsolvable for over two centuries.

Problem Statement 📜

Given a n number of cities, what is the most efficient route you can take to visit each city and come back where you started

Sounds simple, why is it unsolvable 🤔

It sounds so easy, especially if you're working with computers. all you gotta do is check the distance of every round trip and shortest one is your answer. If you have n cities, you will have (n-1)! possibilities. We only count half since each route has an equal route in reverse with the same length or cost. so it's (n-1)!/2. So there you go! we cracked it?

Well that is not good enough. For obvious reasons, that way of solving the problem is known as the naive solution.

The big WHY??

Throughout the years, scientists have come up with newer algorithms to solve the problem. In the early days of computer science, people figured out solutions to scenarios involving a specific number of cities, but a way to solve every traveling salesman problem with a single algorithm (that is, a single list of rules a computer can follow to find the solution) still remains hard to achieve. In the 1970s, mathematician Richard Karp published a paper that suggested we might never find the solution. He showed that the problem is NP-hard, which means that there will never be an algorithm to solve it 😲

Photo by Charles Forerunner on Unsplash

Scroll like you are oblivious to the browser!

Priyanka Kore — Fri, 05 Jul 2019 15:22:10 +0000

It's the age of modern apps. In these modern apps, unquestionably, we want scrollbars look and behave the same way in all the browsers and in all operating systems. Scrollbars can be an important part of the design. Look at the CSS Tricks website, how beautifully they have integrated their scrollbar as a part of their design. The web is more than 20 years old but there are still scrollbar still pretty much remains hard to style. Styling scrollbar is the poster child of CSS complaining, Why does it have to be so hard?

Before we look at the solutions, first let's take a look at how scrollbars styling can be done in different browsers.

Safari, Opera and Chrome (Webkit, Blink browsers)

Webkit browsers support styling of scrollbar, you can change the track and thumb width color and a lot of other things for eg:

::-webkit-scrollbar {
    width: 15px;
    height: 15px;
}

::-webkit-scrollbar-track-piece  {
    background-color: #C2D2E4;
}

::-webkit-scrollbar-thumb:vertical {
    height: 30px;
    background-color: #0A4C95;
}

There is a detailed list of all the ::-webkit-srollbar prefixed options that could be found here

Note: Pseudo element ::-webkit-scrollbar is a non-standard implementation, which allows us to modify the look of the browser's scrollbar

Firefox (Gecko)

As of version 64 Firefox supports the official scrollbar styling through the properties scrollbar-color and scrollbar-width for eg:

  .scroller {
    width: 300px;
    height: 100px;
    overflow-y: scroll;
    scrollbar-color: rebeccapurple green;
    scrollbar-width: thin;
  }

Details about that could be found here

There's a caveat (Curious case of disappearing scrollbar): The auto-hiding semi-transparent scrollbars that are the macOS default cannot be colored with this rule (they still choose their own contrasting color based on the background). Only the permanently showing scrollbars (System Preferences > Show Scroll Bars > Always) are colored.

Well that's not pretty. There has to be a solution. Why is it so hard??

Custom scrollbars

One of the solutions can be not to use native browser scrolling. We can create our very own div where we define a js based scrolling, this way we can completely control how scrollbars look and feel. But that’s expensive, low fidelity and can feel laggy.

I was looking for a scrollbar for a long time, till I found out Simplebar.

With Simplebar, we can leverage some unconventional CSS matrices to build a custom scroller that doesn’t require any JavaScript while scrolling, just some setup code.

According to the Simplebar readme, For the most part SimpleBar uses the browser's native scrolling functionality, but replaces the conventional scrollbar with a custom CSS-styled scrollbar. The plugin listens for scroll events and redraws the custom scrollbar accordingly.

Key to this technique is hiding the native browser scrollbar. The scrollable element is made slightly wider/taller than its containing element, effectively hiding the scrollbar from view. It uses MutationObserver to listen to browser events.

Let's get implementing

You can take any div and initialise simplebar with new SimpleBar(document.getElementById('myId')). Apart from styling there are various options available such as autoHide.

It is just so much fun to use. The only thing to keep in mind is, when you are adding a Simplebar to a div, make sure that the div has a height or width so that Simplebar can decide, which scrollbar to add horizontal or vertical.

Specially in case of horizontal scrollbars. Let's look at an example. Let's say we have a container. Inside we have 100 divs each of width: 10px. Usually to make it scroll horizontally, we need to add some styles to the container like width: 1000px; overflow-x: scroll; (of course there has to be other styles like display: inline-block; etc, but that's not the focus of this article)

But the problem arises if we have dynamic content. For every render we need to change the width of the div.

In this case Simplebar works like a charm. All you need to do is, mention a width after surpassing that it should scroll, let's say width: 100vw;
it will make it scroll :) Simplebar also provides with a recalculate() function, in case the the MutationObserver doesn't pick up a change.

End Note

Simplebar is just so easy, it hits clearly on the problem without messing with browser scrolling behaviour. Easy to setup and customise. There are wrappers available for React and Vue. And finaalllyyyy we have a cross-browser, cross platform, lightweight and performant solution to the scrollbars in modern apps.

Photo by Leo Rivas on Unsplash

Web Scraping 101

Priyanka Kore — Mon, 01 Jul 2019 19:52:24 +0000

Web scraping is a vast topic. In this article we are going to look at what it is? Where can we use it? and a basic example of how to go about it.

What is it?

Web scraping is a method used by web developers to extract large amount of data from any given website. This is mostly used to save developers time in case if you want to make calculations on massive amount of data off any website so that they actually don't have to visit these sites and manually log all the data themselves.

Web scraping a web page involves fetching it and extracting from it. Fetching is the downloading of a page (which is what a browser does when you view the page). Therefore, web crawling is a main component of web scraping, to fetch pages for later processing. Once fetched, then extraction can take place. The content of a page may be parsed, searched, reformatted, its data copied into a spreadsheet or save to a server, and so on. Web scrapers typically take something out of a page, to make use of it for another purpose somewhere else.

There are methods that some websites use to prevent web scraping, such as detecting and disallowing bots from crawling (viewing) their pages. In response, there are web scraping systems that rely on using techniques in DOM parsing, computer vision and natural language processing to simulate human browsing to enable gathering web page content for offline parsing. For eg: Github has rate limiting mechanism to control incoming and outgoing traffic.

📜 Use Cases?

Here, when we are learning about web scraping. One might think, it sounds cool and all but what do I do with it?
Most use cases include automation of some kind. It could be any of the following

Online price monitoring
Research
Market analysis
to build large data sets for Machine learning
End to end testing
Gathering real estate listings
Product comparison websites

Of course there doesn't have to be such a gigantic use case. Online you can find examples of developers getting creative for automating small things helping their day to day lives. One developer had built a small script for logging in and checking her loan due amount everyday, or when devs are not happy with the data representation UI provides and need some special kind of filter.

Our use case for today is that we need a list of emojis saved to a JSON file with it'S unicode and name (because who doesn't love emojis). There is official list of all emoji unicodes on unicode.org.

Note 📝: The more updated version of that lives here but we want to learn scraping so we will stick to html.

🛠 Tools that can be used

Let's go hunting for a tool that can help us do that. There are two most commonly used JS libs for scraping Cheerio and Puppeteer. Let's look at each one of them briefly

Cheerio

Cheerio is like the most popular one. According to their website, Cheerio is a fast, flexible, and lean implementation of core jQuery designed specifically for the server. jQuery like api is what makes it a darling of devs. They have a massive list of selectors, again syntax borrowed from jQuery. Because I am not familiar with jQuery syntax as much, I decided to go with puppeteer.

Puppeteer

Puppeteer is Node api for Headless chrome and headless chrome is a program that node put out to be able to use their browser without a GUI. It is usually used for automating things, which is what we need. It uses devtool protocol. It's really cool, in case you want to check it out.

Puppeteer has event-driven architecture, which removes a lot of potential flakiness. There’s no need for sleep(1000) calls in puppeteer scripts. You can play around with puppeteer here. And since it is actual chromium api, it is much more powerful than Cheerio. It can do things like generating PDFs, screenshots or capture timeline trace and much more.

Show me the code

Install puppeeteer

so start a new project npm init -y
install puppeteer npm install puppeteer --save

Note 📝: When installed, it downloads a version of Chromium, which it then drives using puppeteer-core. If you install puppeteer-core, it doesn't download Chromium. It requires Node version >> v6.4.0, but our example below uses async/await which is only supported in Node version >= v7.6.0

Launch the browser and navigate to the webpage


const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();
  await page.goto('https://unicode.org/emoji/charts/full-emoji-list.html');
  ... 
  await browser.close();
})();

When you launch Puppeteer, you get a instance of a browser back, It has all bunch of options, by default puppeteer launches a headless browser, for debugging purposes you can set headless false, then you can actually see all the things that are gonna happen with the script, but note that headless mode is faster. At the end of it you wanna close the browser, because if you don't, you gonna have memory leaks, and you don't want that.

Search and get the data we need


const puppeteer = require('puppeteer');

let scrape = (async () => {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();
  await page.goto('https://unicode.org/emoji/charts/full-emoji-list.html');

  const result = await page.evaluate(() => {
    let data = []
    document.querySelectorAll('table tr').forEach(node => {
      const code = node.querySelector('.code a')
      const name = node.querySelector('.name')
      if (code) {
        data.push({
          code: code.innerHTML.replace(' ', '').split('U+').filter(Boolean).join('_').toLowerCase(),
          name: name.innerHTML
        });
      }
    })
    return data
  });

  await browser.close();
  return result;
});

scrape().then(data => {
    console.log(data) // success
})

If the function passed to the page.evaluate returns a Promise, then page.evaluate would wait for the promise to resolve and return its value.
It's not executing this function in Puppeteer, it's actually executing that in the DOM, so you have access to all the DOM. We searched the document for all emoji unicodes and their names, and returned the data.

Save the data


const puppeteer = require('puppeteer');
const fa = require('fs');

let scrape = (async () => {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();
  await page.goto('https://unicode.org/emoji/charts/full-emoji-list.html');

  const result = await page.evaluate(() => {
    let data = []
    document.querySelectorAll('table tr').forEach(node => {
      const code = node.querySelector('.code a')
      const name = node.querySelector('.name')
      if (code) {
        data.push({
          code: code.innerHTML.replace(' ', '').split('U+').filter(Boolean).join('_').toLowerCase(),
          name: name.innerHTML
        });
      }
    })
    return data
  });

  await browser.close();
  return result;
});

scrape().then(data => {
  fs.writeFile('emoji-list.json', JSON.stringify(value), 'utf8', () => {
    console.log('DONE!!')
  });
})

Here we just saved the returned data to a JSON file. And there you have it, the list of emojis.

That’s it!

now run the script with node index.js

End Note

Web scraping is certainly a fun experience. As I mentioned it is broad field and you have finished a brief tour of that field. You can get pretty far using puppeteer for scraping.

I hope that this post helps with getting started with Web scraping and that you enjoyed it!

If you have some questions or comments please let me know in the comments below and I will get back to you.

Photo by Nick Fewings on Unsplash