フロントエンドの「想定外」に対応する考え方とTipsいくつか
とても個人的な話ですが、ここ最近で自分自身のプライバシー意識の高まりを感じて、ブラウザの設定を見直す機会がありました。見直したのはCookieの設定で、許可したドメインにしかCookieを記憶しないようにしました。設定変更によるある程度の不便は覚悟していました。とはいえ、ま〜せいぜい、初回アクセスの時のモーダルが何度も出るようになるとか、ログインできなくなるとか、そのくらいかなと思っていました。 しかし実際は、悪い意味で期待を裏切られることになりました。 Cookieが無効なだけで、“全く”動かなくなってしまうウェブサイトやウェブアプリが、本当にたくさんあることに気づいたのです。 全く動かなくなってしまう原因は単純（後述）だったのですが、ちょっとした対処で簡単に直せることなのに、サイト全体が一切使い物にならなくなってて、もったいない！！ と思いました。 フロントエンドの想定外 ウェブサイト
Markdownだけで綺麗なスライドを作るCLIを作っている - 技術探し
テーマ やりたかったこと デモ 手順 タスク 仕組み できること・できないこと できること できないこと 次の実装 さいごに fusuma0.0.1をリリースした。https://t.co/EpS9Wkq7DT— npx hiroppy😶 (@about_hiroppy) 2018年4月27日 今現在、0.2.1 テーマ 本質ではないwebpackとかBabelとかPostcssとかの設定ファイルを書くことなく、1コマンドでリリースまで面倒を見てくれて、マークダウンだけクールなスライドを作れるようにしたい。 サッとスライドを作れて、サッっとデプロイしたい。 やりたかったこと webpackやBabelの設定を隠蔽したい 開発・プロダクトビルド・リリースを1コマンドで終わらせたい マークダウン(or HTML)で書けるようにしたい フレームワークへの接続 bespoke.js以外にも対応さ
SCOUTER開発者ブログ
2024-04-29 CSSってどんな勉強をしたらいいの？おすすめの勉強法3選！ 文字やタブなどWebサイトのデザインを作成するマークアップ言語がCSSです。 CSSを勉強すると、おしゃれなWebサイトやかっこいいWebサイトが作れるようになります。 また、Webサイトを作るときに必要なHTMLを理解するのにも役立ちます。 CSSを勉強するならできるだけ効率よく勉強できるようになりたいですよね。 ではCSSの勉強法はどのようなものがあるのでしょうか。 CSSの勉強法は、スクール […] 2024-04-29 WEBエンジニアから見たXserverの使い勝手と評判 レンタルサーバーのおすすめサイトを見ると、大体どこでも上がってくる有料のレンタルサーバーの一つに「Xserver」があります。 このXserverとは、どのようなサーバーで、サービスにはどのようなものがあるのか。 ホームページ関連
非同期I/O APIの設計がなかなか難しい - .mjtの日記復帰計画
yuniで実用的なプログラムを書くためには、どうしても非同期I/Oライブラリが必要になる。というわけで黙々と設計しているけれど、これがなかなか難しい。 非同期I/Oライブラリの難しさ そもそもOS/処理系毎に別物が必要 "非同期I/Oライブラリなんてlibuv一択だろ"という意見も有るかもしれないし、実際、Node.jsはlibuvのデザインの実用性を証明しつづけていると言える(実際には逆で、Node.jsのOS抽象化レイヤとしてlibuvが実装されている)。が、libuvはカーネル機能の抽象化でしかなく、同じデザインがyuniに適用できるとは限らない。yuniは既にKawa(Java上のScheme実装)やIronScheme(.net上のScheme実装)をターゲットしているので、これらでも動作するような配慮が必要になる。 もし、yuniの非同期I/Oライブラリを単なるlibuvのバイ
Vue.jsを教えるまでの道のり - sushitecture
querySelectorを教えるべきかgetElementByIdとかでやるべきか一瞬迷う（結局querySelectorにする）
簡単にガントチャートとかクラス図とか書けるやつ - Qiita
mermaidは、Web上で簡単にフローチャートやシーケンス図などのUMLが描けるライブラリです。 d3.jsの機能特化型というかんじで、d3ほど様々なことはできませんが、そのかわりに対応してる図形なら非常に簡単に描くことが可能です。 なお、ヘルプはGitGraphやクラス図が載ってないなど未完成で、いまいち頼れません。 ごたくはいい、実物を見せろ こんなかんじ →支払い忘れてサーバが死んだので代替(誰かが書いたやつに勝手にリンク) できること 以下の図が描ける。 ・フローチャート ・シーケンス図 ・ガントチャート ・クラス図 ・gitグラフ 最後だけ異質だ。 インストール CDNを使えばいいだけだが、自分のところに置きたい場合はyarnで引っ張ってこれる。 <!DOCTYPE html> <html lang="ja"> <head> <link rel="stylesheet" hre
最新版で学ぶwebpack 4入門 - BabelでES2017環境の構築(React, Three.js, jQueryのサンプル付き) - ICS MEDIA
最新版で学ぶwebpack 5入門 Babel 7でES2023環境の構築 (React, Vue, Three.js, jQueryのサンプル付き) ECMAScript 2015(略：ES2015)以上の言語仕様でJavaScriptを書くことが、昨今のウェブのフロントエンドエンジニアの基本テクニックです。しかし、ECMAScript 2015以上の仕様のJavaScriptで記述すると、Internet Explorer 11など古いブラウザでは動作しないこともあります。そこでBabelなどのトランスパイラと呼ばれるツールを使って、ES2015〜ES2023の仕様で記述したJavaScriptファイルを互換性のあるECMAScript 5に変換します。 トランスパイラとして一番有名なのが「Babel」というツールです。ただ、BabelにはECMAScript Modules（impo
Node.js で発生した Hash flooding DoS とその内容について - from scratch
Node.js のセキュリティアップデート 7/11 に Node.js のセキュリティアップデートがリリースされました。 Security updates for all active release lines, July 2017 | Node.js これには複数の脆弱性が報告されており、今回はそのうちの1つの Hash flooding DoS という脆弱性が何なのか、それに対して採用された対策が何なのかについてお話します。 Hash flooding DoS (hashdos) Denial Of Service 、つまりサービス拒否攻撃の一種です。 JavaScript のオブジェクトは内部的にハッシュテーブルとして表現されています。 図はこちらから引用 ハッシュ関数は同じkeyなら同じ値を返しますが、別なkeyなら通常は別な値になります。 ハッシュテーブルのinsert, g
Node.jsでの環境変数の使い方 - 30歳からのプログラミング
同じソースコード、同じアプリケーションでも、デプロイによって設定が異なるものがある。 各種APIキーや、データベースの設定など。本番環境と開発環境では異なる設定を使うことが多い。 こういったものをハードコーディングするべきではない。 また、GitHubでコードを公開する場合、APIキーなどの機密情報を書くわけにはいかない。 そのような場合に使うのが、環境変数である。 環境変数の正確な定義は知らないが、コードの外から設定を行う変数、という感じだろうか。 これを利用することで、APIキー等をコードに書かずに済む。 process.env Node.jsにおける環境変数は、process.envというオブジェクトに格納される。 このオブジェクトは最初から存在しており、予め、いくつかの環境変数が入っている。 コマンドラインで確認できる。 $ node > process.env いくつか表示される
Vue.js + ElectronでTwitterクライアントを作った - razokulover publog
Vue.jsとElectronでシンプルなTwitterクライアントを作った。 vue-twitter-client きっかけとしては一言で言うとフロントエンド周りの勉強。 2017年1~3月の振り返りにも書いた通り。 自分はモダンなフロントエンドの開発に疎かったので重い腰を上げてそろそろやるかという気持ちになって3月中頃くらいからはじめた。 Vue.jsについては2,3週間前くらいから触りはじめている。 Vue.jsはちゃんとしたSPAからフォームにちょいと味付けみたいな使い方もできたり小回りがきく。 個人的にはReactでの開発よりやりたいことが直感的に書ける気がしてるので使いやすいという印象。 とりあえず最初はTODOアプリやAPIを叩く小さなフィードを作って、次にNuxt.jsでSSRできるミニサイトを作ったりで大体使い方は覚えてきたというステータス。 ライブラリでいうとvuex,
初学者としてJavaScriptを学ぶ | さにあらず
はじめに#僕が以前書いたModern JavaScript 概観、そして Electron へは、読んで貰えただろうか？ あれは初学者には全く向いてないエントリだ。 あのエントリは、僕の理解したモダンな JavaScript 全体について概観することを目的としているからね。 あれを読んで、「今の JavaScript ってこんなに大変なのか…」と感じた人は多いだろう。 しかし、ある程度のソフトウェアを開発するために技術全般を概観しようとすれば、ああいう分量になるのは致し方ない。 と言う訳で、今回はちゃんと初心者向けのエントリを書いた。 少し多く感じるかもしれないが、丁寧に説明しようとしたからだと好意的に解釈して欲しい。 開発環境#Thinkpad X1 Carbon 2016 年モデルに Windows10 をインストールしてある。 ハードウェアスペックは、こうだ。 CPU i7 6600
Nuxt.js 公式ドキュメント翻訳完了のお知らせと、結城浩さんへの謝辞 - おいちゃんと呼ばれています
Nuxt.js はユニバーサルな Vue.js アプリケーションを構築するためのフレームワークで、その公式ドキュメントの翻訳をはじめたのは 前回お伝えした とおり。 そして翻訳が完了し、昨日、日本語バージョンが公開されたのでアナウンス。 ja.nuxtjs.org Nuxt.js というレール 先日行われた Vue.js Tokyo v-meetup="#3" でも発表したんだけど、Nuxt.js は「レール」を用意してくれている。 これに乗れば、サーバーサイドレンダリングだけでなく、Vue-Router、Vuex、Vue-Meta など Vue.js 関連ライブラリとの統合を Nuxt.js がまとめて面倒みてくれる。したがって（本来やりたかったはずである）Vue コンポーネントの開発に集中することができる。 「レール」という言葉を使ったのは、かつて Rails にはじめて触れたときの感
スタンドアロンAMPのススメ
こんにちわ、@t32kです。先日、3/18に大阪で開催されたFRONTEND CONFERENCE 2017に登壇してきました。また弊社メルカリは懇親会スポンサーでした。今回は『スタンドアロンAMPのススメ』というタイトルで講演した内容をシェアしたい思います。 私が所属しているソウゾウ社ではメルカリアッテというクラシファイドサービスを作っています。メルカリは配送システムを介して売買しますが、こちらは直接会って手渡しでモノの売り買いができます。もちろん、手数料や配送料はかかりませんので、よろしかったら使ってみてください。私はそこのWeb担当で、本サイトのAMP実装について話します。 今日のアジェンダです。 AMPのメリット 表現力について テンプレート分散について 構造化データについて まとめ といった内容でやっていきたいと思います。 AMPとは？ まずはAMPとは何か説明します。AMPとは
Vue2.x系のハマりどころ templateとコンパイラを完全解説するよ
Vue2.xでは仮想DOMが使われるようになりました。それに伴い、Vue用のテンプレートを仮想DOMをレンダリングするための関数に変換するという処理をコンパイル時に行ってくれる仕組みが組み込まれています。 そして、お手軽にVueを試したい人、プロダクトにVueを使いたい人、コンポーネント志向でアトミックに実装したい人など、様々な用途に応じたテンプレートの書き方(＆コンパイルの方法)を用意してくれています。 そのためテンプレートの書き方とコンパイルの種類については仕様がやや複雑で、公式ドキュメントだけでは理解が難しくけっこうハマりどころだと感じている(事実ずっぽりハマりました)ので、知見を残しておこうと思います。 ※この記事を書いている時点でのVueのバージョンは2.2.1です。 おさらい Vue.jsの利用方法3パターン 1. Vueを<script>タグで埋め込む方法 2. Vue CL
Vue.jsの流行とネイティブアプリフレームワークWeex、そして台頭する中国語コミュニティについて - クイック エンジニアリングブログ
こんにちは。五所です。 最近は時代についていこうと、フロントエンドの情報収集をしています。 React, Redux, AngularJS, ES6, Webpack, Gulp, Babel, Yarn... 情報収集すればするほど、頭がいっぱいになるのですが、その過程で感じたこと、考えたことをつらつら述べさせて頂きます。 Vue.jsについて github.com Vue.jsは近年非常に盛り上がりを見せているJavaScriptのフレームワークです。 特に2016年にすさまじい勢いで伸びました。 GitHubのスター数は2016年だけで26400獲得し、2017年1月21日現在では40000スターを超えています。 risingstars2016.js.org Vue.jsは the 10th most starred JavaScript project on GitHub the
ReactとAngularのいいとこ取り？ 2017年こそ学びたいVue.jsの始め方
Angular、Reactと並んで海外で人気が高まっている「Vue.js」。ReactとAngularの開発経験がある著者がVue.jsをチュートリアルを通じて特徴をまとめました。2017年、新しく学び始めるきっかけにどうぞ。 2016年9月、人気のJavaScriptフレームワークVue.jsがv2をリリースしました。それ以来ぜひ使ってみたい、どのようなものか知りたいと思っていました。AngularとReactを使い慣れた者の1人としては、Vueが似ているところや違うところも知りたかったのです。 Vue.js 2.0はすばらしいパフォーマンスを誇ります。データサイズが比較的小さく（バンドルされるVueのランタイム版は一度最小化してgzip圧縮したら16KBしかありません）、Vueのvuexや、vue-routerのような付属の状態管理ライブラリーもアップデートされました。1つの記事ではと
React のソースコードを読んでみよう！ - マルシテイア
こんにちは id:amagitakayosi です。 株式会社はてなで主にフロントエンド開発を担当しています。 この記事では React 本体のコードを読んでみます！！ この記事は Reactアドベントカレンダー 2016 の7日目の記事です。 昨日は yutaszk さんで「react-router v4 でFlux アプリケーションをHot Module Replacement する」でした。 目次 はじめに (Kyoto.js の宣伝) 準備 ディレクトリ構造 monorepo Haste Gulp と Grunt コードリーディング react ReactComponent react-dom ReactMount ReactReconciler ReactCompositeComponent ReactDOMComponent まとめ おわりに はじめに (Kyoto.js の宣
おっさんES6/ES2015,React.jsを学ぶ
おっさんES6/ES2015,React.jsを学ぶ 2016JavaScript入門 2016/11/21 @BizReach D3イベント登壇資料 最近のJavaScript動向 ・試験に出るJavaScript21年の歴史 ES6/ES2015を学ぶ ・ES6/ES2015概要 ・ES5を振り返る ・altjsの意義 Reactを学ぶ ・DOCを読む ・Tutorialをやる まとめ ・今回の学習を通じて感じたこと Read less
エラーモニタリングサービス Rollbar と GitHub Issue を利用したエラー対応フロー - クラウドワークス エンジニアブログ
*1 開発の所(@ctokoro_me)です。 インド音楽の演奏が趣味の一つなのですが、興味のある人が全然いない（そもそもインド音楽自体がほぼ知られてない）のが隠れた悩みです。 さて、みなさんが運用中のアプリケーションでは、エラーモニタリングはどのように行っているでしょうか？ ログを tail / grep している感じですか？？ それとも、エラーが起きたらメールが飛んで来るようになっているのでしょうか？ どちらにしても、ユーザーが増えてくると管理が大変になってきてしまいますよね 😵 「一行のログの向こうには、一人のユーザがいる」 *2 という格言(!)もある通り、エラーが起きたということはそのユーザーがサービスを正常に使えていないということです。 しっかりと対応していきたいですね。 エラーモニタリングサービス クラウドワークスではエラーモニタリングサービスとして Rollbar を採用
私のソースコードの書き方 - @kyanny's blog
note.mu なるほど自分も同じような感じでやっているなぁ、と思った。もうちょっと詳しく書くと、 まず変更しようと思っている部分の周辺のコードを読んで、「ここらへんをいじればよさそう」と当たりをつける（当たりのつけかたにもいろいろあるのだが後述） 土地勘を養ったところで具体的な変更の仕方を考える。必要に応じて紙に下手くそな図を書いたり、考えを箇条書きにしたり、実際にコードを試しに変更してみたりする この方針でいけそう、と道筋が見えたらいよいよコードを書き始める。細かい単位でコミットするかどうかは場合によるが、少なくとも git add はこまめに行う（エディタの undo でせっかく書いたコードを失わないため） 道筋が見えなかったり、プロトタイプ的に書いたコードが望み薄そうだったら潔く諦める。煮詰まっていることを自覚して、コーヒーを買いにいったり、オフィスの外を散歩したりして頭をリフレッ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
