レスポンシブwebデザインのコーディングでやってること - kojika17
今年、携わった案件のほとんどがレスポンシブWebデザインでした。 今更ですが、私がレスポンシブWebデザインのコーディングでやっていることや気を付けていることを整理してみたいと思います。 User Agent Style Sheetの対応 ブラウザのデフォルトで設定されているスタイルシートの差異を埋めるCSSは「Normalize.css」をよく使います。 デザインによっては、Eric Meyer’s的なRest CSSの方がやりやすい場合もあるので、そこは見た目に臨機応変に対応してます。 CSS Flexible Box 私が受け持つ案件では、最新ブラウザ、及びInternet Explorer 11（IE11）のみの対応が増えたため、近年では、Flexible Boxをカジュアルに使用できるようになりました。 個人的には、広い画面では横並びだったものを、displayプロパティを変更す
Vuexによる状態管理を含む最高に快適な Vue.js + TypeScript の開発環境を目指す話 - Qiita
追記 2019/12/05 Vue 3.0 のリリースが現実的に近づいてきて色々と事情が変わっているので、話半分に聞いておいてください。 はじめに Patreon での支援募集をはじめました。この記事が良かった！という方は、今後の情報発信のためにもぜひぜひ支援お願いします。 https://www.patreon.com/potato4d Vue.js Advent Calendar 2018 年の管理役の potato4d です。昨年に引き続き、今年も Vue.js のアドベントカレンダーは他にもたくさんあるので、ぜひ #1 から追ってみてください。 12日目の今日は、 Vue.js + TypeScript での理想的な開発環境について考えてみたいと思います。 Vue.js における TypeScript 利用はまだまだ課題が多く、型の恩恵をうけるためのテクニックも複数存在しています。
Firebase 使ってみた 2018 - Diary
Firebase 使ってみた 2018 最近は技術についてはレイトマジョリティでいいなと思ってる。 Firebase はもう完全にやっていけるかんじっぽいのというのを各方面から聞いたので試してみた。 だいぶ前に Firebase を使ってみたとき、 Realtime Database のクセが強すぎてこれはあかんなという感じだった。今では Cloud Firestore があるので話が違うだろうと思いあらためて実用アプリを一個作ってみた。 前にクライアントサイドだけで実行して保存先は Google Drive という野蛮なメモツールを作ったことがあった。これのバックエンドを Google Drive から Firebase にしてみた。 元々のツールが Google Drive との接続部分を一つのファイルに切り出していたので、これをいじって Firebase に対応するだけでスッと作れた
新規事業をひとりで作るノウハウ - 怠惰を求めて勤勉に行き着く
生存報告も兼ねて。 カリフォルニアに来てもう半年ぐらい経った感覚ですが、実はまだ4ヶ月ほどでした。非常に多くの素敵な方々との出会いがあり、妻も僕も子供もこの皆さまの助けがあってどうにか生きております。どう感謝してよいか言葉にできないほどです。 さて、ビジネス上の僕のミッションは次の3つです。 主に投資や連携目的の交渉（の技術面のサポート） 日本との連携 新規事業の開発 どれもなかなか難しいです。会ってアポぐらいなら応じてくれる会社も多いですが、投資や連携といってもバブル崩壊以後経済成長できていない我が国はもはや「商習慣だけめんどくさいのに今やカネも持ってないから相手にしてられない連中」というのは肌で感じます。ご存知の通り、サンフランシスコ・ベイエリアはIT企業会社員が年収5000万円もらうような場所です。なかなか同じ規模感で会話するのが難しいレベルに達しています。 こみこみという噂のNet
Nuxt.js v2.0.0がリリースされたので触ってみた【変更点まとめ】 | Studio Andy
去る2018年9月21日にVue.jsのユニバーサルフレームワークであるNuxt.jsのメジャーアップデート版、v2.0.0がリリースされました。 Embedded content: https://github.com/nuxt/nuxt.js/releases/tag/v2.0.0 Embedded content: https://medium.com/@nuxt_js/nuxt-js-2-0-webpack-4-esm-modules-create-nuxt-app-and-more-6936ce80d94c 思えば3月にv2.0.0がリリース準備中であることが発表されてからはや半年。首を長くして待っていた開発者の方も多いと思います。 自分も2月のVue conf AmsterdamでChopin brothersの口からv2.0.0の事を聞いてから、今か今かと待ちわびていた一人で
TypeScriptでNuxtアプリケーションを作成する際の覚書 | Studio Andy
この記事はCAMPHOR- Advent Calendar 2018 11日目の記事です。 このたびブログを新調しました。Nuxt + TypeScriptで作成したSingle Page ApplicationをGAEにホストして、Server Side Renderingも行っています。 ブログ移行の経緯や実装時のあれやこれやはまた明日別の記事でお話ししますが、その前段として本日はNuxt + TypeScriptのアプリケーションを作る時に自分がやったことを備忘録的に記録したいと思います。 また本記事で紹介しているソースコードはGitHubに公開しています↓↓ Embedded content: https://github.com/andoshin11/nuxt-typescript-example TypeScriptとは TypeScriptとはMicrosoftの主導で開発さ
真のフロントエンドエンジニアになるために、まずはNuxt.js + Firebaseを使って簡易メモ帳を作ってみた - LiBz Tech Blog
目次 目次 はじめに 前提条件 Nuxtってなに？ Nuxtの主な機能 Nuxt.jsやってみる Nuxt.jsのインストール Nuxt.jsでアプリ作成 nuxt.config.jsによる設定いろいろ Nuxtの構成 Nuxtでアプリ実行 ポート(3000の部分)を変更したい場合 アプリの説明/解説 レイアウト・コンポーネントの作成 レイアウト(layouts) ページ(pages) コンポーネント(components) データの扱い/保存 firebase firebaseでdatabase作成 firebaseで認証設定 store(Vuex) デバッグ ビルド herokuにデプロイ やってみて はじめに こんにちは! 11月にLiBに入社したアベと申します。 アラサー子持ちのエンジニア(エンジニアと名乗るのは憚れる...)です。 社会人3年目からWebの世界へ転身し、webデザ
阿部寛を超えるための技術: はてなブログからNuxtに移行した話
旧サイト(はてなブログ)からのパフォーマンスの伸びが顕著ですね。 Performanceは言わずもがなですが、はてなブログでPWA対応がほとんどされていないのが気になりました。Service Workerのような標準化しつつある仕様に追従できていないのは痛いところ。 Nuxt + Contentfulでやっていき 今回の実装にあたってはフレームワークに依存せずSPAを作成することも検討しましたが、SEOなどを考えるとSSRの仕組みが必須です。またSSRもスクラッチで組もうとすると中々ハードルが高く(Storeのハイドレーション、Render hooksのAPI設計等)、今回は業務でも利用した事のあるNuxt.jsを利用しました。 Embedded content: https://nuxtjs.org/ 詳細は後述しますが、Nuxt communityの提供しているModule群がものすご
レスポンシブで軽量な20のCSSフレームワーク | UX MILK
この記事はSpeckyboy Design Magazineからの翻訳転載です。配信元または著者の許可を得て配信しています。 20 Responsive & Lightweight CSS Frameworks 良質でレスポンシブなCSSフレームワークを使えば、どんなWebデザインプロジェクトも有利にスタートできます。CSSフレームワークのなかには、Bootstrapのようにコードが多すぎて重いものもあれば、反応が遅いものもあります。 不必要な選択肢に悩まされない、操作に十分な機能だけあるものが理想的でしょう。 よければ、Material Design Web FramewoeksやOpen-Source WordPress Development Frameworkの記事もご覧ください。 ここでは、軽量でベーシックな20のCSSフレームワークをご紹介します。 FICTOAN FICTOA
Vueでもっと幸せになりたいあなたへ。VueのUIコンポーネントライブラリVuetifyのススメ - KAYAC Engineers' Blog
どうもみなさまおはようございます。あるいはこんにちは。あるいはこんばんは。 KAYAC Advent Calendar 2018の12日目の記事を担当します、今年1月に中途入社しましたエンジニアのたがみです。 前職ではサーバーサイドのSEとして業務系のwebアプリを開発したり運用したりしていましたが、今はクライアントワークのフロントのエンジニアとしてwebサイトを作ったり動かしたりぶっ飛んだものにしたりしなかったりしています。 今回は、そんな私がフロントエンドになったばかりの頃に仲良くなった思い入れのある言語、Google App Scriptの話を！・・・・・・と、つい二日前までは、思っていたのですが。 Google先生を訪ねて色々と検索していたところ「あれ・・・なんか・・・Vuetifyについての日本語記事、実は少ないのでは・・・？」と気づいてしまったのです。 （もしかしたら気のせいか
Nuxt, netlify, Firebase を使ったWebサービス開発と個人開発における技術選定のポイント - Qiita
Nuxt, netlify, Firebase を使ったWebサービス開発と個人開発における技術選定のポイントJavaScriptsentryFirebaseNetlifyNuxt 技術構成はこんな感じで作りました。 Nuxtというよりかは個人開発における技術選定のポイントを主体に解説した記事です。 これから個人開発をやろうとしている人の参考になれば幸いです。 どんなWebサービス？ Google Calendar の表示/非表示を一括で切り替えるWebサービス。 ※ゲームとかでよくある装備マイセットのGoogleカレンダー版です。 G Suite を導入している企業だとカレンダー画面が会議室や他のユーザーの予定で溢れてしまいます。 TV会議ができる会議室のセットや同じチームメンバーのカレンダーセットをつくり、セットごとの予定をカレンダーのTOP画面で目視で確認できるようになります！ 触っ
「Vue.js + Go言語 + Docker」で作る！画像アップロード機能実装ハンズオン - Qiita
こんにちはpo3rinです。Vue.js Advent Calender 2018 9日目の記事です。 8日目の記事は vue.js(nuxt.js) の plugin はとても便利 でした。 11月にフリーの案件で Vue.js + Go言語で画像アップロード機能のあるCMSを作りました。Vue.jsでの実装の際には npmモジュールである vue2-dropzone を使うと、Vue.js にとって便利な機能が提供されており、すぐにアップロード機能が作れました。なので今回は Vue.js + Go言語 で画像アップロードを行う機能の実装をハンズオン形式で紹介していきます。 今回は Vue.js のアドベントカレンダーとしての投稿なので、Go言語の実装を飛ばしたい方向けに、Go言語のインストールが不要になるように、すでにDocker環境を用意してあります。せっかくなので今回は Docke
AWS LambdaでChrome HeadlessドライバをAWS Lambda Layersから使う | ヤマムギ
この記事はSelenium/Appium Advent Calendar 2018に参加した記事です。 新機能のAWS Lambda Layersが発表されました。 これまでAWS Lambdaのコードファイルが50MBぎりぎりだとか悩まなくてもよくなりますし、コードを更新するたびに重たいアップロードをしなくてもよくなります。 AWSもストレージ容量が減らせるのではないでしょうか。 LambdaでChrome Headlessドライバを使ってスクレイピングをしているのですが、コードのzipファイルが48MBとかなので、制限ぎりぎりです。 これ以上何かを増やすと制限にひっかかります。 そして、ファイルが大きすぎてマネジメントコンソールから直接コードが編集できませんし見えません。 そこで登場したAWS Lambda Layers。 これは使うしかないでしょうということで、試してみました。 過去
徹底比較！Firebase vs Netlify (2018年版) - KAYAC engineers' blog
みなさまこんにちは、のびーことfnobiです。今年ももうアドベントカレンダーの季節なんですね。はやいはやい。 さて個人的にアドベントカレンダーでは、振り返りの意味も込めて その年お世話になった技術に関する記事を書く、というルールにしてますので、今回は NetlifyとFirebaseの話 をします！！ （ちなみにFirebaseの話は去年もしたかったのですが、時間が足りなかった＆他の人も書いてたのでパスしました） この記事の目的 いまフロントエンドエンジニアに使ってほしいサービスの私的TOP2・NetlifyとFirebaseについて、様々な観点から比較して、 「なんかどちらも便利そうって聞くけれど、どちらを使えばいいのかわかんないな？？」 という人をこの世からなくします！ Netlifyってなんぞや？ https://www.netlify.com/ githubと連携可能な静的Webホ
SNS映えするWebアプリを...！FirebaseとVue.jsでSPAのOGP画像の動的生成をやってみたら案外楽だった - Qiita
この記事はFirebase Advent Calendar 2018 6日目の記事です。 はじめまして、ゆき(@twitter:yuneco)です。日頃は絵を描いたりちょっとしたWebアプリを個人開発したりして遊んでいます。今日は個人でTwitter連携アプリを開発した際に悩んだSPAの動的な（ページごとの）OGP生成について情報をまとめてみたいと思います。NuxtやSSRは使いません。 作ったもの＆OGPのイメージ 今回作った colorinco*カラーインコ はTwitter連携したユーザの投稿画像やお気に入り画像を表示し、そこから自動的にカラーパレットを生成、Twitterでシェアできるサービスです。共有するとタイムラインに↓こんな感じでコンテンツにあわせた画像が大きく表示されます。 映える！テンション上がる！ SNS連携アプリならOGPは必須 OGP(Open Graph Prot
ヤフー株式会社におけるWebフロントエンドの技術選定 - Yahoo! JAPAN Tech Blog
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo! JAPAN Tech Advent Calendar 2018の6日目を担当します、Webフロントエンドエンジニアをやっている向井(@sakito)です！ 今回はヤフー株式会社でWebフロントエンドエンジニアがどのような取り組みを行なっているのかをお伝えします。 ヤフーの組織体制 Webフロントエンドエンジニアの取り組みを紹介する前に、ヤフーがどのような組織体制なのか紹介します。 冒頭画像のようにヤフーではカンパニー制度を取り入れており、それぞれのカンパニーにサービスを開発する事業本部があり、この事業本部単位でデザイナーやエンジニア、そのほかにもさまざまな職種の方が所属し、サービスごとで日々開発に取り組んでいます。
イーサリアム(Ethereum)使用のアダルト動画サイト、月間アクティブユーザーが6千人超え | CoinChoice
Spankchainは、アダルト動画をEthereum（イーサリアム）のスマートコントラクトで構築したペイメントチャネルを使用し、マイクロペイメントで課金体験ができるプラットフォームです。このSpankchainが、月あたりのアクティブユーザー6,000人を超えました。 月間アクティブユーザー6,000人超え、やり取りは半年間で約800万円 今、マイクロペイメント系では一番使われているのはこのアプリケーションです。仮想通貨メディアCoindeskのインタビューで同プロジェクトが公表をした数字によると、2018年10月時点での月あたりのアクティブユーザーは6,136人、この6ヶ月間で$72,000（約800万円）以上が同プラットフォームでやり取りされたといいます。 参照：CoinDesk 数分程度のパフォーマンスに少額の都度課金ができたりすることは、クレジットカードなどでは難しい体験です。ま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
vue.js(nuxt.js) の plugin はとても便利 - Qiita
NuxtMeetUp#6 - 資料一覧 - connpass
EOS(イオス)は、ビットコイン(BTC)やイーサリアム(Ethereum)より集権的という評価は妥当か？｜CoinChoice