はじめに まず↓の記事を見てない方はぜひ見てください！ 自分にとってはこの記事には「えっ、ナニコレ！」なテクニックが多く、特に解説もなかったのでいろいろ調べてたら休日が消えてました... なのでその時間の供養もかねて、自分が知らなかった部分を中心に、僭越ながら元記事の解説を書いてみたいと思います。 ちなみに、以下が元記事のコードそのままを実装したものです。たしかに掲載コードだけで要素がグリグリ動きますね。 See the Pen js-drag-move-original by www-tacos (@www-tacos) on CodePen. 初耳1: $img まずコードのここ <img id="$img" src="https://js.cx/clipart/ball.svg" width="40" height="40"> <script> $img.onpointermove

はじめに 2023年3月末にiOS 16.4がリリースされたことで、ついにすべてのモダンブラウザユーザーに対してWeb Pushを送れるようになりました。 本記事は、筆者が個人開発しているWebサービスでWeb Push機能を実装したときに調べたことや行ったことをメモとして残すものです。Web Push機能の実装を検討されている方の参考になりましたら幸いです。 なお、筆者は外部サービスへの依存をなるべく減らしたかったため、FCMなどのプッシュ通知機能を提供してくれるものはなるべく使わずに実装したのですが、大変だったので基本的には素直にSaaS等を使った方がよいと思います。 注意事項として、筆者はバックエンドに専門性がありません。そのため、何か間違った記述があるかもしれません。特に暗号化周りは理解が甘い点があると思います。もし誤りを発見された場合は優しめに教えていただけると助かります。よろし

#React #フロントエンド #設計 #React プロジェクトのディレクトリ設計をもう5〜6年同じようなディレクトリ構造でやっている 1個のプロジェクトではなく複数のプロジェクトで全部同じような感じ それであまり困ったことがない のでどんな感じにしているかをメモしていく だいたい以下の構造で作る code:plaintext /src /api /domain /components /pages /utils （任意） index.tsx （任意） ルーターやフレームワークは（だいたい）問わない #Next.js だろうと React Router だろうと React Location だろうと関係ない #Redux を使ってようと #react-query や SWR を使ってようと関係ない 裏が Firestore でも #REST API でもやはり関係がない ……という程度

Your AI assistant that has all the contextRewind is a personalized AI powered by everything you’ve seen, said, or heard. Your colleagues will wonder how you do it all.

TypeScriptでReactをやるときは、小さいアプリでもReduxを最初から使ってもいいかもねというお話 前日の丸野さんがReduxを分かりやすく解説してみたというReduxの基本的な紹介を行いました。Reduxはコンパクトなライブラリながらよく考えられた仕組みです。Jetpack ComposeやらFlutterやら、ReactインスパイアなGUIフレームワークも増えているので、JavaScript（TypeScriptではなく） + Reduxをやってみるのは、ウェブに限らず、今後のユーザーインタフェース関連のコードを触るための理解力向上には良いと思います。 本エントリーは、プロダクションコードでたくさんRedux周りにもreducerなどを実装しなくてはいけなくなったときの次のステップとして、Redux Toolkitの紹介をします。 たいてい、Reduxは導入コストが大きく、

Amazon Web Services ブログ “アカウント作成後すぐやるセキュリティ対策” 編を公開しました！- Monthly AWS Hands-on for Beginners 2020年4月号 こんにちは、テクニカルソリューションアーキテクトの金澤 (@ketancho) です。先月末に「はじめの一歩」ハンズオンを公開したのですが、皆様ご覧いただけましたでしょうか？ちょうど春先の時期だったこともあり、多くの AWS 初学者の方にご視聴いただけているようでありがたい限りです。 さて、この記事ではアカウントを作った次のステップとしてぜひご覧いただきたい新作ハンズオン「アカウント作成後すぐやるセキュリティ対策」ハンズオンを紹介します。「不正な操作/動作を継続的にモニタリングする方法は？」「コストレポートってどうやって設定すればいいの？」といったアカウント開設直後にまずは抑えておきたい考

弊社クラスメソッド株式会社主催のイベント「Developers.IO 2019 TOKYO」での登壇資料です。 セキュリティ対策メガ盛りマックス ブログ: https://dev.classmethod.jp/cloud/aws/developers-io-2019-tokyo-all-security-in-aws/ ハッシュタグ: #cmdevio ブログの方に喋った内容の補足など入れてあります ちなみにブログをシェアしてくれると喜びマックス

こんにちは！ 以前、Our Little Design Systemの記事を書いたNipperです。 あれから随分と月日が経ち、そういえばあんな記事を書いていたけど、その後どうなんだ？っと思っているeurekaファンの方も多いでしょう。 安心してください。ちゃんと運用してますよ。

Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects. Getting started

PySpa統合思念体です。これからJavaScriptを覚えるなら、「この書き方はもう覚えなくていい」（よりよい代替がある）というものを集めてみました。 ES6以降の難しさは、旧来の書き方にプラスが増えただけではなく、大量の「旧来の書き方は間違いを誘発しやすいから非推奨」というものを作り出した点にあります。5年前、10年前の本やウェブがあまり役に立たちません。なお、書き方が複数あるものは、好き嫌いは当然あると思いますが、あえて過激に1つに絞っているところもあります。なお、これはこれから新規に学ぶ人が、過去のドキュメントやコードを見た時に古い情報を選別するためのまとめです。残念ながら、今時の書き方のみで構成された書籍などが存在しないからです。 たぶん明示的に書いていても読み飛ばす人はいると思いますが、すでに書いている人向けではありません。これから書くコードをこのスタイルにしていくのは別にいい

2017年に公開された資料・スライドで、CSIRT/情報セキュリティ担当者が読んでおいたほうがいいのでは?というものを独断と偏見でまとめてみました。 これが足りないじゃないか！という意見がある方はPRください。🙏🙏🙏 Note: この投稿は個人ブログ上の記事のQiitaへのクロスポストです。 技術関連資料 JPCERT/CC: インシデント調査のための攻撃ツール等の実行痕跡調査に関する報告書 (2017/12/05) JPCERT/CC: ログを活用したActive Directoryに対する攻撃の検知と対策 (2017/07/28) FIRST: FIRST Publications 2017 人材・組織関連資料 NCA: CSIRT人材の定義と確保(Ver.1.5) (2017/03/13) CSIRT に求められる役割と実現に必要な人材のスキル、育成についてまとめた資料 補足文

どう考えているか、というのを聞かれたので、記事に起こしておきます。個人の意見です。 Prettier を使う 気づけばコードの整形を人間がやる時代は終わりました。 細かいコーディングスタイルでレビューの時間を取るぐらいだったら、一貫した自動整形ルールを適用すべきです。 人によっては細かいこだわりがあって prettier の規則が気に食わないかもしれず、僕も最初はそうでしたが、Atomで保存する度に自動整形を走らせる prettier の強烈な開発体験によって、最終的にそれらのこだわりを全て捨てることが出来ました。 生産性を求めるなら、現時点では最優先で導入すべきものです。 React.createClass を使わない v16 で削除されたのでいわずもがな。 同様に、 createClass でしか使えなかった mixin 周辺機能も丸ごと deprecated です。 「可能な限りは」

@tsuyoshi です。先日行われた React Redux を用いた SPA 新規サービスを運用して得た知見と実装例　と言うイベントで使ったスライドをアップロードしました。 https://pook.life/ と言うサービスをReact Redux の SPA で運用して得た知見などを共有できればと思い。公開してみた次第です。 内容としては 利用しているライブラリや開発環境、開発フロー コードベースでの実装例の紹介 その他 SPA サービスを運用する上での構成や知見 など、実例や結果を交えながら説明しています。 何かの参考になれば幸いです。 スライドを貼ってますが、以下のgoogle スライドで見た方が、アニメーションとか動いて見やすいかもしれません。 https://docs.google.com/presentation/d/1TIEg5rYJ9vlWTSO6etwupBBO0e

Learn how to install some of your favorite services and platforms.

って海の向こうの人が言ってました。 私はjQueryさえあれば概ね生きていけるので全然知らないけど、 あなたは全部知ってるフロントエンドエンジニアなんだね。すごーい！ 以下はFront-End Developer Handbook 2017の第三部、Front-end Developer Toolsからリンクされているツールと、その簡単な紹介です。 ドキュメントツール Dash 150以上のライブラリのAPIリファレンスを検索できる。有料、Mac専用。 DevDocs 200以上のライブラリをオンラインで検索できる。無料。 Velocity 中身はDashと同じ。 有料、Windows専用。 Zeal 200以上略 無料のオフラインドキュメント。 SEOツール Keyword Tool 検索ワードを入れると関連キーワードを教えてくれる。 Google Webmasters Search C

XML と PHP のイケナイ関係 (セキュリティ的な意味で) -Introduction of XXE attack and XML Bomb with...Kousuke Ebihara

Vue.jsでSPAを開発する際、そのプロジェクト構成に迷うかたは多いようです。 今回はそんなかたのために、私が普段Vue.jsで開発するときの構成と、その構成化で開発するときのポイントを共有したいと思います。 追記 2019/12/05 追記 時代が大きく変わって求められる構成なども変化しました。 現在ではこの記事は参考にしないことをおすすめします 2018/01/30 追記 まずは Nuxt.js の利用の検討を Vue.js製のフロントエンド開発フレームワークである Nuxt.js がついに v1.0 のリリースを迎えました。SPA開発とSSR + SPAの開発両方を全面的にサポートしており、PWA対応などもプラグイン一つでできる上、ルーティングの自動生成やVuexストアのオートロードも可能と非常に強力なフレームワークとなっております。本格的なSPA開発を開始するときは、まずは Nu

文字や画像をぽんっと配置するだけで、そのコンテンツが映えるApple風の美しいグラデーションの背景49種類をまとめたスタイルシートを紹介します。 コピペで簡単に利用できるので、CSSのスニペットに登録しておくと便利ですね。 HUE.css HUE.css -GitHub HUE.cssを使うと、簡単に美しい背景を作りだすことができます。 Appleのプレゼンテーションスタイルで、Hueを背景に使用したものです。 画像: Free Promo Backdrops and Gradients HUE.cssは上記のHueの背景画像にインスパイアされたもので、これらの美しいグラデーションの背景がCSSで簡単に利用できます。 元の画像は上記ページの下部から、.sketch, .png形式でダウンロードできます。 HUE.cssの使い方 使い方は、簡単です。 「hue.css」をダウンロードし、外部

#LT駆動 29での発表スライド

主にアプリケーション開発者向けに、Linuxサーバ上の問題を調査するために、ウェブオペレーションエンジニアとして日常的にやっていることを紹介します。 とりあえず調べたことを羅列しているのではなく、本当に自分が現場で使っているものだけに情報を絞っています。 普段使っているけれども、アプリケーション開発者向きではないものはあえて省いています。 MySQLやNginxなど、個別のミドルウェアに限定したノウハウについては書いていません。 ログインしたらまず確認すること 他にログインしている人がいるか確認（w） サーバの稼働時間の確認 (uptime) プロセスツリーをみる (ps) NICやIPアドレスの確認 (ip) ファイルシステムの確認（df） 負荷状況確認 top iostat netstat / ss ログ調査 /var/log/messages or /var/log/syslog /