teleren/devto huggingface dataset:
ການໃຊ້ງານ Serial.printf() function ໃນ PlatformIO

Tags: platformio, serial, printf, android
Published: 2021-03-31 09:46:55

ການພັດທະນາ `program` ໃນ `Arduino platform` ສິ່ງທີ່ຂາດບໍ່ໄດ້ຄືການ debug ເບິ່ງຄ່າຕ່າງໆ. ບໍ່ວ່າຈະເປັນ `sensor`, `ການຄຳນວນ` ເປັນຕົ້ນ ແລະ ສິ່ງທີ່ເຮົາໃຊ້ສະແດງຄ່າພວກນັ້ນກໍ່ຄື `Serial` ນັ້ນເອງ.
# ຫ້າມ serial print ຂໍ້ຄວາມ ໄປ main memory ເດັດຂາດດດ ມັນເປັນບາບ!
ຫຼາຍຄົນອາດໃຊ້ `serial.print("message")` ເຊິ່ງມັນກໍ່ບໍ່ມີບັນຫາຫຍັງເຮັດວຽກໄດ້ປົກກະຕິແຕ່ວ່າມັນຈະມີບັນຫາຖ້າ program ທີ່ເຮົາກຳລັງພັດທະນານັ້ນເປັນ project ໃຫຍ່ມີການເກັບຂໍ້ມູນໄວ້ memory ຂອງ mcu ເປັນຈຳນວນຫຼາຍເພື່ອໃຊ້ໃນການຄຳນວນ ຫຼື ຮັບ response ຈາກ server ແລະ board ທີ່ເຮົາເລືອກໃຊ້ມີຄວາມຈຳໜ້ອຍຍຍຍ 2kb ຫຍັງກໍ່ວ່າກັນໄປ ເຊິ່ງກໍລະນີນີ້ອາດເຮັດໃຫ້ເກີດ memory overflow ໄດ້. ສະນັ້ນປ່ຽນມາໃຊ້ຄວາມຈຳອື່ນແທນນັ້ນກໍ່ຄື `flash memory` ງ່າຍໆພຽງແຕ່ໃຊ້ `F("message")` ແບບນີ້:

```c++
serial.print(F("message"))
```
ພຽງເທົ່ານີ້ message ຕ່າງໆຂອງ Serial ກໍ່ຈະປ່ຽນໄປໃຊ້ flash memory ແທນແລ້ວວ ຫຼຸດການໃຊ້ main memory ໄປໄດ້ຫຼາຍເລີຍ!

# ເພີ່ມ Serial.printf() ເພື່ອຄວາມຫຼໍ່!
ຫຼາຍຄົນເຄີຍຂຽນຫຼາຍພາສາ ແລະ ມັກຈະມີ `printf` ໄວ້ໃຫ້ເຮົາ formate message ໃຫ້ອ່ານງ່າຍ ສະນັ້ນເພື່ອຄວາມຫຼໍໍ່ເຮົາກໍ່ເລີຍຕ້ອງການເຮັດແບບນີ້ກັບ Serial class ຂອງ arduino ເຊິ່ງໂດຍປົກກະຕິແລ້ວວ ບໍ່ມີ build-in ມາໃຫ້. ໃນການເພີ່ມເຮົາກໍ່ທຳການແກ້ໄຂ້ `Print.h` ທີ່ຢູ່ໃນ arduino platform ຫຼື platformIO  ໄດ້ເລີຍ.
ສຳລັບ `PlatformIO` ເຂົ້າໄປທີ່ `~/.platformio/packages/framework-arduino-avr/cores/arduino` ແລະ ຫາ `Print.h` ເພື່ອແກ້ໄຂ້. ໂດຍການເພີ່ມ code ຕໍ່ໄປນີ້ຕໍ່ທ້າຍພາຍໃນ public section

```c++
#include <stdarg.h>
#define PRINTF_BUF 80 // define the tmp buffer size (change if desired)
   void printf(const char *format, ...)
   {
   char buf[PRINTF_BUF];
   va_list ap;
        va_start(ap, format);
        vsnprintf(buf, sizeof(buf), format, ap);
        for(char *p = &buf[0]; *p; p++) // emulate cooked mode for newlines
        {
                if(*p == '\n')
                        write('\r');
                write(*p);
        }
        va_end(ap);
   }
#ifdef F // check to see if F() macro is available
   void printf(const __FlashStringHelper *format, ...)
   {
   char buf[PRINTF_BUF];
   va_list ap;
        va_start(ap, format);
#ifdef __AVR__
        vsnprintf_P(buf, sizeof(buf), (const char *)format, ap); // progmem for AVR
#else
        vsnprintf(buf, sizeof(buf), (const char *)format, ap); // for the rest of the world
#endif
        for(char *p = &buf[0]; *p; p++) // emulate cooked mode for newlines
        {
                if(*p == '\n')
                        write('\r');
                write(*p);
        }
        va_end(ap);
   }
#endif
```
ພຽງເທົ່ານີ້ເຮົາກໍ່ສາມາດໃຊ້ງານ `printf` ໄດ້ແລ້ວ

```c++
Serial.printf(F("%s\n"), mst.mac);
```

ຂໍ້ຈົບບົດຄວາມໄວ້ເທົ່ານີ້ ໄວ້ມີໂອກາດມາແຊກັນໃຫມ່!
Método map - JavaScript
Tags: javascript, tutorial, webdev, beginners
Published: 2021-03-31 09:39:55

O método **map()** invoca a função **callback** passada por argumento para cada elemento do array e retorna um novo array com elementos que são retornados pela sua função.

## **Parâmetros**

**callback -** Função passada como referência, será executada para cada elemento do array. Esta função pode receber 3 argumentos.

&emsp; **element -** O elemento que está sendo processado no array. 

&emsp; **index -** O índice do elemento atual que está sendo processado no array. (Opcional)

&emsp; **array -** O array para qual **map** foi chamada. (Opcional)

### Sintaxe

```jsx
const numbersDouble = numbers.map(functionCallback);
```

## **Retorno**

O método **map()** retorna novo array com elementos retornados pela sua função.

## Exemplo

Cria um novo array com o dobro dos valores do array original

```jsx
const numbers = [10, 6, 8, 19, 18, 20];
function double(value) {
	return value * 2;
}

const numbersDouble = numbers.map(double);
// numbersDouble -> [20, 12, 16, 38, 36, 40]
```

<a href="https://www.notion.so/elianbecali/map-b550be05e5c94ac2a42ddb9e2002d1ed" target="_blank">Método map | Notion
</a>
<a href="https://www.youtube.com/watch?v=bSJ7yquvXDM" target="_blank">Método map | Youtube
</a>
Raletta Coworking
Tags: coworkingindore
Published: 2021-03-31 09:30:12

Raletta <a href ="https://www.raletta.in/coworkingindore/home.php">coworking</a> spaces in Indore for a thriving community of entrepreneurs, startups and small businesses.


Key Facilities included :
Desk And Printer
Get a spacious personal dedicated desk and shared access to high speed laser printers.

High Speed Wifi
Entire office building is equipped with multiple 100mb/s fiber lines to cater friction-less connectivity.

Air-Conditioned
Centrally airconditioned office to keep the temperature cool on hot days.

Terrace Garden
Shared cafe area and a grand terrace garden included with the office seating.

142/2 GNT Market, Dhar road, Indore, India 452002.
Meet Brave CMS
Tags: php, cms, codeigniter
Published: 2021-03-31 09:18:49

I have been working on this CMS and I am hoping that a lot of people will find it useful.

### What it is
It is an easy-to-use **Content Management System** built with the good old LAMP stack. I have called it **[Brave CMS](https://github.com/Ajax30/Bravecms)** (link to Github repo).

---------------------------------------

### Video demo 

{% youtube f310Sy9CWNc %} 


### What it offers 

It offers UI/UX developers and designers the possibility to very easily turn their HTML templates into database-powered websites.

I worked as a WordPress theme developer for quite a while and I have found turning an HTML template into a WordPress theme is time-consuming and tedious. 

It is why I came up with Brave CMS. You can turn an HTML template into a Brave CMS template in **half the time** you would turn it into a WordPress theme.

---------------------------------------

### Why is Brave CMS so easy to use?

For these 3 reasons:
- Brave's themes are completely separated from the content manager.
- Every theme is comprised of its views (Twig files) and its assets. As you very likely already know, Twig has a very clean and clear syntax.
- The directory name of the active theme is stored in a variable named theme_directory. This variable is passed to the theme's master template file, `layout.twig` (the value held by the `theme_directory` variable is easy to change, from the `Static_model model`).  

---------------------------------------

### Why could the project use your help?
I believe Brave CMS has the potential to replace WordPress one day, but it needs contributions from more developers (smarter than I am).

So, if you know you are an outstanding PHP developer, feel free to contribute.
The plugin system for Python packages
Tags: python, programming
Published: 2021-03-31 09:06:58

I'll show you a simple way to create a Python package and add plugins to it. [more](https://youtu.be/Po5JaNVgo-M)

[Source](https://github.com/axju/misc/tree/master/plugins)
[Where I get the joke](https://github.com/axju/joke)

You can also follow me on [twitter](https://twitter.com/0xAxJu) or check out [my blog](https://axju.de)
Wednesday Links - Edition 2021-03-31
Tags: java, jvm, gradle, kotlin
Published: 2021-03-31 08:50:39

Crazy JVM internals (45s read) 🥸
https://twitter.com/tagir_valeev/status/1377154908084785155

Gradle's class loader hierarchy in a nutshell (6 min read) 🧐
https://dev.to/autonomousapps/abusing-gradle-s-class-loader-hierarchy-for-fun-and-profit-oca

Suitable JVM for async-profiler (45s read) 🔬
https://twitter.com/AndreiPangin/status/1377014949659164672?s=20

HTTP Cookies clearly explained (256s listen) 🍪
https://256.nurkiewicz.com/38

The AdoptOpenJDK is dead, long live the Eclipse Adoptium! (3 min read) 🛠
https://www.infoq.com/news/2021/03/eclipse-adoptium-established/

How to use JSPI? (13 min read) 🚚
https://reflectoring.io/service-provider-interface/

viktor - Kotlin's library for efficient array operations (10 min read) 🧬
https://blog.jetbrains.com/kotlin/2021/03/viktor-efficient-vectorized-computations-in-kotlin/
Wednesday Links - Edition 2021-03-31
Tags: java, jvm, gradle, kotlin
Published: 2021-03-31 08:44:02

Crazy JVM internals (45s read) 🥸
https://twitter.com/tagir_valeev/status/1377154908084785155

Gradle's class loader hierarchy in a nutshell (6 min read) 🧐
https://dev.to/autonomousapps/abusing-gradle-s-class-loader-hierarchy-for-fun-and-profit-oca

Suitable JVM for async-profiler (45s read) 🔬
https://twitter.com/AndreiPangin/status/1377014949659164672?s=20

HTTP Cookies clearly explained (256s listen) 🍪
https://256.nurkiewicz.com/38

The AdoptOpenJDK is dead, long live the Eclipse Adoptium! (3 min read) 🛠
https://www.infoq.com/news/2021/03/eclipse-adoptium-established/

How to use JSPI? (13 min read) 🚚
https://reflectoring.io/service-provider-interface/

viktor - Kotlin's library for efficient array operations (10 min read) 🧬
https://blog.jetbrains.com/kotlin/2021/03/viktor-efficient-vectorized-computations-in-kotlin/
How to Tackle Challenging Activities in Project Management Like a Pro
Tags: productivity
Published: 2021-03-31 08:33:00

Project management is an uphill task even for experienced project managers. It includes many important activities for ensuring the successful completion of the project without hampering the quality. Let’s understand the highly challenging activities involved in various stages of the project management lifecycle and how you can tackle them efficiently.

A successful project requires five stages to be accomplished effectively. 

<b>These stages are-</b>
- Conceptualization and Initiation
- Identification and Planning
- Execution
- Track and Control
- Evaluation

<h4> <b> Concluding Lines</h4> </b>
Project Management is much more than what it seems to be and involves many aspects to consider. It tastes patience and perseverance while demanding constant analysis of setbacks and failures. Hope this blog will help you address challenging activities in project management effectively.


<b>Original Source: <a href= "https://www.taskopad.com/blog/five-project-management-hacks-to-tackle-challenges/"> Project Management Software India</a> </b>
Getting Started with Bitrise: The Definitive Guide
Tags: beginners, webdev, devops, javascript
Published: 2021-04-26 21:50:50

---
title: Getting Started with Bitrise: The Definitive Guide
published: true
date: 2021-03-31 08:30:32 UTC
tags: beginners,webdev,devops,javascript
canonical_url: https://medium.com/backenders-club/getting-started-with-bitrise-the-definitive-guide-e4a9c10d6fae
---

[![](https://cdn-images-1.medium.com/max/1400/1*TELHucKlyFeAzr3ZJBNlqA.png)](https://medium.com/backenders-club/getting-started-with-bitrise-the-definitive-guide-e4a9c10d6fae?source=rss-8b0955f01559------2)

Mobile DevOps in the past has been a very difficult and tedious job to manage manually. But, with the introduction of Bitrise, mobile…

[Continue reading on Backend Developers »](https://medium.com/backenders-club/getting-started-with-bitrise-the-definitive-guide-e4a9c10d6fae?source=rss-8b0955f01559------2)
Download IDM Trial Reset: Use IDM Forever

Published: 2021-03-31 08:30:29

<div class="s-block-item s-repeatable-item s-block-sortable-item s-blog-post-section blog-section">
<div class="container">
<div class="sixteen columns">
<div class="s-blog-section-inner">
<div class="s-component s-text">
<div class="s-component-content s-font-body">

Hello, here in this article, we are going to review <a href="https://hackerztrickz.com/download-idm-trial-reset/" target="_self">IDM Trial Reset</a> software that helps you to use IDM free for a lifetime.

<div class="s-block-item s-repeatable-item s-block-sortable-item s-blog-post-section blog-section">
<div class="container">
<div class="sixteen columns">
<div class="s-blog-section-inner">
<div class="s-component s-text">
<div class="s-component-content s-font-body">

Internet Download Manager is one of the best, most used &amp; premium download manager that allows you to download all your files faster than usual.

<div class="s-block-item s-repeatable-item s-block-sortable-item s-blog-post-section blog-section">
<div class="container">
<div class="sixteen columns">
<div class="s-blog-section-inner">
<div class="s-component s-text">
<div class="s-component-content s-font-body">

Not just about the fast downloading speed; it will enable you to stop, resume, &amp; restart the download. IDM offers you more convenience while downloading large files; you can download them in parts; you will have complete control over the download.

<div class="s-block-item s-repeatable-item s-block-sortable-item s-blog-post-section blog-section">
<div class="container">
<div class="sixteen columns">
<div class="s-blog-section-inner">
<div class="s-component s-text">
<div class="s-component-content s-font-body">
<h2><strong>What is an IDM Trial Reset?</strong></h2>
When you install Internet Download Manager on your PC for the first time, it will offer you 30 days of free trial after that you have to pay to continue use. IDM trial reset allows you to use it for free.

Software will make changes in IDM registry files &amp; extend the trial period for a lifetime.
Density
Published: 2021-03-31 08:30:21

Density of Cement, <a href="https://civiljungle.com/density-of-cement-sand-and-aggregate/">Sand</a> and Aggregate
Density is also called the unit weight of a substance. It is represented by a symbol called a line (p). Density represents the degree of compactness of a material. If the material is of higher density, it is more compacted material.

The density of construction materials is their Mass per unit volume of materials. It is expressed in kg / m3 or lb / ft3 and shows the compactness of the construction material.

The density can be expressed as

p = m/V = 1/v

 
Where

p = density [kg / m3], [slugs / ft3]
m = mass [kg], [slugs]
V = volume [m3], [ft3]
v = specific volume [m3 / kg], [ft3 / slug]
Conversion: 1 kg / m3 = 0.624 lb / ft3
LightSpeed CSS
Tags: css, emmet, vscode
Published: 2021-03-31 07:57:55

Hello Coders, 

We all have been using [Emmet Abbreviations] (https://docs.emmet.io/) for HTML in VS Code to code faster. 

If you are new to this the following example will help you: 
If you type _!_ and the select the autocomplete option then you get the following code: 

```html
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
    
</body>
</html>
```
Similarly, if you _div.container_ then hit enter/return key you get the following code:

```html
<div class="container"></div>
``` 
you get the idea for more shortcuts refer to this [cheat sheet] (https://docs.emmet.io/cheat-sheet/) 

Similarly, we can use Emmet for CSS as well and you will end up writing CSS properties lot faster. 

Just try typing this in you css/scss/less file inside any class and hit tab/return key. 

`m0+p2r+w100p`

and you will get this 

```css
.container{
    margin: 0;
    padding: 2rem;
    width: 100%;
}
```
this makes writing CSS so simple and faster. 

now you can also type the same thing in diverse ways like 
`m:0+p:2r+w:100p`
and you will get the same result.

suppose you need postion then you type 
`posr` and this will give `postion: relative;`, 
for display you can type `d:f` and it will give `display:flex;` `mr` becomes `margin-right`, there lots and lots of shortcuts. Find out more on [cheat sheet] (https://docs.emmet.io/cheat-sheet/).

Lastly, I want to acknowledge this article was inspired by a video of Kevin Powell, he is one of the most CSS gurus on YouTube and you should checkout his [channel](https://www.youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw).

And you can watch his video on emmet for CSS here: 
{% youtube vncch9-1kPE %}

Please do share this with you developer friends and family. 

######PS: Emmet comes preinstalled in VS Code. If you use other IDE then you might need to install the emmet plugin.
Building a simple slideshow component in React using Hooks
Tags: react, slideshow, hooks
Published: 2021-03-31 07:53:45

I was trying to build a simple slideshow component using React Hooks.  Initially, I was thinking of how to use calculations to position a picture properly on the page or inside of the component region.

It turns out it is a lot simpler, if we use containers or containers that cover the whole viewport to contain a picture, and move the container accordingly.

The reason is, if we calculate where to place the image, and what size to use, it can be a lot of calculations. If we use a container and set the `max-width` and `max-height`, and we center the picture in the container, such as by using the container as a flex box, then we don't have to do all the calculations and it is automatically handled by CSS.

In the example here, I am trying to use the viewport, and to better use it using CSS, note that we can use the unit of `vw` and `vh`, which is viewport width and viewport height.

I "dock" the containers at the left of the screen (hidden):

```js
  function theLeftShift(i) {
    if (currentImageIndex === i) return 0;
    else if (i > currentImageIndex) return "100vw";
    else return "-100vw";
  }
```
and
```jsx
      <ul>
        {Array.from({ length: nImages }, (e, i) => i + 1).map((e, i) => (
          <li style={{ left: theLeftShift(i) }}>
            <img src={`./pic${e}.jpg`} />
          </li>
        ))}
      </ul>
```

We don't really need to move the containers further and further left, and can just dock it to the immediate left.  That way, we don't need to create a region that is wider than it is needed.

The demo: https://codesandbox.io/s/simple-slideshow-z2089?file=/src/App.js

The full page demo: https://z2089.csb.app/
Toast Notifications with Alpine.js & Tailwind.css
Tags: showdev, javascript
Published: 2021-03-31 07:01:15

Toast notifications are notifications that silently pop up and fade away. They can be used to indicate events and their status such as if a document was saved successfully.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/812jlvunlem39hmlxaic.png)

Recently, I implemented a basic "toaster" using Alpine.js and Tailwind.css.
You can try it out live here: [Toaster Demo](https://tailpine.netlify.app/toast.html)

#Features
* "Hook" to create toasts from anywhere - uses Spruce for global state access.
* Auto-close after a set interval.
* Close on click.
* Stack toasts if more than one.
* Easy to expand.

#Implementation
The following code is what powers the toast system:
```js
Spruce.store("toasts", {
	counter: 0,
	list: [],
	createToast(message, type = "info") {
		const index = this.list.length
		let totalVisible = this.list.filter((toast) => {
			return toast.visible
		}).length + 1
		this.list.push({
			id: this.counter++,
			message,
			type,
			visible: true,
		})
		setTimeout(() => {
			this.destroyToast(index)
		}, 2000 * totalVisible)
	},
	destroyToast(index) {
		this.list[index].visible = false
	},
})
```
Well, this and the HTML that consumes it.
You can have a look at the full source code here: [GitHub Repo](https://github.com/zaxwebs/tailwind-alpine/blob/main/toast.html)

#What's Next?
One can add a whole ton of functionality quite easily. Here are a few examples:
* Close-all button.
* History
* Headings and more.
* Scrolling

That's all for this article. Thanks so much for reading.
I publish one article every week, if you'd like to see more of my content consider subscribing.
Have a great day.
Angular dynamic classes using ngClass
Tags: angular
Published: 2021-03-31 06:58:39

Yesterday, we looked at [dynamic form fields](https://daily-dev-tips.com/posts/angular-dynamically-change-form-validators/), and it made me think about custom classes in Angular.

You might want to add `class1` based on a condition or `class2` if the condition is not met.

How can we achieve such a thing?
Well, that is where the ngClass comes in handy.

## How ngClass works

Before we make things dynamic, let's first look at how it looks without any conditions.

If you want to work along with me, I'm using [this branch as the starter template](https://github.com/rebelchris/angular-starter-demo/tree/feature/tailwind).

Open up the `app.component.html` file.

Add the following.

```html
<div [ngClass]="'m-8 p-8 bg-blue-500'">Hi, I'm the div</div>
```

This will add three classes to this div.
And it will look something like this:

![Default ngClass useage](https://cdn.hashnode.com/res/hashnode/image/upload/v1616855333275/YkSL-YvKi.png)

But now, let's introduce a dynamic class based on a condition.

```html
<div [ngClass]="[color ? 'bg-blue-500' : 'bg-purple-500']">Hi, I'm the div</div>
```

This is a reversed boolean check, so we check if the `color` variable is true, it will be blue, else purple.

Now we need to add this variable to our `app.component.ts` file.

```js
export class AppComponent {
  color: boolean = false;
}
```

If we run this, we get a purple block, which is correct. Let's add a simple click function to toggle the state.

```html
<div (click)="color = !color" [ngClass]="[color ? 'bg-blue-500' : 'bg-purple-500']">
  Hi, I'm the div
</div>
```

This will toggle the color variable to the opposite.

And now we should see the color change if we click it.

![Angular ngClass dynamic condition](https://cdn.hashnode.com/res/hashnode/image/upload/v1616855978677/XWmkJTy-r.gif)

And with that, we've learned how to change classes dynamically in Angular.

You can find today's code on the following [GitHub repo](https://github.com/rebelchris/angular-starter-demo/tree/feature/ng-class).

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)