UIにダイナミックなアニメーションを盛り込める20の無料ツール
近年では誰もがアニメーションを活用します。たとえばBttn.cssやHover Buttonsといった、ボタンに追加できる非常に小さなホバー効果や、Granim.jsを介して動く、魅力的でダイナミックなグラデーションスタイルの背景などが存在します。サイズにかかわらず、アニメーションはタイポグラフィやナビゲーション、ロゴタイプなどと同じように、インターフェイスにとって不可欠な要素です。アニメーションを短い時間で消滅する、ある種の無駄な要素だと考えているなら、それは間違いです。 アニメーションはただユーザーを楽しませるだけの要素ではありません。とても深い目的のために働くものです。ユーザー体験全体を結びつけるために使われるものもあれば、インターフェイスのアクセシビリティを向上させ、見つけやすく理解しやすくするために使われるものもあります。
フロントエンドエンジニアというものについて余計なことを考える（2019秋版）｜terrierscript
元ネタとか https://shgam.hatenadiary.jp/entry/2019/09/21/104413 https://twitter.com/Nkzn/status/1177794507741335552 自分はよくJSやCSSについての発信をしていて、「JSが得意です」とか「CSSが得意です」と言うこともあるのですが、その反応として「じゃあフロントエンドエンジニアなんですね」と言われると、「いやあ、うーん、どうなんですかね、、」みたいなぼやっとした返答をすることがよくあります。 その理由として「フロントエンド技術は好きだけど自覚としてはサーバーサイドエンジニアだし、DB設計とかもやりたいし・・・かといってフルスタックで言うのいやだし・・・」となだったのですが、このJSON色付けという話題を見て「実はここに自信が無いからという理由が本質なのでは？」と思えてきました。 ちょう
AMP（Accelerated Mobile Pages）入門 - Qiita
概要 こんにちは、都内でフロントエンドエンジニアをしているかめぽんです。最近、Next.jsのバージョンアップにて対応したことで一層話題になっているAMPですが、僕自身AMPのことをそこまで注目していなくてたまたま調べてみたら割とおもしろうそうだったので、インプットした内容をまとめてみました。サンプルコードなども載せていますので、AMPの基礎的な情報の参考にしていただければと思います。 本題 AMPとは、メリット AMPとはAccelerated Mobile Pagesの略で、GoogleとTwitterが発足したモバイルページを高速に表示させるためのプロジェクト、またはAMP HTMLというフレームワークのことを指します。 AMP自体は以下の構成要素で成り立っています。 AMP HTML Custom Styling(CSS) AMP js AMP Cache(CDN) 静的なHTML
DockerとJavaScriptの付き合いかた - コネヒト開発者ブログ
こんにちは。エンジニアの安達 (@dachi_023) です。会社用アカウントとして @ry0_adachi を用意していましたが全然呟かなくなっちゃったので辞めました。複数アカウントの運用って面倒ですね...。はい、コネヒト Advent Calendar 2018 の20日目はDockerとJSです。 まえがき DockerfileにJS (とかCSSとかHTMLとか) のビルド処理を書いてコンテナ立ち上げてブラウザで見えるところまでの話です。 本記事では最低限これができていればそんなに遅くならないよねってものをいくつか書いています。コードは GitHub に上がってますのでそちらを見ていただいてもOKです。このコードは create-react-app で生成したものをビルドしてコンテナ上のNginxで公開するという簡単なものですが、実際にママリのProduction環境に投入したも
三年間運用しているサービスにFLOCSSを導入してCSSの健全化を目指す | Recruit Tech Blog
こんにちは、キッズリー開発グループ サーバサイドエンジニアの @t_uyama です。 本記事では、ローンチから三年間運用されているwebサービスにFLOCSSを導入して既存のCSSをリファクタリングしたという事例をご紹介します。また、各人で解釈が分かれがちなFLOCSSのレイヤ分けの一例と、FLOCSS導入後のCSSの開発体制についても併せてご紹介します。 FLOCSSとは？ CSSを書く際のファイル構成や命名規則などを取り決めたルールの1つです。CSSの命名規則というとBEM、OOCSS ( Object Oriented CSS )、といったものが有名なところして挙げられますが、FLOCSSはこれらの良いところを組み合わせたものとなります。Foundation Layout Objectと役割ごとにレイヤ（層）が分かれているのが特徴です。これにより、CSSコードの再利用・拡張がしやす
Webサイトにおけるアニメーション実装へのアプローチ 〜未だ見果てぬ夢〜 - Qiita
私は常々 Web サイトにおいてアニメーションはなくてもよい存在だと考えています。なぜならば・・・と話を続けたくはあるのですが、まあ正当な強い持論があるわけでもないので、ここで大仰に語ることは控えておきます。アニメーションを実装する立場でありながら、そのような考えをもち常に自責の念にかられながらも制作を続けています。そんな中でさまざまな実装へのアプローチを試みた雑な感想を、簡単なデモとあわせてご覧ください。 1. JavaScript で要素を動かす 古から伝えられてきた魔法。緻密な計算を駆使してあらゆるものを自在に操れ。 See the Pen Animation vanilla by Syuji Higa (@syuji-higa) on CodePen. 言わずもがな、ブラウザで動くスクリプトです。トランスパイラやらコンパイラやらは溢れてはいますが、結局はこの言語になります。前までは
Nuxt.jsでSassの変数を使えるようにして全ページで読み込むようにする - Qiita
やりたいこと Nuxt.jsの環境でSassを使いたい CSSフレームワーク（Bulma）を導入したい 設定した変数をvueファイルで使いたい 共通スタイルcommon.cssみたいなファイルを全ページで読み込みたい 使うもの Bulma node-sass sass-loader nuxt-sass-resources-loader 作業内容 ターミナルでインストール $ npm install sass-loader node-sass --save-dev $ npm install bulma --save $ npm install --save-dev nuxt-sass-resources-loader // Import a Google Font @import url('https://fonts.googleapis.com/css?family=Nunito:400
Switching to Parcel from webpack - LogRocket Blog
Over the past year, you’ve likely heard rumblings about a new build tool called Parcel. For those of you unaware, Parcel describes itself as “a web application bundler, differentiated by its developer experience. It offers blazing fast performance utilizing multicore processing, and requires zero configuration”. Now build tools have come and gone and ones such as webpack and Browserify are still k
PC・スマホからJavaScriptの開発環境を構築できるサービスを厳選してみた！ - paiza開発日誌
どうも、まさとらん（@0310lan）です！ 最近はJavaScriptの開発環境を提供してくれるWebサービスが増えており、なかにはスマホからでも気軽にプログラミングできるように最適化されているモノも少なくありません。 そこで今回は、PC・スマホのブラウザ（もしくはアプリ）から手軽にJavaScriptの開発環境を利用できるサービスを厳選してみましたのでご紹介しようと思います！ ちなみにスマホの場合はBluetoothキーボードを併用すると、さらに快適な環境が整えられますよ。 なお、JavaScriptはpaizaラーニングの「JavaScript入門編」（完全無料）で学ぶことができます。そちらも合わせてチェックしてみてください。 ■スマホでも気軽にJavaScriptプログラミングを楽しめるエディタ！ 【 Spck Editor 】 気軽にプログラミングを楽しめるという点では「Plun
Codomisu - Qrunch
**「もっと気軽にアウトプットできる」**を コンセプトにした **技術ブログサービス「Qrunch（クランチ）」**のβ版をリリースしました！ 6月頃から実装に取り掛かり、隙間時間を使いながらコツコツ開発してきたのですが、4ヵ月経った今、こうして無事リリースに辿り着けてほっとしています。 今回は、そのサービスの紹介と技術周りの話を軽くまとめてみます。 個人でWebサービスだったり、アプリ開発をしている人・したいと思っている人のモチベアップにでも繋がれば幸いです！ リリースしたサービス Qrunch（クランチ） - もっと気軽に技術ブログを書こう！ Qrunch専用のChrome拡張機能 - Qrunchをもっと身近に！ 先日行われた大幅リニューアルにより、QrunchのURLはqrunch.netに変更されました。 サービスTOP TOPページは「自分も参加したい！」と思わせるようなデザ
From Design to Front-end development - Imaginary Cloud
Some time ago, I had the opportunity to conduct a simple workshop on the subject "Web Development vs Web Design" to my colleagues. These are my thoughts on this subject, and on my experience leading the session. For more than half a decade I've been through tons of processes of getting from the designing of the client's ideas and dreams to the implementation of their sites, modern web applications
The Complete Guide to Lazy Loading Images | CSS-Tricks
Images are critical for every website and application today. Whether it be marketing banners, product images or logos, it is impossible to imagine a website without images. Sadly though, images are large in size making them the single largest contributor to the page size. As per the latest HTTP Archive data, the median page size on desktops is 1511 KB. Images make up for almost 650 KB of that size
Vue CLI 3.0 が来ました！ — Vue.js
Aug 11, 2018 このブログはこちらの翻訳ブログです。 過去数ヶ月にわたり、私たちは Vue アプリケーション用の標準ビルドツールチェーン、次世代の Vue CLI について懸命に取り組んできました。 今日私たちは Vue CLI 3.0 のリリースとそれに付随する全てのエキサイティングな機能を発表することにわくわくしています。 豊富なビルトイン機能Vue CLI 3 は以前のバージョンとは全く別物です。書換えのゴールは以下の 2 つです： モダンなフロントエンドツール、特に複数のツールを混在させる場合の構築疲れを軽減する； どんな Vue アプリのデフォルトにもなるよう、可能な限りツールチェインにベストプラクティスを組込む 核として、 Vue CLI は webpack 4 の上に構築された事前設定済みのビルド設定を提供します。開発者が必要とする構成の量を最小限に抑えることを目指
新卒エンジニアの布石 - Qiita
イントロダクション 初めまして、本配属されて約一ヶ月目、ホラー映画好きの新卒フロントエンドエンジニアです。 同じく新卒でフロントエンドエンジニアをやっている方にも向けて、今回記事を投稿しました。 唐突ですが、まずは自分がこの一ヶ月でどんなことを学んだかの紹介をしたいと思います。 そして同じ新卒のエンジニアという境遇の方に向けて、まず何から勉強していけばいいか どの程度のレベル感が求められるのか、イメージし辛いと感じている方がいるかもしれません。 そういった方のために、参考になりそうなリンクも今回紹介したいと思います。 ぜひ、お役に立ててください。よろしくお願いします。 この記事の目的 同じ新卒のエンジニアの方に向けて情報を発信する。(どんなことをやっているのか掴んでもらう) 今までの学習の振り返りをする。(学んだことを自身に定着させる) まずはとにかく、勉強は必須 これは先輩方に質問した結
30代後半や50代からでもソフトウェア開発者になるのには遅くないという10人の実例
テクノロジー業界の発展に伴ってソフトウェア開発者の人材不足がいたるところで発生していますが、言い換えれば「プログラミングスキルを身につければ仕事に困らない」ということでもあります。とはいえ、「若いころならまだしも、30歳を超えてイチからプログラムの書き方を勉強するのは遅すぎるのでは」と思う人は多いかもしれませんが、下は35歳、上は57歳からプログラミングを習って成功を収めている10人の開発者が「ソフトウェア開発者になるのに遅すぎるということはない」と実情を語っています。 Is It Too Late to Become a Software Developer After the Age of 35, 40, or 50? And to learn programming? https://belitsoft.com/php-development-services/its-not-too
CSSはもう新種のJavaScript
インクルーシブ HTML＋CSS＆JavaScript（紹介記事）、コーディングWebアクセシビリティ（紹介記事）の著者ヘイドン・ピカリング氏の記事が興味深かったので、紹介します。 CSS: A New Kind Of JavaScript 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 JavaScriptでのスタイル CSS 最後に JavaScriptでのスタイル Web制作に携わっている人は、2つの補完的なテクノロジーに詳しいと思います。1つは文章とその構造のためのHTML、もう1つはインタラクションとスタイルするためのJavaScriptです。 JavaScriptでスタイル？と思ったかもしれません。そうです、あらゆるDOMにおけるノードをサポートしているJavaScriptのstyleプロパティのことです。
実際に週1日で何やってるの？Findyで副業フロントエンドエンジニアに実際にお願いしたタスク達 - Findyブログ
実際に週1日で何やってるの？Findyで副業フロントエンドエンジニアに実際にお願いしたタスク達 2018.07.11 こんにちは、@ma3tk です。突然ですが、今この記事を見ていらっしゃる方は副業やっていたりしますか？もしくは、副業やってみたいけど、具体的にどんなことをやっているのかなど、気になることも多いんじゃないでしょうか。 そこで今回は ハイスキルなエンジニアのプレミアム転職サービス Findy で一緒にフロントエンドを改善していただいているフロントエンドエンジニア達にお願いしている仕事を具体的に紹介することで、副業する時の参考になるといいなと思っています！ 前提 Findy の開発に関わっていただいているフロントエンドエンジニアは2名います。 一人目のフロントエンドエンジニア ベンチャー企業でフロントエンドエンジニアとして活躍中 CSS周りにも長けていて、新しい技術を習得している
Webデザインに動きを加える５つの方法
アラン・スミス氏はライターで、ソーシャルメディア、ウェブデザイン、モバイル・アプリ、デジタル・マーケティング、起業家精神、ベンチャー企業などの様々な話題を最先端のデジタル世界で取り上げています。 1906年に最初のアニメーション動画が制作されたのは、ストーリーテリングにおける革新的な一歩でした。ストーリーテリングで用いられるアニメーション技術は、毎年格段に進歩しており、それは2018年も同様でしょう。Webデザイナーは古い技術ではなく、より高度な２Dや３Dのアニメーション画像を選ぶようになってきています。 2018年のアニメーション Webデベロッパーは、FlashをやめてCSSやJavaScriptでアニメーションを作成するようになりました。Flashをサイトにインストールすることは、技術的な理由から段階的に廃止されました。Flashが廃止された第１の理由は、iPhoneやiPad、iP
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
webpack4の導入とwebpack-dev-serverで自動ビルド - Qiita
GASのためにVue.jsを学習し始めなのに参加してみた「Vue.js Tokyo v-meetup #8」 | 隣IT
