You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
CSS Modulesという、CSSの新しい設計概念・指針のようなものがある。 CSS Modulesチームの1人であるGlen Maddern氏が書いた「CSS Modules - Welcome to the Future」という記事の翻訳がバズっていたので、僕がCSS Modulesについて思ったことをまとてみる。「CSS Modulesとは何か」ということは、上記の記事に書かれているのでここではあまり触れない。 CSS Modulesとコンポーネント設計 CSSのルールセットは全てがグローバル定義であり、CSS(Cascading Style Sheets)というスタイルシート言語の最大の特徴である"カスケーディング"という機能により、CSSファイルを見ただけでそのスタイルの影響範囲を理解することは難しい。 CSS Modulesは、CSSのルールセットの影響範囲を、Webアプリケ
はじめに HTML の script タグ内にインラインで書かれた js をデバッグする方法を共有します 本来であれば外部ファイルとして *.js にすべきですが、ワケあって <script> タグ内に js が書かれている場合に有効です! この方法は script タグに囲まれた js を、 あたかも外部ファイルの js として扱えるようになります やってみよう 例えば、以下のような html があるとします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Qiita</title> </head> <body> <div id="hello">Hello World!</div> <script> document.querySelector('#hello').addEventListene
cola.js (A.K.A. "WebCoLa") is an open-source JavaScript library for arranging your HTML5 documents and diagrams using constraint-based optimization techniques. It works well with libraries like D3.js, svg.js, and Cytoscape.js. The core layout is based on a complete rewrite in Javascript of the C++ libcola library. It also has an adaptor for d3.js that allows you to use cola as a drop-in replacemen
st=>start: Start:>http://www.google.com[blank] e=>end:>http://www.google.com op1=>operation: My Operation sub1=>subroutine: My Subroutine cond=>condition: Yes or No?:>http://www.google.com io=>inputoutput: catch something... para=>parallel: parallel tasks in=>input: some in out=>output: some out st->op1->cond cond(yes)->io->e cond(no)->para para(path1, bottom)->sub1(right)->op1 para(path2, top)->o
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめに はじめまして、安藤義裕と申します。ヤフー株式会社データ&サイエンスソリューション統括本部ソリューション本部でプログラマーをしております。趣味はカミさんの手料理です。 機械学習で用いられるアルゴリズムの一つにニューラルネットワークがあります。ニューラルネットワークは脳細胞の働きにヒントを得て考えられたものです。今回扱う多層ニューラルネットワークはニューラルネットワークの中間層と呼ばれる部分を多層化したものです。近年話題に上ることの多い Deep Learning ではこの多層ニューラルネットワークが利用されています。 多層ニューラルネットワークは用途に応じて異なるネットワークが利用されます。画像処理では畳込みニューラルネッ
こんにちは、トレンド調査ラボの井上寛之(@inohiro)です。 クックパッドの検索ログを基にした法人向けデータサービス「たべみる」の開発を担当しています。 本稿では、現在開発を行っているスマートフォン向けウェブアプリケーション(Rails)で採用した、 JavaScriptチャートライブラリを選定するにあたって検討した観点について述べます。 また、実際に採用したライブラリと、その利用例を簡単に紹介します。 ウェブ上に無数にあるJavaScriptチャートライブラリから、最適なものを一つ選択するのは なかなか難しい作業ではないかと考えています。おそらく、これから記述する条件を満たすライブラリは数多く存在し、 今回私が選択したライブラリ以上に良いものがあるのではないかと思います。 「何を以って良いライブラリとするか」という議論もまた難しい話題です。 そのようなライブラリについては、はてブコメ
mag.module('lister', { controller: function(props) { this.item = [1, 2, 3] this.title = 'Lister' }, view: function(state, props, element) { state.h2 = { _text: state.title, _onclick: function() { state.show = state.show ? !state.show : true state.item.reverse() state.title = 'Gister' + state.show } } } }) mag.module の第一引数、lister は <div id="lister"> と対応しており、ここで両者が結ばれます。controller 関数は一度だけ呼ばれて、view 関
A rich text editor for everyday writing. Compose beautifully formatted text in your web application. Trix is a WYSIWYG editor for writing messages, comments, articles, and lists—the simple documents most web apps are made of. It features a sophisticated document model, support for embedded attachments, and outputs terse and consistent HTML. View on GitHub ❤️ Made by 37signals.
diag.md シーケンス図とかフローチャートをしごとで描画することになった場合、 テキストから生成できたら楽なので、それ系のツールまとめ GraphViz http://www.graphviz.org/ C製 Doxygen, Moinmoinなどと連携可能 ブロック図、クラス図、ネットワーク図など PNG, SVGなど 出力可能形式一覧 JavaScript(Emscripten)版もある。リアルタイムプレビュー出来て便利 https://github.com/mdaines/viz.js PlantUML Java製 シーケンス図, ユースケース図, クラス図, アクティビティ図, コンポーネント図, ステート図, デプロイ図, オブジェクト図などめっちゃたくさん作れる PNG, SVG, LaTeX, ASCII出力 なんとワイヤーフレームも作れる。アイコンとかも入れられる。 オ
背景 コンピュータ・サイエンスのバックグラウンドを持たない者として、私は常々もっと低いレベルでプログラムのしくみを理解したい、そこに多くのエネルギーを費やしたいと考えてきました。 そこで、まずは基本を身につけるためにプログラミングの入門書である『 Programming from the Ground Up 』を入手したのですが、なかなか学習を始められずにいました。そんな時、ちょうどブラジルまでの11時間にも及ぶフライトが予定されており、それがこの本を読み始めるにはもってこいの機会となったのです。 読んでみると、この本がすっかり気に入ってしまいました。ただ、事例がLinux x86 GNUアセンブリ言語で書かれていたのです。私は64ビットのMac OS Xユーザでした…。アセンブラ、リンカフラグの例や、 i386 と x86_64 間のシンタックスを理解するのにはインターネットが欠かせない
2015年にもなるのにJavaScriptでのDOM操作のパフォーマンスについて書く。ウェブページにインタラクションを持たせたい時に、JavaScriptでDOM操作を行うことがよくある。このDOM操作のパフォーマンスについて、よく聞く意見を大別すると次の2つがある。 JavaScriptによるDOM操作は重たい レンダリングが重いだけで、DOM操作そのものはそれほど重たくない JavaScriptでオブジェクトのプロパティを操作したりする単体の処理は通常1ミリ秒もかからないが、DOM操作をするとレンダリングが完了するまでに数十ミリ秒程度かかったりする場合がある。1番目のDOM操作が重たいと言っている人は経験則的にそう言っていることが多い。 レンダリングの仕組みを知っている人は2番目の意見を言うが、重箱の隅をつつくような話をするとこれも必ずしも正しいわけではない。DOM操作するコードによっ
Why Copying text to the clipboard shouldn't be hard. It shouldn't require dozens of steps to configure or hundreds of KBs to load. But most of all, it shouldn't depend on Flash or any bloated framework. That's why clipboard.js exists. Install You can get it on npm. npm install clipboard --save Or if you're not into package management, just download a ZIP file. Setup First, include the script locat
About qTip2 is the second generation of the advanced qTip plugin for the ever popular jQuery framework. Building on 1.0's user friendly, yet feature rich base, qTip2 provides you with tonnes of features like speech bubble tips and imagemap support, and best of all... it's completely free under the MIT/GPLv2 licenses!
As part of our effort to grow the Web platform and make it accessible to new devices, we are trying to reduce the Web’s dependence on Flash. As part of that effort, we are standardizing and exposing useful features which are currently only available to Flash to the entirety of the Web platform. One of the reasons why many sites still use Flash is because of its copy and cut clipboard APIs. Flash e
Motivation Regular expressions are used in every language, every programmer is familiar with them. Regex can be used to easily express complex strings. What better way to generate a random data than with a tool you can easily describe what string you want? Thanks to String-Random for giving me the idea to make this in the first place and randexp for the nifty little `.gen` syntax. Install For node
変更内容 日付 更新内容 2015/09/06 記事に元々入れる予定だったライブラリを一つ追加しています。 初めに 個人的に使ってみて、良さ気なものをピックアップしておいた。 30個ほど候補があったが、分類してみて程よいものを今回紹介する。 5個のつもりだったが、ランダム系のライブラリを追加し忘れていたため最後尾に追加。 こんな夜遅くにビール片手に書いてますので誤字脱字があると思いますが、もしおかしな点があれば教えて下さい。 カウント系の実装 文字入力時にカウント・ダウンしてくれるやつね。 実装はクソ楽 limitCharacts var elem = document.querySelectorAll('input'), limit = 100; limitCharacts(elem,limit); 2Dライブラリと言えばこれ pixi.js こちらから、サンプルが見れる。見
数学が苦手な人は数式を組み立てたり、それを解くのが苦手ではないでしょうか。方程式を作って、それを解くのはパズルみたいなものですが、嫌いな人にとっては数字やXなどを見るだけで嫌気がさすはずです。 そんな方に見て欲しいのがalgebra.jsです。なんとJavaScriptを使って方程式を組み立てたり、それを解いてしまうソフトウェアです。 algebra.jsの使い方 algebra.jsでは若干特別な入力を行います。そしてtoString()メソッドで式が文字列で返ってきます。 式は後から追加していくことも可能です。 そしてsolveForで回答を得られます。 変数が複数あっても余裕です。 2次方程式を解く例です。 答えが複数あるなんて場合にも対応しています。 LaTeX向けにビジュアル化された式を表示できます。 algebra.jsの使い方を覚えればかなり難しい数式でも解くことができるので
概要 bmsjs(α版)というWEBサービスをリリースしました。 bmsjsはブラウザ上で動作するBMSプレイヤーとSNSの機能を持つWEBサービスです。 bmsjs.net BMS? 元々は、KONAMIの音楽ゲーム『beatmania』を模したシミュレータにあたる『BM98』用の譜面データフォーマットとして開発されたため、現在では同様のシミュレータ(BMSプレイヤー)に用いる譜面データ(曲データ)、あるいはゲームシステム全体を指す場合が多い。2000年代中盤頃までは、「ネットユーザーのPCには何かしらのBMSプレイヤーが入っている」と言われるほどの一大ムーブメントを巻き起こしていた。[要出典]現在はブームが沈静化しているものの、未だに新作BMS楽曲が作られるなどの根強い人気を保っている。かつてのBMS作曲家の中には、プロに転向した者や著名なボーカロイドプロデューサーも多い。 wikip
1)快適なReact.js開発環境をgulpで作る React.jsはJSX という言語を利用して開発します。 JSX はトランスコンパイル言語と呼ばれるもので、JavaScriptに変換して利用します。 jsxというコマンドを利用すればJSX ファイルをJavaScriptに変換することが可能ですが、ソースコードを変更するたびにJSX をコンパイルするのは面倒です。まずはソースコードの変更を検知して自動的にコンパイルし、ブラウザのリロードまでを行ってくれる環境を構築しましょう。 JavaScriptには便利なツールがいくつかありますが、今回はgulp + webpackを利用して環境を構築します。これらの動作にはNode.js が必要となりますので、まずはNode.js のインストールから行いましょう。なお、この組み合わせの他にもGrunt + Browserifyなどがあります。 No
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く