2022年に見かけたモダンなCSSの書き方を振り返る

2023/01/12 261 users CSS CSSプロパティ 従来 発信 表現

はじめに 2022年6月15日にInternet Explorerのサポートが終了しました。 (IEの完全無効化は2023年2月14日予定) そのこともあり2022年は今までとは異なるCSSプロパティを使用したモダンな実装例の記事や発信をよく見かけた気がします。 ただしこれらは従来の実装方法でもできる表現であったので、「この記事はあとでしっ... 続きを読む

実装例から見る React のテストの書き方 - Cybozu Inside Out | サイボウズエンジニアのブログ

2022/08/29 209 users kintone React フロリア デス フロントエンド

こんにちは！フロントエンドエキスパートチームの@nus3_です。 kintone のフロントエンド刷新プロジェクト（フロリア）では、品質を保ったまま開発を加速させるためにフロントエンドのテストを積極的に行っています。 今回はそんなフロントエンドのテストの実装例をいくつか紹介します。この記事がフロントエンドのテス... 続きを読む

「コード書きました、あとはよろしく」では優れたソフトウェアは生まれない　コンテナのスペシャリストが語る、運用性を損なう8つの実装例

2022/02/03 329 users コンテナ スペシャリスト ソフトウェア Advocate 登壇

今押さえておくべき知識をアップデートし、ノウハウを共有し、さらなるスキルアップを実現する場として開催されている、AWS で最も Developer に特化したカンファレンス「AWS Dev Day Online Japan」。ここでSr. Product Developer Advocate, Elastic Containersの原氏が登壇。続いて、運用性に優れたソフトウェアが重要... 続きを読む

これで完璧！CSS GridとFlexboxの違いと使い分け方、よく見かけるUIコンポーネントを実装するテクニックのまとめ | コリス

2020/06/25 351 users Flexbox コリス フォールバック UIコンポーネント

CSS GridとFlexboxのどちらを使った方がよいか悩んだことはありませんか？ CSS GridとFlexboxの違い、使い分け方、CSS Gridの実装例、Flexboxの実装例、CSS GridとFlexboxを組み合わせた実装例、フォールバックと古いブラウザのサポート方法を解説します。 Grid for layout, Flexbox for components by Ahmad Shadeed 下... 続きを読む

新しいHTMLタグportal、Portals機能で変わるWebの遷移体験！　CDS2019で紹介されたヤフーの実装例 #UIUX - Yahoo! JAPAN Tech Blog

2019/11/18 133 users UIUX Portals ヤフー Yahoo web

新しいHTMLタグportal、Portals機能で変わるWebの遷移体験！　CDS2019で紹介されたヤフーの実装例 #UIUX こんにちは。PayPayモールのエンジニア関と、Yahoo!ニュースのデザイナー萩野です。 皆様、突然ですがPortalsをご存じでしょうか。 Portalsとは、新しいHTML要素です。2019年11月11日〜12日にサンフランシスコで開... 続きを読む

スクウェア・エニックスの技術者が活用した「感情を揺さぶるメタAI」。二次元感情マップを使った実装例を解説【CEDEC2019】 | AUTOMATON

2019/09/29 364 users AUTOMATON スクウェア・エニックス 感情 解説 技術者

今月9月4日から6日にかけてパシフィコ横浜にて「CEDEC 2019」が開催された。CEDECはCESAが主催するゲームデベロッパー向けのメジャーカンファレンスで、3日間の開催期間中にはゲーム開発者や関連技術に関わる方向けにさまざまなセッションが開かれた。今回の記事では、株式会社スクウェア・エニックスのAIリサーチャーで... 続きを読む

「Vue.js」でWebページを作成できるフレームワーク「Nuxt.js」最初の一歩 (1/3)：CodeZine（コードジン）

2019/06/11 396 users CodeZine フレームワーク ユーザーインタフェイス

本連載では、Webページのユーザーインタフェイス（UI）フレームワーク「Vue.js」と、Vue.jsを利用してWebページを作成できるフレームワーク「Nuxt.js」の活用方法を、サンプルとともに紹介します。初回となる今回は、Vue.jsとNuxt.jsの概要を説明するとともに、プロジェクトの生成や実行、基本的な実装例を通して、Vue.j... 続きを読む

React Redux の SPA を運用して得られた知見と実装例、開発フローもあるよ！ - Qiita

2018/02/06 190 users Qiita Props SPA 知見 React Redux

Facebook が開発した UI ライブラリ 旧来の DOM 操作による状態管理を props や state で抽象化 パーツをコンポーネントごとに管理するのが得意 https://reactjs.org/ から、ライブデモを試せます。 SPAなどの複雑化する React のステート（状態）管理を、ルール（哲学）に従って書かせることで、フロントエンドの動きを追いやすくするためのライブラリ （*... 続きを読む

React Redux を用いた SPA 新規サービスを運用して得た知見と実装例 - ランサーズ（Lancers）エンジニアブログ

2017/11/15 176 users Lancers TSUYOSHI ランサーズ SPA 知見

@tsuyoshi です。先日行われた React Redux を用いた SPA 新規サービスを運用して得た知見と実装例 　と言うイベントで使ったスライドをアップロードしました。 https://pook.life/ と言うサービスをReact Redux の SPA で運用して得た知見などを共有できればと思い。公開してみた次第です。 内容としては 利用しているライブラリや開発環境、開発フロー コ... 続きを読む

これから強化学習を勉強する人のための「強化学習アルゴリズム・マップ」と、実装例まとめ - Qiita

2017/10/30 198 users 強化学習 マップ 例題 アルゴリズム 文献

これから強化学習を勉強したい人に向けて、「どんなアルゴリズムがあるのか」、「どの順番で勉強すれば良いのか」を示した強化学習アルゴリズムの「学習マップ」を作成しました。 さらに、各手法を実際にどう実装すれば良いのかを、簡単な例題を対象に実装しました。 本記事では、ひとつずつ解説します。 オレンジ枠の手法は、実装例を紹介します。 ※今回マップを作るにあたっては、以下の文献を参考にしました。 ● 速習 ... 続きを読む

Go言語と暗号技術（AESからTLS） | SOTA

2015/11/10 265 users Sota tcnksm AES マスタリングTCP TLS

最近マスタリングTCP/IP SSL/TLS編や暗号技術入門を読んでいた．理解を深めるためにGo言語で標準のcryptoパッケージを触り/実装を読みながら読んだ． cryptoパッケージは他の標準パッケージと同様に素晴らしい．Go言語にはどのような暗号化手法が実装されているのか実例を含めてざっとまとめる．なお本文に書ききれなかったものを含め全ての実装例はtcnksm/go-cryptoにある． 共... 続きを読む

MVVM パターンをより深く理解する - Yuta Watanabe's Blog

2014/09/30 141 users Yuta Watanabe's Blog MVVM net

2014-08-13 MVVM パターンをより深く理解する MVVM こんにちは。 マイクロソフトの渡辺です。 アプリケーションのデザインパターンの1つである MVVM ( Model - View - ViewModel )。既に多くの実装例や MVVM パターンを採用した Framework が公開されています。 from Wikkipedia また、MVVM パターンは、C#/.NET/XA... 続きを読む

ユニークな「ページの先頭へ」や「ページトップ」の実装例 10 | NxWorld

2014/04/18 141 users コーポレートサイト NxWorld 要素 イラスト 先頭

そのページの先頭へ移動する要素として設置しているところも多い「ページの先頭へ」や「ページトップ」がユニークなサイトのショーケースです。コーポレートサイトのような堅めのデザインをする場合は凝り過ぎると浮いてしまう場合があるのでシンプルなものを使用することが多いと思いますが、ちょっとしたキャンペーンページやイラストをふんだんに使っているようなサイトであれば、こういった細かいところにも動きを付けてあげる... 続きを読む

本当に怖いパフォーマンスが悪い実装 #phpcon2013

2013/09/17 463 users phpcon2013 overview アジェンダ 土曜日

本当に怖いパフォーマンスが悪い実装 #phpcon2013 Presentation Transcript 本当に恐い パフォーマンスが悪い実装 Masakazu Nagaya 2013年09月14日（土曜日） Overview • 大規模サイトでパフォーマンスを著しく劣 化させる非効率な実装例や、その改善例 を紹介します。 2 アジェンダ • はじめに • パフォーマンスが悪い実装の紹介 • 失... 続きを読む

ASCII.jp：Facebook風の無限スクロールが作れるinfinite scroll｜こうめの“これから使える”jQueryプラグイン

2013/08/23 110 users Infinite Scroll jQuery スクロー 手間

圧倒的な人気を誇るJavaScriptのライブラリー「jQuery」。サイトに効果をあたえるプラグインが多数あることが魅力ですが、そのプラグインを探すことがWeb制作者の手間になっています。本連載では、「こうめ」さんこと大竹孔明さんがおすすめのプラグインと実装方法、実装例を紹介します。（編集部） 今回紹介するプラグイン infinite scroll 「infinite scroll」は、スクロー... 続きを読む

型システム入門 プログラミング言語と型の理論 | オーム社eStore(β)

2013/03/29 130 users オーム社eStore TAPL プログラマー 理論 本書

型システムとは、プログラミング言語の安全性や効率を高めるうえで重要な理論・手法です。本書は、その型システムについて基礎的な話題を網羅し、実装例を交えて丁寧に解説したThe MIT Press発行の解説書“Types And Programming Languages”（TAPL）を翻訳したものです。言語設計者や学生だけでなく、静的型付言語を深く理解して活用したいプログラマーにとっても貴重な情報とな... 続きを読む

[CSS]コピペで簡単にCSS3アニメーションを実装できるライブラリ・ツールのまとめ | コリス

2012/11/21 375 users コリス トゥイーン CSS イージング コピペ

CSS3アニメーションで、背景を変えたり、ボタンをバウンドさせたり、画像をフェードやフリップで表示したりなどをコピペで実装できるライブラリ、緩急をともなったイージングやトゥイーンの微調整を設定できるオンラインツールをまとめて紹介します。 animatable CSS3アニメーションの基本から、かっこいい応用までコピペで簡単に実装できます。 詳細：CSS3アニメーションの基本的な実装例のまとめ An... 続きを読む

CSS3アニメーションの基本的な実装例のまとめ | コリス

2011/11/03 317 users アニ Firefox CSS Safari Chrome

CSSのプロパティ一つに対して、値を二つ（開始と終了）変更し、さまざまなCSS3アニメーションの基本的な実装例を楽しめるデモサイトを紹介します。 デモページを楽しむには、Chrome, Safariで閲覧ください。 Firefoxでは一部動作しません。 アニメーションのスタートは、2つあります。 マウスオーバーで一つ一つのアニメーションがスタート アニメーションが全部同時にスタート 全部同時にアニ... 続きを読む

[JS]多彩なエフェクトが面白い、ボックスにパネルをスライド・フェード表示するスクリプト -Mosaic | コリス

2011/04/19 119 users Mosaic circle コリス フェード キャプチャ

デモページ ダイナミックな斜め方向のスライドのアニメーションで表示 Mosaicの実装 HTML: circle 上記の一番上のキャプチャ、「circle」の実装例です。   続きを読む

2010年総まとめ：CSSの実用的なテクニック集 | コリス

2011/01/05 618 users テクニック コリス サンプル コード CSS3

当サイトで紹介したCSSの記事から、特に実用的なものをまとめました。 CSS3で何ができるの？　という時にみておきたいサイト集 ベーシックなものから実践的なテクニックまで、サンプルやコードなど実装例が掲載されているサイト [...] 続きを読む

[CSS]アイデア満載のスタイルシートのテクニック集 | コリス

2008/10/27 259 users コリス CSS Six Revisions アイデア満載

Six Revisionsから、アイデア満載のスタイルシートの実装例とテクニックをいくつか紹介します。 Innovative (and Experimental) CSS Examples and Techniques 続きを読む

[CSS]大きい画像を背景にする時のスタイルシートの３つの実装例 | コリス

2008/10/20 225 users Background color 実装 エントリー コリス

Web Designer Wallのエントリーから、大きい画像を背景に使用する時のスタイルシートの３つの実装例を紹介します。 How to: CSS Large Background 一枚の画像を使用する方法 demo 実装のポイントは、使用する背景画像（background image）の端と背景色（background color）に同じ色（#f8f7e5）を使用します。 サンプルコード bo... 続きを読む

[を] Dynamic Programming による類似文字列マッチの実装例

2007/01/22 119 users Dynamic Programming perl 解説

Dynamic Programming による類似文字列マッチの実装例 2007-01-22-4 [Programming][Algorithm] 「Modern Information Retrieval」(8.6.1 p.216) での Dynamic Programming (DP) の解説のところのアルゴリズムを 素直に Perl で実装したみた。 さらにマッチ箇所取り出しロジックも実装し... 続きを読む