よりよいCSSを書くための、CSS / Sass (SCSS) 30のルールとその理由
Webエンジニアを始めて丸2年が経ちました。 複数プロジェクトを進める中で、CSSコーディングを行うときの「こうしておくと便利」「このほうが管理しやすい」といった知見が溜まってきたのでまとめます。 はじめに 長くなってしまった細かい説明はところどころ折りたたんでいます。概要だけで理解できたら飛ばしていただき、詳しい話が気になったら開いて読んでください。 これらは「自分がよく取り入れている手法」であって、必ずしもどのプロジェクトにも当てはまるものではないと思います。 各項目について、自分がその判断に至った 「理由」 を説明していますので、 理由を読んだ上で自分のプロジェクトに取り入れるか判断いただくと良いと思います。 この記事は、すでにCSSコーディングをしていてアイデアがほしい人に向けた記事で、 CSSをこれから学び始めるような 初学者向けではない ことご了承ください。 一般的と思われるキ
Next.js 9.4
We are excited today to introduce Next.js 9.4, featuring: Fast Refresh: fast and reliable live-editing experience, as proven at Facebook scale Incremental Static Regeneration (beta): re-build static pages after you've deployed, in milliseconds CMS Examples: examples for Contentful, DatoCMS, Prismic, Sanity, and TakeShape using our new next-gen static site generation New Environment Variables Suppo
Vue.js+SVGで自由にCSSアニメーションしたい人のための完全解説（ソース付き） - Qiita
こんにちは。UX＆フロントエンジニアしながら絵描きして遊んでいるゆき(@yuneco)です。この記事ではVue.jsを使ってCSSアニメーションを使った表現を自在に行うための基本的な部分をステップバイステップで解説します。目標は↓以下のようなアニメーションをJavaScriptで自在に構築できるようになることです。 ソースコードはこちら： https://github.com/yuneco/css-anime-tutorial 目次 この記事では最初にSVGを単純に表示するところから始め、Vueのコンポーネントを利用してそのSVGを自由に配置・変形させる方法を説明します。その上でCSS transitionを用いたアニメーションを取り入れます。最後に、複雑なアニメーションを抽象化・構造化してより複雑なシーンを構成するための方法を解説します。 SVGを作る Vueプロジェクトを作る SVGを
普通のWebサイトをNuxt.jsで作り変えてみた話 | ARAKAZE NOTE
フレームワークはもはや流行りとか言うよりもひとつふたつは使っていて当たりまえ…みたいな雰囲気を感じる今日この頃ですが、受託制作で普通のWebサイトを作っていると普段の仕事では早々使う機会がないんじゃないかと思います。（僕だけですかね…？） Webサービスやゲームのように非同期で通信する要素があるわけでもなく、DBもなくページ内の物量も普通…そんな普通のコーポレートサイトやLPなんかを作るのにフレームワークはややオーバースペックに感じます。 ついでにクライアントから「ちょっとならHTML触れるから自分で更新します」と言われた日には開発環境の導入自体のハードルが高く、そもそもhtmlじゃないフレームワークの導入なんて出来ません。 今回はそんな風に「別に使わなくても仕事は出来るしなぁ」と腰が重かった自分が、自身のポートフォリオサイトをNuxtに作り変えてみた感想を書いていきます。 Nuxt.js
CSS フレームワークを Vue.js のコンポーネントにする方法 - mya-ake com
この記事についてこの記事はVue.js #2 Advent Calendar 2018 - Qiitaの 20 日目の記事です。 この記事では Google が提供しているマテリアルデザインの CSS フレームワークであるMaterial Componentsを Vue.js のコンポーネントにしていく話を書いています。 その過程で Vue.js におけるコンポーネントを作るときの要点なども一緒に書いてます。 バージョンなど Vue.js: 2.5.21 Vue CLI: 3.2.1 Material Components: 0.42.x サンプルリポジトリhttps://github.com/mya-ake/vuepress-plugin-component-catalog/tree/master/example/material-components-web アウトライン Materi
なぜ初心者は webpackが解らないのか？- Why can’t you understand the webpack? -
This document discusses using Akka actors and Redis for building a scalable chat server architecture. Key points include: 1) Using Akka actors for the chat room, user, and supervisor actors to handle chat logic and failures in a distributed, asynchronous manner. 2) Storing chat room membership and messages in Redis for real-time updates between actors using pub/sub. 3) The Lettuce client is used t
【デザイナー向け】どうしてもgulp、npm、sass、pugを操作しなければならない人への説明書
1.はじめに デザイナーさん、以下のような事態に困ったご経験はないでしょうか。 「画像の差し替え・削除・追加が発生して、ちょっと直したいけど、どこを編集すればいいかわからない」 「文言修正が入った。エンジニアさんに振るまでの量でもないので自分で直したいが、どこを編集すればいいかわからない」 「フォルダによくわからないファイルがたくさんある。いじるのが怖い。」 近頃のweb開発環境は複雑化し、gulpやwebpack・npmなど、デザイナーにとってはよくわからない単語が増えてきました。 このようなツールを駆使してフロントエンド環境を構築しているエンジニアにとって、作業は効率化されましたが、逆にデザイナーにとってはどんどん敷居が高くなっていると思います。 本投稿では、そんな環境下でもなんとなくイマドキの用語を軽く理解して、ちょこっとの編集作業ができるようになることを目標にします。 ゴール gu
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
