teleren/devto huggingface dataset:
Huawei APM Network Analysis displaying the number of sessions as 0? Why?!
Tags: huawei, apm, android, performance
Published: 2021-11-04 09:59:00

The APM service from AppGallery Connect can monitor and test the performance of apps running on devices and provide readable reports in real-time, which is a very practical feature.
Once integrated the analysis reports are very comprehensive, especially the **ANR analysis** and **Network analysis** reports.
However, there is one problem that many people find, which is that the number of sessions recorded in the network analysis appears as 0 even though the number of network requests, which appears as Samples in the following figure, was over one hundred.

![Image showing APM report missing sessions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/crsrm9jzqkt2bj0mlm9r.png)
 
So why might this be the case? Is there something going wrong? A bug? What should we do about it?! Well, let's start by understanding the sessions.
A session is an information interchange between the user and app. For example, when the user moves the app from the background to the foreground, a new session is generated.
To prevent frequently collected sessions from consuming too much traffic and CPU resources, APM performs sampling control on sessions.

Currently, the default session sampling rate is 1%.
The default session sampling rate is the preferred method when used online. But you can also increase it in the offline test by using the following code:

{% gist https://gist.github.com/devwithzachary/a9a33ee5587e8e10e7a3c8547e7e90c3 %}

Click [here](https://developer.huawei.com/consumer/en/doc/development/AppGallery-connect-Guides/agc-apm-android-addcustomtrace-0000001077683336#ZH-CN_TOPIC_0000001077683336__section16827174113359) to view more details about how to set the session sampling rate.

So importantly not every session is sent back for reporting, and by default, it’s a very small number (1%). If you find that your app is getting a very low number of sessions, which is particularly the case during testing when it might just be running on one device increasing the sample percentage will help make sure you are getting sessions results in the reports.

If you want to learn more about APM, please refer to:
[APM Development Guide](https://developer.huawei.com/consumer/en/doc/development/AppGallery-connect-Guides/agc-apms-introduction)
and
[APM API Reference](https://developer.huawei.com/consumer/en/doc/development/AppGallery-connect-References/apms-overview)
CSS basic 1 - inline/internal/external CSS
Tags: inlinecss, internalcss, externalcss
Published: 2021-11-04 03:34:39

As Inline has the highest priority, any styles that are defined in the internal and external style sheets are overridden by Inline styles. Internal or Embedded stands second in the priority list and overrides the styles in the external style sheet. External style sheets have the least priority.
### Priority
Inline > Internal > External

#Inline CSS
Inline css will override internal or external css


```html
<h1 style="font-size: 40px; color:red;">Hello World</h1>
```

#Internal CSS
Add <code>&lt;style&gt;</code> inside <code>&lt;head&gt;</code>

```html
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Internal css</title>
    <!-- internal css -->
    <style>
        h1 {
            color: red;
        }
    </style>
</head>

<body>
    <h1>Hello World</h1>
</body>

</html>
```

#External CSS
Adding <code>&lt;link&gt;</code> inside <code>&lt;head&gt;</code>

<link rel="stylesheet" href="cssfilename.css">

```html
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 기본 - external css</title>
    <!-- red -->
    <link rel="stylesheet" href="016.css">
    <!-- blue -->
    <link rel="stylesheet" href="016_test.css">
</head>

<body>
    <h1>Hello World</h1>
</body>

</html>
```

#Importing CSS
You can import css by using @import url("dir/filename.css");
```html
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>importing css</title>
    <style>
        @import url("016.css");
    </style>
</head>

<body>
    <h1>Hello World</h1>
</body>

</html>
```

#reset.css / normalize.css
The goal of a resetting CSS style is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.
[reset.css](https://meyerweb.com/eric/tools/css/reset/)
[normalize.css](https://necolas.github.io/normalize.css/)
Live Browser - make a Browser based Browser!! 
Tags: javascript, programming, naemazam, browser
Published: 2021-11-04 09:46:30

Live Browser is a fully browser based (funny) BROWSER!! made with html CSS JS. You can Search Google and Bookmark Your own favorite websites and You got some beautiful website as a Default Bookmark(also my projects).

 Feature: 
 - Google Search Box
 - Browser Detection 
 - Add Bookmark
 - Virtual Keyboard
 - Coming soon more .... 


[Demo](https://naemazam.github.io/Live-Browser/) [GitHub](https://github.com/naemazam/Live-Browser)


## Contributing

Contributions are always welcome!



  

[![MIT License](https://img.shields.io/apm/l/atomic-design-ui.svg?)](https://github.com/tterb/atomic-design-ui/blob/master/LICENSEs)
Day 27 of 100 Days of Code & Scrum: Rest Day & Company Banner
Tags: 100daysofcode, beginners, javascript, programming
Published: 2021-11-04 09:42:55

Good day, everyone!

I'm doing a lot better now compared to yesterday. Thank you for the kind concern and support!

I decided to take it easier today compared to usual. However, I managed to get a lot done and I do have something to show. I've finally made a temporary, prototype design template for my company.

Anyway, let's move on to my daily report!

## Yesterday

- I finished the official Next.js tutorial.
- finished reading [Scrum and XP from the Trenches](https://www.infoq.com/minibooks/scrum-xp-from-the-trenches-2/).
- I learned about Next.js performance and Core Web vitals.
- Also, I wrote Agile user stories for my company website.
- I read about scrum of scrums and distributed Agile teams.

## Today

Here are the things I learned and worked on today:

### Next.js

- working on my company website.
- here is a temporary, prototype banner I've made for my company:

![Company Banner](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e4z5xqz6wfpqcq6z6gmq.png)

### Scrum

- I did some practice flashcards for Scrum.
- I read about how to split user stories into tasks.

Once again, thank you to everyone for reading and supporting me! I wish you all the best!

![Thank You Banner](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0jhveg4yy4q0yqpb6nuy.png)

### Resources/Recommended Readings

- [Official Next.js tutorial](https://nextjs.org/learn/basics/create-nextjs-app?utm_source=next-site&utm_medium=nav-cta&utm_campaign=next-website)
- [Scrum and XP from the Trenches](https://www.infoq.com/minibooks/scrum-xp-from-the-trenches-2/).
- [The 2020 Scrum Guide](https://scrumguides.org/scrum-guide.html)
- [Mikhail Lapshin's Scrum Quizzes](https://mlapshin.com/index.php/scrum-quizzes/)

### DISCLAIMER

**This is not a guide**, it is just me sharing my experiences and learnings. This post only expresses my thoughts and opinions (based on my limited knowledge) and is in no way a substitute for actual references. If I ever make a mistake or if you disagree, I would appreciate corrections in the comments!

### Other Media

Feel free to reach out to me in other media!

<span><a target="_blank" href="https://www.rammina.com/"><img src="https://res.cloudinary.com/rammina/image/upload/v1638444046/rammina-button-128_x9ginu.png" alt="Rammina Logo" width="128" height="50"/></a></span>

<span><a target="_blank" href="https://twitter.com/RamminaR"><img src="https://res.cloudinary.com/rammina/image/upload/v1636792959/twitter-logo_laoyfu_pdbagm.png" alt="Twitter logo" width="128" height="50"/></a></span>

<span><a target="_blank" href="https://github.com/Rammina"><img src="https://res.cloudinary.com/rammina/image/upload/v1636795051/GitHub-Emblem2_epcp8r.png" alt="Github logo" width="128" height="50"/></a></span>
About that monkey-patching business...
Tags: ruby, polyphony, monkeypatching
Published: 2021-11-04 09:38:42

---
title: "About that monkey-patching business..."
published: true
description: 
tags: ruby, polyphony, monkeypatching
//cover_image: https://direct_url_to_image.jpg
---

Is monkey-patching inherently bad? Should its use make [Polyphony](https://github.com/digital-fabric/polyphony) illegitimate? These are the questions I'm exploring in my [latest article](https://noteflakes.com/articles/2021-11-04-monkey-patching).
How to get the size of a directory in Linux
Tags: linux, terminal, codenewbie
Published: 2021-11-04 09:17:37

# Introduction

Linux is one of the most popular operating systems in the world. It is Unix-like, and it is also open-source. Quite a big percentage of developers use Linux because it can be customized in so many ways.

What's cool about Linux is its command line. Every 'hackers' paradise. There are a ton of commands. If you aren't familiar with any Linux commands, be sure to check out this post on the [8 Linux Commands Everyone Should Know](https://devdojo.com/bo-iliev/8-linux-commands-everyone-should-know).

There is probably a command for almost anything that you want to do. For example what if you wanted to get the size of a directory? Well luckily for you there is a command for that. In this post, we are going to talk about that command and see what it can offer.

# The `du` command

This command lets the user get a quick view of the **disk usage**. The best way to use it is by giving it the directory you want to see the size of. It should look a little something like this:

```
du directory_name

// output
2314    directory_name
```

This will give you the size of all the files and at the very end, it will give you the size of the directory itself. You could point out the full path, or you could just give the name of the directory you want to see if you are already on the same path.

But we could make this even easier just b adding 2 **flags**. Flags help the command change its behavior. For the `du` command we could add the flags `-s` and `-h`.

`-s` stands for **summarize** and it will show you only the total size of the directory, without all those files popping up on your screen.

`-h` stands for **human-readable** and it will convert the size so that you can read it easier. Just by running the command without the `-h` flag doesn't specify you a unit of measurement.

So now to get the best of this command, you should run it like this with the `-s` and `-h` flags:

```
du -sh directory_name

// output
44.5M   directory_name
```

And if you wanted to see all of the directories sizes, you could just run this:

```
du -sh ./*

// output
12.2M   dir1
 2.5M   dir2
  55M   dir3
```

Another thing you can do is use pipe(`|`) and sort them by size, which will make it even easier for you to see their sizes. What `|` does is get the output from the command behind it and add it into the input of the command after it. So to sort the directories by size just run the following command:

```
du -sh ./* | sort -h

// output
  55M   dir3
12.2M   dir1
 2.5M   dir2
```

# Conclusion

This is a pretty useful command that I think everybody should know, just because of how short and easy it is. I hope that this post has helped you and I wish you happy coding.
next js commerce - pages from bigcommerce wont show up by being ignored from not having locales
Tags: nextjs, bigcommerce, nextjscommerce
Published: 2021-11-04 08:49:08

Im using Next js commerce together with bigcommerce as my vendor, when im running my build command it should grab all the current pages on my bigcommerce and display them in my navigation, but next js is ignoring to display them because its complaining they do not include a locale. Im not planning on using any locale as of now so i just want to make it work. Anyone managed to get this work? Because i saw that the vercel demo store they get all the pages from bigcommerce displayed but im unsure if it has to do with a setting in bigcommerce or in my next-js.config file.
https://demo.vercel.store/ Check in the footer that the links represents the pages that come by default from bigcommerce, but they wont show up on my site that im trying to build.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cogl2quh10dgp2xm65wo.png)
How to run a Golang Revel App with Docker and Docker Compose
Tags: go, docker, dockercompose, revel
Published: 2021-11-04 08:27:31

---
title: How to run a Golang Revel App with Docker and Docker Compose
published: true
description: How to run a Golang Revel App with Docker and Docker Compose
tags: golang,docker,dockercompose,revel
canonical_url: https://citizix.com/how-to-run-a-golang-revel-app-with-docker-and-docker-compose/
//cover_image: https://direct_url_to_image.jpg
---

In this guide we are going to learn how to run a golang revel app using docker and docker-compose. Golang revel is a high productivity, full-stack web framework for the Go language. 

Checkout the full guide here https://citizix.com/how-to-run-a-golang-revel-app-with-docker-and-docker-compose/
Migration to CDK with existing infrastructure
Tags: aws, beginners, devops, serverless
Published: 2021-11-04 08:27:02

Yesterday (November 3, 2021), I presented on the November meetup of ServerlessDays Amsterdam, where I introduced using CDK with serverless use-cases. After that, I thought about migrating to CDK for the teams that have already chosen this fantastic deployment framework. 

Here is the link for the recording. 

Time codes: **3:20 - 23:30**
{% youtube 3VxOFDQW5yI %}

Examples from the presentation:
- [Billing Alert](https://github.com/Grenguar/cdk-billing-alert)
- [Serverless API with CI/CD Pipeline](https://github.com/Grenguar/aws-cdk-api-workshop)

## You sold me CDK! What's next? 

Let's imagine the debate over using Infrastructure as a Code tool is over. One could go and start with Cloud Formation Kit. There are other options, of course. I spoke of them in my other article. What steps could one take for migrations? 

### Greenfield project

We are developing a developer's dream project with the latest and freshest tools. With this in mind, let's create new infrastructure stacks. The most important is to go straight to CDK. The one issue will be choosing the language. Here it depends on the primary language of the team. The front-end teams would prefer Typescript. Java backend people will use this language. 

### From No-Infrastructure-as-Code

This case can be a challenge. Here try to group resources in stacks and find a way to connect them. If you have more than 20 resources, it could be better to create a separate stack. Also, using constructs could help for logical grouping. Think of them as modules. 

### From Cloudformation/other tools

One could use the hybrid approach where the template will be together in the same project with the CDK application. An example could be a pipeline provisioned with CloudFormation. The infra for business logic would use a programming language.

A similar approach could work with other deployment tools. There are multiple ways to connect stacks:

- By outputs 
- By creating shared SSM Parameter Store/Secrets Manager

The latter one gives the ability to create a resource, save its id in one stack. One could use it in a different stack as a parameter. However, both approaches could work depending on the needs. Usage of outputs is widespread because one does not care which tool was used. However, secrets give a way to use any resource from any stack that other teams created.

Thanks for reading and watching me! Follow me on Twitter: 
{% twitter 1447457840562593796 %}
AtlasGQL - A self-composing GraphQL server library using TypeScript, Express and Apollo Server
Tags: graphql, typescript, opensource, programming
Published: 2021-11-04 08:20:51

Before digging into the details, let me first do a very quick introduction to what GraphQL is.

> GraphQL is a query language designed to build client applications by providing an intuitive and flexible syntax and system for describing their data requirements and interactions.
GraphQL is not a programming language capable of arbitrary computation, but is instead a language used to make requests to application services that have capabilities defined in this specification.

> GraphQL does not mandate a particular programming language or storage system for application services that implement it. Instead, application services take their capabilities and map them to a uniform language, type system, and philosophy that GraphQL encodes.

> This provides a unified interface friendly to product development and a powerful platform for tool-building.
[spec.graphql.org/October2021](https://spec.graphql.org/October2021)

My journey with GraphQL started when its adoption was still surrounded by some skepticism; at that time there were not many tools like today, things as code generators and command-line utilities so having to design and write the GraphQL schema, the resolvers, the logic behind (DTOs, models), the TypeScript definitions, the fragments, etc… was not the best developing experience and since our life timespan is too limited to deal with poorly optimized processes I started working on something to simplify a bit my daily job.

Thankfully there was already something to ease the pain and that thing was Apollo Server but most of the boring and plumbing stuff was still there…

at that point, I began working on something that the community later described as a "code-first approach".

In the GraphQL context, a code-first approach expects you to write your business logic (with types, resolvers, queries, mutations, …) before and only after deriving the schema. TypeGraphQL was crucial for such a thing.

It was only a matter of putting the pieces together, organizing the gears, and hiding most of the complexity under the hood.
A few years later that private "boilerplate" started looking like a kind of a product, that's where AtlasGQL was born.

AtlasGQL is an npm package that comes with the GraphQL (v15) engine, Apollo Server (v3), and Express (v4) already organized having in mind the simplicity of use without compromising the performances.

It's highly customizable and expandable and, in case you are interested, don't hesitate to browser the [public repository](https://github.com/marcellobarile/AtlasGQL) and the [demo application](https://github.com/marcellobarile/AtlasGQL/tree/master/example).

The project is open source and every contribution will be highly appreciated.
Performance Budget - Idea, Core Web Vitals, Tools
Tags: performance, budget, webdev
Published: 2021-11-04 08:13:34

{% youtube zEaWH6L7O8I %}
Did you know that around 53% of mobile visitors leave a page within 3 seconds if it doesn't load completely? That's why we should take care of performance budget.

In the newest episode our CTO shares his experience and explains why it’s so important to use it in every kind of project.

Get your questions answered:
🟣 What is a performance budget? 
🟣 Why do we really need it? 
🟣 What are the types of performance budget metrics?
🟣 What are Core Web Vitals and other user-centric metrics?
🟣 What if you broke one of the rules in the performance budget?
🟣 What tools we can use to track it?

You can also read the article at [Frontend House](https://frontendhouse.com/experts-zone/performance-budget-idea-core-web-vitals-tools-experts-zone-7)
dApps / Web3 - Help me finally understand / ELI5!
Tags: web3, webdev, explainlikeimfive, discuss
Published: 2021-11-04 08:09:50

OK so I have read a few things about blockchain and dApps, I have listened to a few Twitter spaces and tried to educate myself on this.

But I am still not seeing the actual big picture, rather than a hype train and I want to understand it finally!

Crypto currencies make sense, NFTs kind of make sense (although the current "NFT points at a URL to prove ownership" model is flimsy at best) but dApps...they make no sense to me!

How do you get minimal latency lookups (like how does DNS work on such a complex network). 

Why is it beneficial to have a distributed network where you don't control when the core "operating system" software updates and may be running different versions on different nodes. 

How do you roll back a major mistake that exposes user data (for example) fast enough to avoid problems? And on the same track, if a node gets compromised in some way, who is responsible for the breach (my understanding is limited so this might be unlikely, I don't know!) 

How is it better when it will inevitably result in more jumps and hops to data nodes, which won't be as efficient as large data centres and therefore use **more** energy. 

Updating 10,000+ different data nodes rather than 6/7 CDNs seems like it is going to exponentially multiply data transmission data costs and energy costs.


All of these questions assume that "Gas prices" drop to next to nothing and it becomes commercially viable of course, which at the moment it certainly isn't.

Please, I may sound cynical, I am not really, I just don't see the Web3 benefits as clearly as everyone else apparently does!

Also if my terminology is crap, apologies, ask me if something doesn't make sense!
Inspecting the Clipboard (on Linux)
Tags: javascript, clipboard, copy
Published: 2021-11-04 08:02:42

Developing a small Javascript library to support copying arbitrary HTML elements to the clipboard ready (for use in emails), I was using [CopyQ](https://copyq.readthedocs.io/en/latest/) to inspect the clipboard whenever I needed to. In particular I was interested in seeing the MIME parts of the copy.

Turns out that CopyQ is a little flakey with the WebAPI copy command I'd opted for. Often it's fine, sometimes not, just a bit here and there and I lacked the or energy to diagnose the nuances, and developed a a general sense of frustration with it alas.

# Inspecting the Clipboard (revisited) :mag:

So I looked for a simpler, more reliable and perhaps native solution to inspecting the clipboard contents closely, including it's MIME part breakdown.

As I'm on Linux I found the lowest level of reliable inspection was [`xclip`](https://linux.die.net/man/1/xclip) easily installed on Debian/Ubuntu derived systems with `sudo apt install xclip`.

Subsequently I could see the contents in parts as follows:

`xclip -selection clipboard -o -t TARGETS`

After a copy operation, for example, I see:

```bash
$ xclip -selection clipboard -o -t TARGETS
TIMESTAMP
TARGETS
SAVE_TARGETS
MULTIPLE
STRING
UTF8_STRING
TEXT
text/plain
text/html
```

And I can see the parts with:

`xclip -selection clipboard -o -t text/plain`

`xclip -selection clipboard -o -t text/html`

which works a dream. This can be piped through grep to find things, but the HTML is not formatted.

So I installed [HTML tidy](https://www.html-tidy.org/ "HTML Tidy").

After which:

`xclip -selection clipboard -o -t text/html | tidy -qi --wrap 0`

Produces a nicely formatted view of the HTML MIME part.

And to get the size of the HTML on the clipboard:

`xclip -selection clipboard -o -t text/html | wc -c | numfmt --to=iec`

all of which proved very useful inspection and diagnostics when experimenting with what to copy and how.