2024-05-29うひょさんに聞く! React 19アップデートの勘所 #React19_Findy
![React 19を概念から理解する](https://cdn-ak-scissors.b.st-hatena.com/image/square/b05afa0ed4ce3f4b0966a6d7ed2ac4ba8a82db53/height=288;version=1;width=512/https%3A%2F%2Ffiles.speakerdeck.com%2Fpresentations%2F98422ddec1914f339c53f9c299f80ce6%2Fslide_0.jpg%3F30356136)
前置き 以下のような表示領域に複数スライドが表示されるスライダーを作りたいとき・・・ 要素のscrollLeftやtranslateXの値を操作することが多いのではないかと思います。 しかし、リキッド対応が必要な場合、このscrollLeftやtranslateXを用いた実装方法だと、 resize イベントのたびにスライドの width を再計算し直して、移動させる位置を調整する必要があるので少し手間がかかります。 そんなときにはscrollIntoViewを使うとサクッと実装できちゃいます。 もっと楽ができる。そう、 scrollIntoView ならね scrollIntoViewとは Element インターフェイスの scrollIntoView() メソッドは、scrollIntoView() が呼び出された要素がユーザーに見えるところまで、要素の親コンテナーをスクロールします
CodeZine編集部主催のウェビナー「CodeZine Night」の第一回発表資料 https://codezine.connpass.com/event/279012
今日は最新のJavaScriptスライダー[Splide]を紹介します。 まずは[Splide.js]の特徴をいくつかピックアップします。 jQueryなどのライブラリに依存せず単体で動く軽量(圧縮版で11kB)IE10以降対応ブレイクポイントの指定でレスポンシブ対応マウスのドラッグとタッチスワイプに対応SEOフレンドリースライダー、またはスライドショー、カルーセルに必要とされる要素はすべて揃っており、近年評価が高い[swiper.js]や[slick.js]などと肩を並べられるスペックです。 Splide → https://splidejs.com [Splide]本体ファイルをインストールSplide.jsをウェブサイトにインストールする方法は3つあります。 NPMでダウンロードCDNを利用Githubからダウンロード1.NPMの場合$ npm install @splidejs/s
スライダープラグインは何を使うべきか フロントエンドエンジニアのおとのです🙆♂️ Webサイトに以下のようなスライダーを埋め込む際、Web制作のコーダーやマークアップエンジニア、フロントエンドエンジニアは外部プラグインを利用して実装することが多いかと思われます。 jQueryが全盛期だった時には、Slickが多く利用されていた印象です。あらゆるオプションが用意されており、さまざまなカスタマイズが可能で、私もよく使ってきました。 また、IEのサポートが終了してからSwiperが利用されるようになった印象があります。こちらも複数のオプションがあり、比較的モダンなCSS(flex等)が組み込まれていることから、slickよりもカスタマイズが容易であるように思えます。jQueryに依存していないのも大きなメリットですね。 今までのスライダープラグインの問題 ただ、スライダープラグインは決して容
PHPerKaigi 2022 2022/04/10 10:40〜 Track A レギュラートーク(40分) PHP はバージョンを追う毎に型宣言、例外、表明、列挙型などの機能が大幅に強化され、堅牢なコードを書くための機能が充実してきました。それらの機能はどう使うと効果的なのでしょうか。 本講演では PHP 8.1 をベースにして、誤りを想定してチェックするのではなく、そもそも誤りにくい設計とはどのようなものか、つまり「予防」の観点を軸足に、堅牢なコードを導くための様々な設計のヒントをご紹介します。 Agenda - 型宣言 - 列挙型 - ドメインモデリング - 不変性と等価性 - 完全性 - レイヤーと責務
2021年度リクルート エンジニアコース新人研修の講義資料です
(PR) 本記事でご紹介している Slidev などのテクニックについて、2021/11/20(土) 開催の VS Code Conference Japan 2021 にてご紹介しました。YouTubeアーカイブや発表資料も是非ご参照ください。 Slidevとは Slidevはエンジニア向けプレゼンテーションツールです。 Markdownで記述した文書から美しいスライドを生成できます。 公式デモ とそのソースとなるMarkdown もご参照ください。 ドキュメントは以下にあります。 すぐに使えるサンプル 使用頻度の高いと思われる記法を含めたサンプルのMarkdownを以下に公開しています。 コピペするなどしてお使いください。詳細は後述します。 上記Markdownを使用しているスライドを以下にデプロイしています。 上記Markdownの記述内容と見比べていただけると分かりやすいかと思いま
# 参考資料 - イミュータブルデータモデル(入門編) - https://www.slideshare.net/kawasima/ss-40471672 - イミュータブルデータモデル(世代編) - https://www.slideshare.net/kawasima/ss-44958468 - スタースキーマ(基礎) - https://zenn.dev/pei0804/articles/star-schema-design - ディメンション・モデリング - https://zenn.dev/pei0804/articles/dimensional-modeling - 失敗から学ぶRDBの正しい歩き方 - https://amzn.to/3vfD5nJ
【VS Code + Marp】Markdownから爆速・自由自在なデザインで、プレゼンスライドを作るMarkdownVisualStudioCodeDraw.ioMarpvega TL;DR Visual Studio Code上で、Markdownから、こんな感じのデッキを生成できるようにします。 使用したファイル類は、GitHub tomo-makes/marp-styles にまとめました。 きっかけ 叩き台となる資料がなく、急ぎプレゼンをする機会があり、Marpで作成した 内輪では使っていたが、多くの目に触れるのは初めてで、もう少しデザインを調整したいと思った 今後も使いまわせるものを、スニペット、およびサンプルテーマ化しておこうと思い立った ついでにいろいろな図表の生成とデッキへの入れ方、必要そうな配色、素材のリンクをまとめておきたい Marpとは Marp: Markdown
カルーセルやスライダーをHTMLとCSSだけで実装するテクニックを紹介します。 Flexboxでの横一列配置をはじめ、scroll-snap-typeやscroll-behaviorでスライドのスクロールの挙動を調整でき、自動再生機能もCSSのみで実装できます。 CSS-Only Carousel 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 カルーセルをCSSのみで実装するテクニックのまとめ カルーセルやスライドを実装する時、HTMLとCSSだけでどれだけのものが実装できるか知るとあなたは驚くかもしれません。以前に紹介したHTMLとCSSで実装するスライダーを見てましょう。 実装のポイントは、下記の通りです。 スライダーの各パネルは、Flexboxで横一列に設定します。 パネルを1つだけ表示するにはオーバーフローを使用し、-
フロントエンドのパラダイムを参考にバックエンド開発を再考する / TypeScript による GraphQL バックエンド開発
2019/04/18に株式会社gumi様で行ったデザイン講義のスライドです。 デザインとは何か?デザイナーは何を考えてデザインを作っているのか? という話から、実際にデザインを評価・検討するための言葉を紹介しています。 この 作品 は クリエイティブ・コモンズ 表示 - 改変禁止 4.0 国際 ライセンスの下に提供されています。 第二回「UIデザインをはじめよう」はこちら https://speakerdeck.com/kinakobooster/uidezainwohazimeyou 第三回「今日からできるUXデザイン」はこちら https://speakerdeck.com/kinakobooster/jin-ri-karadekiruuxdezain ※訪問講座のご案内※ あなたの会社に話しに行きます。料金表はこちら https://xemono.life/#/workwith/co
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く