teleren/devto huggingface dataset:
Angular Dynamic Component Loader Tutorial with Examples
Tags: angular, dynamiccomponent
Published: 2021-04-08 10:52:26

Angular Dynamic Component Loader Tutorial with Examples

https://grokonez.com/frontend/angular/angular-dynamic-component-loader-tutorial-with-examples

[no_toc]In the tutorial, grokonez.com shows how to dynamically load an Angular components by examples. What we introduce:

<ul>
<li>Create Anchor Directive</li>
<li>Dynamically Loading and Resolving Components</li>
</ul>

Related posts:
- <a href="https://grokonez.com/frontend/angular/angular-6/angular-6-component-how-to-create-integrate-new-angular-6-component">Angular 6 Component – How to create & integrate New Angular 6 Component</a>
- <a href="https://grokonez.com/frontend/angular-6-routing-navigation-with-angular-router-service">Angular 6 Routing/Navigation – with Angular Router Service</a>

<!--more-->
<h2>Overview</h2>
An Agnular application may need to load new components at runtime, so component's templates are not always fixed.
The following examples shows how to build an dynamic news banner.

<img src="https://grokonez.com/wp-content/uploads/2019/06/Untitled.gif" alt="angular-dynamic-loading-component-tutorial-with-examples-overview" width="648" height="364" class="alignnone size-full wp-image-18067" />

New news components are added frequently so it is impractical to use a template with a static component structure.
<h2>Angular Anchor Directive</h2>
We need define an anchor point to tell Angular where to insert components for adding a new components:
Now we build an <code>NewsDirective</code> to mark valid insertion points in the template:

<pre><code class="language-javascript">
import { Directive, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[news-host]'
})
export class NewsDirective {
  constructor(public viewContainerRef: ViewContainerRef) { }
}
</code></pre>

- <code>NewsDirective</code> injects <code>ViewContainerRef</code> to access to the view container of the element that will host the dynamically added component.

<code>news-host</code> is used to apply the directive to the element. 

More at: https://grokonez.com/frontend/angular/angular-dynamic-component-loader-tutorial-with-examples
UI Dev Newsletter #51
Tags: webdev, html, css, javascript
Published: 2021-04-08 10:52:07

- [Building a Magical 3D Button](https://bit.ly/320BGER)
Josh Comeau describes how to create a whimsical 3D button in detail.


- [CSS Position Property Explained!](https://bit.ly/31TEH9z)
Suraj Vishwakarma looks into the position property and its different values in CSS.


- [Every CSS Background Property Illustrated and Explained with Code Examples](https://bit.ly/3wuzW4n)
Joy Shaheb describes every single CSS background property with every possible value, including the short-hand.


- [Swipey image grids](https://bit.ly/3wvhMzy)
Cassie Evans describes how to make a 'swooshy' image grid that is responsive with SVG.


- [Using media queries with JavaScript](https://bit.ly/3mjk4xb)
Maroun Baydoun shows how using media queries in JavaScript is much more efficient than detecting screen resolution.


- [Accessible front-end components: claims vs reality](https://bit.ly/39KFr5n)
Hidde de Vries lists many things you can look at if you consider third-party 'accessible components'.


- [Vodafone: A 31% improvement in LCP increased sales by 8%](https://bit.ly/3cRtgWA)
Vodafone determined that optimizing for Web Vitals generated 8% more sales.


- [The Clips of CSS v2 (React && Prism)](https://bit.ly/2Ol5msP)
Jhey shares a demo on using 'clip-path: polygon()' to create shapes with CSS.



Happy coding!

[Subscribe to the newsletter here!](https://bit.ly/34155z3)
Developing a mobile app for improving asthma self-management
Tags: flutter, mobile, ios, android
Published: 2021-04-08 10:37:01

The client was looking for assistance with the development of a mobile app that would help its users to better understand and track asthma or COPD symptoms, as well as access and navigate medications. One of the Aerovu team’s strategic goals is to build understanding and experience by creating patient-focused digital tools.

We proposed that Aerovu develop a comprehensive mobile therapy app for asthma monitoring. The solution would be more than just a pill reminder and medication tracker app. It would help sufferers of chronic lung diseases better control asthma and COPD by tracking their health conditions, making appropriate records and logs, setting up action plans and reminders, monitoring the weather, tracking inhaler puffs, and assisting them with immediate care and medication access.
How to integrate RxJava into Android App with examples
Tags: android, rxjava
Published: 2021-04-08 10:36:49

How to integrate RxJava into Android App with examples

https://grokonez.com/android/how-to-integrate-rxjava-into-android-app-with-examples

In this tutorial, grokonez.com shows you way to integrate RxJava 2 into Android App, along with 3 simple examples that apply RxJava:
<ul>
	<li><code>CompoundButton</code> (<code>Switch</code>) updates <code>TextView</code></li>
	<li>Update TextView when text length in <code>EditText</code> changes</li>
	<li>Reactive Text search</li>
</ul>

<!--more-->

<h3>Set up Android environment</h3>
We use Android Studio (installer from <a href="https://developer.android.com/studio/" target="_blank" rel="noopener noreferrer">https://developer.android.com/studio/</a>) for development. It doesn't support RxJava, so we need to add RxJava 2 library.
<h5>Add RxJava 2 dependencies</h5>
Open <strong>app/build.gradle</strong> file, add RxJava and RxBinding wrappers for UI:
<pre><code class="language-java">
dependencies {
    ...

    implementation 'io.reactivex.rxjava2:rxjava:2.1.7'
    implementation 'io.reactivex.rxjava2:rxandroid:2.0.1'
    implementation 'com.jakewharton.rxbinding2:rxbinding:2.0.0'
}
</code></pre>
<h5>Add Java 8 lambdas</h5>
We also need to add Java 8 to the configuration to use lambdas:
<pre class="lang:java">
android {
    ...
    defaultConfig {
        ...
        compileOptions {
            sourceCompatibility JavaVersion.VERSION_1_8
            targetCompatibility JavaVersion.VERSION_1_8
        }
    }
    ...
}
</pre>

https://grokonez.com/android/how-to-integrate-rxjava-into-android-app-with-examples
How to deal with technical debt and SOS situations in a digital product
Tags: webdev, ruby, writing, programming
Published: 2021-04-08 10:34:38

Sometimes, customers come to Evrone for rescue because their product works poorly or not at all, mistakes have been made in the software architecture, or business performance is suffering. When this happens, we have to do serious work on refactoring, legacy reworking, and technical debt analysis.

Management for the project “Let’s Eat at Home!” contacted us because their website had begun to crash under the current loads. In the future, this could lead to an outflow of regular users, so it required an urgent solution.

We decided to redo the entire backend of the project, because even quick-fix solutions would only add another six months to a year to the project’s functional lifespan. To speed up loading and improve reliability, we reworked the caching scheme, worked on the Rails code optimization, and improved image loading. We also added protection against malicious attacks.
How to add Date Picker component to VueJs App using Pikaday
Tags: vue, pikaday, date
Published: 2021-04-08 10:30:26

https://ozenero.com/date-picker-component-vuejs-pikaday

In this tutorial, grokonez.com shows you way to add a DatePicker component to VueJs App using Pikaday.

<!--more-->
<h3>Overview</h3>
<h5>Demo</h5>
<img src="https://grokonez.com/wp-content/uploads/2019/06/vue-date-picker-component-pikaday-example.gif" alt="vue-date-picker-component-pikaday-example" width="668" height="536" class="alignnone size-full wp-image-18043" />
<h5>Date Picker using Pikaday</h5>
<h6>Setup in Nodejs Project</h6>
There are 2 ways to integrate pikaday into a Nodejs Application:

- We can run command: <code>npm install pikaday</code>.
Then use Pikaday css with:
<pre><code class="language-xhtml">
@import './node_modules/pikaday/css/pikaday.css';
</code></pre>

- Or link to CDN:
<pre><code class="language-xhtml">
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/pikaday/pikaday.js&quot;&gt;&lt;/script&gt;
</code></pre>
Then use css by this following code:
<pre><code class="language-xhtml">
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css&quot;&gt;
</code></pre>


https://ozenero.com/date-picker-component-vuejs-pikaday
How to add Dialog Component to Vuejs App
Tags: vue, component
Published: 2021-04-08 10:26:33

https://ozenero.com/how-to-add-dialog-component-to-vuejs-app

In this tutorial, grokonez.com shows you way to add a Dialog Component to Vuejs App.

<!--more-->
<h3>Demo</h3>
<img src="https://grokonez.com/wp-content/uploads/2019/06/vue-dialog-component-example.gif" alt="vue-dialog-component-example" width="604" height="420" class="alignnone size-full wp-image-18056" />
<h3>Create Dialog component</h3>
In <strong>src</strong> folder, create <strong>components</strong>, then add <strong>GkzDialog.vue</strong> file:

<em>src/components/GkzDialog.vue</em>
<pre><code class="language-html">
&lt;template&gt;
  &lt;div class=&quot;modal&quot; v-show=&quot;show&quot;&gt;
    &lt;div class=&quot;modal-dialog&quot;&gt;
      &lt;div class=&quot;modal-content&quot;&gt;
        &lt;div class=&quot;modal-header&quot;&gt;
          &lt;h5 class=&quot;modal-title mx-auto&quot;&gt; { { title}}&lt;/h5&gt;
        &lt;/div&gt;
        &lt;div class=&quot;modal-body&quot; v-if=&quot;announcement&quot;&gt;
          &lt;p&gt; { { announcement}}&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class=&quot;modal-footer&quot;&gt;
          &lt;button @click=&quot;dismiss&quot; type=&quot;button&quot; class=&quot;btn btn-primary mx-auto&quot;&gt;OK&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
  props: {
    show: {
      type: Boolean,
      required: true
    },
    title: {
      type: String,
      required: true
    },
    announcement: {
      type: String,
      required: false
    }
  },
  methods: {
    dismiss() {
      this.$emit(&quot;close&quot;);
    }
  },
  created() {
    const escHandler = e =&gt; {
      if (e.key === &quot;Escape&quot; &amp;&amp; this.show) {
        this.dismiss();
      }
    };

    document.addEventListener(&quot;keydown&quot;, escHandler);
    this.$once(&quot;hook:destroyed&quot;, () =&gt; {
      document.removeEventListener(&quot;keydown&quot;, escHandler);
    });
  }
};
&lt;/script&gt;

&lt;style&gt;
.modal {
  background: #aaa;
  display: flex;
}
&lt;/style&gt;
&lt;/script&gt;

&lt;style&gt;
.modal {
  background: #aaa;
  display: flex;
}
&lt;/style&gt;
</code></pre>

More at: https://ozenero.com/how-to-add-dialog-component-to-vuejs-app
RoadRunner here and now
Tags: php, laravel, go
Published: 2021-04-08 09:58:46

Recently the [Laravel Octane] (https://github.com/laravel/octane) package was released. It was created to make Laravel with Swoole and RoadRunner more friendly. We are using RoadRunner instead of php-fpm in [dev.family] (https://dev.family/?utm_source=devto&utm_medium=article&utm_campaign=roadrunner-zdes-i-sejchas) for some time now, and we decided to share our experience and to reveal what advantages it has.

RoadRunner is a high-performance, open-source PHP application server written in Go. The main difference from php-fpm is that RoadRunner interacts with long-lived php processes, unlike php-fpm, which creates and kills a new php process with each request. 

**Advantages of a long-lived process:**
- No time wasted on booting
- No time is spent on creating a connection to the database
- The ability to use the in-memory cache directly in the process

The disadvantage of this approach is that it is not suitable for all PHP applications, because often when you are writing code, it is taken into account that the PHP process will die after the request. Thus, you need to be able to monitor memory leaks, work carefully with the global state. Therefore, legacy projects, probably, can’t be started on the Roadrunner. 

However, Roadrunner has other useful functions, such as static feedback, response compression, and balancing. These functions in a typical bundle are falling on nginx. And if you are using the PHP roadrunner, the application can be raised without it at all (nginx).

RoadRunner is also quite easy to expand. You can use its components for your own application server and get the opportunity, for example, to process some requests directly on Go, to work with websockets.

RoadRunner itself is not a new development, it is already a couple of years old. However, with official support of Laravel Octane, you can be sure that the framework is ready to work with it.

We conducted a small test on a real project, where we compared the speed of php-fpm and roadrunner. The results were as follows:

**php-fpm:**
plain text: 1150 RPS
single query: 530 RPS

**roadrunner:**
plain text: 2200 RPS
single query: 1600 RPS

**plain text** -- a query that returns a constant JSON
**single query** -- a query that returns the result of a single query to the database in JSON format

There is a significant increase in speed, which is due to the lack of time for booting and the use of a permanent connection to the database.
Node.js Process
Published: 2021-04-08 09:55:22

Node.js process is a C++ program in execution. In this process node.js runs in a single thread. The diagram below shows how various steps follow each other during the program execution.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pejogereqvtz3ak0iupb.png)
When the program is initialized,the code that is not inside any callback function is executed,the modules necessary to execute the program are required, all the callbacks are registered and then the event loop starts executing.
Since node.js is single threaded, heavier tasks like compression and cryptography  would block its execution, the event loop offloads these tasks to extra thread pools which are provided by the libuv library.
Custom Switch Button in CSS3 💯%
Tags: css, webdev, ux, design
Published: 2021-04-08 09:54:01

Hey devs, Fun interaction in checkbox/switch in CSS3.

Concepts Used: HTML/CSS3

Tryt it: http://demos.dropinks.com/toggle-switch-button/
Codepen: https://codepen.io/dropinks/embed/NXXMMK
Dribbble: https://dribbble.com/shots/13928536-Toggle-Switch-Button-in-CSS3

More Dribbble shots: https://dribbble.com/dropinks
How To Delete a GitHub Repository
Tags: github
Published: 2021-04-08 09:40:10

#Delete GitHub repository#

In order to delete a GitHub repository, you have to follow the steps described below :

   1- Click on your profile picture at the top right corner
      of the GitHub interface and click on
       <mark>**“Your repositories“**</mark>.

   2- On your repository list, select the GitHub repository
      that you want to delete.

   3- On the repository page, click on <mark>**“Settings”**</mark> in the
      menu.

   4- In the repository settings, scroll down until you see 
      the <mark>**“Danger zone“**</mark>.

   5- In the **“danger zone”**, click on “Delete this repository“
      To confirm the GitHub repository deletion, you have to  
      type the repository name. When you are done, simply 
      click on 
   <mark> **“I understand the consequences, delete this repository“**</mark>.

  6- Congratulations, you have successfully deleted your 
     GitHub repository!
Get Unstuck
Tags: growth, motivation, inspiration, career
Published: 2021-05-04 03:21:49

---
title: Get Unstuck
published: true
date: 2021-04-08 09:35:35 UTC
tags: growth,motivation,inspiration,career
canonical_url: https://x-team.com/blog/get-unstuck/
---
_Is this it?_ I thought as I stepped into the office for another day of work. I had studied for five years and now worked in business development for a tech company. It was a good tech company that offered free lunch, had an exciting product, and paid its employees well. There was nothing to complain about, and yet I felt more stuck than I ever had. _Is this it for the rest of my life?_ I thought.

Over the course of five years, I switched jobs twice. Once to another tech company and once to a foreign exchange company. Again, good companies with wonderful people and good enough salaries to comfortably live in London. But I still felt stuck.

I tried suppressing the feeling. _Count yourself lucky_, I thought. _People have much worse jobs and have to work a lot harder for much less money._ _You have no right to complain. You don't even know why you're feeling this way!_

It worked for a while. I went about my days relatively happy. Life was okay. But was okay really the bar I wanted to go for? The niggling thought slowly returned until it was front and center in my mind once more. And I don't know how, but I realized something important in the process.

Climbing up a ladder is pointless if it's leaning against the wrong wall. Any action that was more or less of the same wouldn't solve my problem. I needed to do something fundamentally different, and that would require a moment of seeming irrationality.

So I quit my job, left London, and decided to become a fully remote writer. Three life-changing decisions taken over the course of a month. I'd always wanted to be a writer, but never believed I could make any money with it. Instead of giving in to that belief, I decided to find out. Worst-case scenario, it wouldn't work and I'd return to London to find another sales job.

I didn't have to. While I had to scramble for money at the start of my writing career, I was finally doing something I loved. I've not looked back since.

If you feel stuck the same way I did, think deeply about what it is you want to do and squash any doubts about it (they're [probably wrong](https://x-team.com/blog/dealing-with-imposter-syndrome/) anyway). Then ask yourself, what do I have to start or stop doing to move toward that goal? Don't think in terms of more or less. Think in terms of start and stop.

The pain of feeling stuck is often smaller than the pain of freeing yourself. That's why it's so dangerous. There's no greater loss than someone who spent their whole life suppressing the _what if_ question. Don't let that be you. Figure out what you want, take a leap of faith, get unstuck.
alias in elixir
Tags: elixir
Published: 2021-04-08 09:19:07

This post will not explain about `alias` , rather I would like to share a piece of code that caught me off guard.

``` elixir
alias Rumbl.Accounts # context
alias Accounts.User # schema

def first_name(%User{name: name}), do: name
```

If I compile it, it would give me compilation error `Rumbl.Accounts.User__struct__/0 is undefined`.

It's pretty obvious why, looking at the code now. Since the `Rumbl.Accounts` is already aliased, the `Accounts.User` assumed `Accounts` to be `Rumbl.Accounts`.

Just updating their position would fix it
วิธีการตรวจสอบ Username และ Password ใน phpmyadmin บน XAMPP
Published: 2021-04-08 09:17:34

* บทความนี้สำหรับผู้ใช้ Microsoft Windows นะคะ
สำหรับที่มีปัญหาในการลืมรหัสผ่านสามารถไป check ได้โดย เข้าไปที่โฟล์เดอร์ "XAMPP" จากนั้นลองไล่หาโฟล์เดอร์ "phpmyadmin" หลังจากนั้นจะเห็นไฟล์ที่ชื่อว่า "config.inc.php" แล้วทำการเปิดไฟล์ขึ้นมา ประมาณบรรทัดที่ 20 ลงมาก็จะเห็นข้อมูล username และ password ดังรูปที่แสดงด้านล่าง 

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

ซึ่ง username และ password เหล่านี้ ต้องไปใช้งานเช่น การเขียน connection เชื่อมฐานข้อมูล mysql นั่นเอง 

หมายเหตุ :: ข้อมูล username และ password ในรูปเป็นแค่ตัวอย่างนะคะ
How to make simple website using Python and Django
Tags: python, pythonslearning, programming
Published: 2021-04-08 09:09:12

The <a href="https://pythonslearning.com/2021/03/how-to-make-simple-website-using-python-and-django.html">Original article</a> is available so Let's see:
Step1. To make any website you need language, select
language,install that language(python) on your PC.
After that install IDE in which you are going to make a
website like VS Code, Pycharm.
Step2. Start your project(website), make a folder on any
of the Drive(D: Drive).
Step3. Open the Terminal or IDE then install Django with
passing pip command, Django is going to install in it.
Step 4. Open your directory in terminal, pass command,
django-admin startproject Sitename,
it will start our Django project(site), then pass
python manage.py runserver: - to run your project on
server
For detailed coding please visit to <a href="https://pythonslearning.com/2021/03/how-to-make-simple-website-using-python-and-django.html">How to make simple website using Python and Django</a>
Change Heap Size for Elastic Search
Tags: linux, elastic, devops, tutorial
Published: 2021-04-08 16:22:25

---
title: Change Heap Size for Elastic Search
published: true
date: 2021-04-08 09:09:09 UTC
tags: linux, elastic, devops, tutorial
canonical_url: https://boobo94.github.io//devops/change-elastic-search-heap-size/
---

> The default installation of Elasticsearch is configured with a 1 GB heap. For just about every deployment, this number is usually too small. If you are using the default heap values, your cluster is probably configured incorrectly.

> There are two ways to change the heap size in Elasticsearch. The easiest is to set an environment variable called ES\_HEAP\_SIZE. When the server process starts, it will read this environment variable and set the heap accordingly. As an example, you can set it via the command line as follows:

```
export ES_HEAP_SIZE=10g

```

Alternatively, you can pass in the heap size via JVM flags when starting the process, if that is easier for your setup:

```
ES_JAVA_OPTS="-Xms10g -Xmx10g" ./bin/elasticsearch 

```

Ensure that the min (Xms) and max (Xmx) sizes are the same to prevent the heap from resizing at runtime, a very costly process.

Generally, setting the ES\_HEAP\_SIZE environment variable is preferred over setting explicit -Xmx and -Xms values.

Source: [https://www.elastic.co/guide/en/elasticsearch/guide/current/heap-sizing.html](https://www.elastic.co/guide/en/elasticsearch/guide/current/heap-sizing.html)See also [Setting JVM options](There%20are%20two%20ways%20to%20change%20the%20heap%20size%20in%20Elasticsearch.%20The%20easiest%20is%20to%20set%20an%20environment%20variable%20called%20ES_HEAP_SIZE.)
How to khow the "Username" & the "Password"of the phpmyadmin in XAMPP.
Tags: phpmyadmin, mysql, php
Published: 2021-04-08 09:07:48

For my reader, my English is not well. but i hope that this content will help you.

In this case for Microsoft Windows OS.
1. In the "xampp" folder, and you will find out the folder is  "phpmyadmin".
2. In the "phpmyadmin" folder, try to check the "config.inc.php" file, and open this file.
3. After open the "config.inc.php", you can see the "username" and the "password" as below code. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jhaggqlrv9ywdknhkwue.png)

Note : The username and the password, i just show for the example. they are not use for the real life.