teleren/devto huggingface dataset:
🔥 JavaScript Objects 
Published: 2021-08-03 04:07:26

Objects are blueprint of class. 
And object has states & behavior associated to it. 

Object properties are declared in the form of key-value pairs, Where keys are always 'String' in nature and value can be of any supported datatype from JS(ES5, ES6). 

Ex: 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hy4e9n04v0ooewibmno4.png)

How to create empty object ? 

Ex: {}

How to create an non-empty object ? 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uad9wtgu1yhzkfml3yg0.png)


How make an object Immutable?

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mgyj9im91h8rz1el6paz.png)
Install Spring boot on Weblogic 12c
Tags: java, weblogic, springboot
Published: 2021-08-03 04:01:37

---
title: Install Spring boot on Weblogic 12c
published: true
description: 
tags: java, weblogic, springboot
//cover_image: https://direct_url_to_image.jpg
---

การจะ deploy web application ที่พัฒนาด้วย spring boot บน weblogic ต้องเพิ่มเติม 2 ส่วนหลัก ๆ คือ
1. Application เราต้อง implements WebApplicationInitializer
```
@SpringBootApplication
public class MyApplication extends SpringBootServletInitializer implements WebApplicationInitializer {
...
}
```
2. ต้องเพิ่มไฟล์ weblogic.xml ที่ /src/main/webapp/WEB-INF/weblogic.xml
```
<?xml version="1.0" encoding="UTF-8"?>
<wls:weblogic-web-app
    xmlns:wls="http://xmlns.oracle.com/weblogic/weblogic-web-app"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
        https://java.sun.com/xml/ns/javaee/ejb-jar_3_0.xsd
        http://xmlns.oracle.com/weblogic/weblogic-web-app
        https://xmlns.oracle.com/weblogic/weblogic-web-app/1.4/weblogic-web-app.xsd">
    <wls:context-root>/myapp</wls:context-root>
    <wls:container-descriptor>
        <wls:prefer-application-packages>
            <wls:package-name>org.slf4j</wls:package-name>
        </wls:prefer-application-packages>
    </wls:container-descriptor>
</wls:weblogic-web-app>
```

จากนั้นก็ทำการ deploy ที่ weblogic ตามขั้นตอนของแต่ละรุ่น

https://docs.spring.io/spring-boot/docs/2.5.1/reference/html/howto.html#howto.traditional-deployment.weblogic
beawre the place where you put ssh include directive after
Tags: ssh, troubleshooting
Published: 2021-08-03 03:48:34

我之前的 ~/.ssh/config 中的配置是

```
    Host *
        <directives>
        User root

    Include hosts-enabled/*.config
```

hosts-enabled/gcp.config
```
Host gcp-1
    HostName 35.194.164.130
    User hi
```

当我试图 ssh gcp-1 时，发现总是以 root 用户而非 hi 用户登陆，除非被这段配置挪到主配置文件 `Host *` 上方

原因是 Include directive may appear inside a Match or Host block to perform conditional inclusion. I had my Include statement trailing a Host directive so it was being included into that Host's config. ssh does not honor indention level as I supposed

如果我将

```
    Host *
        <directives>
        User root
```

作为 default.config 子配置文件放在 hosts-enabled 目录中，主配置文件只保留`Include hosts-enabled/*.config`,  gcp.config 中的 `User hi` 指令仍然不会生效，把 default.config 中的 `User root` 指令删除就正常了，根据 man page

> For each parameter, the first obtained value will be used.  The configuration files contain sections separated by Host specifications, and that section is only applied for hosts that match one of the patterns given in the specification.  The matched host name is usually the one given on the command line (see the CanonicalizeHostname option for exceptions).

> __Since the first obtained value for each parameter is used, more host-specific declarations should be given near the beginning of the file, and general defaults at the end.__

根据字母顺序，default.config 中的配置会比 gcp.config 中的配置先加载

当我把 Include 指令放在一个 带有 HostName 的 host block 之后时，试图登陆一台主机甚至会报错

> ssh: Could not resolve hostname gcp-1: Temporary failure in name resolution

这是因为前面的 HostName 指令覆盖了后面所有的 HostName 指令

所以 Include 指令最好包含在所有 Host 指令之前，或者
You can leave the Include statement at the end of the file if you precede it with Match all. This terminates the previous Host/Match, and then conditionally always includes the file(s). So, the file would end with:

```
Match all
Include config.d/*
```
A Youtube channel for preparation and guide
Tags: programming, computerscience, career, react
Published: 2021-08-03 03:40:15

I have a yt channel on which I done talks about the preparation guide of companies and roadmaps to new tech-stacks along with guide of tech-stacks and real life programming tutorials and master class.

Many of us want to learn new tech-stack so I come with this solution

https://www.youtube.com/channel/UCEnZkcgXkfTjNWF-tY1ldag

Have a look and enjoy
chúng ta đặt tên class trong css 
Published: 2021-08-03 03:30:30

BEM — Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development

Qui ước đặt tên
.block {}   /* Block */

.block__element {}  /* Element */

.block--modifier {}  /* Modifier */
Định nghĩa ở trên đây (Đọc thêm về BEM ở đây) nhưng mình chỉ muốn nói rằng trước đây khi chúng ta đặt tên class trong css đôi khi đã xảy ra những lỗi về mức độ ưu tiên trong css, hay đặt tên không chuẩn một khi project lớn lên sẽ gây nhiều phiền phức ... Có nhiều quy tắc để giải quyết vấn đề này nhưng mình thấy BEM là dễ hiểu và thực hành mà vẫn giải quyết được các vấn đề liên quan

Cách thực hành BEM mình sẽ làm ứng dụng trực tiếp vào cái Project CV này luôn ^^

4. Cấu trúc Project
Các bạn có thể tự thiết kế cho mình một bản PSD theo ý thích nhưng mình thiết kế không đẹp, nên mình sẽ chọn một CV đã có sẵn để clone lại nha. Từ bản clone này các bạn có thể thêm mắm, muối để biến nó thành một bản CV của chính mình !!

CV này mình được một người bạn gửi cho và thực sự mình cảm thấy nó quá đẹp và đáng để mình học hỏi nha, link đây brittanychiang.com

Bắt đầy với việc chia cấu trúc project như dưới đây (Mình chia như vầy để deploy lên git-hub chạy được luôn nha)

Cây thư mục sẽ trông như vậy
└─── images
└─── css
│     └─── page
│     │      └─── index.css
│     │      └─── blog.css
│     └─── container
│     └─── component
└─── js
│     └─── page
│     └─── container
│     └─── component
└─── index.html
└─── blog.html
Giờ mình sẽ bắt đầu phân tích một thành phần dưới đây trong trang web theo BEM nhé



Bạn để ý rằng block header này có 3 Element gồm:

Logo bên trái
Menu ở giữa
button bên phải
Một chú ý là Element button sẽ được dùng lại trong project này vì vậy mình cũng sẽ xem Element Button như một Block độc lập và nằm trong Block Header

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

Link tham khảo
https://thuocvienquany103.com/da-day/thuoc-da-day-tue-tinh.html

https://quaythuocvienquany.com/da-day/khang-vi-an-gia-bao-nhieu.html

https://quaythuocvienquany.com/da-day/vitos-co-tot-khong-ban-o-dau.html

https://quaythuocvienquany.com/da-day/thuoc-da-day-ta-trang-dan-gian-hieu-qua.html

https://quaythuocvienquany.com/tin-tuc/xtraman-vien-sui-ho-tro-dieu-tri-yeu-sinh-ly-o-nam-gioi.html

https://quaythuocvienquany.com/giam-can/body-beauty-slim-hieu-qua-khong-nen-mua-o-dau.html
------------------------------------------------
https://thuocvienquany.com/

https://haihacorp.vn/tin-tuc/danh-sach-du-an-chung-cu-tra-gop-tai-ha-noi-16-v7.html

https://ruounhuy.com/

https://quaynghia.vn/tin-tuc/qua-tang-nguoi-yeu-y-nghia.html

https://www.vuoncay.net/2016/12/ban-buon-ban-si-so-luong-lon-dao-canh.html

https://kientrucnhaban.com/thiet-ke/nha-go-lim-3-gian.html
Il nostro tema generale era il vintage degli anni '40
Published: 2021-08-03 03:11:23


Con gli anni '40 come ispirazione principale, il matrimonio di Carrie e Lorna ha richiamato elementi della loro personalità e relazione per formare un giorno davvero speciale per i loro amici e familiari. Il matrimonio retrò si è svolto nell'affascinante Horetown House abiti da sposa senza spalline, dove l'arredamento stravagante ha posto le basi per una celebrazione gioiosa e festosa. Savo Photography non avrebbe potuto fare un lavoro più perfetto catturando le stranezze individuali di Lorna e Carrie e la loro profonda connessione in questi ritratti che gli sposi apprezzeranno sicuramente per sempre!
​http://www.gillne.it


Ispirazione:


Il nostro tema generale era il vintage degli anni '40 abbinato ad accenti personalizzati e rustici. Abbiamo scelto il nostro tema di colore per rappresentare la nostra individualità e la nostra associazione: Carrie (viola) abiti da sposa tulle, Lorna (rosa) e Love rappresentati dal verde. Per noi era molto importante che il nostro matrimonio fosse individuale e specifico per noi, motivo per cui abbiamo dedicato molto tempo agli articoli fatti a mano e personalizzati. Volevamo che tutti si sentissero a proprio agio, quindi abbiamo scelto abiti adatti al comfort e alla personalità delle persone.
Multi Stage Builds in Docker
Tags: docker, tutorial
Published: 2021-08-03 02:12:26

# Multi Stage Builds

## Back Story
So way back in the beginning of this we briefly discussed layers. Each line in a dockerfile adds a layer. Which means it adds size to the dockerfile.

Lets look at when we added git to our first image.

```dockerfile
RUN apk update && apk add --no-cache git
```

Its just git. No big deal right? It can't take that much space. But lets look at all the extra things that happened to add git. We ran `apk update`. This meas we reached out to the Alpine repos and fetched the basic details for every package in the apk repositories and saved them into our image. Then we did `apk add --no-cache git`. So we fetched the git package and any of its dependent packages and stashed them in our image so that we can install them. Then the installer unpacks those packages and installs the files where they are needed. Thats a lot, and thats only adding git.

So you have all these dependencies that you need to build your base image. Git, the dependencies to build your application, the compiler itself, and a bunch of other junk. We don't need all that in production. We really don't want all of that in production. Your dev dependencies are extra attack vectors. You aren't going to be pushing to git from your production container. So how do we get rid of all of that?

## About Multi Stage Builds

This is where [Multi Stage builds](https://docs.docker.com/develop/develop-images/multistage-build/) come in. Before Multi Stage Builds, you would have to do a bunch of funny shell tricks to clean up every layer as you used it just to keep the artifacts that you needed and get rid of everything else. Now with Multi Stage Builds you can declare the artifacts you want in each image. So lets start with an example

```dockerfile
FROM golang:alpine as builder
# Install git.
# Git is required for fetching the dependencies.
RUN apk update && apk add --no-cache git
WORKDIR $GOPATH/src/integratnio/go-rest-api/
COPY go-rest-api .
# Fetch dependencies using go get.
RUN go get -d -v
# Build the binary.
RUN go build -o /go/bin/hello

FROM golang:alpine
# Copy our static executable from the builder.
COPY --from=builder /go/bin/hello /go/bin/hello
# Run the binary.
ENTRYPOINT ["/go/bin/hello"]
```

Alright. Looks good right? So far this is pretty simple. We used the same base image but we only copied our binary from the first image into the second. We could also use a different base image if we wanted. This is a real simple app with no external dependencies. So the fat trimmed is minimal. But pattern still helped us save some space.

```
REPOSITORY          TAG    IMAGE ID       CREATED          SIZE
helloFromIntegratnIO    dev    285c3af572b0   5 seconds ago    321MB
helloFromIntegratnIO    prod   0c2fb67c8edc   14 seconds ago   306MB
```

Just look at those savings. But we can go deeper, and we will in lesson 7. 
<a href="https://www.buymeacoffee.com/integratnio" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>
Creating vite vue ts template: Installation instructions, dependabot notifications and license
Tags: github, vite, vue
Published: 2021-08-03 01:57:22

## Add project setup instructions

1. Add `Project Setup` section to our `README.md`

    ~~~diff
    -# Vue 3 + Typescript + Vite
    +# Vue 3 + Typescript + Vite + Jest

     This template should help get you started developing with Vue 3 and Typescript in Vite.

    +## Project setup
    +
    +Clone project with [`degit`](https://github.com/Rich-Harris/degit)
    +
    +```
    +degit user/repo
    +```
    +
    +### Install dependencies
    +
    +```
    +npm install
    +```
    +
    +### Compiles and hot-reloads for development
    +```
    +npm run dev
    +```
    +
    +### Compiles and minifies for production
    +```
    +npm run build
    +```
    +
    +### Preview build
    +```
    +npm run serve
    +```
    +
    +### Run your unit tests
    +```
    +npm run test
    +```
    +### Lint
    +```
    +npm run lint
    +```
    +### Fix files
    +```
    +npm run format
    +```
    +
     ## Recommended IDE Setup
    ~~~

1. Add `pre-commit` hooks installation instruction.

    ~~~diff
    +## Install pre-commit hooks
    +```
    +pre-commit install
    +```
    +
    ~~~

1. `git add -u`
1. `git commit -m 'add install instructions'`

## Setup Dependabot notifications

1. Go to `Security -> Enable Dependabot alerts`
   ![Enable Dependabot alerts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ngxvg1v48f97cp3qtfjf.png)
1. Enable `Dependabot alerts` and `Dependabot security updates`
   ![Configure security and analysis features](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jz1sctmfbuigyxoag3nw.png)

## Add `LICENSE`

1. In our github repo press `Add file -> Create new file`
   ![Create new file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tavy58j340f8wjyfcc04.png)
1. Type `LICENSE` into `Name your file...` input.
1. Press appeared `Choose a license template` button.
   ![Choose a license template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c2ad05wr3h9akk37blkn.png)
1. Select `MIT License` and press `Review and submit`.
1. In appeared commit form, choose `Commit directly to the main branch.`
1. Press `Commit new file`

## Links

-   https://pre-commit.com/#3-install-the-git-hook-scripts
-   https://docs.github.com/en/code-security/supply-chain-security/managing-vulnerabilities-in-your-projects-dependencies/configuring-dependabot-security-updates
-   https://docs.github.com/en/communities/setting-up-your-project-for-healthy-contributions/adding-a-license-to-a-repository

## Project

{% github https://github.com/imomaliev/vue-ts no-readme %}
What's the Weather? 🌦️
Tags: javascript, showdev, watercooler, codenewbie
Published: 2021-08-03 01:01:23

> This is a JavaScript exercise I worked on under [The Odin Project](https://www.theodinproject.com/paths/full-stack-javascript/courses/javascript/lessons/weather-app) to get familiar with the basics of promises, callbacks and a little about async/await. 

The live preview of this assignment can be found [here](https://fatrixienicolieopetina.github.io/weather-app/). It is a weather forecast site using a weather API. The look of the page can change based on the description of the weather. The [Giphy API](https://developers.giphy.com/docs/api/) is used to find weather related gifs and display them. 

### WIL/Thoughts 🤔
The most important thing I learned in this exercise is the basics of asynchronous JS, specifically callbacks and promises. I wrote my basic understanding of it in a different [dev.to post](https://dev.to/pat_the99/basics-of-callbacks-and-promises-in-javascript-4cj7). I also got acquainted with async and await but I am still to get comfortable of using these keywords.

📌 async

This tells the JS engine that the function is asynchronous. Functions with the `async` keyword automatically returns a promise. It is said that async is just a syntactical sugar for promises 😆 . 

📌 await

This keyword can only be used inside a function prefixed with `async`. When used, it tells JS to wait for the value of the asynchronous function called. In promises, the `then` method is called on the function object returning a promise. By using `await`, you just need to assign the return object of an async function and treat the result just like any other variable.

📌 Cross-Origin Resource Sharing

When I tried working with the open-weather and giphy API, I encountered an error related to CORS. WIL was, browsers, by default do not allow HTTP requests to outside resources. Cross-origin requests are requests sent to another domain/protocol/port and they require special headers from the remote side. This is for security purposes. We would not want a script from a hacker site to access our twitter credentials (XD as to what I understood so far).  The CORS request header would contain an Origin. If the server accepts the request, a special header `Access-Control-Allow-Origin` would be added in the response. The response would also contain the allowed origin(the requester URL) or probably a star, denoting all. The CORS request also have two types, safe and unsafe. Safe requests can be sent on the fly while unsafe requests need some `"preflight"` to check if the server permits the request.

As always, cheers to lifelong learning :wine_glass:.
How to provide the ultimate web dark mode experience
Tags: css, javascript, ux
Published: 2021-08-03 00:44:53

Adding dark mode to your web app is one way of improving the user experience.

Here are some dark mode features that you should add to your web app, to provide the ultimate dark mode experience.

### 1. Matching the system dark mode
The ability to follow the system dark mode makes your app integrate naturally with the user's system. This way, users don't have to switch to dark mode manually through the settings, unless they want to opt out.

### 2. Remembering the dark theme state on next visit
This will allow the users to feel like they are picking up from where they left off. Plus, having to click that manual switch every time is very annoying. 

You will have to store the dark mode state on the client and in a database to maintain the state between sessions on different devices.

### 3. Watching for the system dark mode changes
This partially removes the need to remember the dark mode state on the next visit. It also provides the natural integration we talked about earlier. It ensures that your web app matches with the user's system, and transitions to the matching system mode automatically.

You should also provide the option to turn this off somewhere in the settings. Not everyone will prefer this.

🔷 You should also keep in mind that getting or watching for the system dark mode change is device or browser-dependent. Some of your users might be using unsupported devices. For example, Android devices running Android 9 and below, do not support dark mode. This necessitates the need to store the dark mode state in a database.

Here are some helpful resources:

1. [Detecting system theme in JavaScript / CSS / React](https://medium.com/hypersphere-codes/detecting-system-theme-in-javascript-css-react-f6b961916d48)
2. [Dark Theme using CSS Variables and Local Storage](https://www.section.io/engineering-education/adding-dark-theme-to-your-site/#using-local-storage)

Happy coding!
Introducing DNV - Frictionless Node development with Docker Compose
Tags: docker, node, linux
Published: 2021-08-03 00:23:21

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

Hello! If you're a Node developer who uses Docker Compose, you should check out [DNV](https://www.npmjs.com/package/dnv). 

DNV works behind the scenes to keep dependencies in your Docker container in-sync with your local project.

It also comes with a custom made, featureful ncurses-like UI designed for use when developing apps using Docker Compose.

This was my 'covid isolation' personal project to learn more about Node fundamentals, and I think it turned out pretty good! If you do check it out and run into any problems, please [create an issue](https://github.com/moofoo/dnv). 

Here's a showcase recorded using Asciinema which shows how you can shell in to containers, install and run programs with full interactivity, open the README.md for your dependencies, show a live 'metrics' display with CPU, memory and event loop stats of the Node process, view a list of and run .sh scripts and script entries from your package.json in the container, and more!

[DNV Showcase](https://asciinema.org/a/429194)

{% asciinema 429194 %}
Releasing more versions of more images more often
Tags: docker, images, versioning, releases
Published: 2021-08-03 00:12:48

Whilst we have traditionally offered multiple versions of some of our images (PHP, Node.js, Solr, and Python), we have started to encounter situations where broadening the range of versions (and the images available with versioning) would be beneficial to our users.

The most notable examples here are:
 - PostgreSQL (we’ve expanded our images available to include v12 alongside v11)
 - Python (adding new Python 3.x releases)
 - Redis (adding v6 alongside v5)
 - Varnish (adding v6 alongside v5)
 - MariaDB (adding 10.5 alongside 10.4)

As with our other images, we will follow the upstream EOL policies closely.

When we select whether to name images after a major version  (i.e. Node.js 14) versus a minor version (i.e. PHP 7.4), we will look at the release frequency, semantic version policies, and the possibility for breaking changes.

We will also be able to generate pre-release images more easily – whilst they’re still in alpha/beta/RC status.  Obviously, these images shouldn’t be used in production, but making them available for testing should be of benefit to us, our users, and the wider community.

This will allow our users to take advantage of the functionality available in the newer releases of these images. In order to configure this, the dockerfiles in your projects may need modification to point to the correct image for your purpose.

We have already written functionality into the release process to ensure that these new images are also published back to the existing images, under the same versions (i.e `uselagoon/postgres-11:21.5.0` is the same image as `uselagoon/postgres:21.5.0`).

A complete list of these mappings is in the (makefile)[https://github.com/uselagoon/lagoon-images/blob/main/Makefile#L188]
How to see the current month calendar with the date on the Linux terminal?
Tags: resource
Published: 2021-08-03 00:00:00

---
  title: How to see the current month calendar with the date on the Linux terminal?
  published: true
  tags: Resource
  date: Tue Aug 03 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/see-month-calender-and-date-terminal-linux
  cover_image: https://melvingeorge.me/_next/static/images/main-84b20182e57e92e6d84a92a9d1870b13.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/see-month-calender-and-date-terminal-linux)
  
To see the monthly calendar with the date in the terminal, you can use the `cal` command in Linux.

```bash
# See the current month calendar
# with date in terminal
cal

# OUTPUT
    August 2021
Su Mo Tu We Th Fr Sa
 1  2  3  4  5  6  7
 8  9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
```

See the execution of the above command live in [repl.it](https://replit.com/@melvin2016/see-month-calender-in-terminal-in-linux#main.sh)

That's all 😃!

### Feel free to share if you found this useful 😃.

---