ヤギッシュを使ってみた
why
- 新卒採用用の履歴書で, docs でテーブル崩れるのに疲れていた
- リプライでお勧めされた
使い方
- ブラウザにキャッシュとして保存もできるが、ログインしてデータをとっていける
- フォームに 1 カテゴリずつ入れていける
- onChange で自動計算する UX 最高
- 郵便番号もボタンを押さなくても住所出力してくれる。実際はやい。
- サービスに登録しているメールアドレスを入力しますか？と出てきてくれる
- 学歴も自動計算してくれる
プレビューも完璧。途中でもみれる。
Google Docs よりいいところ
- コピペを繰り返さなくても 自己PR の欄だけ作りやすい
- docs は 残りの紙の幅に合わせて自動調整を入力している最中にされてしまってうざいが、yagish はフォームなのでそれがなくてストレスがたまらない
- 後最後まで頑張ったとヤギさんが褒めてくれるのが嬉しい。
デメリット
- 会社ごとに履歴書を置いておける空間がない。
- 新卒ようなら一つしか空間がないので、一つづつやるしかない
- 企業ごとの志望理由や自己 PR などは 自分の Notion におく必要がある
よく使う Web サービス 2020-09-17
Web Services commonly used, 2020 09 17
Notion.so
notion.so
- 会社でも各サービスの使い方をはじめとするドキュメントが置かれ始めている
- 個人ではゲーム(DeepTown)の攻略記録や面接の記録などをおいている。
- Android のアプリはバックスペース押した時にキーボードが引っ込むので Chrome で編集している。
MeisterTask
- 常に開く癖さえ忘れなければ忘れない
- 求人応募の状況
- 履歴書待ち
- 日程のメール返信待ち
- 何日に面談予定)
などをまとめておくのに使っている。この記事を書いていて履歴書書いてくださいと言われて忘れていた一社を思い出した
Qiita
- 最も日本で有名なプログラミングの記事投稿プラットフォーム
- 会社のスタンプが貼られるから迂闊な記事はかけないが、逆にそれがあることで校閲してもらって質を挙げた記事を貼れている
- 現状公開できているのはこの 2 つの記事。Git の超基礎とブランチ管理。
- これ以外は公開はできていないが、Docker や Node, Next.js Tutorial を進める上での記録や Slack で上司にいただいた解説のまとめなど、Private ならリンクを貼っている会社の研修チャンネルの人間にしか見れないので、安全に書きまくることができる。
- Hatena Blog と比べて書くときの UI と記事から直接の編集できる UX がかなり快適。
- ただ閲覧する分には公式や書籍を第一に考えないと、企業に評価される実力がつきにくいと言われたので、最近無闇に読み漁るのは控えている。
Hatena Blog
- これ。自明。雑にかけて公開できるしマサカリも飛んでこない
Trello
- プロジェクトが無料で無制限。
- 家庭の買い物やよくいく店の情報などをリスト化して共有している
- 自明
Slack
- 会社のコミュニケーションツール
Zoom
- 就職面接で使う。
- Google Meet と違って別アプリで立ち上がるからトグルできて便利
- 上司との 1:1 面談でも使った
Google Calender
- いろいろ予定をリスケしながら入れるのに便利
- PM の予定の閲覧許可をもらっておくと、自分のカレンダーに彼のも表示されるので この時間にメンションしても返信ないだろうなって事前にわかるのが非常に便利
gem install rails の openssl エラーを ruby の入れ直しで解決した
https://guides.rubyonrails.org/getting_started.html
why
Ruby 開発 を受けるから
what is rails?
https://www.ruby-lang.org/en/documentation/
Ruby の公式ドキュメントはこっち
https://guides.rubyonrails.org/getting_started.html
ここによると
Rails is a web application development framework written in the Ruby programming language.
It is designed to make programming web applications easier by making assumptions about what every developer needs to get started.
- 全ての開発者が(仕事を)始めるのに必要な全ての「思い込み」を簡単にする アプリケーション？
It allows you to write less code while accomplishing more than many other languages and frameworks
- 他の多くの言語やフレームワークよりも、(仕事を)遂行するのにより少ないコード数でかける
If you learn "The Rails Way" you'll probably discover a tremendous increase in productivity
- 「Rails の方法」を学べば、生産性がすごく上がる
DRY
Don't Repeat Yourself "Every piece of knowledge must have a single, unambiguous, authoritative representation within a system." By not writing the same information over and over again, our code is more maintainable, more extensible, and less buggy.
- 自身を繰り返すな
- 全ての知識のピース単一で、明白で、誤解の余地のない表現が システムに載っているべきだ。
- 同じ情報を何度も何度も書かないことで、私たちのコードはメンテナンス性が高く、拡張性が高く、バグが少なくなる
React でもよく言われる考えだ
Convention Over Configuration
- config file の configuration.
- 設定より規約
Rails has opinions about the best way to do many things in a web application, * and defaults to this set of conventions, rather than require that you specify minutiae through endless configuration files.
- Rails は Web アプリで多くのものを作るための 最善策のオプションがある
- conventions という デフォルトをセットすることで、特殊な詳細を延々と config file に書くことを避けられる(?)
https://ja.wikipedia.org/wiki/%E8%A8%AD%E5%AE%9A%E3%82%88%E3%82%8A%E8%A6%8F%E7%B4%84
この言葉の本質的な意味は、開発者が指定しなければならないのはアプリケーションの慣例に従わない点だけだ、ということである。例えば、モデルの中にSalesというクラスがあれば、データベース中の対応する表の名前はデフォルトでsalesである、という規約を定める。
- CakePHP で Model も Controller も 名前を合わせるのがあったがそれのことか。Table が Articles で、Controller が ArticlesController だと読み込むが、そうでないとエラーになるみたいな。
Create New Project
2020.09.13 23:58
Install dependencies
実際に作ってみる
まずは
ruby -v ruby 2.6.1p33 sqlite3 --version 3.7.17 node -v v12.13.1 yarn -v bash: yarn: command not found
yarn はなかったので install
brew install yarn 🍺 /usr/local/Cellar/yarn/1.22.5: 14 files, 5MB, built in 5 seconds yarn -v 1.22.5
入った。
では rails を...
gem install rails
ERROR: Loading command: install (LoadError)
dlopen(/Users/kaede/.rbenv/versions/2.6.1/lib/ruby/2.6.0/x86_64-darwin18/openssl.bundle, 9): Library not loaded: /usr/local/opt/openssl/lib/libssl.1.0.0.dylib
Referenced from: /Users/kaede/.rbenv/versions/2.6.1/lib/ruby/2.6.0/x86_64-darwin18/openssl.bundle
Reason: image not found - /Users/kaede/.rbenv/versions/2.6.1/lib/ruby/2.6.0/x86_64-darwin18/openssl.bundle
ERROR: While executing gem ... (NoMethodError)
undefined method `invoke_with_build_args' for nil:NilClass
おおん...
Library not loaded: /usr/local/opt/openssl/lib/libssl.1.0.0.dylib
- openSSL が load されないらしい。
- 場所は
/usr/local/opt/openssl/lib/libssl.1.0.0
https://qiita.com/Capotasto/items/16be7620c4eed42efccb
この記事を見ると
- brew uninstall --無理やり openssl
- brew update
- brew install openssl/libcrypto
- brew install openssl/libssl
- brew install openssl ...
で解決したらしい。は？
これはやらない
https://qiita.com/YoshiyukiKato/items/e4f67c588d2943c1253d
これを勧められたのでやる
brew install openssl Warning: openssl@1.1 1.1.1g is already installed and up-to-date To reinstall 1.1.1g, run `brew reinstall openssl@1.1`
既に最新ですと出た。
brew link openssl --force Warning: Refusing to link macOS provided/shadowed software: openssl@1.1 If you need to have openssl@1.1 first in your PATH run: echo 'export PATH="/usr/local/opt/openssl@1.1/bin:$PATH"' >> /Users/kaede/.bash_profile For compilers to find openssl@1.1 you may need to set: export LDFLAGS="-L/usr/local/opt/openssl@1.1/lib" export CPPFLAGS="-I/usr/local/opt/openssl@1.1/include" For pkg-config to find openssl@1.1 you may need to set: export PKG_CONFIG_PATH="/usr/local/opt/openssl@1.1/lib/pkgconfig"
link するのを refuse された？
当然この段階では rails は gem install できない
書かれているとおりに PATH を.bash_profileに打ち込むか
export PATH="/usr/local/opt/openssl@1.1/bin:$PATH"
これをして brew link をもう一度してもダメだった。 for compilers, pkg-config も必要か？
export LDFLAGS="-L/usr/local/opt/openssl@1.1/lib" export CPPFLAGS="-I/usr/local/opt/openssl@1.1/include" export PKG_CONFIG_PATH="/usr/local/opt/openssl@1.1/lib/pkgconfig"
両方追加 sh を reflesh
それでも refuse されてしまう
とりあえず rbenv の入れ直しをやる
rbenv -v rbenv 1.1.2 rbenv uninstall 1.1.2 rbenv: version `1.1.2' not installed
おや？？？？？
rbenv uninstall rbenv -v rbenv 1.1.2
rbenv も PATH が通ってない
eval "$(rbenv init -)" export PATH="$HOME/.rbenv/shims:$PATH"
よくわかってないが、.bash_profile のこれが原因か？？？
消してしまえ！！！
rbenv uninstall rbenv 1.1.2 rbenv -v rbenv 1.1.2
これでも消えない。
どこにあるのを指してるんだ？？
which rbenv /usr/local/bin/rbenv
ユーザーのローカルのバイナリにあるのを指している。
brew で入れた rbenv と違う？ いや rbenv は rbenv で入れるものだから...
https://qiita.com/dasisyouyu/items/c9621c29b0fe79d2b7c4
Mac の仕様変更で brew link --force ができないから、直接 PATH を通す必要があるらしい
rbenv は置いといて、openSSL がおかしいらしい
which openssl /Applications/XAMPP/bin/openssl
XAMPP のopenSSLが使われている
だが 先ほど openSSL の PATH は通してある。これ以上わからない！！
PATH の中身を見て見る
echo $PATH /Users/kaede/.rbenv/shims:/opt/local/bin:/opt/local/sbin:/usr/local/opt/libiconv/bin:/usr/local/opt/libxslt/bin:/usr/local/opt/libxml2/bin:/usr/local/opt/libxslt/bin:/usr/bin/rails:/usr/local/opt/ruby/bin:/Applications/XAMPP/bin:/usr/local/opt/php@7.1/bin/:/opt/local/bin:~/code/sh:~/bin:/usr/local/bin:/Users/kaede/.rbenv/shims:/opt/local/bin:/opt/local/sbin:/usr/local/opt/libiconv/bin:/usr/local/opt/libxslt/bin:/usr/local/opt/libxml2/bin:/usr/local/opt/libxslt/bin:/usr/bin/rails:/usr/local/opt/ruby/bin:/Applications/XAMPP/bin:/usr/local/opt/php@7.1/bin/:/opt/local/bin:~/code/sh:~/bin:/usr/local/bin:/usr/local/opt/openssl@1.1/bin:/usr/local/opt/php@7.1/bin:/Users/kaede/.rbenv/shims:/Users/kaede/.rbenv/shims:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/share/dotnet:~/.dotnet/tools:/Library/Frameworks/Mono.framework/Versions/Current/Commands:/Users/kaede/.rbenv/shims:/opt/local/bin:/opt/local/sbin:/usr/local/opt/libiconv/bin:/usr/local/opt/libxslt/bin:/usr/local/opt/libxml2/bin:/usr/bin/rails:/usr/local/opt/ruby/bin:/Applications/XAMPP/bin:/usr/local/opt/php@7.1/bin/:~/code/sh:~/bin:/usr/local/opt/openssl@1.1/bin:/usr/local/opt/php@7.1/bin
多すぎないか？？？？？何かがループしてる？？？
.bashrc を
GitHub から見てみると
### php,xampp,ruby,rails,man,
export PATH="/usr/local/opt/php@7.1/bin/:$PATH"
export PATH="/Applications/XAMPP/bin:$PATH"
export PATH="/usr/local/opt/ruby/bin:$PATH"
export PATH="/usr/bin/rails:$PATH"
export MANPATH=/opt/local/man:$MANPATH
XAMPP のはここに入っていた！！
この一文を消すと
which openssl /usr/local/opt/openssl@1.1/bin/openssl
通った！！！！
では rails を gem で入れるぞ！！
gem install rails
ERROR: Loading command: install (LoadError)
dlopen(/Users/kaede/.rbenv/versions/2.6.1/lib/ruby/2.6.0/x86_64-darwin18/openssl.bundle, 9): Library not loaded: /usr/local/opt/openssl/lib/libssl.1.0.0.dylib
Referenced from: /Users/kaede/.rbenv/versions/2.6.1/lib/ruby/2.6.0/x86_64-darwin18/openssl.bundle
Reason: image not found - /Users/kaede/.rbenv/versions/2.6.1/lib/ruby/2.6.0/x86_64-darwin18/openssl.bundle
ERROR: While executing gem ... (NoMethodError)
undefined method `invoke_with_build_args' for nil:NilClass
ダメだ！！！！
openssl は usr/local/bin のを読めてるけど、その openssl を rbenv が読み込んでくれない。入れ直して link するにも、rbenv は .bashrc の PATH に記載がないしどうしようもない！
上司に相談したところ
rbenv での Ruby の再インストール Ruby がビルドされるときのライブラリのリンク先が違う可能性を疑って再インストールを試す
OpenSSL のバージョンを変えてみる
を勧められた。
後者を行う
[Railsの環境構築時にLibrary not loaded: /usr/local/opt/openssl/lib/libssl.1.0.0.dylib (LoadError)で苦しんだ] (https://qiita.com/yamazaki8934/items/48e65850873f3ecbee26)
brew switch openssl 1.1.0 Error: openssl does not have a version "1.1.0" in the Cellar. openssl's installed versions: 1.1.1g
ダメだった。1.1.1g から 1.1.0 に変えられない
現状は確かに
openssl OpenSSL> version OpenSSL 1.1.1g 21 Apr 2020
1.1.1g になっている
さらに指定してみる
brew switch openssl 1.1.1g Cleaning /usr/local/Cellar/openssl@1.1/1.1.1g Opt link created for /usr/local/Cellar/openssl@1.1/1.1.1g
Clean されて opt link が作成された？？？？ これはもしや...！！
gem install rails
ERROR: Loading command: install (LoadError)
dlopen(/Users/kaede/.rbenv/versions/2.6.1/lib/ruby/2.6.0/x86_64-darwin18/openssl.bundle, 9): Library not loaded: /usr/local/opt/openssl/lib/libssl.1.0.0.dylib
Referenced from: /Users/kaede/.rbenv/versions/2.6.1/lib/ruby/2.6.0/x86_64-darwin18/openssl.bundle
Reason: image not found - /Users/kaede/.rbenv/versions/2.6.1/lib/ruby/2.6.0/x86_64-darwin18/openssl.bundle
ERROR: While executing gem ... (NoMethodError)
undefined method `invoke_with_build_args' for nil:NilClass
ダメでした....
openssl 1.0.0 を入れてみるか
Error: No available formula with the name "1.0.0"
[Library not loaded: /usr/local/opt/openssl/lib/libssl.1.0.0.dylib (LoadError)] (https://qiita.com/utsu_san/items/a35437faea1c0d2f357d)
brew reinstall openssl@1.1
クッソ長かったが最後、
==> Installing php@7.1 Error: An exception occurred within a child process: FormulaUnavailableError: No available formula with the name "/usr/local/opt/php@7.1/.brew/php@7.1.rb"
で中断されたっぽい？
ruby を入れ直す
rbenv install 2.6.1 rbenv: /Users/kaede/.rbenv/versions/2.6.1 already exists continue with installation? (y/N) y Installing ruby-2.6.1... ruby-build: using readline from homebrew Installed ruby-2.6.1 to /Users/kaede/.rbenv/versions/2.6.1
これは無事に入れ直しできた
まぁこれでも動かないんだろうな....
gem install rails Fetching thread_safe-0.3.6.gem Fetching rack-test-1.1.0.gem Fetching i18n-1.8.5.gem Fetching tzinfo-1.2.7.gem Fetching activesupport-6.0.3.3.gem Fetching rack-2.2.3.gem Fetching concurrent-ruby-1.1.7.gem Fetching zeitwerk-2.4.0.gem Fetching mini_portile2-2.4.0.gem Fetching rails-dom-testing-2.0.3.gem Fetching nokogiri-1.10.10.gem ...
嘘やろ！！！！！！！！！！！！（大絶叫）
Done installing documentation for concurrent-ruby, i18n, thread_safe, tzinfo, zeitwerk, activesupport, rack, rack-test, mini_portile2, nokogiri, crass, loofah, rails-html-sanitizer, rails-dom-testing, builder, erubi, actionview, actionpack, activemodel, activerecord, globalid, activejob, mini_mime, mail, actionmailer, nio4r, websocket-extensions, websocket-driver, actioncable, mimemagic, marcel, activestorage, actionmailbox, actiontext, thor, method_source, railties, sprockets, sprockets-rails, rails after 39 seconds 40 gems installed
documentation になるんだ。 できた。これで...?
rails --version Rails 6.0.3.3
キタコレ！！！
rails new rails-blog Fetching sassc 2.4.0 Installing sassc 2.4.0 with native extensions ... ✨ Done in 14.01s. Webpacker successfully installed 🎉 🍰
yarn での js などの依存関係？が莫大で CRA (create-react-app) や CRN の比ではなかった。
だがこれでアプリケーションが作成完了
/Users/kaede/code/rails-blog/ ▸ app/ ▸ bin/ ▸ config/ ▸ db/ ▸ lib/ ▸ log/ ▸ node_modules/ ▸ public/ ▸ storage/ ▸ test/ ▸ tmp/ ▸ vendor/ babel.config.js config.ru Gemfile Gemfile.lock package.json postcss.config.js Rakefile README.md yarn.lock
この構成になっている。
rails server
ようやくここまでたどり着いた... 長かった...
Google Domain で domain 買って GitHub Pages に反映する
why
mizchi.dev かっこいい
kaede.dev 売ってうちに買う
GitHub Pages 設定したい
setting
これを読むと
データ（IPv4アドレス)は、GitHub Pages の以下サイトに記載があります。Configuring an apex domain の To create an A record, point your apex domain to the IP addresses for GitHub Pages. と記載があるところに（このブログ書いてる時点だと）4つの IP アドレスがありますので全て登録しましょう。
とある。GitHub Setting の Apex からとる？？
そんなものは kaede0902/profile にはない。
わからんが、github.io の一つのリポジトリしかできない？
DNS プロバイダに移動し、ALIAS、ANAME、または A レコードを作成します。 正しいレコードの作成方法に関する詳しい情報については、DNSプロバイダのドキュメンテーションを参照してください。 ALIASまたはANAMEレコードを作成するには、Apexドメインをサイトのデフォルトドメインにポイントします。
サイトのデフォルトドメインに関する詳しい情報については「GitHub Pagesについて」を参照してください。 A レコードを作成するには、Apex ドメインをGitHub Pages の IP アドレスにポイントします。
185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153
- DNS Provider ってなんだ....
に飛ばされる。DNS Provider なんのことなんだ... Mac のではないし....
もしやこれは全ユーザ共通か？？？
Navigate to your DNS provider and create a CNAME record that points your subdomain to the default domain for your site. For example, if you want to use the subdomain www.example.com for your user site, create a CNAME record that points www.example.com to
.github.io. For more information about how to create the correct record, see your DNS provider's documentation.For more information about the default domain for your site, see "About GitHub Pages."
他には CNAME ファイルが必要？
dig で調べるとできているようだ。
ここで kaede.dev をみると privacy error になる
Enforce HTTPS もできない。
email の varify を求められていた
すると
やったか？
繋がりはしたが js が読み込まれていない。node がないところに deploy されている？？？うん？？？？
https にはなっているが、react app が読み込まれていない。
That's it, a custom domain has now been added to your React app. It may take up to 24 to 48 hrs depending upon your DNS provider to reflect these changes, so just sit back and wait.
- 24h to 48h 待てと書いてある。待つか....
Glide で Google Sheet を DB とした人材管理アプリを作った。
why
- Google Sheet を DB として、スマフォからも編集できる web ツールを作れるツールを探していた
- 売り上げ伝票, (名前, 住所, 電話番号, 用件, ) を 電子化してサイトとして出せるものを作りたい
- 直接 Google Sheet を縦長なスマフォで編集するのは避けたい
Tool 選定
Nocode ツールを探してみる
Glideみてみる
Employees テンプレートの使用
- テンプレートから Google Sheet も アプリも作成した。
- 従業員管理はもちろん、これ顧客管理にも使えるんじゃないんか？かなり優秀だ。
- データは交換できる
Google Sheet でも 編集できる
ただ両方ともデータの反映がとてもゆっくりなのがしんどい
- worker a, worker b を増やしてみたが
反映されない。途中で sheet の name を変えたりしたからか？
複数プロジェクトで同じシートを共有したのがまずそうなので、 シートも消して新しく作る
作り直し
- 画像なしのシートを作成
- 今のシートからアプリを作成
- だがシートを編集しても反映されなかった。
- リロードしてもシートをいじったのは反映されなかったが、 アプリからf -> foo に編集したら adding のデータが反映された。
- UI やアプリの Data 欄では編集できるが、追加するのは不可能。
- Google Sheet で編集して、プロジェクト開き直せば反映されている！
publish
- link を知っていれば編集できる 内部向け労働者管理ツールが簡単に作れた！
conclusion
- 確かに No Code を代表するように、簡単に CRUD 、もとい RUが作成できた。
- ただ管理ツールとして使うには下記の弱点があった。
- login がないから URL をもらさないで使う前提
- web UI からは 新規作成と削除ができない。その2つのためには Google Sheet を直接編集する必要がある
- edit なしにすれば Google Sheet の Viewer として優秀 ログイン出来ないから個人情報管理するには URL が流出すると誰でも見れてしまうからきついけど。
弱点はある、が面白いし実用性もあるのでノーコードだからと馬鹿にせず使ってみてくれ。
個人HPデザイン見直し
どうなっているか
react-bootstrap で作っている
左上にいのちの輝き君を置いている
どうするつもりだったか
人のHPのレイアウトを真似ようと思っていた だがボタンの配置まで真似るのはアウトだとご指摘をいただいた。 なのでアイコンなどのレイアウトは別にする。中央揃えメインカードだけやる
いのちの輝き君をアニメーションさせる予定だった
なのでボタンをいのちの輝きにしたい （は？）
あと cyberpunk な黒背景とネオンのボーダーが欲しい
まずどうするか
複数ページを完全に諦める, Next.js に載せ替える時にする。 コードを減らす
とりあえずこのテキストだけあればいい
かえで(@kaede_io) 神奈川大学 外国語学部 英語英文学科 4年 xxxxxxxTech 社で業務委託中、実作業中 使える技術React.js など 成果物:技術ブログ お仕事募集中です
幅を1140から520に
react-bootstrap で幅を変えるのは無理そう
css に上書きするのは無理だった
bootstrap を全て消した
export default function App() {
return ( <>
<div className="container">
<Lorem></Lorem>
</div>
</>);
}
* { background: #000; color: #fff; } .container { max-width: 32rem; }
これで
幅が32 rem, 520 px くらいにならない
import styles from './styles/utils.module.css'
<div className={styles.main}>
としたら成功。ありがとうNext
* { background: #000; color: #fff; } .main { color: red; text-align: center; width: 32rem; margin: 3rem auto 6rem; } .headingLg { font-size: 1.8rem; line-height: 1.6; margin: 1rem 0; } .headingMd { font-size: 1rem; line-height: 1.5; margin: 1rem 0; color: blue; } .icon { border-radius: 9999px; width: 150px; height: 150px; background: #222; }
これなんだが、Mi9 のレイアウトだとこうなる
mediaquery で margin とか かかないと？
width を SP では 23 rem にして解決
よし！！！
* { background: #000; color: #ff003c; } .main { color: #ff003c; text-align: center; width: 32rem; margin: 3rem auto 6rem; } .headingLg { font-size: 1.8rem; line-height: 1.6; margin: 1rem 0; } .headingMd { font-size: 1rem; line-height: 1.5; margin: 1rem 0; color: #00f0ff; } .icon { border-radius: 9999px; width: 150px; height: 150px; background: #222; } .btn { align-items: center; justify-content: center; padding: 8px 16px; margin: 3px auto 9px; background: #000; color: #fcee09; cursor: pointer; font-size: .85rem; border: 1px solid #fcee09; text-decoration: none; } @media screen and (max-width: 480px) { .main { color: #ff003c; text-align: center; align-items: center; width: 23rem; margin: 2rem auto 4rem; } }
色はこれを参考にした
参考にしたい個人 HP の研究
I went ahead and tried out the new experimental dark mode in @tailwindcss for my website. Works like charm in a combination with useDarkMode lib and React Context 🔥🔥🔥
— Nikita Rudenko (@rdnkta) September 6, 2020
My website: https://t.co/I6QbmSq4hU
useDarkMode: https://t.co/R14jxkhQeT#reactjs #Nextjs pic.twitter.com/HKOqY5Py16
- カードの余白が綺麗
nardtree
- イラスト添えるのが可愛い。余白を生かしている
- スマフォではイラストは消える
- シンプルなトップ
要素整理
whimsical で整理する
1366 x 766 の場合
- main card は 520 x 700 くらい
- icon は 150 x 150
- 名前が高さ 29
- 一文説明が高さ 19
- サービスのアイコンが 78 , 中身は60x 60
- タグ一覧が 259
- tag btn が 64 35 くらい
参考にして作ったレイアウトがこちら
したの左寄せな私のサイトよりだいぶ見やすいのがわかる。
そもそも普通はメニューを上に置くが、このような中央揃えの方が見やすいのではないか？
