JavaScript で parseInt / parseFloat を使わない方が良い理由
となるのが原因です。parseInt というのは、文字列を解析して整数値（int）を返すグローバル関数であり、引数をまず文字列に変換する仕様となっております。その段階で 0.0000005 が "5e-7" という文字列に変換されてしまい、その文字列の先頭の 5 だけが数字として解析されてしまったため、結果として parseInt(0.0000005) === 5 となりました。 なぜ String(0.000005) === "0.000005" に、String(0.0000005) === "5e-7" になるのかについては、この記事の最後で余談として説明します。 整数化には Math.trunc を使おう このように、parseInt は文字列を引数にすることを前提にしているため、速度の面でも可読性の面でも「小数値を整数値に変換したい」という場合に使うのは望ましくありません。最も望
最近見かける、粒子の粗いグラデーション！ほんの少しのCSSとSVGで実装できるの知ってた？
CSSとSVGでグラデーションにノイズを与え、粒子の粗いグラデーションを実装する方法を紹介します。 背景など通常のグラデーションに使用するだけでなく、暗くしてシャドウに使用したり、輝度とコントラストを上げてホログラムのような虹色のグラデーションとして使用することもできます。 Grainy Gradients by Jimmy Chion 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ノイズを加えたグラデーションを生成できるオンラインツール 実装: SVGノイズとCSSグラデーション SVGのturbulenceを使用する SVGとグラデーションを使用してCSS背景を作成する 明るさとコントラストを高める ノイズのカラーが均一でない CSSのブレンド機能 粒子の粗いグラデーションの使用例 さらに詳しく ブラウザのサポー
iPadのマルチタスク機能を使いこなす！25のテクニック紹介 - iPhone Mania
iOS11では、iPad向けの機能が大幅に強化されており、特にマルチタスク機能は、うまく使いこなせば作業を効率よく進めることができます。米メディア9to5Macがまとめている、マルチタスク機能を使いこなす25のテクニックをご紹介します。 iPadを使いこなそう！25のテクニック iPadをお使いの方は、ぜひ実際に使いながらお読みください。記事最後に動画もあります。 なお、以下の操作をするには、設定アプリで「一般」>「マルチタスクとDock」の、「複数のAppを許可」「オーバーレイでのビデオの継続再生」「ジェスチャ」をオン（緑色）にしておく必要があります。 1.Dockを使って素早くアプリを切り替える アプリ起動中に、画面下部を上に小さくスワイプすると、Dockが表示されるので、希望のアプリをタップして起動できます。 2.ジェスチャ操作でホーム画面に切り替える 起動中のアプリの画面の上で、手
CSSのこのアイデアはすごすぎる！Webページのトラッキング・解析ができるスタイルシート -Crooked Style Sheets
結果ページ どのリンクをいつクリックしたのか、いつホバーしたのか、指定エリアでどのくらいマウスを動かしたのか、フォームに特定の文言を入力したのか、チェックボックスをクリックしたのか、ブラウザは何か、解像度はいくつか、ディスプレイの向きはどっちなのか、などの情報が表示されました。 ※出力する際には、PHPが使用されています。 Crooked Style Sheetsの仕組み Crooked Style Sheetsは、外部CSS一つを加えるだけで、Webページのユーザーに関するさまざまな情報を取得できます。 基本的な仕組み CSSではurl()関数を使用して、外部リソースを追加できます。url()関数の値は呼び出された時のみロードされるため、これをリンクがクリックされた時に利用します。 リンクを記述するHTMLは、要素を特定できるようにidを与えます。
漫画家・佐藤夕子が教える「波の描き方」に目からうろこ！ サランラップを使った驚きの描画テクニックも
※本ページはアフィリエイトプログラムによる収益を得ています 漫画「折れた竜骨（原作：米澤 穂信）」や「アルマディアノス英雄伝（原作：高見粱川）」を連載中の漫画家・佐藤夕子先生が、Twitterで「波の描き方」を紹介しています。これなら今すぐ描けそう……？ ファミ通コミッククリアで連載中の漫画「折れた竜骨」で、海の場面を描く機会が多いということをきっかけに紹介されたテクニックは、フリーハンドで描いた方眼紙風のマス目を目安に、濃淡を付けながら線を書き込んでいくというもの。 平面的に描いてしまったり、単調になりがちな“波”に、規則性をもたせながら躍動感と立体感を与えることに成功しています。 まずはフリーハンドで方眼のマス目を描く マス目を目安に線を描きこんでいく 佐藤先生によると、「流れや光源をはじめに決めて、影になる部分からペンを入れていくこと」がポイント。 これを踏まえてあらためて投稿された
Excelの最強関数はVLOOKUP まずこれだけ覚えて社会に出よう！ - みゅう厨武 ～ミューチューブ～
私が社会に出たのは平成9年。まだWindows95の時代だが、当時既にExcelは登場済みであり、以後約20年もの間、業務における計算や集計など数値に関わることは完全にExcelに依存している。仕事でExcelを使用しない日など1日足りともない。MicrosoftがExcelの提供を中止したら業務への影響は甚大だ。そのくらい著しく浸蝕度の大きいソフトウェアであることは間違いないが、このような企業は何も私のところだけではない。多くの企業がExcelに大きく依存しているのだ。 スマホ世代の若者にとって、Excelには馴染みがない人もいると思う。しかし社会に出ればまだまだパソコンが主力であり、中でもExcelは横綱だ。WordよりもPowerPointよりもExcelが使いこなせるか。これが非常に重要である。私が約20年Excelを使ってきた中で、様々な業務を通じて最も重要だと感じていること。そ
Photoshopのコンテンツに応じる塗りつぶしで不要なモノを消すコツ
Photoshopで「画像の中にある●●を消す」といった作業は画像編集でよくある作業だと思います。 togetterで「初心者のPhotoshop加工はプレデターが生まれる→「例えが秀逸」「あるある」と腹を痛めるTL」というまとめがありました。その最初のツイートがこれ。 僕がPhotoshopを教えていて一番好きな瞬間は、「○○を消せ」系の初心者向け課題で、必死で作業すればするほどプレデターを次々に生み出して絶望していく生徒に「もうお前の地球は終わりだ」と講評することです。 pic.twitter.com/gEpXGVx7xo ? ﾚｲﾆｰ氏 (@moeebu) 2016年3月8日 おもしろい例えですね。スタンプツールで補正をすると、同じパターンが連続してしまうパターンです。 Photoshopで●●を消す作業の基本はスタンプツールですが、スタンプツールでチマチマ消す時間もない！という方に
The "Blur Up" Technique for Loading Background Images | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. The following is a guest post by Emil Björklund. Filter effects in CSS have been around for a while, and together with things like blend modes, they bring new possibilities for recreating and manipulating stuff in the browser that we previously had to do in Photoshop. Here,
How to animate box-shadow with silky smooth performance
How do you animate the box-shadow property in CSS without causing re-paints on every frame, and heavily impacting the performance of your page? Short answer: you don’t. Animating a change of box-shadow will hurt performance. There’s an easy way of mimicking the same effect, however, with minimal re-paints, that should let your animations run at a solid 60 FPS: animate the opacity of a pseudo-eleme
2016年版 Node.jsで幸せになれる10の習慣 - Qiita
はじめに Herokuのブロク記事10 Habits of a Happy Node Hacker (2016)を、「洋の東西を問わず、みんな『10のなんとか』って好きなんだな」と思いながら眺めていたら、結構面白かったので内容をピックアップしてみます。 以前、Go言語で幸せになれる10のテクニックというのをあるブログ記事を元にして書いた時には、原題の "Ten Useful Techniques in Go"を意訳して「幸せになれる」としたのだが、今回は原題にシッカリ"Happy"が入っているというおまけ付き。 なお、「2016年版」と言っているのは2013(2014？)年版があるから。これらを読み比べてみるのもまた面白いが、とりあえず今回は最新の2016年版のご紹介。 1. 新しいプロジェクトは npm init で始めろ 新しいプロジェクトはこう始めようよ、と言っている。
あまり知られていないCSSの12の事実(続編) | POSTD
1年以上前に、私は最初の 12 Little-known CSS Facts（あまり知られていないCSSの12の事実） を発表しました。SitePointで最も人気の高い記事となりました。この記事を書いた後も、私はCSSのアドバイスやちょっとした情報の収集を続けました。だって、大ヒット映画も必ず続編を制作するじゃないですか。 注釈 SitePoint/ Natalia Balska によるイラスト それでは、早速今年も開発のヒントになる12の事実について話しましょう。もちろん、中にはもうすでにご存じのこともあると思いますが、この中で初めて知ったという事実がありましたら、コメントでお知らせください。 1. border-radius プロパティに”スラッシュ”シンタックスを使用できる事実 このプロパティについてはSitePointに4年以上 前に書いた のですが、この機能が存在することを、未
Chrome’s Console API: Greatest Hits
Mitch Robb 14 Jul 2014 Chrome’s Console API: Greatest Hits The Chrome debugger is the best tool for locating problematic code in a JavaScript application, but there are times that diving into your code line-by-line isn’t the fastest or most convenient means to that end. We all know about console.log(), but I thought I’d write about a few of its lesser-known cousins that are more refined, and can
Gitコマンドラインショートカット | POSTD
私は多くの時間をターミナルの前で過ごしていて、そのほとんどをGitコマンドのタイピングに費やしています。ワークフローを高速化して、毎日何百というキーストロークを節約するために、Bashのエイリアスと関数を使って1組のコマンドラインショートカットを作りました。 Git Bashエイリアスと関数 Gitではエイリアスを設定できますが限定的であり、節約できるキーストロークは、ほんの数ストロークです（例えば、”git checkout”の代わりに”git co”とタイプすることはできますが、まだ”git”とタイプしなければなりません）。Bashはターミナルのデフォルトのコマンドラインインタープリタなので、Bashエイリアスを設定して、さらにキーストロークを減らすこともできます。 これが、私のGit Bashエイリアスと関数のリストです。ご自分のエイリアスや関数の保存先ファイル（例えば、~/.bas
ターミナルの作業が捗るかもな小技５つ - Qiita
ターミナルで作業する事が多いんですが、そのときによく使っているちょっとしたときに便利なコマンドなどを紹介します。 bashで説明します。 (zsh でもつかえるし、もっと便利になる物も多いですが) 1. 並列な階層に複数ディレクトリを一度に作成 {} を利用します。 aa,bb,cc というディレクトリを作るとき。
海外旅行する人は絶対「自動化ゲート」に登録しとくべし！出入国審査でもう待たされない - HYLEにっき
今回、成田空港で「自動化ゲート」の登録＆利用をしてみたよ！ウルトラスーパー便利なのでおすすめです。一度登録したらパスポートの有効期限の１日前まで利用可能です！絶対登録して損は無いスンバラシイサービス。 自動化ゲートを利用するには事前登録が必要 第二ターミナルでは国際線出発ロビーがある３階で登録できます。奥〜の方の北団体の端っこのカウンターでできます。カウンターの番号は３３。 登録は速攻終わる 超丁寧に教えて貰えますが指紋登録も含めて５分くらいで完了。パスポートにスタンプを押してもらえます。 簡単すぎてなんだこりゃ？て思いました。 自動化ゲートを使ってみた感想 最高。 いつものことながら出国審査の手続きに死ぬほど人がうじゃうじゃ並んでたんですが、自動化ゲートにいたのは１人wしかも、自動化ゲートの機械は４台くらいあったかな？パスポートを読み取り機に置いて指紋をぴっとするだけ。多分３秒くらいで終
Positioning Offset Background Images | CSS-Tricks
If you need to position a background-image in CSS 20px from the left and 10px from the top, that’s easy. You can do background-position: 20px 10px;. But what if you wanted to position it 20px from the right and 10px from the bottom? Let’s also assume we don’t know the exact width and height of the element, which is likely, because fluid layouts and dynamic content. If we did, we could just do a li
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Blog | Welcome to Adobe Blog
WordPress › Error
WordPress › Error
How to make a carousel using only HTML and CSS (no JavaScript required!)