タグ

JavaScriptとWebに関するmasa8aurumのブックマーク (6)

  • 「え?それそんなかかるの?」簡単そうに見えて案外時間のかかるWebサイト上のJavaScriptあるある仕様8選 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    多! そのため、仕様の洗い出しが不十分になりがちになる、という点で厄介です。 ただし、今はSwiper, Slickといった優秀なプラグインがあります。こいつらは大抵の仕様は満たしてくれますので、積極的に使うと良いと思います。 参考 Swiper Slick フィットスクロール 厄介度:★★★ 紙芝居スクロールなどといったりもします。 海外のオサレなブランディングサイトや、ランディングページなんかでたまに見かけますね。 カッコイイ!うちもこんなんやりたい!と思うかもしれません。がしかし…… イメージ ハマりポイント スクロールに関する他の機能実装 これを実装する場合ブラウザにデフォで備わっているスクロールは使わず、別の方法(CSSのtransformとJSを組み合わせるなど)で実装することになるかと思います。 するとまず、スクロールイベントが取れないんですね。 そのため、スクロールに合わせ

    「え?それそんなかかるの?」簡単そうに見えて案外時間のかかるWebサイト上のJavaScriptあるある仕様8選 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • 静的HTMLのためのテンプレートエンジン - 共通部分が多いHTML | CodeGrid

    静的HTMLのためのテンプレートエンジン 第1回 共通部分が多いHTML 共通部分が多いHTMLを効率よく作るには、さまざまな手法が考えられます。このシリーズでは、テンプレートエンジンを使用してHTMLを生成するという手法を取り上げ、解説していきます。 はじめに ピクセルグリッドでは、企業サイトのリニューアル案件やWebアプリケーションのフロント側の制作が主になっています。中でも、リニューアル案件では、ページの量産は行わず、量産のもととなるページのHTMLを作成しています。量産は行いませんが、サイトの規模によっては、それなりの量のHTMLを作成していく必要があります。 最近関わった案件ではPC用40ページとSP用40ページ、合計80ページを作成する必要がありました。それらのHTMLには、ヘッダーやフッターであったり、サイドバーであったりと、共通する部分が多く存在します。筆者はその80ページ

    静的HTMLのためのテンプレートエンジン - 共通部分が多いHTML | CodeGrid
  • JavaScript実行時、「閲覧者の了解をいちいち得る」ページ登場 「Coinhiveより嫌」「悪夢」と話題

    JavaScript実行時、「閲覧者の了解をいちいち得る」ページ登場 「Coinhiveより嫌」「悪夢」と話題 サイト閲覧者に仮想通貨をマイニングしてもらうことで収益を得られるツール「Coinhive」を、明示することなくサイトに設置した複数のユーザーが、不正指令電磁的記録(ウイルス)取得・保管などの容疑で警察に摘発され、物議をかもしている。 Coinhiveは、サイトに専用のJavaScriptコードを埋め込むと、閲覧者のCPUパワーを使って仮想通貨を採掘する。今回摘発された1人・デザイナーの「モロ」(@moro_is)さんは警察に、「事前に許可(もしくは予感させること)なく他人のPCを動作させたらアウト」であり、明示なくCoinhiveを設置すれば違法との説明を受けたという。 だがCoinhiveに限らず、現代的なWebサイトにはほぼすべて、何らかのJavaScriptが使われている。

    JavaScript実行時、「閲覧者の了解をいちいち得る」ページ登場 「Coinhiveより嫌」「悪夢」と話題
    masa8aurum
    masa8aurum 2018/06/21
    皮肉がわかってないブコメも散見される。
  • サイト上で実行されるプログラムについて同意を確認するためのプログラム

    昨今、クライアントサイドでプログラムを実行するリスクが高まっています。 そこで、ページ上で実行されるプログラムについて閲覧者に同意を求めるプログラムをこのページに埋め込んでみました。 ひとえにクライアントサイドで実行されるプログラムといっても様々なものがあります。 例えばこのブログはWordpressで作られていますが、使用しているテーマは様々なJavaScriptライブラリを外部から読み込んでいますし、Google アドセンスのような広告を表示するためのプログラムや、Google アナリティクスのようなアクセス解析を行うためのプログラムも閲覧者に許可なく実行され、CPUやメモリ、電力といった閲覧者のリソースを消費します。 また、このブログに掲載しているデータビジュアライゼーションや地図コンテンツは、複雑な計算処理をクライアントサイドで行う為、非常に負荷の高いプログラムがユーザーサイドで実

    サイト上で実行されるプログラムについて同意を確認するためのプログラム
  • FOUT, FOIT, FOFT | CSS-Tricks

    Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. Remember FOUT? When using a custom font via @font-face, browsers used to display a fallback font in the font stack until the custom one loaded. This created a “Flash of Unstyled Text” — which was unsettling and could cause layout shifts. We worked on techniques for fighting it, for instance, making

    FOUT, FOIT, FOFT | CSS-Tricks
    masa8aurum
    masa8aurum 2018/06/15
    ブラウザ側レンダリングでたまにある「一瞬だけレンダリング前のタグが見える」現象について。 FOUT (Flash of Unstyled Text), FOIT (Flash of Invisible Text), FOFT (Flash of Faux Text)
  • 実装を引き受ける前に詰めておくべきWebフロントエンドの想定漏れチェックシート - Qiita

    Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? リキッドレイアウトのように幅が常に変動するレイアウトのデザインは、動かないカンプからは実際の挙動が読み取れず、デザイナーの意図が汲み取りきれないことが多い。また、複雑化するアニメーションの実装においても、カンプだけではコミュニケーションに不備が生まれてしまう。ほかにも、CMSを使った案件ではデザインカンプと実際のデータの間に齟齬がある可能性もある。 実装効率を高めてスケジュール通りに仕事を終わらせるには、とにかく事前に仕様を固めることが大事だ。ワイヤーフレームやデザインの途中の段階からなるべくデザイナーとコミュニケーションを重ね、想定外

    実装を引き受ける前に詰めておくべきWebフロントエンドの想定漏れチェックシート - Qiita
    masa8aurum
    masa8aurum 2017/02/13
    かなり役に立ちそう。
  • 1