JSer.info 400回記念イベントを開催しました - JSer.info
2018年9月22日(土)にJSer.info 400回記念イベントを開催しました。 無事JSer.info 400回記念イベントを行うことができました！ JSer.info 400回記念イベント - connpass 2018年9月22日(土)に JSer.info 400回目記念イベントを開催します - JSer.info JSer.info 400回記念イベント - Togetter 今回は「憶測しないで議論しよう」というテーマで開催しました。 このテーマについてはJSer.info 400回記念イベントというスライドでも話をしていますが、参加者全員が何か得られるものがあればいいなというPositive Sumの考え方で設定しました。 参加して何か得られたものがあれば幸いです。 本日はご参加いただきありがとうございました！ Special Thanks 会場: @koba04 サイボ
エンジニア/デザイナー向けの会社紹介資料を公開しました - 一休.com Developers Blog
一休で働くことに興味を持っていただくために、一休のサービスやビジネス、開発組織がどうなっているかを紹介する資料を公開しました。 もし興味を持っていただけたら、いつでも話を聞きに来てください！ www.ikyu.co.jp おまけ 先日、弊社のCSSエンジニアの募集がちょっとだけ話題になっていました。 "CSSエンジニア"って求人初めて見た… 「近年のCSSをはじめとするWebフロントエンドの新しい技術、ツール、テクニックを前提とした次世代のWebデザインを提案・実現する役割」 "CSSエンジニア：株式会社一休：キャリア採用" https://t.co/l3HkXFcAs0— azu (@azu_re) September 4, 2018 一休、フロントエンドとは別にCSSエンジニアとかPython分けてて、すてき。https://t.co/DtIP3G7Nxv pic.twitter.co
Webpagetestから始める継続的パフォーマンス改善
autoscale: true Webpagetestから始める継続的 パフォーマンス改善 ページロードタイム編 :hourglass: 自己紹介 Name : azu Twitter : @azu_re Website: Web scratch, JSer.info Create: textlint, Almin アジェンダ パフォーマンス改善は指標を決めて行わないと迷子になる パフォーマンス改善を行うには継続的な計測を行う 今回はページロードについて、ランタイムは範囲外 パフォーマンス改善のアプローチ 継続的なパフォーマンス計測とリグレッションの検知 ^ 目的はパフォーマンス改善には計測が必要という事実を知ること ^ パフォーマンス計測は継続的に行う必要がある ^ パフォーマンス改善は何を目的、指標にして改善するかを決めないと迷子になる ^ 目的をもって継続的にパフォーマンス改善を行い
「端っこ」におけるスクロールの挙動を制御する overscroll-behavior プロパティ | ダーシマ・ヱンヂニヤリング
※この記事の内容は、まだブラウザに実装されていない内容を含みます。また、勧告前の仕様について言及しているため、最新の仕様では変更になっている場合があります。 要約 overscroll-behavior プロパティを使うと、スクロール境界（端っこ）におけるブラウザデフォルトの挙動を上書きすることができます。例えば、ブラウザが持っている「下方向に引っ張ってリロード」する機能や、スクロールが親要素に伝わる「スクロールチェーン」の挙動を無効化することができます。 はじめに 主にタッチデバイスにおいて、無効化したいのにできない、スワイプ操作やスクロールにまつわる困った挙動が３種類ありました。 「もうこれ以上スクロールができない」ことを表すインタラクション スクロールが親に伝播してしまう「スクロールチェーン」 左右へのスワイプで行う履歴の前後ナビゲーション 「もうこれ以上スクロールができない」ことを
scroll-snapとscroll-behaviorで実現できることを解説するよ | ゆめいろデザイン｜ブランドマネージャー・Web/UX/UIデザイナー・デザインコンサルタント ヒガシナオヤ
Web制作 記事公開日：2018/02/19 「CSS Scroll Snap Module」とscroll-behaviorというプロパティで何ができるかという声を聞きました。使い方がちゃんと用意されているので解説します。 scroll-behaviorプロパティは、CSS Object Model (CSSOM)という現在策定されている新しいCSSプロパティの1つになります。CSS Object Model (CSSOM)は、2016 年3月17日にW3CのWorking Draftとなっています。 CSS Object Model (CSSOM) のscroll-behaviorプロパティでできることは、一言で言うと、「スムーススクロールがCSSでできる」ということです。 従来はページ内リンクをどうさせると、アニメーションも何もなくいきなり移動してしまいました。この挙動はユーザーが戸
実際に週1日で何やってるの？Findyで副業フロントエンドエンジニアに実際にお願いしたタスク達 - Findyブログ
実際に週1日で何やってるの？Findyで副業フロントエンドエンジニアに実際にお願いしたタスク達 2018.07.11 こんにちは、@ma3tk です。突然ですが、今この記事を見ていらっしゃる方は副業やっていたりしますか？もしくは、副業やってみたいけど、具体的にどんなことをやっているのかなど、気になることも多いんじゃないでしょうか。 そこで今回は ハイスキルなエンジニアのプレミアム転職サービス Findy で一緒にフロントエンドを改善していただいているフロントエンドエンジニア達にお願いしている仕事を具体的に紹介することで、副業する時の参考になるといいなと思っています！ 前提 Findy の開発に関わっていただいているフロントエンドエンジニアは2名います。 一人目のフロントエンドエンジニア ベンチャー企業でフロントエンドエンジニアとして活躍中 CSS周りにも長けていて、新しい技術を習得している
フロントエンドの「想定外」に対応する考え方とTipsいくつか
とても個人的な話ですが、ここ最近で自分自身のプライバシー意識の高まりを感じて、ブラウザの設定を見直す機会がありました。見直したのはCookieの設定で、許可したドメインにしかCookieを記憶しないようにしました。設定変更によるある程度の不便は覚悟していました。とはいえ、ま〜せいぜい、初回アクセスの時のモーダルが何度も出るようになるとか、ログインできなくなるとか、そのくらいかなと思っていました。 しかし実際は、悪い意味で期待を裏切られることになりました。 Cookieが無効なだけで、“全く”動かなくなってしまうウェブサイトやウェブアプリが、本当にたくさんあることに気づいたのです。 全く動かなくなってしまう原因は単純（後述）だったのですが、ちょっとした対処で簡単に直せることなのに、サイト全体が一切使い物にならなくなってて、もったいない！！ と思いました。 フロントエンドの想定外 ウェブサイト
Don't just copy the @font-face out of Google Fonts URLs | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. I don’t think this is an epidemic or anything, but I’ve seen it done a few times and even advocated for. This is what I mean… You go to Google Fonts and pick a font like Open Sans, and it gives you either a <link> or an @import with a URL there in which to ready this font fo
死んだCSSを見つける方法 - Qiita
使われてないCSSであればツールで見つけられますが、そうではなく、"実質的に"使われてないCSSを見つけるにはどうすればよいでしょうか。 という問題にスマートな解決方法を記載している記事を見つけたので訳してみます。 以下はFinding Dead CSSの日本語訳です。 Finding Dead CSS 私が今週開いていたパフォーマンスワークショップで、Webサイト上で死んだCSSを見つけるテクニックが頭をよぎりました。 今、故意に『未使用CSS ( unused CSS ) 』ではなく『死んだCSS ( dead CSS ) 』というフレーズを使いましたが、これは以下のようなシナリオを想定して使いました。 数十人規模の多数のチームが開発している、数十万行のコードを含む、長期にわたって運用されている大規模なプロジェクトがあるとしましょう。 そこには既に使われていないCSSがあるだけではなく
Automated Code Review for C#, C++, Java, CSS, JS, Go, Python, Ruby, TypeScript, Scala, CoffeeScript, Groovy, C, PHP, Dockerfile, Shell, YAML, HTML, Vue, Swift, Kotlin, PowerShell, Dart, R and Haskell source code | CodeFactor
{{getAnalysisToolsText()}} Yamllint TSLint tfsec SwiftLint stylelint StyleCop ShellCheck Scalastyle RuboCop Revive Pylint pycodestyle PSScriptAnalyzer PHP_CodeSniffer TSQLLint lintr HLint Brakeman bundler-audit Checkstyle CodeNarc CoffeeLint Linter for Dart CppLint Detekt ESLint Flawfinder Vet Hadolint CSSLint Bandit .NET assembly informer Duplication checker
2018 年の tree shaking - 株式会社カブク
Discussion 1. CommonJS は tree shaking されない ※追記、修正あり すべてのモジュールバンドラーが、 import { isEqual } from 'lodash'; を tree shaking できませんでした。これは、 CommonJS は静的に解析することができない困難または不可能（2018/06/15 修正）なためです。 例えば、 ES Modules の import, export に対応する CommonJS の require、 exports は、それぞれ以下のように動的に書くことが許容されています。 require const fooOrBar = require(Math.random() < 0.5 ? 'foo' : 'bar'); exports for(const name of ['foo', 'bar']) { ex
SSR と CDN ( Fastly ) とユーザー依存情報、その後
正式リリースに向けての開発で表面化した不都合 以前、アーキテクチャ編: SSR と CDN ( Fastly ) とユーザー依存情報の分離（新規開発のメモ書きシリーズ4）で紹介したように、SSR で生成した HTML を CDN ( Fastly ) でキャッシュできるように「ユーザー依存情報はクライアントサイドで非同期に取り扱うというアプローチ」をとっていました。それによって発生していた不都合と解決に関する追加情報です。 ユーザー依存情報が非同期でレイアウトされる問題 ユーザー依存情報が非同期で解決されるということは、そのような情報を扱うコンポーネントの矩形は Web ページが一度レンダリングされたあとにレイアウトされます。つまりこの記事でも紹介されたところの「ガタンッ」的なユーザー体験が生じます。 ログインと非ログインが、全く同じサイズの矩形を確保するようなビジュアルデザインになってい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Grid Layout Interface Builder | LayoutIt!
自分流の静的ウェブ開発環境 2018年版 - Qiita
CSS Injection ++ - 既存手法の概観と対策 - Speaker Deck
FrontEnd:DDD
Boost Note
GitHub - typestyle/typestyle: Making CSS Typesafe 🌹
Keyframes.app
地に足をつけたフロントエンドの改善
