teleren/devto huggingface dataset:
DA10 Integration in EA
Tags: learning, design, architecture
Published: 2020-11-15 07:20:42

# 本篇主要讲企业级应用(Enterprise Applications, EAs)中与**集成**有关的问题。

# The need for integration

单一的系统难以支持一个企业的所有业务。

- Different products from different vendors support different business needs 不同的投资者
- New systems are built as technology and business needs evolve, legacy systems remain 在老的系统上拓展新的系统
- Different systems for different organizational units – e.g. best accounting sw., best CRM, best order-processing system, etc.
- Easier and more efficient to develop multiple smaller systems that meet the business needs

# Patterns for Integration

- File transfer
- Shared database
- RMI / RPC
- Messaging

## File transfer

Uses files to transfer data/information between multiple applications.

### Pros

- 简单，容易实现
- 无需第三方支持

### Cons

- 需要考虑每个application何时生成以及删除file
- 需要考虑并发 concurrency 问题
- 需要考虑文件格式
- 对文件的读写操作使得开销较大

## Shared database

Integrate applications by having them store their data in a single shared database and define the schema of the database to handle all the needs of the different applications.

### Pros

- 数据可以实时更新
- 不用担心数据的格式问题

### Cons

- applications 之间的**耦合性**增加
- 设计和实现都比较困难
- 不同的application对单一的数据库表操作使得性能不会太好，有瓶颈

## RMI / RPC

### Pros

- 一个application的方法可以被其他的application使用
- 封装好，Because the complete data structure is not exposed as in the case of file transfer and shared databases, only the required data is transferred based on the functionality that is invoked in the procedure.

### Cons

- applications 之间的**耦合性**增加
- concurrency issues
- remote calls 性能开销过大

## Messaging

Uses messages to share data and functionality between applications.

Producers generate messages that are sent to the messaging system, the messaging system then distributes those messages to consumers. 

It is a kind of **Indirect communication** – via a third-party messaging system.

有一个中间的Messaging System专门负责消息的传输，所有的application都只与Messaging System发送和接受消息。

这一部分内容会在下一节DA11详细讲。
Progressive enhancement with @supports [video]
Tags: css, webdev
Published: 2020-11-30 16:37:26

{% youtube Yzmj7-Wy95M %}

Designing beautiful websites is getting easier. [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout) and [grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) enable layouts that were impossible before. [Transforms](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transforms) and [filters](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) add visual effects that would be difficult to build otherwise. Unfortunately, not all browsers support all those cool new features yet.

Internet Explorer is no longer the anchor holding us back. Today’s browsers all support these sometimes experimental features to a different degree. Some support [grid](https://caniuse.com/#feat=css-grid), some support [backdrop-filter](https://caniuse.com/#feat=css-backdrop-filter), some support [WebP](https://caniuse.com/#feat=webp), some support [sticky headers](https://caniuse.com/#feat=css-sticky). No single browser supports every upcoming feature.

We can approach this situation in several ways, and they all have their drawbacks:

- We can avoid using the new capabilities until all browsers support them. That could take years.
- We can go all-in on our favorite browser and ignore all others. Our layouts will look good in a single browser, but break in many of the others.
- We can use “polyfills” that enable the features in more browsers, usually through a lot of JavaScript. Throwing more code at a problem adds complexity and new points of failure to our products.

Trying to make the exact same design happen in every browser is not worth these tradeoffs. Instead, we can deliver a basic styling that is “good enough” and works everywhere. We can then enhance that version with the new features only for browsers that support them.

With [@supports](https://developer.mozilla.org/en-US/docs/Web/CSS/@supports), we can adjust the styling based on which features a browser supports. We could use a plain layout everywhere, and improve it with grid in browsers that understand it.

```css
.my-container {
  display: block;
}

/* test if this browser supports grid */
@supports (display: grid) {
  .my-container {
    display: grid;
  }
}
```

We can also test if a browser supports custom properties (CSS variables) and only use them when it does. For browsers that don’t support this feature yet, we define fallbacks outside of the `@supports`-block.

```css
body {
  background-color: #f6f9fc;
  color: #28303f;
}

/* test if this browser supports custom properties */
@supports (--anything: red) {
  body {
    background-color: var(--body-background);
    color: var(--body-text);
  }
}
```

As soon as a new browser supports a feature, the feature-gated styles will work for it. This is much more future-proof than building IE-only stylesheet like we did a few years ago. `@supports` is the future.
Release 0.41
Tags: opensource
Published: 2020-11-30 16:30:18


For release 0.4, I will work on the CI/CD area on the telescope project. I already  fixed one issue [https://github.com/Seneca-CDOT/telescope/issues/1336](https://github.com/Seneca-CDOT/telescope/issues/1336), the pull request [https://github.com/Seneca-CDOT/telescope/pull/1345](https://github.com/Seneca-CDOT/telescope/pull/1345)

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

It takes a little time to this issue. I learned a lot about Github action from this issue.

- Adding if condition

```yaml
- if: matrix.os == 'ubuntu-latest'
        run: npm run test-ci
```

- Run multiple jobs in parallel.

```yaml
  Prettier-Check:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
      - run: npm install && npm run prettier-check
  Lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
      - run: npm install && npm run eslint
```

- add cache.

```yaml
 - name: Cache node modules
        uses: actions/cache@v2
        env:
          cache-name: cache-node-modules
        with:
          # npm cache files are stored in `~/.npm` on Linux/macOS
          path: ~/.npm
          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
```
We will redo the cache if the file changed `package-lock.json`.

## Next step.

I am currently working on the second issue [https://github.com/Seneca-CDOT/telescope/issues/1301](https://github.com/Seneca-CDOT/telescope/issues/1301) to automate the release process about telescope.
I am not a rockstar programmer
Tags: womenintech, mentalhealth
Published: 2020-11-30 16:25:01

I'm a girl with anxiety.

I don't live and breathe the cutting edge of graphics technology. I don't know what that means. I know some things.

I don't know whether or not I can work independently. Sometimes I need help.

I don't know how to estimate and deliver. Sometimes things are confusing and I need time to understand them. Sometimes I need too much time.

I know how to explain technical things to non-technical people. But sometimes meeting new people makes me so nervous that I need to cry.

I do not have excellent problem solving skills. I spend most of my energy trying not to *create* problems.

I do not have strong math skills. It took me two and a half years to pass first semester maths at university. Then I dropped out.

I am not a trailblazer, I'm not a rockstar.

I'm a girl with anxiety. I'm doing my best.

Thanks.
Use github desktop 101
Tags: webdev, github, git
Published: 2020-11-30 15:36:53

Step 1. Go to github.com and create an account. 
Step 2. Download git and github desktop for your pc.
### Let's create our first repo now
Click on create repository. This will create a repository for you.
![Alt text of image](https://dev-to-uploads.s3.amazonaws.com/i/3nqd4evvnaipchxolyag.png)

Now, give a name for your repository and give description about it. Click on the, readme checkbox to add Readme.md file to your repository which will let other users get an idea about your repository. Finally click on create. This will create your repository locally on your machine.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ij58vqjmuv3xemvg9krh.png)
Now click on open in visual studio code to open your repository and start coding.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3xoqufpgy0ug0ogi8o5u.png)
As soon as you start coding it git starts tracking your changing that's where version control comes to save our life.
come back to github desktop and you can see your changes done.
Now, commit your changes by clicking commit to main.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/oimo8gx0a9pi4uq2ycpd.png)
Once done with commit now you're ready to publish your repository to github.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/e8uo2079issi32fhtp0e.png)
Remember to uncheck the private, to keep your repository public so other users can see and go through your code.
Now go to github.com and you can see your repository there.
##### Congrats we are done now. 😍
How to Force www or non-www in htaccess File
Published: 2020-11-30 15:30:29

- Step1: Log into your cPanel.
- Step2: Find the Files category and click on the File Manager icon.
- Step3: Click Settings at the top right corner.
- Step4: Choose the document root for the domain you are working with and be sure the checkbox next to Show Hidden Files is checked. Click the Save button.
- Step5: Look for the .htaccess file and right-click on it. This brings up a menu. Find and click on the Edit option
- Step6: You are now in the text editor. Place either selection of code in the file and click on the Save Changes button at the top right corner of the screen. Be sure to replace 'example.com' with your actual domain name. NOTE: do not place both selections of code in the file as it will cause an error.
```sh
#Force www:
RewriteEngine on
RewriteCond %{HTTP_HOST} ^example.com [NC]
RewriteRule ^(.*)$ http://www.example.com/$1 [L,R=301,NC]

#Force non-www:
RewriteEngine on
RewriteCond %{HTTP_HOST} ^www\.example\.com [NC]
RewriteRule ^(.*)$ http://example.com/$1 [L,R=301]
```
- Step7: Now, when you type in your domain name with either www in front or not, it should display as you have set it in the .htaccess file.
Dual boot ubuntu along with Windows 10
Published: 2020-11-30 15:24:08

Ubuntu is a linux OS. It is a biginner friendly and it has less virus risks when compared with Windows.

Dual boot means using windows as well as ubuntu by making a partition in storage of the device.

Steps to dual boot ubuntu along with Windows 10:

Creating a back up before dual booting is good in order to avoid risk of loosing personal data, which unlikely won't occur if you follow the following command.

STEP-1
Go to  https://ubuntu.com/download/desktop and download the desired ubuntu version.

STEP-2
You have to create a bootable device and boot ubuntu using it. My personal preference is Rufus https://rufus.ie/

STEP-3
Note down the partition of ur drives i.e. their size.

STEP-4
Plug in the bootable device and restart the computer

STEP-5
Enter the BIOS of the device using f2 or whichever key is assigned for your bios.

STEP-6
Set the boot preference for ubuntu in the BOOT mode and also disable the secure boot. Now, the save the setting and computer will restart. If it doen't do this on his own press the start button.

STEP-7
You will see the Ubuntu installation black screen. There select ubuntu.

STEP-8
After that there will be two options. Since we are trying to install ubuntu, so go for install ubuntu.

STEP-9
Select the country and keyboard according to your preference.

STEP-10
Now choose b/w minimal or normal installation.

STEP-11
Select the option install Ubuntu alongside Windows Boot Manager.

STEP-12
It will automatically assign half of the space for ubuntu and your Windows.

STEP-13
Now after that select the country and give your name, name for computer and password.

STEP-14
After installation, you will get the option of restart now. Click on that.

STEP-15
As computer restarts, it will ask to remove the bootable device. Remove it. And then, you are all ready to go.
The power of patch-package
Tags: devops, webdev
Published: 2020-10-29 14:00:41

Have you ever been in a situation where a package has a bug that's blocking you?

Have you ever gone to the package's GitHub page, searched for an issue that matches your problem, and commented "I need this fix"?

Stop that.

What you need is [patch-package](https://github.com/ds300/patch-package).

I can't tell you enough how useful this is. Instead of having to wait for fixes to be released, I use this tool as a hotfix, and when a new version is ready that includes the fix, I simply delete the patch file it generates.

Here's an example that came up recently:

I upgraded our app to CRA 4.0 at work, but noticed that the build and rebuild times became much slower.

Looked around to find [this comment](https://github.com/facebook/create-react-app/issues/9886#issuecomment-716234004) inside a GitHub issue that matched my problem.

Went to `node_modules/react-scripts/config/webpack.config.js` like the comment said and plopped this in:

```js
new ESLintPlugin({
    // Plugin options
    cache: true, // this
    extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
    formatter: require.resolve('react-dev-utils/eslintFormatter'),
    ...
```

All that was left was to run `yarn patch-package react-scripts`.

Aww man, it's that easy?

Yeah, it is.
JavaScript Code Daily Challenge #9
Tags: javascript, challenge, codenewbie, beginners
Published: 2020-11-30 15:13:15

# **About**

This is a series of JavaScript Code Daily Challenge. Each day I show a few solutions written in JavaScript. The questions are from coding practice/contest sites such as HackerRank, LeetCode, Codeforces, Atcoder and etc.

> Minimum and Maximum
> [https://www.codechef.com/JULY19B/problems/MMAX/](https://www.codechef.com/JULY19B/problems/MMAX/)
> Write Code in Comment

#### Subtasks
1. Subtask #1 (30 points): 2≤N,K≤1,000
2. Subtask #2 (70 points): original constraints

#### Example Input
1
3
2

#### Example Output
2

#### Explanation
Example case 1: To minimise S1, Chef could give 1 chocolate to person 1 and 1 chocolate to person 2, so S1=|1−1|+|1−0|=1.

To maximise S2, Chef can give 1 chocolate to person 1 and 1 chocolate to person 3, since the sequence B=(1,0,1) is a permutation of A=(1,1,0). Then, S2=|1−0|+|0−1|=2.
Laravel PHP : 200+ free mini tutorials
Tags: php, laravel, beginners, tutorial
Published: 2020-11-30 15:10:57

---
title: Laravel PHP : 200+ free mini tutorials
published: true
description: 
tags: PHP, Laravel, beginner, tutorial
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/h5jutkqfhev07jomjt7g.jpg
---

This week-end I came accros this web site: https://www.itsolutionstuff.com/laravel-tutorial?ref=laravelnews

It contain more than 200 mini tutorials to help you learn Laravel.

It cover almost everything from basic to advance. You can learn about Laravel 8, CRUD, Livewire, Authentication, Jetstream, Database, MongoDb, ORM, Rest API, File upload, Events, Job, PDF, chart, Tailwind, bootstrap. ect.
Function Declaration Vs Function Expression in JS
Tags: javascript
Published: 2020-11-30 15:06:43

I stumbled upon this question when learning JavaScript the other day, so I did some reading to understand the differences between those two types of function. I will try to summarise few points that I gathered based on my reading.

##Intro to Function Declaration

```javascript
// Example of Function Declaration 
function multiplyNum(firstNum, secondNum) {
    return firstNum * secondNum;
}
```

Function declaration declares a function and will be invoked once we call the function. Also, we need to define it using **function** keyword, followed by **name** and **parentheses {}**. 

##Intro to Function Expression

```javascript
// Example of Function Expression 
var multiplyNum =  function(firstNum, secondNum) {
    return firstNum * secondNum;
}
```

Function expression is basically a JavaScript function that is stored in a variable. In the example above, we do not write the function using function keyword first, instead we write it as if **we define a variable**.

##Hoisting

This is subtle yet an important difference between those two functions. When we run the JavaScript file, function declaration will be hoisted to the top of the code before any code is executed. In other words, functions written as function declarations are **known** before the code is run.

```javascript
// We can call the function before we declare it
console.log(multiplyNum(1,3))

// Example of Function Declaration 
function multiplyNum(firstNum, secondNum) {
    return firstNum * secondNum;
}
//3
```

On the other hand, functions written as function expressions are not hoisted when we run the script. An example is when we run the code below, we will encounter an error instead of the value 3.

```javascript
// When we call the function before we declare it
console.log(addNum(1,4))

// Example of Function Declaration 
var addNum = function(firstNum, secondNum) {
    return firstNum + secondNum;
}
// We will get error message instead of the value 5.
```

##Which One Should We Use?

The answer is it is a matter of personal preference. If you want to call a function before we declare it, then obviously function declaration is the best option. If you want to have a better structure, then you might consider function expression as the answer.


All in all, happy coding and I hope that you have learned something from this post. Cheers!
Improve *ngFor performance with trackBy
Tags: angular, typescript
Published: 2020-11-30 15:01:17

---
title: "Improve *ngFor performance with trackBy"
published: true
tags: angular, typescript
cover_image: https://climbingdev.com/assets/images/2020-11-30-angular-ngfor-trackby.png
canonical_url: https://climbingdev.com/posts/angular-ngfor-trackby
---

Whenever you are using `*ngFor` in your Angular application consider setting `trackBy` function for it.

By default, Angular uses reference comparison for objects in the list. This might not be the optimal approach, especially when you update your list's data from the server. 

Instead, you could be using some unique and stable identifier that your objects have. Thanks to comparing by the id, Angular won't need to rerender all elements every time you fetch an updated list from the server (object references will be changed but ids won't).

*Less computations -> performance gain!*

How to use the `trackBy` then?

You need to create a function that matches `TrackByFunction` interface. 
```typescript
interface TrackByFunction<T> {
  (index: number, item: T): any;
}

// might be something like this
function trackByTransaction(index: number, item: Transaction): string {
  return item.id;
}
```
And use it in the template:
```html
<div *ngFor="let transaction of transactions; trackBy: trackByTransaction">
  <!--  transaction view  -->
</div>
```

That's it! Now go and optimise your lists :)

Happy coding! 😀
Getting Started With PowerShell Core in Windows Terminal
Tags: powershell, powershellcore, windowsterminal, shells
Published: 2020-12-05 19:46:28

---
title: Getting Started With PowerShell Core in Windows Terminal
published: true
date: 2020-11-30 15:00:00 UTC
tags: powershell,powershellcore,windowsterminal,shells
canonical_url: https://seankilleen.com/2020/11/getting-started-with-powershell-core-in-windows-terminal/
---

I believe in scripting and automation, and I have come to love PowerShell for its eloquence, especially in a Windows environment.

PowerShell Core really takes this to the next level. It is what PowerShell will be going forward. It is cross-platform (works on Windows, Mac, Linux), and [is open-sourced](https://github.com/PowerShell/PowerShell) (something I particularly love).

So, I wanted to work it into my [Windows Terminal](https://github.com/microsoft/terminal) installation and make sure I’m using it by default so I can get used to any differences. Here’s how I did it!

- I use [the Chocolatey package manager], so I installed windows terminal via `choco install windows-terminal`.
- I installed PowerShell Core by running `choco install powershell-core`.
- I opened Windows Terminal and check the list of shells. Great, PowerShell Core is in there!

![The shell list in Windows Terminal, showing PowerShell Core in the list](https://seankilleen.com/images/post-images/getting-started-with-powershell-core-in-windows-terminal/01_PowerShellTerminalInList.png)

But, it’s not yet my default. Let’s fix that.

- Click the settings icon in the terminal, which opens a settings file (in VS code, in my case, because it’s a `.json` file.)

![The settings link in in the shell list](https://seankilleen.com/images/post-images/getting-started-with-powershell-core-in-windows-terminal/02_Settings.png)

- Find the section that lists my profiles:

![The settings file showing the location of the profiles list](https://seankilleen.com/images/post-images/getting-started-with-powershell-core-in-windows-terminal/03_ProfilesListInSettings.png)

- Find the entry for `Windows.Terminal.PowershellCore` and copy the GUID

![The profile entry for powershell core in the terminal settings, showing the unique identifier for it](https://seankilleen.com/images/post-images/getting-started-with-powershell-core-in-windows-terminal/04_FindingGuid.png)

- Scroll up to the `defaultProfile` setting, and paste the GUID.

![The unique identifier pasted into the default profile setting](https://seankilleen.com/images/post-images/getting-started-with-powershell-core-in-windows-terminal/05_PastingGuid.png)

- Restart Windows Terminal, and bingo – my default shell is now PowerShell Core!

![Windows terminal opened with an icon that indiciates that powershell core is the default](https://seankilleen.com/images/post-images/getting-started-with-powershell-core-in-windows-terminal/06_ItWorks.png)

Happy shelling!
"do" magic keyword option
Tags: elixir
Published: 2020-11-30 14:58:27

สิ่งมหัศจรรย์ของ Elixir คือ เราใช้ Keyword ที่มี key ชื่อ `do` เพื่อทำ do block ใน DSL ได้ เช่น

```elixir
defmodule SoLazy do
  defmacro resources(path, do: nested_context) do
    quote do
      IO.puts("Print #{unquote(path)}")
      unquote(nested_context)
    end
  end
end
```

ก็จะทำให้เราเรียกแบบนี้ได้

```
$ iex
Erlang/OTP 23 [erts-11.1.3] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] [hipe] [dtrace]

Interactive Elixir (1.11.1) - press Ctrl+C to exit (type h() ENTER for help)
iex(1)> require SoLazy
SoLazy
iex(2)> SoLazy.resources "/myapi" do
...(2)>   IO.puts "nested context"
...(2)> end
Print /myapi
nested context
:ok
```

จบ...
Day 51 of #100DaysOfCode: Create the Chrome Extension to Improve Productivity for bloggers
Tags: 100daysofcode, chrome, javascript, blogger
Published: 2020-11-30 14:53:37

## Introduction
People who work as developers or bloggers usually open a lot of Chrome tabs to collect information or references and turn them into markdown syntax. This kind of job is so messy that I believe that it’s worthy to solve.

There are two reasons for me to decide to create a utility with a Chrome extension.

* We can copy contents, turn them into markdown syntax, and paste them without switch tabs or extra monitor
* We don’t have to leave tabs for content that we haven’t read yet

I will only record a rough overview of this article. It will introduce the following sections.
1. The basis of Chrome Extensions
2. Introduction of Storage APIs
3. ContextMenus (Right-click menu)

## Details
Please refer to my [article](https://medium.com/a-layman/create-the-chrome-extension-to-improve-productivity-for-bloggers-4dba5fadd516)

## Articles
There are some of my articles and released projects. Feel free to check if you like! 
* [My blog-posts for software developing](https://medium.com/a-layman)
* [Facebook page](https://www.facebook.com/imalayman)
* [My web resume](https://jenhsuan.github.io/ALayman/cover.html)
* [Twitter bot](https://twitter.com/ALayman84368087)
* [Side project - Daily Learning](https://daily-learning.herokuapp.com/)