JSer.info #507 - 次の記事ではReact 17 RCからサポートされている新しいJSXの変換について紹介されています。 Introducing the New JSX Transform – React Blog 新しいJSXの変換では、JSXを変換するツール(BabelやTypeScript)、JSXを扱うライブラリ(ReactやPreact)のアップデートが必要です。 一方で、JSXの構文は何も変わらないため、あくまで関係するのは変換ツールとライブラリ側の実装です。 React 0.12の際に導入されたJSXの変換仕様の中には、ライブラリ側の実装を複雑化させる仕様や現在では不要な仕組みも含まれています。 新しいJSXの変換の仕様では、その仕様の単純化やそれにともなうパフォーマンスの改善が主な目的です。 新しいJSXの変換の仕様については次のRFCにまとめられています。
JSer.info #506 - Moment.jsのウェブサイトにProject Statusが追加されています。 Moment.js | Docs Moment.jsに新しい機能の追加などはしないメンテンスモードであることが書かれています。 互換性保ちつつ新しい機能や仕組みを入れるのは難しい状態であるため、別のライブラリの利用を推奨しています。 代替となるライブラリとしてLuxon、Day.js、js-joda、date-fnsについて紹介されています。 また、Intl APIや現在策定中のTemporalについても書かれています。 このプロジェクトステータスの明示の発端は、Chrome Dev ToolsのLighthouseにmoment.js利用の警告を表示したことに起因しています。 If JavaScript libraries are proving costly, repl
HTMLやCSSやJavaScriptなどのコードをかっこよく魅力的に見せるために使用できるツールを紹介します。 プレゼンなどでコードを人に見せる時をはじめ、TwitterやFacebookやInstagram用にコードの画像を最適化して見せることもできます。 6 Awesome Ways To Present Your Code 🔥 by Niharika Singh ⛓ 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Carbon Codeimg.io Pastie Rust Playground Silicon Polacode はじめに Web制作者はいつか、コードを発表する時がくるかもしれません。プレゼン、ツイート、ブログ、あるいはスニペットを人に見せる時です。 あなたのコードを素敵に見せるために使用できる
Josh.jsはAnimate.cssを使用してスクロールに応じてコンテンツにアニメーションエフェクトを追加できる軽量スクリプトです 他のJSライブラリを必要としない非依存型で、アニメーションにはAnimate.cssを使用するため2kbと非常に軽量です 使い方も簡単です <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.0/animate.min.css" /> <script src="https://cdn.jsdelivr.net/npm/joshjs@1.0.0/dist/josh.min.js"></script> Animate.cssとJosh.jsを読み込みます const josh = new Josh({ initClass: "foo", anima
このリポジトリ でやったこと。 やろうとしたこと tailwind.css は Utility First と銘打った CSS フレームワークで、コンポーネント化を前提としたモダンフレームワークと相性がいいです。今回は next.js の amp-mode で tailwind を使おうとしてみました。 Tailwind CSS - A Utility-First CSS Framework for Rapidly Building Custom Designs 問題 前提として、 amp には inline css の容量制限があり、75kb を超えると AMP と認識されなくなります。 tailwind はビルドして使うのが前提のフレームワークですが、全部入りの tailwind.min.css は 1.3 M あります。これでは到底、75 kb に収まりません。 AMP の CSS
モダンCSSの機能を使用して、フォームのラジオボタン・チェックボックス・トグルスイッチなどを独自のスタイルで実装するテクニックを紹介します。以前まではdivやspanなど追加のHTMLやJavaScriptが必要でしたが、一切必要ありません。 こういった実装はできないものと思っていたので、驚きました。 Custom Styling Form Inputs With Modern CSS Features 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 モダンCSSの機能を使用した入力フォーム 実装は以前より簡単になりました HTMLは非常にシンプル CSSで入力フォームのスタイルを定義 入力フォームの完成 モダンCSSの機能を使用した入力フォーム 最近ではセマンティックとアクセシビリティの両方を維持したまま、独自のチェックボック
はじめに HTML＋CSSコーディングにおける制作者の思考や判断、アプローチ、コード化に至るまでの流れなどを分解し、コードの状態なども含めてそれぞれを短い言葉で言語化しました。 以下のような効果が期待できます。 HTMLとCSSを使っておこなってきた事を客観視・再認識できる 始原的な動機を把握することで、手法を別の視点で捉えられるようになる 認識合わせや熟練度確認に利用し、制作時のコミュニケーションを円滑にする 場合によっては、ぼんやりと捉えていたことや、詰まりやすかったポイントなどがハッキリと認識できるようになるかもしれません。 言語化の概要 まずは、全体像が分かる概要図を掲載します。 この記事は、以下のステップと各項目について順に説明するものになります。 前提事項・環境について 言語化するにあたって前提となる考え方や環境について記載します。 HTMLとCSSの役割 HTML → データ
ここ数年で、「デザインシステム」はウェブ開発やデザインのコミュニティでとても人気の話題になりました。そして「コンポーネント」として定義される一連のデザイン成果物を開発・メンテナンスするために、StyleguidistやStorybookといったツールが多くのプロジェクトで一般的に使われています。このプロセスはデザインシステムという概念の一部として、コンポーネント駆動開発（Component Driven Development）と定義することができるでしょう。 さて、コンポーネント駆動開発にまつわる資料のほとんどは、ReactやVue、Angularといった、フロントエンドのビューのためのメジャーなライブラリを利用することについてのものです。しかしもっとトラディショナルな技術スタックの場合はどうすればいいでしょう？ 例えば私たちスタンダードデザインユニットでは、静的なHTMLとCSSのアセ
クライアント側の検証は最初のチェックであり、ユーザーの使い勝手を良くするために重要な機能ですクライアント側で不当なデータを捕捉することで、ユーザーはすぐに修正できます。 もしも無効なデータがサーバーに送られてから拒否された場合、サーバーへの往復とクライアント側に戻ってユーザーにデータを修正するように指示することになり、かなり時間を浪費します。 しかし、クライアント側の検証はセキュリティ対策とは考えられません。アプリは常にサーバー側でもクライアント側と同様に送信されたデータのセキュリティをチェックしてください。なぜならクライアント側の検証は容易に回避することができて、悪意のユーザーは簡単に、サーバーへ不正なデータを送信できます。 フォーム検証とは何か 有名なサイトの登録フォームに行き、データを求められている書式で入力しないと、フィードバックがあることに気づくでしょう。 次のようなメッセージが
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2021年1月. * Some parts of this feature may have varying levels of support. Learn more See full compatibility Report feedback preload は <link> 要素の rel 属性の値で、その HTML の <head> の中で読み取りリクエストを宣言し、ページのライフサイクルの早期の、ブラウザーの主なレンダリング機構が起動する前に読み取りを始めたい、すぐに必要なリソースを指定することができます。これにより、そのリソ
最近のWebページやスマホアプリのUIでよく使用されるさまざまなコンポーネントをCSSで静的に、Vue.jsやReact.jsやプレーンのJavaScriptで動的に実装するためのコードをまとめたTailwind Starter Kitを紹介します。 CSSは分かるけど、Vue.jsやReact.jsは苦手という人にもよいと思います。 Tailwind Starter Kit Tailwind Starter Kit -GitHub Tailwind Starter Kitの特徴 Tailwind Starter Kitのデモ Tailwind Starter Kitの使い方 Tailwind Starter Kitの特徴 Tailwind Starter Kitは、WebページやスマホアプリのUIに使用するさまざまな静的・動的コンポーネントをTailwindCSSを使って簡単に実装できま
送信フォームを押してしまって後悔した経験はないでしょうか。Gmailなどでは送信後にキャンセルできる機能が追加されました。押す前に熟考したはずなのに、押すとアラが見つかる、なんてことはよくあります。 今回紹介するSweetconfirm.jsは送信完了するまでに少し猶予をくれる、そんなライブラリです。 Sweetconfirm.jsの使い方 押すのを途中でやめるとキャンセルされます。 しばらく押し続けていると送信完了します。 Sweetconfirm.jsは一度押すだけでは送信されず、ボタンを押し続けないといけません。その仕組みが通常とは違うので、説明をきちんとしないと使い方に戸惑う人もいそうです。とはいえミスを減らすための仕組みとして面白いです。 Sweetconfirm.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 koddr/sweetc
今回は関西の Vue.js / Nuxt.js 関連のイベントを開催するコミュニティ v-kansai 様が主催するmeetupに参加してきました 西田@大阪です 今回は関西の Vue.js / Nuxt.js 関連のイベントを開催するコミュニティ v-kansai 様が主催する meetupに参加してきました！ Vue.Draggable で手軽にリストを ドラッグ&ドロップで並び替え Torello のようなアプリを作る時に使える Vue.draggable バインドしておけば、リアクティブに並び替え可能 Soratable.jsの機能を利用している 並び替えが容易 導入と使い方 v-model ディレクティブで配列を指定 D & Dして並び替えが行われたら、dataも変更される groupを合わせると複数列にまたがるの要素の入れ替えも可能 タグはデフォルト div だが ul にも変
Blnq StudioはCodepenのようにブラウザ上でコードを書いて実行テストを行えるWebアプリです 同じようにHTML、CSS、JavaScriptの動作テストが可能なのですが、少し違う点はJSONタブがある点、スマホモードなどモニタサイズをいつでも変更できる点、ルーラー機能があったりブラウザのインスペクタライクなモードがある点、パフォーマンスチェックを行える点、ローカルのものも含む任意のフォントを手軽に読み込める点でしょうか エディターペインにミニマップを追加できるのも地味に便利な気がしました デザインも無駄がなくスッキリしたUIで、プロトタイプを作ってクライアントに見せるのにも使えるよ、との事です 逆に、CodepenにあってBlnqにない機能もいっぱいあるので別用途のアプリとして考えると良いかもですね。EmbedとかSASS、Pugなどで書くことも出来ないしコメントやシェアな
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> なんて便利だこと。 しかし、Bootstrapを使うには他にも方法はある。それは以下のリンクにある通りだ。 https://qiita.com/rhistoba/items/f724dae231d7e28bf477 つまり、railsにBootstrapをインストールしてしまう方法である。 基本的には、リンクの記事通りに手順を踏めばインストールできるのであるが、超初心者の僕
pastak.iconPasta-K @ Kyoto.js 17 こんにちは 誰 京都大学工学部情報学科7回生 株式会社はてな アルバイト TypeScript Nota Inc Gyazo開発チーム アルバイト JavaScript / React / Ruby on Rails / Browser Extension ビール仕入れ業 / ビールサーバー運用エンジニア 趣味: ビール🍻 今日のトークテーマ 先月ブログに書いた ウェブページの表示を遅くなくしたい時の道標 - ぱすたけ日記 の話をします 主にウェブページの表示に関するパフォーマンスの話 ウェブページのパフォーマンス 阿部寛のホームページは高速 素朴なHTML CSS無し テーブルレイアウト ウェブアプリケーションを作っていると、素朴だったページも雪だるま式に色んなものがくっついてくる 画像 JS/CSS あらゆるモジュール
JavaScriptの勉強に必要な事前知識です。追求すると底がありませんが、最低限必要な内容をまとめました。 Webページが表示されるまでの流れ ブラウザの役割 JavaScriptの役割 Webサイトが表示されるまで アドレスバーにURLを入力し、画面上にWebページが表示されるまでの流れです。通信でどのようなデータがやり取りされているか、確認しておきます。 図解 ブラウザ 上図のクライアントに該当するアプリケーションがブラウザです。動作の結果は「Webページを表示する」ですが、内部では様々なことが行われています。 ブラウザの構成については、意外とネット上の情報が少なかったです。 自分は下記サイトを参考にしました。 ブラウザの仕組み: 最新ウェブブラウザの内部構造 ウェブサイトが表示されるまでにブラウザはどういった仕事を行っているのか？ 明確に構造が分かれているかは分かりませんが、少なく
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
