WordPress update

for migrating Ubuntu22, php8.1, I’ve updated my blog (wordpress) too.

  1. Simply download the latest WordPress (6.3.1) and place in a server designated area (ie. /var/www/wordpress) and chown www-data:www-data -R /var/www/wordpress
  2. in the mysql database, create a database named ‘wordpress
  3. adjust php-fpm and nginx max_upload_file_size, if you want to upload .sql file using phpmyadmin. then create a database named ‘wordpress-yourdata
  4. import the SQL file, so all the previous data is migrated.
  5. go to ‘wordpress’ folder, edit ‘wp-config.php
  6. create nginx conf file for the blog (ie. blog.koodesignstudio.com.conf)
  7. restart nginx (dont’ forget “sudo nginx -t
  8. certbot to the blog.koodesignstudio.com
  9. access with a browser
  10. initial configuration for the new wordpress
  11. start from a brand new plain wordpress,
  12. update ‘wp-config.php‘ database to ‘wordpress-yourdata‘, now all the data is coming from the previous database
  13. copy images from the previous wordpress ./wordpress/wp-content/uploads
  14. install the theme and plug-ins as same as the previous
  15. done!

!IMPORTANT even to migrate from another server, frist create a default ‘wordpress’ dabase, then change ‘wp-config.php’

nextcloud

owncloud stop supporting php8. So I decided to move on to next. nextcloud!

I’ve been upgrading ubuntu18 to 22. It’s a pretty big jump, so many major upgrade required. And since owncloud I’ve been using no longer support PHP8, so decided to search alternative.

This is great how-to article: https://www.linuxbabe.com/ubuntu/install-nextcloud-ubuntu-22-04-nginx-postgresql

basically follow the instruction above and good to go except I use mysql instead.

I’ve already installed phpMyAdmin so I use to create a database for nextcloud (as ‘nextcloud’) and be able to use with my account, not root. then change the entire nextcloud folder to sudo chown www-data:www-data

run certbot to make ssl enable.

then access to the nextcloud, using the GUI to set up my account.

then download the desktop app to my mac, install, configure to sync the cloud folder <> mac local.

the sync speed is pretty fast. I’m impressed but it’s been more than 7 years I’ve used the owncloud, it’s good to be updated.

Vue 2 add gtag for GA4

This is for vue 2

First: install ‘vue-gtag’ . this should be Ver 1. And it works with GA4 too.

IMPORTANT: add @legacy

npm install vue-gtag@legacy

Second: Update main.js

NOTE: use “vue-router” to automatically log “pages”

import Vue from "vue";
import App from "./App.vue";
import router from "./router";

// vue-gtag
import VueGtag from 'vue-gtag'
Vue.use(VueGtag, {
  config: {
    id: 'G-xxxxxxxxx'
  }
}, router)

new Vue({
  router,
  render: (h) => h(App),
}).$mount("#app");

DONE!

Certbot

Generate a certificate for nginx

$ sudo certbot --nginx
$ sudo certbot --nginx -d example.com

List all the certificates

$ sudo certbot certificates

NOTE: check each nginx conf files updated by Certbot

Delete a specific certificate

$ sudo certbot delete --cert-name example.com

EXPAND, add a new domain to existing certificate

$ sudo certbot certonly --expand --cert-name existingdomain -d existingdomain.com,www.existingdomain.com,new.existingdomain.com

koo design studio ニュースレター vol. 53 – 08/05/2022

こんにちは、koo design studio です。 ロサンゼルスのサウスベイエリアの外は潮風が吹いていて快適です。みなさん、良い夏をお過ごしください。
ところで、私はちょうどウェブフロントエンド制作を Manhattan Beach, CA. BeachCoders Academyの教え始めました。 興味がある場合は、https://beachcoders.comを確認してください

Tech tich-tach Share

Production | Who does what? (1)

他のビジネスと同様に、制作プロセスは多くの面で非常に良く似ています。 マルチメディア制作現場では誰がどのような機能を担っているのかを共有したいと思います。

プロデューサー

階層のトップ。特に財政と予算の面、最終の流通を含むすべての制作とその作品に責任があります。そして、監督、脚本家など、各役割の責任者を選んで割り当てます。

ディレクター

ストーリーテリングの達人。すべての制作を担当するディレクターであり、予算と期日内に作品を完成させます。また、撮影監督、キャスティングディレクター、サウンドエンジニア、制作コーディネーター、ロケーションマネージャー、映画編集者、vfx技術者等を選択して割り当てます。 

撮影監督

責任を持って画質を管理します。 光、影そして色。<br>撮影監督は、照明技術者、グリップ、ドリーなどを割り当てます。ほとんどの場合、フレーミングの決定はディレクターによって行われます。

音響録音エンジニア

音声を録音する責任があります。また、予期せぬ不要な音が聞こえた場合は、直ちに撮影を中止する権利があります。

制作コーディネーター

制作における人(クルーとキャスト)やその他の要件に責任を持ちます。

ロケーションコーディネーター

撮影場所を担当します。 適切な場所を見つけて、許可を取得します。

スタジオ/セットコーディネーター

サウンドステージを担当し、セットを構築します。

メイクとヘアアーティスト

俳優のメイクや髪の毛を担当します。

コスチューム、ワードローブ、小道具

デザインと準備を担当するデザイナー。

VFX/SFXコーディネーター

VFX/SFXを担当します。

編集者

映画/ビデオの編集を担当します。

作曲家およびサウンド/オーディオエディター

音楽、オーディオ、効果音を担当します。

俳優

そしてもちろん、もっといろいろな人達!

プロダクションのサイズはスケーラブルです。常に舞台裏で多くの人が関わっています。視聴者に素晴らしい体験を提供するために、すべての人が一生懸命働いています。もちろん自分ですべてを行うこともできます!
また、あらゆる規模の制作についてヘルプやアドバイスが必要な場合。いつでもご連絡ください!!

koo design studio ニュースレターのバックナンバーを確認してください

koo design studio ニュースレター vol. 52 – 07/05/2022

こんにちは、koo design studio です。独立記念日の花火楽しめましたか?

Tech tich-tach Share

ビデオ撮影

ビデオ撮影のヒントをいくつかシェアします。

スマートフォンを使った撮影

必要なもの

  • 三脚は必須!! スマートフォンやカメラは手で持たない事をお薦めします。動きながらの撮影の場合、ハンドグリップやスタビライザを使用しましょう ($50 以下で手頃なものが見つかります)
  • 音は別の機材で録音 録音用のアプリを使って音量などの状況をモニターする事ができるからです。私自身は古いピンジャックの付いた iPhone にコードでマイクを繋いでいます。Bluetooth のもの、マイクとレシーバの付いたものなどがあります。($30 以下で手頃なものが見つかります)録音はビデオを撮影する前に録り始めましょう。
  • フィルライト(補助ライト) 屋内外を問わずほとんどの場合、主な光源は被写体の上から来ます。私はLED-7100T($1500) とライトスタンドを使用しています。($50 以下で手頃なものが見つかりますが、$100-200 位のものをお薦めします)

する事

  • フォーカス(集中)!!  ビデオと音の両方で被写体に集中します。 ビデオ=例えば背景を遠くにして、ぼかしたり出来れば被写体はよりフォーカスされます。スクリーンをタップすればそこにフォーカスが当たるのを忘れずに。サウンド=静かな場所を探しましょう。ノイズや環境音は後でポストにて付け加える事ができます。
  • 合図を出す 自分自身を撮影する際でもカット間に少しの隙間を入れる為に自分自身に合図を入れましょう。誰かを撮影している際録画ボタンを押した後に話す出だしのタイミングを指の動きなどで指示を出します。特にインタビュー等、質問とインタビュイーが話す声が被らない様に指示を出します。
  • 準備 十分な準備時間は決して取れませんが、特に時間の無い撮影の場合は事前に十分な撮影プラン準備をしましょう。また、誰を撮影する際、最低1度はリハーサルを行います。

ビデオ制作は楽しいですよね。より注意深く撮影すれば、より良くなります。有名な作家の言葉に「誰でも文章は書ける。ペンと紙だけあれば良い」とあります。ビデオはもう少し必要ですが、割と手が届く範囲で始められると思います。プロになるのはまた別の話になりますが。

もしプロフェッショナルサービスが必要な場合は私にコンタクトをお願いします!!

mysql | memo

case: remove a row with FOREIGN_KEY

SET FOREIGN_KEY_CHECK = 0;
DELETE FROM `tableName` WHERE (id = `idNumber`);
SET FOREIGN_KEY_CHECK = 1;

case: reset AUTO_INCREMENT id MAX

ALTER TABLE `tableName` AUTO_INCREMENT = `value`;

The ‘value’ is where the AUTO_INCREMENT starts next time.

SELECT @max := MAX(ID) + 1 FROM `tableName`;
PREPARE stmt FROM 'ALTER TABLE `tableName` AUTO_INCREMENT = ?';
EXECUTE stmt USING @max;
DEALLOCATE PREPARE stmt;

case: unable to enter `emptyValue` ” to a NULL space. (once rebooted mySQL, run the command)

SET @@global.sql_mode = '';

Vue3 w/pinia, bootstrap5 and axios | my memo

Finally updated my mentality to Vue 3. I’ve updated my Mac OS from Catalina to Monterey a while ago and started to thinking about software update accordingly. The big one was Node, I’ve been using the version 12 for such a long time, so decided to update to v16. Thanks to nvm, I can switch versions when I needed. And started to try Vue3.

Vue3, Vite server, it’s just amazingly FAST!!! I’m loving it.

> npm init vue@latest
> npm run dev

So far, trying to get familiar with update and I’ve encounter an axios issue. I’ve install axios and vue-axios. According to https://stackoverflow.com/questions/68233550/what-is-the-different-between-axios-vue-axios. “vue-axios is just a wrapper, exposing axios to components as this.axiosthis.$http, or Vue.axios.”

import axios from "axios";
import VueAxios from 'vue-axios'
app.use(VueAxios, axios);

app.mount("#app");

// with in a component add this
add(payload) {
const path = "URL";
this.axios.post(path, payload)
.then(() => {

I’ll update when I noticed something converting from vue2 to VUE3

PowerPoint Path Animation

I wonder how often you make an animation. Maybe not so frequently or not consciously. How about PowerPoint or a similar presentation software?

PowerPoint has a set of pre-made animations, and you can apply to a text or image. I think people are pretty familiar to apply these animations.<br> <b>How about “Path Animation”?Perhaps you don’t use it so regularly, but it’s sometimes very effective. One tip that I recommend who is not familiar with the Path Animation, it’s better to choose “ARCS” instead of “LINES”, because A “LINE” has only a start and an end point, no point in between and you cannot add another editing point later. So you cannot edit the path shape later.

Once you select an image or text box, apply “ARCS” path, it plays automatically once. Then Right-Click and select “Edit Points” to edit the path.

The path is called a “Bézier curve“. You can edit the curvature with the selected edit point to move around and use handles’ both side to control the curvature tangent(direction).

You can add or delete an edit point for the path until you are satisfied the flow.

Also, if you add another animation preset such as “Grow/Shrink”, then set the “Timing” to “Start [with previous]”.

You can animate the path Move(Transition) and Grow/Shrink at the same time.

Sometimes too much animation will destroy the entire presentation, so use animation efficiently.

Enjoy!

THIS VIDEO in YOUTUBE: https://youtu.be/36R1Ak–51c