teleren/devto huggingface dataset:
Run Puppeteer/Chrome Headless on EC2 Amazon Linux AMI
Tags: headless, puppeteer, aws, tutorial
Published: 2019-07-09 16:08:22

— augmented on June 2019

This article is based closely on MockingBot’s [article of the same title](https://medium.com/mockingbot/run-puppeteer-chrome-headless-on-ec2-amazon-linux-ami-6c9c6a17bee6). The original article helped a great deal, but some parts were outdated due to new libraries’ and packages’ versions. Hence, I’m jotting down what needs to be augmented from the original article here, for my own reference and for others who encounter the same situation too!

When you have reached this part of the article:

> Now only 6 left, as Amazon Linux don’t have gtk builtin, we need borrow packages from other distributions:

Pay heed that some of the packages no longer exist.

![](https://thepracticaldev.s3.amazonaws.com/i/0kaktzh7jni9zztct7e7.png)

## Tip 💡: Go to the URL (up till the last trailing slash)

For example, for:
http://mirror.centos.org/centos/7/os/x86_64/Packages/atk-2.22.0-3.el7.x86_64.rpm

Navigate to:
http://mirror.centos.org/centos/7/os/x86_64/Packages/

And search for **atk-** :

![Perhaps by the time you read this article, the version have increased again!](https://cdn-images-1.medium.com/max/1600/1*iW1gnS_tQRgLr5DXhPLnLw.png)

Hence, the nearest match would be **atk-2.28.1–1.el7.x86_64.rpm** .

Go through the list of items to install with this technique, and you should be almost there!

*Almost.*

![Unlike what’s mentioned, there are still missing deps after installing the list of packages!](https://cdn-images-1.medium.com/max/1600/1*FFkWmu90BQoC7CdHbvUQEg.png)

Alas, there are still some missing dependencies being listed when you run `ldd chrome | grep not` . After googling around, [this seals the deal](https://github.com/GoogleChrome/puppeteer/issues/391#issuecomment-325420271):

![The number of emojis speak volumes about this comment!](https://cdn-images-1.medium.com/max/1600/1*7lxwDWIzaLh4iKp-r3Y_Bg.png)

![After the long yum install, one last dep!](https://cdn-images-1.medium.com/max/1600/1*rXgvxL5km7vXiHg_6JFODQ.png)

After running the long `yum install` command, you will be left with one last dependency: **libpng12.so.0** . Same thing, look for the **x86_64** version of the libpng12 package in the Centos packages listing page and download it.

![](https://cdn-images-1.medium.com/max/1600/1*ZXuKZhTpdcDZv42a8MXRJQ.png)

And finally, all the dependencies have been assembled.

![](https://media1.tenor.com/images/f83bcd6317336c7c262fdb76d314e006/tenor.gif?itemid=14098175)

## Ending note

Hopefully the tips mentioned above will/have helped in your attempt to install Puppeteer on the AMI! If there are any parts that are unclear here, and it is also unclear in the original post, do give a shoutout. Similarly, if you have tried and noticed my tips are outdated, do let me know too.
New "How to build an App" series by Tom Scott
Tags: beginners, app, business
Published: 2019-07-10 01:01:52

---
title: New "How to build an App" series by Tom Scott
published: true
description: Everything you didn't know you needed to know
tags: beginner, app, business
---

Tom Scott is a [popular YouTuber](https://www.youtube.com/user/enyay) who (amongst many other things) made [Emojli](https://en.wikipedia.org/wiki/Emojli) - [an instant messaging app where you could only use emoji to communicate](https://www.youtube.com/watch?v=GsyhGHUEt-k).

His new series titled "How to build an App: Everything you didn't know you needed to know" is 15 videos where he talks about everything from finding out if your idea is any good, making money from your app to surviving on the app store. Each video goes for about 10-15 minutes.

Here's the trailer for [the series that is all available right now, for free, on his channel](https://www.youtube.com/playlist?list=PL96C35uN7xGJu6skU4TBYrIWxggkZBrF5).
{% youtube tO8aJ-TUtJY %}

Personally while I'm not planning on building an app, there are definitely a few videos I'm wanting to check out which can apply to other businesses and projects in general.

If you're still struggling to come up with an idea for an app but still want to build something, check out my previous article ["So you want to launch a product? First you need an idea."](https://dev.to/turnerj/so-you-want-to-launch-a-product-first-you-need-an-idea-5ib).
DISCUSS: What are you loving about "on-call" in your role?
Tags: mentoring, beginners, infra, discuss
Published: 2019-07-12 13:45:27

Hey there!

![](https://thepracticaldev.s3.amazonaws.com/i/3k39qaepqkpql4wl2pa4.gif)

Jay here, host of [On-Call Nightmares Podcast](https://oncallnightmares.podomatic.com/) and [Azure Cloud Advocate](https://developer.microsoft.com/en-us/advocates/index.html?WT.mc_id=devto-blog-jagord).

Are you currently on-call at your current role?  Let's discuss some of the aspects of being on-call that you find are the most valuable.  What are you loving right now about the on-call practice in your current role?  I believe on-call is an incredible learning resource for teams in technology because it requires you to create some structure in how to handle failure.  

Share with me and lets discuss more on how we can lift up on-call work and not make it feel like it's such a "nightmare."  Leave your comments below!

While you're at it, make sure you check out the [free Azure $200 in credits and 12 months of free services.](https://azure.microsoft.com/en-us/free/?WT.mc_id=devto-blog-jagord) That's a ton of cool resources to start demoing that app you might have! The tutorial, [Create a Node.js web app in Azure](https://docs.microsoft.com/en-us/azure/app-service/app-service-web-get-started-nodejs?WT.mc_id=devto-blog-jagord) is a great way to start learning.
Create Page in React
Tags: react, reactpage, reactarchitecture
Published: 2019-07-16 08:32:22

---
title: Create Page in React
published: true
description: Page in React
tags: #react, #reactpage #react-architecture
---

## Page
Page can be defined as a Container of the modules. Page is the closest common ancestor for its modules (container children). 

One of the important technique when creating a page is [Lifting State Up](https://reactjs.org/docs/lifting-state-up.html). And the reason why we are not using Context API in the Page is because we want to limit the re-rendering on the page level.

> When the nearest <MyContext.Provider> above the component updates, this Hook (useContext) will trigger a rerender with the latest context value passed to that MyContext provider.
(React docs)

[You can refer the "Create Module in React" article here](https://dev.to/aziziyazit/create-module-in-react-5gg)

### Page as closest common ancestor of moduleA and moduleB
~~~jsx
function PageA() {
 const [stateA, setStateA] = useState('')
 const [stateB, setStateB] = useState('')

 return (
  <div>
   <moduleA setStateA={setStateA} stateB={stateB} />
   <moduleB setStateB={setStateB} stateA={stateA} />
  </div>
 )

}
~~~ 

### moduleA
~~~jsx
function moduleA(props) {
 const { setStateA, stateB } = props
 const moduleAContextValue = {setStateA, stateB}

 return (
  <ModuleAContext.Provider value={moduleAContextValue}>
   <componentA1 />
   <componentA2 />
  </ModuleAContext.Provider>
 )

}
~~~

### moduleB
~~~jsx
function moduleB(props) {
 const { setStateB, stateA } = props
 const moduleBContextValue = {setStateB, stateA}

 return (
  <ModuleBContext.Provider value={moduleBContextValue}>
   <componentB1 />
   <componentB2 />
  </ModuleBContext.Provider>
 )

}
~~~

### component might look like this
~~~jsx
function componentA1() {
  const moduleAContext = useContext(ModuleAContext)
  const { stateB, setStateA } = moduleAContext

  function handleClick() {
   setStateA('state A')
  }
 
  return (
   <div onClick={handleClick}>{stateB}</di>
  )

}
~~~

The Page state and Module context can be illustrated like below:

![](https://thepracticaldev.s3.amazonaws.com/i/g0iesl40ah2gvsr7e0if.png)

> Page manage the communication between modules using technique called Lifting state up. While Module manage the communication between components using Context API (createContext & useContext) and useReducer. 

### next series
On the next article, we will discuss on managing communication between pages and the "page communication manager" is either Redux, Router or [Custom Hook](https://github.com/dai-shi/reactive-react-redux). 

### code
All the code sample can be viewed here [Codesandbox](https://codesandbox.io/s/react-architecture-c1rx2?fontsize=14)
Learning a New Language?
Tags: watercooler
Published: 2019-07-14 17:47:14

---
title: Learning a New Language?
published: true
description: 
tags: watercooler
---
Is anyone currently learning a new language?  

What language and why? 
How are you going about learning it?


I am currently learning Italian with my wife.  My great-grandfather on my dads side came from Italy and my grandfather would speak some Italian to us growing up.

Currently, I am using Duolingo (42 day streak!) every day and practicing a little with my wife.
Incremental improvements can lead to significant gains
Tags: emacs, habits, productivity
Published: 2019-07-15 14:59:50

---
title: Incremental improvements can lead to significant gains
published: true
tags: emacs,habits, productivity
canonical_url: 
---

While reading the book [Atomic Habits by James Clear](https://jamesclear.com/atomic-habits), I was reflecting that my choice of embracing [Emacs](https://www.gnu.org/software/emacs/) and progressively gaining mastery over it was intimately connected with the philosophy preached in the book.

My efforts initially started out with a craving for a system to quantify and manage my tasks, habits, notes, blog writing, job applications and projects in a custom environment, and to be able to build toolkits of code to perform repetitive tasks. As mentioned in an [earlier blog post](https://shrysr.github.io/post/2b0b2c79-3f6e-4079-a07d-9e382fda8954/), I tried several approaches before settling on Emacs. The idea was to find or create a single system to track everything of importance in my life (with ease and efficiency). This was instead of a fragmented approach of using multiple tools and techniques, for example, Sublime Text / Atom as a text editor and [Todoist](https://todoist.com/?lang=en) as a task management tool.

I started with a vanilla configuration of Emacs and painstakingly borrowed (and eventually) modified lisp snippets to implement desired ‘features’ or behaviors. It was a just a couple of features every week, initially focused on Org mode’s behavior alone. That was nearly 3 years ago. As of now, I am able to manage my blog [hugo], view my email [mu4e], browse the web [w3m], seamlessly capture notes / ideas / tasks from (almost) anywhere [Org mode], chat on IRC, build multi-language code notebooks with ease [Org babel]. All the above provide me significant advantages in speed and efficiency which still have plenty of potential to improve.

Sure, I certainly appear closer to my goal today.. however, I did not know if it was a pipe dream when I started out. It was often extremely frustrating, right from memorizing the ‘crazy’ keybindings in Emacs, to struggling with getting a lisp snippet to work as expected.

Choosing Emacs had unexpected rewards as well. For example, the need of synchronizing my notes and Emacs configuration with multiple machines led me to Git. [Magit’s](https://magit.vc/) easily accessible commands and relatively visual interface has been a massive help in getting things done with Git, despite not having any deep technical knowledge of how Git works.

My journey with Emacs is testament that an incremental, compounding improvement over time can ultimately result in significant gains. It is also important to acknowledge that I am standing on the shoulder of giants and the awesome [Scimax](https://github.com/jkitchin/scimax) is a cornerstone in my toolkit.
Weekly Coding Challenge - Week #18 - Social Media Buttons
Tags: challenge, html, css
Published: 2019-07-18 06:22:06

---
title: Weekly Coding Challenge - Week #18 - Social Media Buttons
published: true
description: Week #18 of the Weekly Coding Challenge program - Social Media Buttons
tags: challenge, html, css
canonical_url: https://www.florin-pop.com/blog/2019/07/social-media-buttons/
cover_image: https://www.florin-pop.com/static/1e69ded3b40ce1e1ac1f06accd030bb1/ff993/social-media-buttons.png
series: Weekly Coding Challenge
---

Theme of the week: **Social Media Buttons**

### Description

We all know how important is Social Media nowadays for a business (be it either a blog or a product/service selling business) because of the amount of people using it. You can have the best product in the world, but if no one heard about it you are pretty much doomed as you won't make any sales, or, on the other hand, you can have a "decent" product and by marketing it well (on Social Media) you'll end up with a lot of sales, which means a lot of profit for your business.

## Useful Resources

Check out my submission for this challenge: [Social Media Buttons](https://www.florin-pop.com/blog/2019/07/social-media-buttons/).

See all the submissions in this [Codepen Collection](https://codepen.io/collection/DZJJoE/).

Are you interested in joining the challenge? :smiley: Read [The Complete Guide](https://www.florin-pop.com/blog/2019/03/weekly-coding-challenge/) to find out how. Don't forget to share your creation! :wink:

Happy Coding! :innocent:
How to easily implement new In-App update feature to your Android App
Tags: android
Published: 2019-07-19 14:30:57

Working all night to fix a bug or add a groundbreaking feature to your Android app and seeing only a few users have updated their apps? No worries now, Android have now released a new feature called [in-app updates](https://developer.android.com/guide/app-bundle/in-app-updates) where you can prompt the user to update the app.

![](https://thepracticaldev.s3.amazonaws.com/i/5mg3mnkl2dmrxnf6wgly.png)
_source: https://developer.android.com/guide/app-bundle/in-app-updates_

>Although some users enable background updates when their device is connected to an unmetered connection, other users may need to be reminded to update. In-app updates is a Play Core library feature that introduces a new request flow to prompt active users to update your app.

— https://developer.android.com/guide/app-bundle/in-app-updates

As an Android developer, I felt tired adding all these codes to my apps. Thus I developed a [library](https://github.com/SanojPunchihewa/InAppUpdater) which will put in place the in-app update feature cutting down all the lines of code to 5 lines of code.

**Let’s get started!**

###Implementation

####Step 1: Add jitpack to your root level build.gradle at the end of repositories
```Gradle
allprojects {
    repositories {
        maven { url "https://jitpack.io" }
    }
}
```

####Step 2: Add the dependency to app level build.gradle
```Gradle
dependencies {
    implementation 'com.github.SanojPunchihewa:InAppUpdater:1.0.2'
}
```

####Step 3: Initialize the UpdateManager in your onCreate method of the Activity
```java
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    
    // Initialize the UpdateManager
    UpdateManager.Builder().mode(UpdateManagerConstant.IMMEDIATE).start(this);

}
```
There are two update modes as Flexible and Immediate,
- Flexible(`UpdateManagerConstant.FLEXIBLE`) (default) — User can use the app during update download, installation and restart needs to be triggered by user
- Immediate (`UpdateManagerConstant.IMMEDIATE`)— User will be blocked until download and installation is finished, restart is triggered automatically

####Step 4: Call continueUpdate method in your onResume method to install waiting updates
```java
@Override
protected void onResume() {
    super.onResume();
    UpdateManager.continueUpdate(this);
}
```

**_Tadaa! That’s it. Now you have in-app updates in your android app_**

If this helped you please give some :heart: to this article and ⭐️ the [library](https://github.com/SanojPunchihewa/InAppUpdater)

Since I released the [library](https://github.com/SanojPunchihewa/InAppUpdater) recently 😉, if you find any bugs or have a suggestion please raise an [issue](https://github.com/SanojPunchihewa/InAppUpdater/issues)

_Also if you find it hard to get working, leave a comment, I am always happy to help you_ 😃
[Suggestion Needed] : Generate complex PDF using puppeteer
Tags: headless, pdf, puppeteer, node
Published: 2019-07-19 20:50:03

---
title: [Suggestion Needed] : Generate complex PDF using puppeteer
published: true
description: I am working on to generate pdf having complex header, footer & page border
tags: headless, pdf, puppeteer, node
---

While chrome headless is best option out in the market with open source tag for generating PDF, screenshot or almost anything else which actually chrome can do. I tried using it for generating PDF out of my HTML. 

This is what I wanted as end output
<a href="https://ibb.co/BLSbTG7"><img src="https://i.ibb.co/v1KpLhr/header.png" alt="header" border="0"></a><br />

Page 2 : 
<a href="https://ibb.co/48gKz5G"><img src="https://i.ibb.co/zXHQp0Y/page2.png" alt="page2" border="0"></a>

But here are the challenges I started facing after couple of hours : 

1. Lack of support to load external resources for headerTemplate (we can't use external css) - This can be solved by using inline css but in my case I found it very difficult to write inline css as the header was complex. It has images, svg and other positioning style. And not to mention, this blue highlighted box should auto repeat on every page.

2. Lacks support to load images using their url on header & footer - They suggested to use base64 image

3. I want to have 5px border on pages.


Now here is the output I am able to achieve using puppeteer : 

1. The border breaks and doesn't respect the page.Here I haven't set the separate header template and hence not receiving the header on 2nd page.
<a href="https://ibb.co/3mbY6LN"><img src="https://i.ibb.co/TMGqjF8/Screenshot-2019-07-20-at-2-11-27-AM.png" alt="Screenshot-2019-07-20-at-2-11-27-AM" border="0"></a>

2. If I set header template separately then border behaves weird. It starts after header template finishes

<a href="https://ibb.co/QQrTK1P"><img src="https://i.ibb.co/1Q8Pmwr/Screenshot-2019-07-20-at-2-13-53-AM.png" alt="Screenshot-2019-07-20-at-2-13-53-AM" border="0"></a>


Now at this stage I had read on web and found some suggestion which are as per below : 
1. I should give top, left and right border to my headerTemplate and then should give left, right and bottom border to my body. This way final output will look like the first image.
2. I got to know about pdf merge, where I have been suggested to generate one page pdf having header only and then other pages (with top margin left enough to fit header) without header. And then finally merging header pdf to each of other pages using some pdf utilities.

<strong>Before jumping into above approach, I would like to know if dev community has come across similar case and if someone can guide to find the perfect way out of it. You can reach me on irfaan.aa@gmail.com too.</strong>
How to get started with Selenium and Python
Tags: selenium, python, automation
Published: 2019-07-22 12:54:48

---
title: How to get started with Selenium and Python
published: true
description: 
tags: selenium,python,automation
---

Step one, you need to get chromedriver.

What is chromedriver? It is a separate binary that you must run to get Selenium and Chrome working. See for tiny explantion of what chromedriver does : https://dev.to/tonetheman/chromedriver-role-in-the-world-c06

To download chromedriver (which you must have to use Chrome with Selenium) go to this link: http://chromedriver.chromium.org/downloads
Mainly note the version of Chrome you are using. I am using Windows 10 and this Chrome: Version 75.0.3770.142 (Official Build) (64-bit) So I will pick this version of chromedriver: https://chromedriver.storage.googleapis.com/index.html?path=75.0.3770.140/

You need to save the chromedriver.exe to a directory that you will remember or your working directory. You need to know where you saved chromedriver.exe because you will use the location in the Python script that you are about to write.

```python
from selenium import webdriver ## note 1

driver = None
try:
    cpath = "e:\\projects\\headless\\chromedriver.exe" ## note 2
    driver = webdriver.Chrome(cpath) ## note 3
    driver.get("https://google.com") ## note 4
    import time ## note 5
    time.sleep(3)
finally:
    # note 6
    if driver is not None:
        driver.close()
```

Note 1 - this is where you are loading the Python webdriver binding. This is a fancy way of saying we are telling Python about Selenium. If you do not have this line none of your Selenium scripts will run.

Note 2 - this is the path of where I put chromedriver.exe your directory name will be different. The name does not matter either just pick somewhere on your disk.

Note 3 - this is where Chrome will start up. Chrome and chromedriver.exe are both started on this line. If you looked at your processlist at the instant that line executes you will see a new Chrome instance start along with a chromedriver.exe. If you look closely chromedriver.exe starts first and it starts Chrome.exe

Note 4 - this line navigates to google. Not exciting but at this point you will see your Selenium driven Chrome navigate to a web page. woooo!!!!

Note 5 - at this point I put in a sleep so you can actually see what is happening. In general sleeps are bad when you are writing scripts. There are times when you are debugging when time.sleep is useful. This is one of those cases.

Note 6 - this is shutting down chromedriver.exe and Chrome. You need this for cleanup. If you did not run that line Chrome.exe will still continue to run until you stop it manually.

And that is it. Your first Selenium script with Python.
The Greatest Learning Technique For Learning to Code
Tags: javascript, career, beginners, codenewbie
Published: 2019-07-21 04:28:02

I started programming when I was 18 years old, but I did it just because it was required in school, I just did what was required, that's it. I didn't retain any information, nothing at all.  

When I started university, I began to take things a bit more seriously. A lot of my curriculum was focused on Object Oriented programming, which was cool, but wasn't what I wanted to learn. 

I liked building web applications, so I tried to figure out some way online to learn. I bought some Udemy class for full stack javascript, I watched Youtube tutorials and followed internet guides. And the results were... 

Horrendous, I had been too busy following guides and just copy pasta coding. When it came time to trying to build something from scratch, I had no idea what I was doing because I wasn't actually learning, I was given everything. 

In reality, coding is about reading documentation, applying techniques given by other developers and problem solving (stack overflow is a good friend). That is how you learn to code. The biggest problem with following guides to build projects is that you're given everything. A large part of software developing is problem solving, by following guides that aspect is eliminated. 

The greatest advice I could give is simply just start something. Whatever you want to build, whether it be a web application or a mobile app, etc. Open the docs, read the "getting started" section, and voila. You're on your way to creating and finishing your first real project. 

Also a nice side tip that helped me learn: Try and code for at least 1 hour per day. This really helps retain things that you've learned on previous days and keeps your mind fresh. Nothing sucks more than returning to a 3 week old poorly documented code base :P