サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
体力トレーニング
blog.wadackel.me
Less や Stylus、Sass などの CSS プリプロセッサはもう手放せないツールの一つとなって久しい感じです。僕は業務内/プライベート問わず、スタイルの殆どを Sass(Scss)を使って書いています。 ただ、一旦覚えた知識のまま惰性で使っている点もあったりするので、改めて色々と調べてみたりして自分自身の知識を更新したいなと思い、中でもまだまだ使いこなせていなかった map に関する諸々をおさらいしてみました。 map とは? もう導入されてかなり経つので沢山の人が使っていると思いますが、Sass v3.3 以降に追加されたデータ型で、連想配列みたいに扱うことが出来るというものです。 以下はボタンのサイズを書き出す簡単なサンプルコードです。冒頭で宣言している変数の$btn-sizesが map に当たります。 $btn-sizes: ( sm: 20px, md: 30px, l
Sketch なり Illustrator なりで作成した SVG のアイコン群を、React のコンポーネントとして扱いたくなりました。アイコンの数が少なければ、SVG のコードを手動でコピペしてコンポーネント化すれば良さそうですが、3 個くらいからもう辛くなってきそうです。 SVG を外部ファイル化して読み込むことも考えましたが、CSS でのスタイル指定が面倒になることや、HTTP リクエスト数を抑えるという点を考慮すると、やはりコンポーネント化しておくのが無難な気がします。 ただ、そこへ労力を割くのは微妙な気がするので、ある程度自動でズバッと出来ないかなと試してみたら、react-svg-converterを使うことで簡単に実現出来たので、その工程についてメモです。 前提 上記の様なアイコンセット(SVG ファイル)を React コンポーネント(JSX)化したい 書き出されるコンポ
Web アプリを構築したくて久し振りに React を触ってみると、前に少し触っていたのにすっかり忘れてしまっていました。圧倒的に記憶力が低いので、継続的に触っていないと中々覚えられません…。 今だと Angular2 がグイグイ来てたりしてますが、それよりも一度触ったことのある React+Redux を使った方が学習コストを抑えられるな、という訳で再度勉強中です。 改めて色々と調べていると、redux-sagaという Redux の Middleware が非同期処理を書きやすく出来るぞ!との事だったので、まずはシンプルなカウンターサンプルの実装をして感じを掴んでいきたいと思います。 最後の 参考 にもあげていますが、そもそも redux-saga とは一体何者なんだ?というところにおいて、以下の記事が大変参考になりました。 redux-saga で非同期処理と戦う - Qiita ま
去年の末に、jQuery 無しで動かせて、ES2015 フレンドリーな感じのスムーススクロール用ライブラリ、sweet-scroll.jsを公開したのですが、ブログ以外のサイトで使ってみたり Issue もらった内容の改善を経て、v1.0.0(メジャーバージョン)をリリースしました。 どのタイミングでメジャーバージョンに上げるか迷ったのですが、今後大きく機能が変わることは無さそうだなと感じたので、このタイミングです。 改善した部分や、その他雑感についてまとめました。 公開した際の記事は以下。 ES6 フレンドリーなスムーススクロール「sweet-scroll.js」を作りました | WebDesign Dackel リポジトリは以下です。 wadackel/sweet-scroll 改善点 updateURLオプションの追加 (スクロール完了後に#を書き換え) 以下のコールバックオプション
このブログではテーマファイル、及び記事データを GitHub で管理し、$ git push した際のフックを仕込む事で VPS 上に自動デプロイされるような構成になっています。 Jekyll や Hugo などの静的サイトジェネレータを使ったブログだと、GitHub Pages での運用例が沢山出てくるのですが、VPS でやるとなった場合に意外と情報が少ないように感じました。 一応セキュリティを意識しつつX-Hub-Signatureを使った署名確認をしつつ、GitHub Webhook を Node.js で受け取るところまでを書いてみようと思います。 前提とやりたいこと 実際のコード例を示す前に簡単に前提を整理しておきます。この記事では自動更新部分や、bot の動かし方については書いていません。 GitHub Webhook を Node.js で受け取りたい PHP の方が気軽に出
React を使って作成している Web アプリ内で、画像の色を自動的に取得後、用意しておいた幾つかの基準色(カラーパレット)に分類する必要がありました。 この機能を実現するために実装した内容をcolor-classifier.jsというライブラリに切り出したので、処理内容や使い方について書いてみます。 はじめに ライブラリへ切り出して、殆ど書き終わったなという段階でcolor-diffというライブラリを知りました。diff.closest()というメソッドを使うことで、同様の機能を実現できたみたいです。 全力で車輪の再発明をしてしまった感に押しつぶされそうだったので、ブログに書いて消化していきたいと思います。 対象のリポジトリは以下です。 wadackel/color-classifier 色の分類を実現するステップ まず、色の分類を行うためのステップを整理します。 以下の 2 ステップ
サービス開発や、サーバの権限を持ち Git との連携が出来る環境下では無縁の内容ですが、受注開発の場合は社内においてのソースコードは Git 管理、しかし納品時は差分のみといったパターンがあると思います。 少し調べると関連記事が沢山出てきました。 git で差分ファイルを抽出する - Qiita git で差分ファイルを抽出して zip にまとめる方法 - HAM MEDIA MEMO SourceTree でコミット間の差分ファイルを抽出しよう (カスタム操作を使う方法) - ICS MEDIA 1〜2 番目の記事が CLI から実行できるので、良い感じです。 ただ、git archiveを実行する際、既に削除済みのファイルが存在する場合エラーが発生してしまいました。 そこで少し前に、Node.jsで同じ様な使用感の CLI ツールを作ってみました。 インストール方法 Node.jsを使
<svg width="395" height="274" viewBox="0 0 395 274" xmlns="http://www.w3.org/2000/svg"> <title> logo_after </title> <path d="M284.788 43.44c0 6.712 1.487 18.648 1.487 24.615 0 5.968 1.856 8.208-1.488 13.056-3.346 4.85-4.46 5.97 0 11.94s13.04 5.97 17.48 7.83c0 0-24.54-2.98-33.46 0-8.92 2.99-18.582 8.95-33.82 7.46-15.236-1.49-33.446-5.59-50.166-4.47s-40.13 5.97-58.34 20.14c-18.21 14.18-23.4 16.78-32
これまでWebDesign Dackelという WordPress で構築したブログをやっていましたが、幾つか理由があって新しくブログを始めることにしました。 前ブログは消さずに更新を止めるだけにする予定です。 なぜ移行したか? 大した理由では無いですが、以下が移行の理由です。 ブログ名を変えたくなった。ただ変更する位なら新規で作りたい 社会人になるのと同時に始めて丁度 3 年が経ち、色々と見直していきたくなった 技術的な記事以外のものも気軽に書けるような環境にしたかった (ブログ名に「DESIGN」とか入れちゃった…) WordPress のブログ運用に飽きた ブログを書く環境を最適化したい… Ghost、又はJekyll等の静的サイトジェネレータに変えたい 特別 WordPress が嫌いなわけでは無くて、ブログをやってみて管理画面もコメント欄も要らないやって思うようになりました。 そ
このブログで何度か紹介している scaffdog を Rust で書き直し、シングルバイナリとして利用可能なように実装を進めています。その yak shaving 中に表題の Crate を作りました… 2023年10月末に約6年間在籍した CyberAgent を退職し、1ヶ月間の有給消化期間を経て12月に Knowledge Work へ入社しました。Knowledge Work へは、フロントエ… 先日、GitHub Actions の JavaScript アクションを公開した旨の記事を公開しました。 複数リポジトリ間でファイルを同期する GitHub Actions の JavaScript…
このページを最初にブックマークしてみませんか?
『wadackel.me - wadackel.me は、わだ つよし (@wadackel) の技術×プライベートなブ...』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く