Cara setup permission di VPS Linux CentOS ketika kita ingin install WordPress dengan VestaCP sebagai control panelnya

Saat kita menggunakan VPS, lalu kita install VestaCP, nantinya kita perlu lakukan berapa perintah terminal di bawah ini untuk pengaturan permission pada direktori file-file wordpress yang akan kita install. Karena kalau tidak, nantinya kita bakal menemukan masalah dalam download dan update plugin.

Pertama, tentunya kita harus login ke VPS kita, lewat SSH biasanya pakai PuTTY.

Kemudian, kita perlu mengubah file permission menjadi 664:

find /home/admin/web/example.com/public_html/ -type f -exec chmod 664 {} \;

Lalu kita ubah directory permission menjadi 775:

find /home/admin/web/example.com/public_html/ -type d -exec chmod 775 {} \;

Kemudian kita ubah file dan folder group ownership menjadi admin:

chgrp -R admin /home/admin/web/example.com/public_html/

Sekalian jalankan perintah ini ya:

chown -R admin:admin /home/admin/web

Ubah kata admin menjadi username VestaCP dan tentunya example.com adalah nama folder untuk website/domain yang kamu punya.

Artikel asli konten ini ada di link berikut: https://blog.tawfiq.me/vestacp-wordpress-file-and-folder-permissions-ownership/

Cara hosting website di Virtual Private Server (VPS) dengan mudah

Pengalam pribadi, selama ini saya host file-file web saya pakai layanan shared hosting, dan itu bagi saya sudah menjadi hal yang biasa dan mudah dilakukan. Nah yang bagi saya hal baru adalah hosting di VPS.

Tulisan ini selain sebagai catatan buat saya supaya saya bisa tengok lagi kalau saya lupa, juga semoga bermanfaat bagi kalian yang ingin mencoba menggunakan VPS untuk mengelola website.

Control Panel pengelolaan website: VestaCP

Kalau pakai shared hosting biasanya sudah disediakan CPanel dari penyedia hosting, jadi tinggal pakai saja. Dari control panel itu kita bisa melakukan apa aja terkait pengelolaan website. Tapi kalau kita bekerja dengan VPS, itu tidak ada lagi. Karena kita sendiri yang harus memulai setup segalanya dari nol.

Nah control panel yang saya rasa enak banget digunakan adalah VestaCP. Situs dan cara instalasinya ada di link ini: https://vestacp.com/

Kebetulan saya buatkan video-video tutorial cara install VestaCP dan hal-hal berkaitan dengan VPS, ada di playlist YouTube ini: https://www.youtube.com/playlist?list=PLT2PgOHCtd7YqiyI7BaKz5JGlYUHp46Ks

Kode custom CSS untuk menampilkan live chat YouTube sebagai overlay di OBS

Cara menampilkan overlay live chat id OBS cukup mudah jika kalian mengikuti langkah-langkah ini:

Dari dashboard live streaming YouTube, klik tombol titik tiga pada kolom live chat, dan buat dia popout (Popout Chat). Nah setelah itu link nya kita copy paste ke OBS.

Setelah itu kita tambahkan custom css untuk menampilkan hanya teks chat nya saja. Berikut ini adalah kode custom css nya:

@import url("https://fonts.googleapis.com/css?family=Candal");
@import url("https://fonts.googleapis.com/css?family=Changa One");
@import url("https://fonts.googleapis.com/css?family=Imprima");
@import url("https://fonts.googleapis.com/css?family=Fira Sans");

/* Background colors*/
body {
  overflow: hidden;
  background-color: rgba(255,255,255,0);
}
/* Transparent background. */
yt-live-chat-renderer {
  background-color: transparent !important;
}
yt-live-chat-text-message-renderer,
yt-live-chat-text-message-renderer[is-highlighted] {
  background-color: rgba(227,227,227,0.83) !important;
}

yt-live-chat-text-message-renderer[author-type="owner"],
yt-live-chat-text-message-renderer[author-type="owner"][is-highlighted] {
  background-color: rgba(NaN,10,0,0.32) !important;
}

yt-live-chat-text-message-renderer[author-type="moderator"],
yt-live-chat-text-message-renderer[author-type="moderator"][is-highlighted] {
  background-color: rgba(NaN,10,0,1) !important;
}

yt-live-chat-text-message-renderer[author-type="member"],
yt-live-chat-text-message-renderer[author-type="member"][is-highlighted] {
  background-color: rgba(NaN,10,0,1) !important;
}


yt-live-chat-author-chip #author-name {
  background-color: transparent !important;
}
/* Outlines */
yt-live-chat-renderer * {
  
  font-family: "Fira Sans";
  font-size: 20px !important;
  line-height: 20px !important;
}

yt-live-chat-text-message-renderer #content,
yt-live-chat-legacy-paid-message-renderer #content {
  overflow: initial !important;
}

/* Hide scrollbar. */
yt-live-chat-item-list-renderer #items{
  overflow: hidden !important;
}

yt-live-chat-item-list-renderer #item-scroller{
  overflow: hidden !important;
}

/* Hide header and input. */
yt-live-chat-header-renderer,
yt-live-chat-message-input-renderer {
  display: none !important;
}

/* Reduce side padding. */
yt-live-chat-text-message-renderer,
yt-live-chat-legacy-paid-message-renderer {
    padding-left: 4px !important;
  padding-right: 4px !important;
}

yt-live-chat-paid-message-renderer #header {
    padding-left: 4px !important;
  padding-right: 4px !important;
}

/* Avatars. */
yt-live-chat-text-message-renderer #author-photo,
yt-live-chat-paid-message-renderer #author-photo,
yt-live-chat-legacy-paid-message-renderer #author-photo {
  
  width: 30px !important;
  height: 30px !important;
  border-radius: 30px !important;
  margin-right: 7.5px !important;
}

/* Hide badges. */
yt-live-chat-text-message-renderer #author-badges {
  display: none !important;
  vertical-align: text-top !important;
}

/* Timestamps. */
yt-live-chat-text-message-renderer #timestamp {
  
  color: #999999 !important;
  font-family: "Imprima";
  font-size: 16px !important;
  line-height: 16px !important;
}

/* Badges. */
yt-live-chat-text-message-renderer #author-name[type="owner"],
yt-live-chat-text-message-renderer #author-name.owner,
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="owner"] {
  color: #8a1919 !important;
}

yt-live-chat-text-message-renderer #author-name[type="moderator"],
yt-live-chat-text-message-renderer #author-name.moderator,
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="moderator"] {
  color: #5e84f1 !important;
}

yt-live-chat-text-message-renderer #author-name[type="member"],
yt-live-chat-text-message-renderer #author-name.member,
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="member"] {
  color: #0f9d58 !important;
}

/* Channel names. */
yt-live-chat-text-message-renderer #author-name {
  color: #363636 !important;
  font-family: "Candal";
  font-size: 20px !important;
  line-height: 20px !important;
}

yt-live-chat-text-message-renderer #author-name::after {
  content: ":";
  margin-left: 0px;
}

/* Messages. */
yt-live-chat-text-message-renderer #message,
yt-live-chat-text-message-renderer #message * {
  color: #060505 !important;
  font-family: "Fira Sans";
  font-size: 20px !important;
  line-height: 20px !important;
}


/* SuperChat/Fan Funding Messages. */
yt-live-chat-paid-message-renderer #author-name,
yt-live-chat-paid-message-renderer #author-name *,
yt-live-chat-legacy-paid-message-renderer #event-text,
yt-live-chat-legacy-paid-message-renderer #event-text * {
  color: #ffffff !important;
  font-family: "Changa One";
  font-size: 20px !important;
  line-height: 20px !important;
}

yt-live-chat-paid-message-renderer #purchase-amount,
yt-live-chat-paid-message-renderer #purchase-amount *,
yt-live-chat-legacy-paid-message-renderer #detail-text,
yt-live-chat-legacy-paid-message-renderer #detail-text * {
  color: #ffffff !important;
  font-family: "Imprima";
  font-size: 18px !important;
  line-height: 18px !important;
}

yt-live-chat-paid-message-renderer #content,
yt-live-chat-paid-message-renderer #content * {
  color: #ffffff !important;
  font-family: "Imprima";
  font-size: 18px !important;
  line-height: 18px !important;
}

yt-live-chat-paid-message-renderer {
  margin: 4px 0 !important;
}

yt-live-chat-legacy-paid-message-renderer {
  background-color: #0f9d58 !important;
  margin: 4px 0 !important;
}

yt-live-chat-text-message-renderer a,
yt-live-chat-legacy-paid-message-renderer a {
  text-decoration: none !important;
}

yt-live-chat-text-message-renderer[is-deleted],
yt-live-chat-legacy-paid-message-renderer[is-deleted] {
  display: none !important;
}

yt-live-chat-ticker-renderer {
  background-color: transparent !important;
  box-shadow: none !important;
}
yt-live-chat-ticker-renderer {
  display: none !important;
}


yt-live-chat-ticker-paid-message-item-renderer,
yt-live-chat-ticker-paid-message-item-renderer *,
yt-live-chat-ticker-sponsor-item-renderer,
yt-live-chat-ticker-sponsor-item-renderer * {
  color: #ffffff !important;
  font-family: "Imprima";
}

yt-live-chat-mode-change-message-renderer, 
yt-live-chat-viewer-engagement-message-renderer, 
yt-live-chat-restricted-participation-renderer {
  display: none !important;
}

yt-live-chat-banner-manager {
  display: none !important;
}

Kalau mau yang lebih bagus dan full transparan (cuma menampilkan teks nya saja) bisa pakai style yang ini:

@import url("https://fonts.googleapis.com/css?family=Candal");
@import url("https://fonts.googleapis.com/css?family=Changa One");
@import url("https://fonts.googleapis.com/css?family=Imprima");

/* Background colors*/
body {
  overflow: hidden;
  background-color: rgba(0,0,0,0);
}
/* Transparent background. */
yt-live-chat-renderer {
  background-color: transparent !important;
}
yt-live-chat-text-message-renderer,
yt-live-chat-text-message-renderer[is-highlighted] {
  background-color: transparent !important;
}

yt-live-chat-text-message-renderer[author-type="owner"],
yt-live-chat-text-message-renderer[author-type="owner"][is-highlighted] {
  background-color: transparent !important;
}

yt-live-chat-text-message-renderer[author-type="moderator"],
yt-live-chat-text-message-renderer[author-type="moderator"][is-highlighted] {
  background-color: transparent !important;
}

yt-live-chat-text-message-renderer[author-type="member"],
yt-live-chat-text-message-renderer[author-type="member"][is-highlighted] {
  background-color: transparent !important;
}


yt-live-chat-author-chip #author-name {
  background-color: transparent !important;
}
/* Outlines */
yt-live-chat-renderer * {
  text-shadow: -2px -2px #000000,-2px -1px #000000,-2px 0px #000000,-2px 1px #000000,-2px 2px #000000,-1px -2px #000000,-1px -1px #000000,-1px 0px #000000,-1px 1px #000000,-1px 2px #000000,0px -2px #000000,0px -1px #000000,0px 0px #000000,0px 1px #000000,0px 2px #000000,1px -2px #000000,1px -1px #000000,1px 0px #000000,1px 1px #000000,1px 2px #000000,2px -2px #000000,2px -1px #000000,2px 0px #000000,2px 1px #000000,2px 2px #000000;
  font-family: "Imprima";
  font-size: 18px !important;
  line-height: 18px !important;
}

yt-live-chat-text-message-renderer #content,
yt-live-chat-legacy-paid-message-renderer #content {
  overflow: initial !important;
}

/* Hide scrollbar. */
yt-live-chat-item-list-renderer #items{
  overflow: hidden !important;
}

yt-live-chat-item-list-renderer #item-scroller{
  overflow: hidden !important;
}

/* Hide header and input. */
yt-live-chat-header-renderer,
yt-live-chat-message-input-renderer {
  display: none !important;
}

/* Reduce side padding. */
yt-live-chat-text-message-renderer,
yt-live-chat-legacy-paid-message-renderer {
    padding-left: 4px !important;
  padding-right: 4px !important;
}

yt-live-chat-paid-message-renderer #header {
    padding-left: 4px !important;
  padding-right: 4px !important;
}

/* Avatars. */
yt-live-chat-text-message-renderer #author-photo,
yt-live-chat-paid-message-renderer #author-photo,
yt-live-chat-legacy-paid-message-renderer #author-photo {
  
  width: 24px !important;
  height: 24px !important;
  border-radius: 24px !important;
  margin-right: 6px !important;
}

/* Hide badges. */
yt-live-chat-text-message-renderer #author-badges {
  display: none !important;
  vertical-align: text-top !important;
}

/* Timestamps. */
yt-live-chat-text-message-renderer #timestamp {
  
  color: #999999 !important;
  font-family: "Imprima";
  font-size: 16px !important;
  line-height: 16px !important;
}

/* Badges. */
yt-live-chat-text-message-renderer #author-name[type="owner"],
yt-live-chat-text-message-renderer #author-name.owner,
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="owner"] {
  color: #ffd600 !important;
}

yt-live-chat-text-message-renderer #author-name[type="moderator"],
yt-live-chat-text-message-renderer #author-name.moderator,
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="moderator"] {
  color: #5e84f1 !important;
}

yt-live-chat-text-message-renderer #author-name[type="member"],
yt-live-chat-text-message-renderer #author-name.member,
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="member"] {
  color: #0f9d58 !important;
}

/* Channel names. */
yt-live-chat-text-message-renderer #author-name {
  color: #cccccc !important;
  font-family: "Candal";
  font-size: 20px !important;
  line-height: 20px !important;
}

yt-live-chat-text-message-renderer #author-name::after {
  content: ":";
  margin-left: 2px;
}

/* Messages. */
yt-live-chat-text-message-renderer #message,
yt-live-chat-text-message-renderer #message * {
  color: #ffffff !important;
  font-family: "Imprima";
  font-size: 18px !important;
  line-height: 18px !important;
}


/* SuperChat/Fan Funding Messages. */
yt-live-chat-paid-message-renderer #author-name,
yt-live-chat-paid-message-renderer #author-name *,
yt-live-chat-legacy-paid-message-renderer #event-text,
yt-live-chat-legacy-paid-message-renderer #event-text * {
  color: #ffffff !important;
  font-family: "Changa One";
  font-size: 20px !important;
  line-height: 20px !important;
}

yt-live-chat-paid-message-renderer #purchase-amount,
yt-live-chat-paid-message-renderer #purchase-amount *,
yt-live-chat-legacy-paid-message-renderer #detail-text,
yt-live-chat-legacy-paid-message-renderer #detail-text * {
  color: #ffffff !important;
  font-family: "Imprima";
  font-size: 18px !important;
  line-height: 18px !important;
}

yt-live-chat-paid-message-renderer #content,
yt-live-chat-paid-message-renderer #content * {
  color: #ffffff !important;
  font-family: "Imprima";
  font-size: 18px !important;
  line-height: 18px !important;
}

yt-live-chat-paid-message-renderer {
  margin: 4px 0 !important;
}

yt-live-chat-legacy-paid-message-renderer {
  background-color: #0f9d58 !important;
  margin: 4px 0 !important;
}

yt-live-chat-text-message-renderer a,
yt-live-chat-legacy-paid-message-renderer a {
  text-decoration: none !important;
}

yt-live-chat-text-message-renderer[is-deleted],
yt-live-chat-legacy-paid-message-renderer[is-deleted] {
  display: none !important;
}

yt-live-chat-ticker-renderer {
  background-color: transparent !important;
  box-shadow: none !important;
}
yt-live-chat-ticker-renderer {
  display: none !important;
}


yt-live-chat-ticker-paid-message-item-renderer,
yt-live-chat-ticker-paid-message-item-renderer *,
yt-live-chat-ticker-sponsor-item-renderer,
yt-live-chat-ticker-sponsor-item-renderer * {
  color: #ffffff !important;
  font-family: "Imprima";
}

yt-live-chat-mode-change-message-renderer, 
yt-live-chat-viewer-engagement-message-renderer, 
yt-live-chat-restricted-participation-renderer {
  display: none !important;
}

yt-live-chat-banner-manager {
  display: none !important;
}

Kode ini saya dapatkan dari link GitHub berikut:

https://gist.github.com/lohanidamodar/81145c6d3a668cf18e6453ab5ba1f642

Semoga bermanfaat ya…

Contoh sederhana banget dan keren program JavaScript Text To Speech (teks menjadi suara bacaan)

Di bawah ini Om Puter share contoh kode HTML dan JavaScript untuk membuat program Text To Speech sederhana dan sederhananya pake banget.

Ini dia kodenya… Buat file index.html kosong dan copy paste kode di bawah ini:

<!DOCTYPE html>
<html>
	<head>
		<title>Percobaan Text To Speech</title>
		<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
	</head>
	<body>
		
		<input id="bacaini" placeholder="Teks yang dibaca">
		<button onclick="BacaTeks()">Baca Sekarang</button>
		
		<script>
			
			
			
			function BacaTeks(){
				const synth = window.speechSynthesis;
				let text = $("#bacaini").val();
				const utterThis = new SpeechSynthesisUtterance(text);
				utterThis.lang = 'id-ID';
				synth.speak(utterThis);
			}
			
		</script>
		
	</body>
</html>

Source aslinya dari website ini yah, guys: https://www.juannicolas.eu/convert-text-to-speech-with-javascript/

Cara install Mac OS di PC/Laptop Windows secara virtual menggunakan VMware

Buat kamu yang gak punya Mac dan ingin develop apa aja pakai XCode di Mac, kalian bisa install Mac OS di PC/Laptop menggunakan VMware. Tapi nantinya VMware nya harus diinstalin unlocker supaya bisa menjalankan Mac OS.

Begini caranya:

  1. Download ISO instalasi versi OS yang kamu inginkan, ini file torrent nya: https://drive.google.com/file/d/1XHsCkyvX0o4ie-YbmoT13WArwJHmZbCw/view?usp=sharing
  2. Download VMware. Cari tahu dari Google bagaimana kamu bisa download VMware, lalu install. Usahakan cari versi Workstation versi 11-15 atau Player versi 7-15; karena versi 16 ke atas biasanya unlocker nya tidak berfungsi.
  3. Download Unlocker dari link ini lalu install: https://github.com/paolo-projects/auto-unlocker
  4. Edit file VMX seperti ini:

Add
smbios.reflectHost = “TRUE”
hw.model = “MacBookPro14,3”
board-id = “Mac-551B86E5744E2388”
smc.version = “0”
ulm.disableMitigations = “TRUE”

Edit
ethernet0.virtualDev = “vmxnet3”

Nah setelah itu mulai kita install Mac OS nya…