株式会社エフコードさんでフロントエンドの話をさせていただきました
お付き合いのある株式会社エフコードさんの社内勉強会で発表するお仕事をさせていただいたのでそのまとめ。 お題目としては「なんかフロントについて話して」とふわっとボールをいただいて、さてどうしようかなーと色々考えた末に、フロントエンドの歴史についてという題目にしてみた。 比較的サーバーサイドどっぷりな人が多いのもあったので、なるべくライト気味に、とか色々考えてみて、フロントエンドへの恐怖感取れたら良いよなあと思ったというところ。 地味に外で話すということをやったことがほとんど無い人間なので、わりとがっつり練習した（多分スライドも喋りにあわせて作っているので、スライドだけ見てもあまり良い資料ではないかも） なんとなく大道芸人が興行に行くような気持ちだったと思う（大道芸人やったことないけど） 当日も手応えがある反応をいただけたのでよかった。 作ってみてどうだったか最初「いや、こんな老害みたいな話し
Vue.jsとNuxt.jsを使用して、Webページのページ遷移に気持ちいいアニメーションを与えるチュートリアル
Vue.jsとNuxt.jsを使用して、スマホアプリで見かけるようなアニメーションを伴った滑らかなページ遷移をWebページに実装するチュートリアルを紹介します。 Native-Like Animations for Page Transitions on the Web 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 最近見かけたページ遷移のアニメーション 使用する理由 前提となる知識 始めてみよう フックの設定 最近見かけたページ遷移のアニメーション フロントエンドのUIで、最近私が最も刺激を受けたのは、スマホアプリで見かけるような滑らかなページ遷移（トランジション）です。こういったインタラクションを実装するのは難しそうに見えますが、一度実装方法をマスターしてしまえば、さまざまなUIに使用することができます。 ここで紹介する方
The CSS Grid Layout vs CSS Frameworks Debate — SitePoint
Stay Relevant and Grow Your Career in TechPremium ResultsPublish articles on SitePointDaily curated jobsLearning PathsDiscounts to dev toolsStart Free Trial7 Day Free Trial. Cancel Anytime. Key Takeaways CSS Grid Layout and CSS Frameworks like Bootstrap serve different purposes in web development. While CSS Grid allows developers to build complex page layouts with native CSS code, Bootstrap provid
恐竜に教える現代のCSS – Part 2 | POSTD
CSSプリプロセッサで新構文を使う 以上、CSSを使った基本的なスタイル指定とレイアウトを取り上げました。次に、CSS自体を言語として扱いやすくするために作られたツールについて説明します。まずはCSSプリプロセッサです。 CSSプリプロセッサを使うと、別の言語で記述したスタイルをブラウザが解釈できるCSSに変換する、ということが可能になります。これは昔、ブラウザへの新機能の実装が遅々として進まなかった頃は重要事項でした。最初のメジャーなCSSプリプロセッサは Sass で、2006年にリリースされました。新しい簡潔な構文（括弧に代わるインデント、セミコロンを使わないなど）と、変数、ヘルパー関数、演算など、CSSには欠けていた高度な追加機能が特徴です。変数を伴うSaasを使って先の事例のカラーセクションを記述すると、次のようになります。 $dark-color: #4a4a4a $light
What's wrong with CSS-in-JS?
I have yet to dive deep into CSS-in-JS, but I’ll admit I’m skeptical. This podcast by Chris Ferdinandi lays out a lot of the reasons why I’m a bit apprehensive. Three other observations I’ve noticed as I encounter CSS-in-JS in my consulting clients’ work and other projects I come across: Lack of portability: So much of my work involves helping gigantic organizations create and deploy design system
frontend-tooling-survey-2018-results#js-knowledge
Front-end development Blog and Portfolio for Ashley Watson-Nolan – Senior UI Engineer at Just Eat Update 12/09/2019 The results for the 2019 edition of the Front-end Tooling Survey are now available. If you'd like to view them, check them out here. Update 25/07/2018 Since publishing the initial results, I've updated the survey after receiving 5,461 responses and updated the article and results dat
5 React Architecture Best Practices for 2024 — SitePoint
Stay Relevant and Grow Your Career in TechPremium ResultsPublish articles on SitePointDaily curated jobsLearning PathsDiscounts to dev toolsStart Free Trial7 Day Free Trial. Cancel Anytime. There can be no doubt that React has revolutionized the way we build user interfaces. It’s easy to learn and greatly facilitates creating reusable components that offer your site a consistent look and feel. How
Lucid
It is impossible to imagine modern web development without the use of Chrome DevTools. Thanks to a clean UI and continuous improvements to meet real-world needs, the tool has become the go-to live development environment that surpasses many contemporary IDEs in both functionality and performance. But how productive are you with the DevTools in your daily development workflow? I’d like to share so
WordPressで個別のページごとに、CSSやJavaScriptが利用できる便利なプラグイン -CSS & JavaScript Toolbox
WordPressの記事ページや固定ページごとに、異なるHTMLやCSSやJavaScriptやPHPを利用でき、一元管理もできるWordPressのプラグインを紹介します。 適用できるページは単独でも複数も可能で、適用する場所もヘッダやフッタにと指定できます。前回紹介した際から大きくバージョンがアップし、さらに便利になった新機能も含めて要チェックです。 CSS & JavaScript Toolbox CSS & JavaScript Toolboxの特徴 CSS & JavaScript Toolboxのインストール CSS & JavaScript Toolboxの使い方 CSS & JavaScript Toolboxの特徴 CSS & JavaScript Toolboxの特徴 HTMLやCSSやJavaScriptやPHPのコードを特定のページのみに挿入できます。 記事ページ、
AWSの料金を「ざっくり」計算できるサイトを作る - Qiita
AWSの料金、ややこしいですよね。 サービスの選択肢が多く構成が柔軟なおかけで、さまざまな要件をカバーできるのは嬉しいのだけど、そのぶん料金体系がややこしいので、やるせない気持ちになります。 この気持ちはなんだろう、この気持ちはなんだろう、と自問しているうちに春になってしまったので、AWSの料金を「ざっくり」計算できるサイトを作り始めました。 ざっくりAWS 公式ツールの存在 Simple Monthly CalculatorというAWSの料金を計算できる公式のツールがあるのですが、悲しいことに名前ほどシンプルではありません。 正確な料金を算出するために入力項目が多いのは仕方がないとは思うのですが、サイトを開いたときの威圧感がすごいので、もう少しさっぱりできないかという気持ちがありました。 なので、公式ツールの敷居が高いと感じる自分のような人向けに、料金を「ざっくり」計算できるサイトを作り
第1回フロントエンドテックミーティングが開催されました！ - Pepabo Tech Portal
それでは早速それぞれの発表を見ていきましょう！ マインスイーパで学ぶReact 1人目は私(@purple_jwl)の発表です。 私はReactの初歩的なことやマインスイーパを作る手順やその過程で考えたことについて話しました。 この発表で登場したマインスイーパはここで遊べるようになっているので、ぜひ遊んでみてください。 Workboxで始めるService Worker 2人目はEC事業部でエンジニアをしているネッシーさん(@tsuchikazu)の発表です。 ネッシーさんは自身が注目する技術の1つであるService Workerに関する話をしてくれました。 Service Workerでできることは様々ですが、そんな中で今回はキャッシュ機能に注目し、キャッシュするための戦略やWorkboxを使用したキャッシュの便利な点などについて説明されていて、大変勉強になりました。 社内でもServ
【PageSpeed Insights】レンダリングをブロックしている JavaScript/CSS を排除したら99点になったので方法をご紹介 | 株式会社ウェブ企画パートナーズ
【PageSpeed Insights】レンダリングをブロックしている JavaScript/CSS を排除したら99点になったので方法をご紹介 「どうせなら100点にしようよ！」というお声が聞こえてきそうですが…。 それはさておき、最近ではページの表示速度がこれまでよりもより重要視されていて、PageSpeed Insights を活用する方も増えてきています。WordPressは動的なCMSということもあり表示速度があまり速くありませんので、 キャッシュプラグイン 画像の軽量化 上記のような工夫をしてらっしゃるのではないでしょうか。 ですが、PageSpeed Insights で注意されがちな項目はそれだけではありません。 スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する 「スクロールせずに見えるコンテンツのレンダリングをブロ
Web初心者がfirebaseでPWA入門してみる(ユーザ登録編) - Qiita
はじめに 前回の記事から随分経ってしまいましたが、今回はユーザ登録を実装してみます。 ログイン機能は前回実装した、Google Authorization機能を用いますが、一般に公開されるユーザ名を追加で設定できるようにします！ この記事の内容で、FirebaseDB(と呼びます)への書き込みが理解できました。 成果物はこちらになります。 https://github.com/tamalign/CheekyCat/tree/day3 設計と実装 どのようにユーザ管理をするかを考えます。 (あまりWebに詳しくないので間違っていることがあるかもしれませんがご容赦ください。) 今回はユーザの一意のIDをKeyとして、必要な情報をValueに保存するテーブルで管理を行いたいと思います。 FirebaseDBでは以下のようにしてuidを取得できます。参考ページ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
I Used The Web For A Day With Just A Keyboard — Smashing Magazine
Mixpanel Engineering
Forestry.io CMS
Account Suspended
Learning React: Is This ES6 or React?
Bootstrap Card Component: a Complete Introduction — SitePoint
Ember.js Blog