知っておくと便利！ CSSだけで要素がスクロールできるかどうかを検出する方法
CSSだけで要素がスクロールできるかどうかを検出する方法を紹介します。 先日紹介したスクロール駆動アニメーション（Scroll-Driven Animations）はスクロール可能なオーバーフローがある場合にのみアクティブになるため、要素がスクロール可能かも検出することができます。 Solved by CSS Scroll-Driven Animations: Detect if an element can scroll or not by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSで要素がスクロールできるかどうかを検出する アクティブと非アクティブなスクロール駆動アニメーション CSSの変数を追加して、スクロール検出機能を作成 実装でより使いやすくする 実装例 はじめに スクロール駆動ア
【Node】JavaScriptでコレクション操作を用いる理由
この記事は？ 著者は一貫してJavaScript(TypeScript) を用いてフロントエンド、バックエンドの開発を行なってきたので、言語の特性と実装する上でのアンチパターンが見えてくるようになりました。この記事では、for文を使わない代替案であるコレクション操作について示していきたいと思います。 コレクション操作とforとの違い ※) コレクション操作の概念に入門したい人向けの内容です。適宜読み飛ばしてください コレクション操作とは、mapやfilterなど複数のデータを持つコレクション(配列やリスト、マップなど)に対して行う操作を指します。for文との違いとしてまず初めに押さえておくべきことは、for文は命令的である一方、コレクション操作は宣言的であるということです。for文では、操作をどう行うか？に焦点を当て具体的に記述しますが、mapやfilterは関数名で何を行うか宣言しており
ニコニコ動画代表の「ツイッターのようなＳＮＳは作りたくない」発言を調べたら本当だった話 - Qiita
Xこと旧Twitterが今後どうなるのか全く分からない状況ですが、2、3カ月ぐらい前にニコニコ動画の代表の人がこんなことを言いました。要は「ツイッターみたいなSNSを作りたくない」という話です。 一応、SNSを作って閉鎖させたことがあるのですが、この発言は本当です。 で、何故作ってと言われたら断りたくなるほど面倒くさい仕組みなのか解説していきます。 (最も、「何故作りたくないのか」と分かったとしても、この発言は批判されるでしょうし、私自身批判的な目で見てますが、そこは横に置いておくとします。） 実はツイッターのタイムラインの仕組みは非常にサーバー負担が大きい。 SNSを実際に作って分かったのですが、実はツイッターのタイムラインの仕組みは非常にサーバー負担が大きいのです。 というのも、ネット掲示板で例えるなら「ユーザー一人につき一回の書き込みを平均して千個ぐらいの掲示板に一度に書き込む」とい
Twitterはタイムラインをどうやってキャッシュしているか - Qiita
Twitterの内部構造を読解してみる 前口上 Twitterのようなマイクロブログサービスでは短時間で書き込みも多く、特にタイムライン周りは単にRDBのデータを出し入れるするだけではスケールしなくなります。 インターネット上に断片ながらTwitterの中の人がアーキテクチャについて解説した記事や動画がいくつか落ちていたので、Twitterがタイムラインをどうやってキャッシュしているかについてまとめてみたいと思います(推測を含みます)。 Twitterのテーブル構造 単純なTwitterのテーブル定義をRDBで定義すると以下のようになると思います。 tweets ツイート id user_id contents tweet_at followers フォロワー source_user_id destination_user_id users ユーザー id user_name timeli
外資系企業で学んだ「何が起こりますか？対象者は誰ですか？何をしなければなりませんか？」スタイルのアナウンスメール - give IT a try
はじめに 僕の前職は外資系企業でした。 その当時、アメリカ本社からときどき送られてきた社内アナウンスメールのフォーマットがなかなか良かったので、今でもときどき使っています。 特に、このフォーマットは何かをお知らせするだけでなく、社員に何かしらのアクションをお願いするときに有用です。 というわけで、このエントリではこのメールフォーマット（記述スタイル）を紹介します。 「何が起こりますか？対象者は誰ですか？何をしなければなりませんか？」スタイルのアナウンスメールの記述例 どんなフォーマットなのかというと、「何が起こりますか？対象者は誰ですか？何をしなければなりませんか？」を見出しに書いて、本文を埋めていくフォーマットです。 たとえばこんな感じです。 社員各位 ○○○○○の計画メンテナンスについてお知らせします。 以下の内容を確認してください。 何が起こりますか？ 2020年1月11日（土）15
スタートアップを「支える側」になる、という選択
こんにちは。株式会社Gaji-Labo で DevHR をしている関根です。エンジニア採用や組織作りを担当しています。 Gaji-Labo は、フロントエンド開発と UI デザインの会社なのですが、急成長するスタートアップにチームメンバーの一員となって参画する支援をしています。 一般的な「受託」で働くのではなく、スタートアップで活躍するのでもなく、スタートアップで働く人たちを「支える仕事」が向いている人っていると思うんですが、そんな人たちが集まっているのが弊社 Gaji-Labo です。 今日は、スタートアップを「支える側の仕事」というのはどういうものかを書いていきます。 この記事で「面白い会社だなー」とか「こんなキャリアもあるのか」と私たちを知ってもらえるだけでも嬉しいですが、あわよくば「自分も支える側が向いてる」と感じたフロントエンドエンジニアや UIデザイナーのみなさんとカジュアル面
Instagramはどうやって3人のエンジニアで1400万人にサービスを提供できるシステムを組み上げたのか
Instagramは2010年10月にサービスを開始後、2011年12月までのわずか1年間で1400万人に利用されるほど巨大なサービスに成長しました。こうしたスケールに対応できるシステムを組み上げたのはたった3人のエンジニアだったとのことで、どのように少人数でスケールするシステムを組み上げたのかについて、エキスパートエンジニアのレオナルド・クリードさんが解説しています。 How Instagram scaled to 14 million users with only 3 engineers https://engineercodex.substack.com/p/how-instagram-scaled-to-14-million レオナルド・クリードさんは、Instagramが3人のエンジニアで安定して巨大なサービスを提供できた理由として、下記の3つの原則を守ったからだと述べています
ソフトウェア開発の真の問題点は、コードを書くことではなく、問題の複雑さの管理にある - YAMDAS現更新履歴
www.oreilly.com オライリー・メディアのコンテンツ戦略部門のバイスプレジデントであるマイク・ルキダスの文章だが、彼が数週間前、「コードを書くことが問題なのではない。複雑さをコントロールすることが問題なのだ」というツイートを見かけた話から始まる。彼はこれに感心したようで、これから何度も引用すると思うので、誰のツイートか思い出せればいいのにと書いている（ご存じの方は彼にご一報を）。 件のツイートは、プログラミング言語の構文の詳細や API が持つ多くの関数を覚えることは重要じゃなくて、解決しようとしている問題の複雑さを理解し、管理することこそが重要だと言ってるわけですね。 これは皆、覚えがある話だろう。アプリケーションやツールの多くは、最初はシンプルである。しかも、それでやりたいことの80％、いやもしかしたら90％をやれている。でも、それじゃ十分ではないと、バージョン1.1でいく
Null vs. Undefined - TypeScript Deep Dive 日本語版
コピー/// `foo.bar == undefined` のようなコードを書いたときに、何が起きるか想像してみてください: console.log(undefined == undefined); // true console.log(null == undefined); // true // このようなチェックをすれば、falsyな値について心配する必要はありません console.log(0 == undefined); // false console.log('' == undefined); // false console.log(false == undefined); // false
TypeScriptのサポートが強化されたVue3.3の新機能とは？──PropsとEmitsに関する新機能を解説【前編】
Vue3、すなわち、Vue.jsのバージョン3がリリースされたのが3年前の2020年9月です。そのVue3が、Vueプロジェクトのデフォルトになったのが、2022年2月です。その時点でのVue本体のバージョンは3.2です。それから1年以上が経過した2023年5月11日に、Vue3.3がリリースされました。本稿では、前編と後編の2回にわたって、このVue3.3での新機能をまとめて紹介します。前編である今回は、PropsとEmitsに関する新機能を紹介します。 TypeScriptとの親和性を高めるアップデート Vue3.3によって導入された新機能を紹介する前に、このアップデートの趣旨をまず紹介しておこうと思います。 Vue3.3アップデートの趣旨 Vue.jsの開発者であるEvan Youによると、3.3にアップデートを行うにあたって、その一番中心に据えたのが、TypeScriptによるコー
ReactのコンポーネントからStorybookのファイルを自動生成してみた
はじめに フロントエンドのプロジェクトでは、UIコンポーネントのカタログとしてStorybookが用いられるケースがあると思います。 StorybookはコンポーネントベースのUI開発の助けとなるツールで、Reactのコンポーネントを独立して視覚的に確認できます。 しかしながら繁忙時や規模の大きいプロジェクトになると、メンバーの増減や開発工数等でStorybookの開発コストが高く感じられる状況があると思います。 そこで本記事では、なるべくStorybookの開発コストを軽減して、Storybookのファイルを自動生成する仕組みを考案してみました。 Storybookとは Storybookは、UIコンポーネントを独立して開発・表示するためのツールです。 React, Vue, Angularなど、様々なフレームワークに対応しており、各コンポーネントの異なる状態やバリエーションを一覧で見る
モジュラモノリスにおけるトランザクション設計の考え方 / transaction design on modular monolith
モジュラモノリスにおいてトランザクションはどうあるべきなのかについて整理している資料が少ない気付きがあったので「簡易的に」整理しました
Advantages of Pinia vs Vuex | Vue Mastery
What is Pinia? By now, you’ve probably heard that Pinia is the officially recognized state management library for Vue.js. Evan You even referred to it as the de facto Vuex 5. But do you know why you should be using Pinia over Vuex and how to use Pinia? In this article, we’ll explain why, in the fight between Vuex vs Pinia, Pinia is the clear winner for your Vue app’s state management. But first, l
styled-components: API Reference
CSS for the <Component> AgeStyling your way with speed, strong typing, and flexibility. const Button = styled.a<{ $primary?: boolean; }>` --accent-color: white; /* This renders the buttons above... Edit me! */ background: transparent; border-radius: 3px; border: 1px solid var(--accent-color); color: var(--accent-color); display: inline-block; margin: 0.5rem 1rem; padding: 0.5rem 0; transition: all
Turbo 8 is dropping TypeScript
By all accounts, TypeScript has been a big success for Microsoft. I've seen loads of people sparkle with joy from dousing JavaScript with explicit types that can be checked by a compiler. But I've never been a fan. Not after giving it five minutes, not after giving it five years. So it's with great pleasure that I can announce we're dropping TypeScript from the next big release of Turbo 8. The fac
静的解析ツールで生まれたSQLインジェクション | ドクセル
自己紹介 小川 経歴 ~2009: Webアプリ開発のバイト&業務委託 2009~2019: 三菱重工 ｲｯﾄ何も関係ない。野良のパソコンの大先生してた 2019~いま: root ip B2BのSaaS作ってます PHPとVue分かる人来て！！１ 面白かった脆弱性 - CVE-2023-22727 PHPフレームワーク CakePHP 4 のSQLインジェクション脆弱性 ORM limit(), offset() でSQLi CVSS v3 9.8 2023/01に修正済み CakePHP Laravelの次に使用率高いフレームワーク(多分) 割と使いやすいからお勧め 一般にコード品質が上がる静的解析ツールの使用で逆に発生
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript入力コントロール「InputManJS」に待望のリッチテキストエディタが登場！ Webフォームで差を付けよう
音響界隈で有名な絡まないケーブルの巻き方「8の字巻き」の原理が意外と知られてないから動画で説明してみた→長年の疑問が晴れてスッキリ
操作履歴/時点指定アクセスの実現 - BiTemporal Data Model の実践 / Implementing command history and temporal access
LLMのプロンプトを効率的に検証できるTypescriptライブラリ "PrompTest" の紹介
