[B! javascript] surume000のブックマーク

レトロエンジニアのための近代Webフロントエンド事情 - Qiita

フロントエンド開発という言葉があちらこちらから聞こえてくる。﹁反対語はバックエンド開発だから、サーバとかCUIじゃない、アプリとかGUIあたりのことを指す広い意味の言葉だよね。﹂・・・とか思ってたらとんでもない。世の中ではJavaScript界隈を限定している風な使われ方をしている。私のような C/C++ メインのレトロエンジニアは肩身が狭くなるばかりである。本文は、近年のWeb技術に追いつこうと調査した結果のメモ書きである。n番煎じの内容だが、Web業界にいない人間の視点なので、私と同類のレトロエンジニア等、一部の人には新しい気付きが与えられるかもしれない。詳しい人の添削・ツッコミは大歓迎。詳細はリンク先に任せ、私が思う﹁わかりやすい順序﹂で、調べたことをざっと紹介していく。きっかけ読み飛ばしてもよい。 Reactを使うとなぜjQueryが要らなくなるのか数年前、

surume000 2016/11/26

はあ

リンク

SPAと覚悟

Frontend Meetup vol.1 - SPAを語り尽くす会! でのLT資料です。 http://connpass.com/event/38112/

surume000 2016/09/17

これはいいスライド

リンク

面倒な手続き不要！「Web API」の超お手軽活用術をJavaScriptコード付きで一挙大公開！ - paiza times

どうも、まさとらん︵@0310lan︶です。今回は、面倒な登録手続きやトークンなどが一切不要で、今すぐ利用できる便利な﹁Web API﹂を厳選してご紹介しようと思います。これらのAPIを使うことで、Web制作がちょっと便利になったり、独自性のあるユニークなサービスを構築できるようになるでしょう。また、簡単に扱えることから、﹁Web APIを使って何か作ってみたい…﹂と思っている初心者の方にもオススメですよ！ ■﹁Web API﹂の使い方！今回ご紹介する﹁API﹂は、いずれも﹁JSONP﹂形式でデータが取得できるので、普通のJavaScriptだけで試すことが出来ます。以下のコードを、HTMLファイルに記述するか、新規にJSファイルを作って読み込むようにしましょう。 var script = document.createElement('script'); script.src

surume000 2016/06/22

javascript

リンク

あのライブラリは何故誕生したの?のまとめ - Qiita

はじめに最近、フロントエンドのライブラリ乱立問題について盛り上がってました。自分はnobkzさんの以下の文に全てがまとまっていると思います。僕の最初の違和感は、﹁技術的な流行り﹂に乗ることに何の価値があるのだろうか?ということである。もちろん、最新のツールやフレームワークはより何かが良くなってるかもしれない。しかし、それをあなたのプロジェクトで採用するには何の価値があるだろうか?﹁最近のフロントエンドへの違和感 - nobkzのブログ﹂より裏を返せば、新しいライブラリの内容、特に﹁どのような問題を解決するためにこのライブラリが生まれたのか﹂という思想を把握しておくことは重要だと言えます。つまりは、 "How?(ライブラリの使い方)" よりも "Why?(なぜそのライブラリが必要なのか)" を学んでおこうということです。この記事ではどのような既存の問題・要求をどう解決して

surume000 2016/04/13

なるほど。そもそもSPAが必要になるケースが稀なんじゃないだろうか。なのに主流のように言及されるから、SPAが必要でないシステムを構築している人にとっては違和感を覚えるということか

JavaScript

リンク

30分で出来る、JavaScript (Electron) でデスクトップアプリを作って配布するまで - Qiita

概要 Electronとは、JavaScriptでデスクトップアプリケーションが作成できるツールです。MITライセンスなので無料で使える上に商用利用も可能です。最近ではAtomやSlackのアプリもElectronで作られたとのこと。今かなりノっているツールの1つです。以下、簡単な特徴。 Node.js + HTML + CSS という、WEBの技術でアプリが作れる。 Chromiumブラウザ(Chromeのオープンソース版)を内蔵しているので、普段の書き味と変わらないこれ1つで Windows, Mac, Linux 向けのアプリが作れる超簡単ここではElectronのインストールからアプリの配布までを紹介します。以下、﹁Hello World﹂を出すだけのアプリですが、ゼロからはじめて30分でここまで出来ます。インストールまずは必要なものをインストール。 nodeの

surume000 2016/01/24

リンク

「AngularJS」と「はてブAPI」で作るChromeアプリの作り方を完全公開！ - paiza times

どうも、まさとらん︵@0310lan︶です。今回は、Googleが提供する﹁Chromeブラウザ﹂で動作するアプリケーションを作ってみたいと思います。﹁なんだか難しそう…﹂と思うかもしれませんが、ざっくり言ってしまうと普通に﹁Webページ﹂を作るのと変わりません。そこで、簡単なサンプルアプリを作りながら、自分だけのChromeアプリ開発に挑戦してみましょう！ ■Chromeアプリとは？開発を始める前に、まずは予備知識としてChromeアプリの﹁種類﹂についてご紹介しておきます。実は、﹁Chromeアプリ﹂と言っても、いくつか異なる種類があります。例えば、﹁Appspector﹂というChromeアプリは、ブラウザの機能を拡張することで、表示されているWebページがどんな技術を利用して作られているのかを表示できるようになります。︵https://chrome.google.com

surume000 2016/01/13

リンク

物理サーバを選定する際のポイント – Eureka Engineering – Medium

Eureka EngineeringLearn about Eureka’s engineering efforts, product developments and more.

surume000 2015/12/25

いいこと書いてあるけどpairs

リンク

漢は黙ってjQuery

DLゼミ：Primitive Generation and Semantic-related Alignment for Universal Zero-S...harmonylab

surume000 2015/12/14

JS界のPHP。高校生でスライド作りうまいな。すごい

リンク

今どきのJavaScriptで使われているインデント規約まとめ - ICS MEDIA

みなさんは普段JavaScriptを使って開発する場合、インデントはどのようにしていますか？タブ、スペース2個、スペース4個・・・などいくつかの選択肢があります。個人で開発している方は問題ありませんが、チームで開発している場合は意見が分かれ議論になることもあるでしょう。プロジェクト開始早々インデント論争でチーム内の雰囲気を悪くしたくはありません。本記事はそんなインデント論争の1つの解決策となるべく、ブラウザベンダーやプロダクトで定めているJavaScriptコーディングのインデントルールを調べてみました。この記事のポイント* 海外のJS界隈ではスペース2個のインデントが多数派 ESLINTなどの設定ファイルからコーディングルールを調べられるなぜインデント論争が起こるのか？そもそもなぜインデント論争が起こってしまうのでしょうか？　それはそれぞれ一長一短のため好みが分かれてしまうか

surume000 2015/12/04

リンク

schedulerjs - スケジュール調整に使えそうな横向き予定表

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Web上で様々な作業を行えるようになったことで、UIに求められる多様性も増しています。特に面倒だと感じるのは時間関係ではないでしょうか。カレンダー、ウィークリー、デイリーなどいずれにおいても時間に合わせた表示、処理は大変です。そこで様々なライブラリを知っておくことでいざとなった時に役立ちます。今回は横型のスケジュール選択ライブラリschedulerjsを紹介します。 schedulerjsの使い方 schedulerjsの初期表示です。薄いブルーのエリアはドラッグしたり、端をドラッグして枠の幅を増減できます。実際に操作しているところです。実際の描画は予定を配列で渡すだけです。 var list = [ { 'name': 'Chewbacca', 'appointments

surume000 2015/10/21

リンク

JavaScriptにもクラスがやってきた！JavaScriptの新しいclass構文をマスターしよう

JavaScriptにもクラスがやってきた！JavaScriptの新しいclass構文をマスターしよう高津戸壮︵株式会社ピクセルグリッド︶ ECMAScript 2015︵ECMAScript 6︶で新たに追加された待望のclass構文について、その概要をサンプルコードを交えて紹介します。これまでのJavaScriptにおけるクラス多くのプログラミング言語はクラスを作れる機能を持っていますが、JavaScriptにその機能は用意されていませんでした。しかし、JavaScriptにはprototypeという柔軟な仕組みが存在しており、このprototypeを利用することで、他の言語で表現されている﹁クラス﹂と似たような振る舞いを再現することが可能でした。それは例えば、こんなふうにです。 /* Cat雛形の作成 */ function Cat(name) { this.setName(

surume000 2015/10/17

javascript

リンク

さよなら CoffeeScript - mizchi's blog

prototype.js が jQuery に置き換えられた時、開発者が気づいたのは、自分に本当に必要だったのはprototypeのメソッド拡張などではなく、クエリエンジンだったということ。 coffeescriptが当初、熱狂的に支持された背景はなんだっただろう。今思えば、それはアロー記法とクラス構文だったと思う。 javascriptの関数型への憧れ、prototypeベースの限界 javascript は断じて関数型言語ではないが、他の言語と同じぐらい関数型言語に憧れていたのも、また事実だろう。しかしビルトイン関数が高階関数を要求するデザインにしては function というキーワードはながすぎたし、その function が暗黙に作り出す this スコープの複雑な振る舞いも開発者の悩みの種だった。﹁あらゆる関数スコープで状態を持つことが"できすぎる"﹂という割れ窓だった。 ES5

surume000 2015/10/03

これは良いCoffeScriptへの弔辞。故人も喜んでいることでしょう。

リンク

npm とか bower とか一体何なんだよ！Javascript 界隈の文脈を理解しよう - Qiita

背景 Javascript で Web アプリを作ろうとすると、よくわからないことだらけで超混乱します。npm と bower の違いは？npm はサーバーサイド用、bower はクライアントサイド用らしいよえっ、でもなんで bower のインストールにnpm が必要なの？サーバーサイドは Rails で書きたいからnpm 要らないと思うんだけど・・・ていうかサーバーサイドJSとか node.js って何？よく見る browserify って何？こういった疑問が沸き上がるのは、各ツールが生まれた文脈がよくわかっていないからです。いろいろ調べてやっとちょっとわかってきたのでメモします。間違いがあったらご指摘ください。﹁CommonJS﹂誕生 - Javascript は汎用プログラミング言語へその昔、Javascript 大好きおじさんは言いました。 Javascrip

surume000 2015/09/25

分かりやすい

リンク

yohgaki's blog - 画像ファイルにJavaScriptを隠す

(Last Updated On: 2014年12月5日)前回のエントリでイメージファイルにスクリプトを埋め込んで攻撃する方法について記載しましたが、最近イメージファイルにスクリプトを埋め込む事例が話題になったためか ha.ckersにJavaScriptをイメージファイルに隠す方法が紹介されています。 http://ha.ckers.org/blog/20070623/hiding-js-in-valid-images/ <script src="http://cracked.example.com/cracked.gif"> などとXSS攻撃を拡張する手段に利用可能です。サンプルとしてFlickerにJavaScriptを埋め込んだイメージファイルがアップされています。このイメージファイルは上手く細工しているので画像としても表示され、JavaScriptも実行できます。 Flicke

surume000 2015/09/10

リンク

JavaScriptのデバッグのコツと技 | POSTD

以前の記事で、 Webアプリケーションのデバッグの仕組みについて触れました。今回は実践的なJavaScriptのデバッグについて掘り下げていきたいと思います。ブラウザデベロッパツール私の個人的なお気に入りはChromeデベロッパツールです。SafariやFirefoxはChromeほどの高水準に達していません。しかし、徐々に改善されてきています。FirefoxにはFirebugと改良されたFirefoxデベロッパツールが組み合わされた機能が備わっています。もし、Firefoxチームがビルトインされているデベロッパツールの改良の中で素晴らしい仕事をし続けたとしたら、Firebugはいつか、すたれるかもしれません。個人的な好みにかかわらず、ターゲットとするあらゆるブラウザで、全てのコードのテストやデバッグができるようにすべきです。”あらゆるブラウザ”には、かの有名なInternetE

surume000 2015/09/05

javascript

リンク

[JavaScript]使い分けるだけで今すぐデバッグ効率を上げる、consoleオブジェクトの関数 - Qiita

なんかはよく使うはず。だが、ちょっとした関数の使い分けでデバッグ一つもしやすくなる。なのでほんの少し紹介。 ※以下は全てGoogle Chromeでの実行結果です console.error赤い！よくあるエラーメッセージエラーとみなす箇所に是非

surume000 2015/07/25

リンク

シンプルでかつ最高のJavaScriptプロファイラ sjsp を作りました！ ― Webアプリケーションが複雑化する中でプロファイラに求められるものとは何か - プログラムモグモグ

あらすじ Web技術が複雑になる中で、JavaScriptのプロファイリングをとる方法とは。プロファイリングを取るためのコードを手で書いてみましょう。とてもシンプルで、かつ最高のJavaScriptプロファイラ sjsp を作りました。本当にあった怖い話上司﹁とにかくJavaScriptのコードを速くしてくれ﹂私﹁分かりました、速くします﹂ (次の日) 私﹁いいプロファイラがないなら作ればいいじゃない﹂同じチームの人﹁えっ？﹂私﹁最高のJavaScriptプロファイラ作ったよ﹂同じチームの人﹁﹁えっえっ？？？﹂﹂私﹁早速使ってみたらこことここが遅いって分かったよ﹂同じチームの人﹁﹁﹁この子は一体…﹂﹂﹂ JavaScriptのプロファイリングの難しさ近年、Webブラウザーの処理速度は著しく向上し、その可用性の高さから、アプリケーションのプラットフォーム

surume000 2015/07/01

リンク

デザイナーやディレクターも知っておきたい、ページ表示速度の高速化の基本

スマホからウェブにアクセスするユーザが増え、ウェブサイトの表示速度の高速化がより重要な制作の課題になっています。1ページもののサイトなら、フロントエンド・エンジニアが一人で実装できるかもしれませんが、ある程度の規模のウェブサイトではワークフローやサイト全体の設計にも関わってきます。また、表示速度の高速化の方法を知らなければ、最適化しやすい、より高度なデザインは実現できないでしょう。エンジニアだけでなく、デザイナーやディレクターがこういった情報を知っていれば、よりスムーズに結果を出せるウェブサイト制作ができるはずです。ページ表示速度の改善にはいろいろな方法がありますが、この記事では一番効果がありそうなところから攻めていきたいと思います。自分もまだまだ勉強中なので、まずはfilament groupのScottさんの記事やClearleftのJeremyさんの記事を参考に、フロントエンド

surume000 2015/05/06

CSSやjavascriptの読み込み方法を工夫することによって、ユーザーの体感速度を改善(=表示開始を早く)する歩法

リンク

JavaScriptを読んでて「なにこれ！？」と思うけれど調べられない記法8選。 - Qiita

JavaScriptを読んでいると、﹁あれ、、、なにこれ？この書き方。。。﹂と思うことがたまにあります。この際の厄介なことは、どうやって調べたらいいかわからないことです。Google先生に聞こうにも、その書き方をなんと呼ぶかわからないので聞けない。そんな﹁なにこれ？﹂を厳選してみました。覚えておくと、将来スッキリとする時が来るでしょう。 1. なみなみ、ふにゃふにゃ言ってる

surume000 2015/04/18

「“var arg = 条件 ? true : false;”」本筋ではないが三項演算子でtrue,false返すの嫌い

javascript

リンク

Indo true Insurance services

Di era digital saat ini, mendapatkan informasi secara cepat dan akurat tentang muatan hari ini telah menjadi kebutuhan penting bagi banyak orang. Baik itu untuk keperluan bisnis, pendidikan, atau sekadar

surume000 2015/03/17

リンク

はてなブックマーク

タグ

関連タグで絞り込む (159)

javascriptに関するsurume000のブックマーク (153)

お知らせ

今週のはてなブックマーク数ランキング（2024年6月第3週）

今週のはてなブックマーク数ランキング（2024年6月第2週）

月間はてなブックマーク数ランキング（2024年5月）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス