teleren/devto huggingface dataset:
How to Make Charts SEO-Friendly?
Tags: seo, charts, data, help
Published: 2020-01-05 15:29:54

Hi,

I was breaking my head trying to understand what is the best way to structurize the data behind the following chart so it would be more "understandable" to search engines.
I checked most of the entities in https://schema.org/ but still not sure what are the best to choose.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/fzj1mp88qohrhicxln9q.png)

Any help will be appreciated!

Thanks!
API request using tagged template literals 
Tags: javascript, templateliterals
Published: 2020-01-05 15:28:02

---
title: API request using tagged template literals 
published: true
description: 
tags: javascript, template-literals
---

I recently came across [this](https://www.youtube.com/watch?v=UJrkauaA7-I) awesome video introducing tagged template literals. At the end of the video @kentcdodds does talk about possible use case with API request with something like this.

```javascript
const response = await GET`https://dev.to`;
console.log(response.text())
``` 

So here it is a rudimentary implementation for that

```javascript
function GET(literalStrings, ...interpolations) {
  const URL = literalStrings[0];
  let headers = {
    METHOD: "GET"
  };

  if (interpolations.length === 1) {
    headers = {...headers, ...JSON.parse(interpolations[0])};
  }

  return fetch(URL, headers);
}
```

you can use this as follows

```javascript
const headers = JSON.stringify({
  cretentials: "include"
});

const response = await GET`https://dev.to ${headers}`;
console.log(response.text());
```

Similarly you can write **POST**, **PUT** and **DELETE** too (with third stringified argument as request body it if is present).

### So why do you want something like this ?
1. It might be easy to mock the fetch functions while testing by importing mock GET function (argument can be made against this)
2. It is easier to test the request made since it is just a string
3. It looks pretty

If the implementation was not dependent on fetch API it could be used in other environments like node (if you did not have node-fetch).
Boost your application with Google LightHouse
Tags: googlelighthouse, javascript, performance, beginners
Published: 2020-01-05 14:37:54

---
title: Boost your application with Google LightHouse
published: true
description: How Lighthouse help us to boost our application performance.
tags: Google-Lighthouse, Javascript, Performance, Beginner
---

## How Google LightHouse works?

Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, and more.

Lighthouse analyses web apps and web pages, collecting modern performance metrics and insights on developer best practices.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/bwlg5wxyu1p028oo1fc8.png)

What Does Lighthouse Test?

* Performance
* Accessibility
* Best Practices
* SEO
* PWA

Lighthouse can be integrated with,
 
* CI/CD process
* Task runners
* Unit tests
* Git pre-commit hooks

How to access Lighthouse?

* Google developer tools
       - Supports from version 52+
Open Google developer tools by clicking **Inspect** option from browser, then you can find **Audits**. There we can access LightHouse.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/fdo6zfjrdet37svbiiqn.png)

* Google extension

 - We can also find Google lighthouse as [Extension](https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=en).

* Using NodeJS CLI

  - The Node CLI provides the most flexibility in how Lighthouse runs can be configured and reported.[Npm](https://www.npmjs.com/package/lighthouse)

Examples,

* Open your terminal and run the below command.

> npm install -g lighthouse

* Verify Lighthouse installed by checking the version.

> lighthouse --version

* Now you can run audits against your application or any,

> lighthouse https://flipkart.com --output html --out json --output --svg

Above command run the audits against flipkart and output the results in three format.
* html
* json
* svg

Lighthouse integrated with Task runner(Gulp) [Github repo](https://github.com/a8hok/lighthouse)
Debug puppeteer in an interactive way
Tags: javascript, node, webscraping
Published: 2020-01-05 14:15:24

---
title: Debug puppeteer in an interactive way
published: true
description: 
tags: javascript, node, web scraping
---

Recently I play around with Puppeteer as an attempt to build a simple back-end service. Puppeteer is an awesome tool to emulate the browser's behaviors, which makes web scraping possible. It is sponsored by Google, and Javascript has more strong ties to HTML document(that is, the crawler's target) than Python does, though Python is a friendly language to get your feet wet. 

As the title suggests, I would like to show you how to debug puppeteer just like the way we use <u>Ipython or Jupyter notebooks</u>. 

I pretty like **debug-driven learning** which offers an overview of a particular object or function. For Javascript, there is console in the browser to meet my need, but when we run or debug puppeteer-based script, we might not know the way to access puppeteer's API in browser's console. 

After I messed around with it, I discovered the `node --inspect ` option which would **add a node logo in devtools** if you run your script with headless mode turned off. 

Therefore, if you `console.log(page)`(page is an object representing the page in the browser) in the script, run it with `--inspect` option and click the node logo in the devtools, you would see the page object in the console and in turn you can access its API. For me, it is enough to learn puppeteer step by step.

Basically, the simple steps are as follows:

```javascript
const puppeteer = require("puppeteer");
(async () => {
    const browser = await puppeteer.launch();
  	const page = await browser.newPage();
    console.log(page);
// And you can access the page object in the browser console if you follow the steps I specified above.
}
)();

```

Thanks for reading!
Thoughts for programmer
Tags: programming
Published: 2020-01-05 13:52:56

---
title: Thoughts for programmer
published: true
description: Thoughts for programmers
tags: programming
---

Programming is not just about typing expressions and statements , it is about being carefully designing and implementing all the detailed features. Its a pattern language in which you need to follow already existing patterns or just discovering your own way of systematic thinking.

You try to document it so that others can understand it, you try to engineer it so that others can have a look and work on it. Its a practice of everyday activities on a computer.  Take a project for an example, if you have a project that you are working on alone is gonna wait for you to come back and refactor or add your updates, however , programming could be better if it was divided into teams and then you could start to think about the responsibility and everyone’s role in it, so you better plan what you are going to do. 

If the project is already beautifully written, you will start to take extra bit of attention not to change it quickly or refactor, so it will take more time to understand it throughly. To increase your programming knowledge, read books, learn a new programming language every year, take a programming course. Another point is to communicate well between team mates. We write plans , docs and communicate our ideas among teams, we write code for a computer to understand so we need to do it well.
Database normalization may be harmful to efficiency on large scale analytics projects.
Tags: database, bigdata, sql, analysis
Published: 2020-01-05 13:46:07


If the select queries to your relational database return big tables, additionally if you used one or more join statement in that query, let me guess it wasn't quick process to fetch the resulting table. JOIN operation adds a computation step for each record fetched. They accumulate over the number of records, or rows, for which records from a linked table need to be fetched. The worse it gets, the more joins there are in the query. This results in a computational expense that you might avoid using denormalized table design.

To decide which approach in a design to use to optimize the number of computations and the storage efficiency of your database, you need to consider the frequency of `update` and `select` operations and how many of them are going to result in queries returning a big number of records.

If you do not perform any separate analysis on a certain feature of a dataset (contained in one column), so in other words, if that data has a secondary relevance, you may want to consider merging the column with some other column with similar characteristics. 

To back up the decision about merging/adding a summary column, consider:

- whether your data to merge do not change too frequently. UPDATE, just like SELECT queries have their prices in terms of the number of computations performed. You "pay" for both of them, either it's updating some columns in a database upon the change of value in another column or users of your database waiting longer for the queries to JOIN the pieces of data.
- one other thing to consider is the size of the pool of records that will usually gonna be returned from queries for analysis. You may want to think of any possible questions that may emerge and possible queries that may need to be performed in certain scenarios of analysis and consider the sizes of possible returns from those queries. If the data returned from most of the queries are gonna be big, you may save time for fetching records that are rather contained in a fewer number of cells that you do not need to JOIN before getting the results from RDBMS.

To sum this up, choosing the design—deciding whether to merge columns / add a summary column (denormalization practices)—aims at minimizing the time of return from the query, which involves minimizing the number of computations needed. It comes down to a trade-off between normalized and denormalized design, that should be carefully chosen and be mainly determined by:

- the frequency of changes (UPDATE) in the data that involve computation if the table contains a summary column that needs to be updated along with a changing value in another column,
- and the sizes and frequency of, especially big, SELECT queries.

But here again, there usually are not many updates in analytical DBs specifically, so I conclude that this type of database may benefit hugely from careful denormalization.
Chingu Cohorts - Get Out of Tutorial Purgatory
Tags: webdev, career
Published: 2020-01-05 13:41:45

Chingu believes that leveling up development skills requires designing, building, and deploying projects in a team setting. This not only increases knowledge and hard skills, but also "soft" skills like Agile methodology, teamwork, design, etc.
 
**Benefits**:
- Confidence & motivation
- Supportive peer community
- Stretch your comfort zone
- Add to your portfolio
 
[chingu.io](https://chingu.io)
My first Steps in Wordpress Theme Development
Tags: wordpress, latex, theme, responsive
Published: 2020-01-05 13:33:38

---
title: My first Steps in Wordpress Theme Development
published: true
description: From docker to responsive to LaTeX
tags: wordpress,latex,theme,responsive
---

*Disclaimer: This is a cross-post from my dev-blog at [nitricware.com](https://www.nitricware.com).*

For my new project "Geriatrie2Go.eu" - a blog about health care in geriatrics - I tried to find the perfect Wordpress theme. However, I couldn't find one that satisfied my needs. So I built one myself using Docker.

For easy development without the hassle of either installing a wordpress blog locally or shoveling my theme files after every change onto a server, I decided to use Docker. Luckily, someone created a [very neat blogpost][1] that guides you thru this process.

Creating a full fledged WordPress theme which supports all of the CMS' features can be quite exhaustive. However, WordPress is built in a way, that makes most of the work optional. For example: Once you created an `index.php` page you're somewhat done. Except, of course, you want page templates to look different, or single post templates or search results or...

There are great [resources][2] on how to build a WordPress theme out there. Especially the ones from the creators of WordPress;

Another topic that can make creating WordPress themes challenging for a novice like me are modern web features and the devices out there. A theme should be responsive. The simpler your theme, the simpler it is to make it responsive. I even managed to include support for dark mode.

At the end of the day, I managed to release v0.1 of `wp-latex-theme`, a very simple wordpress that resembles the LaTeX layout. It can be found over at [Github][3]. Please help me improve it (i.e. by adding support for comments or other post types or by localizing it). Also check out the [project][4] I made the theme for.

[1]: https://davidyeiser.com/tutorial/docker-wordpress-theme-setup
[2]: https://developer.wordpress.org/themes/
[3]: https://github.com/nitricware/wp-latex-theme
[4]: https://www.geriatrie2go.eu
Life unfolding in form, shape and colors
Tags: codepen
Published: 2020-01-05 12:54:20

---
title: Life unfolding in form, shape and colors
published: true
tags: codepen
---

<p>Move mouse to let the form evolve. Click New to start from a new form.</p>

{% codepen https://codepen.io/netsi1964/pen/yLypNbe %}

## Version 2
{% codepen https://codepen.io/netsi1964/pen/povpjNr %}
How to Beautify CSS Code?
Tags: css
Published: 2020-01-05 12:52:01

I Recently Created CSS Code Beautifier in Our GoOnlineTools App. So I decided to share about CSS Beautifier in Dev Community.

For this single tool development, I need to invest the whole day to make this CSS Beautifier Fully Functional. 

Without any further delay, let's introduce our [CSS Formatter](https://goonlinetools.com/css-formatter/)

![](https://res.cloudinary.com/practicaldev/image/fetch/s--AaJkQP2J--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://thepracticaldev.s3.amazonaws.com/i/u46fj9zxw1llpfar60ug.png)

## Here is How to Beautify CSS Code?

1. Visit [GoOnlineTools.com](https://goonlinetools.com/)
2. Search CSS Formatter inside GoOnlinlinetools Website
3. Open CSS Formatter ([Click here](https://goonlinetools.com/css-formatter/) to skip above steps)
4. Click on Clear Button to Clear Demo CSS Code
4. Paste Minified or Ugly CSS Code
5. Click on the Format Button
6. Now Press Copy Button to Copy Formatted CSS Code

Thanks For Reading My Article, I appreciate it if you give feedback about our CSS Formatter.
Working with vague error messages
Tags: debug, development, discuss
Published: 2020-01-05 12:10:30

---
title: Working with vague error messages
published: true
description: How would your programming style change if debugger was extremely vague?
tags: debug, development
---

<!-- wp:paragraph -->
<p>Imagine that instead of current style of programming errors, such as:</p>
<!-- /wp:paragraph -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">  File "error.py", line 33
    whille x%2 == 0:
           ^
SyntaxError: invalid syntax</pre>
<!-- /wp:preformatted -->

<!-- wp:paragraph -->
<p>You'd be getting something like <code>Error: invalid syntax or division by zero somewhere in the code, between lines 360 and 1500</code></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>How would it change you style of programming and debugging?</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>That is a question that people doing molecular biology have to face way too often. We run some PCR gels, or cloning, or DNA extraction, or whatever, and see that there is "no results" where some expected. Did we miss some reagent? Did the sample was wrong? Or did we made a wrong assumption in our protocol? That is similar to issues when working with vague debugger.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>If the code fails to compile, it can be because somewhere <code>int a=0; int b = 10/a</code> is the culprit. Or perhaps we are working with <code>Date</code> method that has been severely modified elsewhere to a <a href="https://thedailywtf.com/articles/a-date-with-a-parser">point where it doesn't meet default specification or common sense</a>.</p>
<!-- /wp:paragraph -->
Redshift slow WHERE IN performance
Published: 2020-01-12 17:11:24

---
title: Redshift slow WHERE IN performance
published: false
date: 2020-01-05 11:57:56 UTC
tags: 
canonical_url: https://kambanthemaker.com//posts/redshift-slow-where-in-performance/
published: true
---

Redshift is an amazing service when you need to run analytics on your data. Redshift uses columnar data storage, which means, it is very good when you run aggregation queries for reporting purposes.

Considering anaytical reports are generally genarated on a daily or weekly basis, Redshift uses query compilation to optimize query timing. This could impact the some dynamic queries (that you need to run very often with dynamic set of conditions). Say, you want to run a query with big set of static WHERE IN conditions, at this time, query compilation will slow down the query execution time even though the same query will not be run again.

Example:

```
SELECT SUM(score) from results WHERE student_id IN (LONG_LIST_OF_IDS)
```

You can find the compilation state of any query using the following query,

```
select userid, xid, pid, query, segment, locus, datediff(ms, starttime, endtime) as duration, compilefrom svl_compilewhere query = QUERY_IDorder by query, segment;
```

If you see compile=1, it means this query's some part of execution is being compiled for future use. This internal feature may not be prevented. As an workaround, you can use temporary table and do inner join.

```
CREATE TEMPORARY TABLE temp_student_ids (id int); INSERT INTO temp_student_ids values ((ID_1),)((ID_2)))SELECT SUM(SCORE) from results INNER JOIN temp_student_ids ON (student_id=id);
```
More than Git and GitHub workflow (Hindi/Urdu)
Tags: git, github, urdu, hindi
Published: 2020-01-05 11:19:05

As-salaam-alaikum/Hello folks 👋,

Here's me explaining more than just Git and Github work-flow (in Urdu/Hindi):

- Branching 🏷️
- PRs process ⚙️
- Tasks management and stuff like that 🙂

Let us know:
- How are YOU doing work remotely or in a software house with big teams?
- which workflow is working best for you?
- or maybe you did some team-work when creating uni FYP... How did you manage tasks?

doc link => https://www.notion.so/nomangul/Git-GitHub-workflow-28adfc05947a4473b02719ea98f951fe

P.S: I made a lot of mistakes in this video so, please ignore
✨ Instantaneous pages! (EventSourcing & Websocket)
Published: 2020-01-05 11:12:43

When we work with EventSourcing, the **only source** of database changes is **events** (yeah, sounds good, right). One of the truly great advantages of this is that there’s absolutely no need to hassle our servers for realtime change information with heavy SQL operations, or even lighter NoSQL ones. No need of rethinkDB from our back, or simple queries from the front. Just follow the events as they are and push them to the frontend side. From that, when we load pages, we **cache them** for later calls and just **supervise** events that could invalidate the cache (not that much, for each one), telling us which pages should now be reloaded via AJAX calls. *Ex: UserPortraitWasChanged event received by the frontend side would invalidate its /profile page cache*.

For the events conveyance (back to front), we use the ws:// protocol (JS tool: socket.io).

We **preload** pages when the user "mouseover"s the platform links. Clicked on, these links will then provide a cached result. Of course, all this stuff only works with a **PWA**: AJAX calls for pages navigation, not browser reloads! *(Remember: only JSON payloads via these calls, never raw HTML, which must be built afterwards, and only afterwards)*.

In the video, you'll see that there was only two AJAX calls (Laurence Bloch, Guillaume Meurice). The rest is completely cached.

You may have noticed that the gain, of having cached pages and avoided later calls of these same pages upon servers, is eventually lost, because we preload pages and some could be useless (user never following some links). That's fine with me, personally. Because, besides, the user has saved **40% of navigation time**! No special good for us, but quite important one for the user. 😌

It’s like an online game. The pages are the environment of the player (the user), already there and ready for interaction (without the huge drawback of really loading all, since it is progressive), and they’re updated when events occur. Navigation becomes a true house visit, no more waiting time between the rooms. Have [a look](https://github.com/keywinf/es-ws-no-page-load) at a sample code!

...a website behaving like a game, isn't it **beau-ti-ful**?

*Notes:*
*- dev.to uses very similar techniques!*
*- sample code is simplified:* 
---*> mouseover is limited to the strict boundaries of each < a > element, but we could also do preloads when the user enters a larger zone (ex: < a > + 240px edging). When the user enters a page, it's like having the page plus all the links of it loaded, but in a optimized way (loading only done when user is not very far from clicking).*
---*> we could use window.localStorage or window.BroadcastChannel to share pages cache to all tabs/windows of the browser, until the user close it all.*
What is a best way to organize Test Suites / Test Cases in JavaScript?
Tags: help, javascript, typescript, testing
Published: 2020-01-05 10:54:42

- Do you put test cases in JSON / YAML or in separate JavaScript files?
- What keys do you put for each cases, such as Name, Assertion, Result?
- Do you print, i.e. `console.log` / `console.dir(..., {depth: null})`, results?
- Do you write "expect to fail" tests?

In my [latest project](https://github.com/patarapolw/deepfind), I use ts-mocha.

I put my test cases in JavaScript file, rather than JSON, because I need some special value (`undefined`).

My test cases is an array of `ITestSuite`.

```typescript
interface ITestSuite {
  name: string
  cond: any
  expect: (result: any[]) => boolean
  obj: any
}
```

I `console.log` test results, as well as do automated assert, using standard library `import assert from 'assert'`.

```typescript
import deepfind from '.'
import assert from 'assert'

const testSuite: ITestSuite[] = [
  ...
]

testSuite.forEach((t) => {
  describe(t.name, () => {
    it(t.name, () => {
      const r = deepfind(t.obj, t.cond)
      console.log(r)
      assert(t.expect(r))
    })
  })
})
```

I didn't write "expect to fail" tests, but I did test in semi-production, using real Webpack config.

I also put `yarn test` inside `yarn prebuild`; and I put `yarn build` inside `yarn prepack`.

I also had some experience with testing on Travis CI, but I didn't set it up this nice; which might be nice if I plan to "branch and merge".

See https://github.com/patarapolw/deepfind/blob/master/packages/deepfind/src/index.spec.ts