当ブログでも好評だった「Visual Studio Code完全入門」が重版出来🎉を記念して、3日間限定(5/19-5/21)で全文無料公開されているので、紹介します。 「Visual Studio Code完全入門」は、Web制作とプログラミングに特化されたVSCodeの解説書です。実際のワークフローを元に、VSCodeの基本的な機能から効率をアップさせる使い方を学べます。
![3日間限定「Visual Studio Code完全入門」が全文無料公開されています! Web制作とプログラミングに特化された解説書](https://cdn-ak-scissors.b.st-hatena.com/image/square/1a8ae8d02521c094f1638c871dcf972b9af18d08/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202201%2F9784295013457-01%402x.png)
JavaScript QuestionsのLydia Hallie氏の「JavaScript Visualized」シリーズすべての翻訳を完了したので、まとめて紹介します。 JavaScriptエンジンの仕組みをはじめ、イベントループ、スコープチェーン、プロトタイプ継承、非同期処理、ジェネレータ関数、Hoisting(巻き上げ)など、GIFアニメを使用して詳しく解説しています。 シリーズ7本すべてと、プラス1として楽しく学べるクイズもあります。 JavaScript イベントループの仕組み JavaScriptでエラーの原因となるHoisting(巻き上げ)の仕組み JavaScriptのスコープチェーン・変数参照の仕組み JavaScriptエンジンの仕組み JavaScript プロトタイプ継承の仕組み JavaScriptのジェネレータ関数とイテレータの仕組み JavaScriptの
クライアントから「可愛くしてください!」「おしゃれにしてください!」「かっこよくしてください!」「企業イメージ出してください!」 デザイナーなら誰もがそんな要望を受けたことがあると思います。 そんなふわっとしたリクエストや要望、赤字に応えるためのデザインの修正方法・テクニックを解説したデザイン書を紹介します。 本書は、今年も快進撃が止まらないソシム社の新刊。 またもや興味深い、面白い書籍の登場です! 今回はデザインの何かに特化して学ぶ的なものではなく、デザインの方向性、修正・手直しの方法を解説した一冊です。リクエストや赤字の具体例が数多く掲載されており、「あるある!」と心の声で叫びながら、デザインを楽しく学べます。
Photoshopであらゆる被写体、画像全体を数クリックで金ピカのゴールドにする無料アクションを紹介します。 数クリックとしたのは被写体の選択操作で、金ピカにするのはわずか1クリック。 簡単に、目映いばかりの黄金エフェクトを楽しめます。 Free Photoshop Action to Turn Anything into Gold in Photoshop ダウンロードボタンをクリックすると、オーバーレイが表示され、それを閉じて、再度ダウンロードボタンをクリックすると、ダウンロードできます。 インストール方法は、Photoshopのアクションパネルで「アクションを読み込み」から、ダウンロードした「Spoon Graphics Gold Effect.atn」を指定するだけです。
Vue.jsの人気がすごいですね。 いくつかの企業はすでにVue.jsを使い始めており、一部はメインのプロダクトに、一部は二次的なプロジェクトに使用しています。 Vue.jsへの関心が高まる中、人気が高いフレームワーク、そしてVue.jsをすでに採用している企業サイトを紹介します。 画像: vuejs.org Google, Apple and Other Users of Vue.js by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Vue.jsはGoogleも採用している 人気が高いフレームワークは? Vue.jsを信頼している10大企業 まとめ Vue.jsはGoogleも採用している 先日、Googleの人材募集サイトにアクセスした際に私が注目したのは、Chromeの機能拡張でVue.j
Node.jsおよびChromiumベースのブラウザで使用されるJavaScriptエンジンの仕組みについてGIFアニメーションで分かりやすく解説された記事を紹介します。 🚀⚙️ JavaScript Visualized: the JavaScript Engine by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 JavaScriptを視覚的に解説: JavaScriptエンジン JavaScriptはクールです(私はそう思います)が、あなたが書いたコードをマシンが実際に理解するにはどうすればいいのでしょうか。JavaScriptデベロッパーは通常、コンパイラを自分で扱う必要はありません。しかし、JavaScriptエンジンの仕組みを理解し、人に優しいJavaScriptコードをどのように処理
JavaScript イベントループの仕組みについてGIFアニメーションで分かりやすく解説された記事を紹介します。 ✨♻️ JavaScript Visualized: Event Loop by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 JavaScriptを視覚的に解説: イベントループ イベントループは、JavaScriptデベロッパーが避けては通れない関門の1つですが、最初は理解しにくいかもしれません。私は視覚学習者なので、GIFアニメで視覚的に説明することで、あなたの手助けをしようと思います。 説明の前に、まずイベントループとは何でしょうか? なぜ気にする必要があるのでしょうか? JavaScriptはシングルスレッドで、一度に実行できるタスクは1つだけです。通常は問題ありませんが、30
WebページやスマホアプリのUIをデザインした時に、数値上は均整がとれているのに、人の目の錯覚で違和感を感じることがあります。ちゃんと揃えて配置したのに、同じサイズなのに、同じ色なのに、なんだか違和感があることはありませんか? この目の錯覚による違和感を取り除くUIデザインのテクニックを紹介します。 Visually distorted - when symmetrical UI looks all wrong by Gil Bouhnick 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. ボタンと同じ色だとテキストは明るく見える 02. 同じフォントでも小さいサイズだと細く見える 03. 背景画像の上のテキストは読みにくい 04. 行間が間違っているテキスト 形の扱い方 05. 整列されたのに揃っているように見えない
Photoshop, Illustrator, InDeign, Animate, Lightroom, Dreamweaver, After Effects, Auditionなど、Adobe系ソフトの代替ソフトウェアを紹介します。 有名なものからあまり知られていないものまで、買い切り、オープンソースで無料、日本語対応のものなどいろいろあります。 Photoshopの代替ソフトウェア Illustratorの代替ソフトウェア InDesignの代替ソフトウェア Animateの代替ソフトウェア Lightroomの代替ソフトウェア Dreamweaverの代替ソフトウェア After Effectsの代替ソフトウェア Auditionの代替ソフトウェア 下記ツイートの代替ソフトウェアをまとめたグラフィックはAffinity Designerでデザインされています。 With the re
アニメーションgifの再生・停止をホバー・クリック・タップ、そしてボタン・アイコンでコントロールできる軽量JavaScriptライブラリを紹介します。 canvasに書き込むという発想がすごいですね。 通常アニメーションgifは自動再生されますが、このスクリプトを使用すると、ユーザーの操作をトリガーに再生・停止させることができます。 Freezeframe.js -GitHub Freezeframe.jsの特徴 Freezeframe.jsのデモ Freezeframe.jsの使い方 Freezeframe.jsの特徴 Freezeframe.jsではアニメーションgifの最初のフレームだけをcanvasに書き込み、gifの静止画バージョンを自動作成します。あとは、この静止画バージョンとアニメーションgifをトリガーで切り替え、アニメーションgifを再生・停止させます。 下記は、ホバーで
鳥獣戯画のベクター素材「ダ鳥獣ギ画」でも有名なダーヤマ氏による新しい素材サイト「マンガ文字素材dddFont」を紹介します。 マンガや同人誌など、商用でも無料で利用できる擬音語・擬態語の日本語フォントのベクター素材がダウンロードできます。 夏コミに当選した方もそうでない方にも楽しめる無料素材です! マンガ文字素材dddFont まずは、一番重要なライセンスから。 マンガ文字素材dddFontの素材は漫画や同人誌をはじめとする紙のデザイン、Webデザイン、動画、スライドなどに、合計20個まで無料で利用できます。 20個以上の場合は、下記条件のどちらかをクリアする必要があります。 twitterでこのサイトを紹介する。 ダーヤマのLINEスタンプを、嫌々1つ買う。 ※原文ママ 詳しくは、下記のラインセンスページをご覧ください。 ライセンスページ ダウンロードできる素材は現在、2,000種類以上
Webサイトやスマホアプリのデザインで重要なのは、単一の画面ではなく、ユーザーがどのように遷移するか全体の流れを通して画面をデザインすること。 しかし、ユーザーフローやプロトタイプを作成するのは、なかなか面倒です。 Sketch(Photoshop, Adobe XDにも対応予定)ファイルからアートボードを自動同期し、ユーザーフローとプロトタイプを簡単に短時間で作成できるツールを紹介します。 現在はベータ版でmacOSのみですが、Windows版のリリースも予定されています。 Overflow Overflowの特徴 Overflowのダウンロード Overflowの使い方 Overflowの特徴 Overflowは、ユーザーフローとプロトタイプを簡単に作成することができるデスクトップ用のツールです。 オンラインツールではないので、安心して利用できると思います。 ユーザーフローの作成 Ov
無駄な損失が多いPNG画像を最適化し、画像品質の穏やかな部分を利用して、ファイルサイズを大幅に軽量化するmacOS対応の無料アプリを紹介します。 アプリの性質上、得意な画像と不得意な画像がありますが、ほとんどがファイルサイズ半分以下に軽量化されました。 Crunch -GitHub Crunchで最適化した画像 Crunchのインストール・使い方 Crunchで最適化した画像 Crunchで最適化する際の得意な画像と不得意な画像を見てみましょう。 「DSSIM類似スコア」は、0に近いほど画像が類似している値です。 ※DSSIMは人間の知覚をシミュレートして、画像の類似度を比較するツールです。 元画像(size: 325.6 KB) 最適化した画像(size: 124.3 KB) DSSIM類似スコア: 0.001481 Crunchの得意なタイプの画像です。 目で感知できない部分を減少させ
Webサイトやスマホアプリをデザインする際に、カラー・タイポグラフィ・レイアウトなどはどのようにすればうまくいくのか、ユーザーインターフェイスのデザインが一手間加えるだけでよくなるデザインの知識とテクニックを紹介します。 10 cheat codes for designing User Interfaces 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. テキストは重要、より大きく! 2. 複数のブラックを作成しない 3. カラーを理解するためには数学が大切 4. 空白スペースを活用してグループ分け 5. カラーを使用して行を区切る 6. ドロップシャドウの代わりに乗算を使う 7. 一行の長さ 8. 新しいデザインに執着しない 9. ブランドカラーをアクセントとして使用する 10. リストにおけるビュレットのデザイン 1
文字をぴったり揃えたのにしっくりこない、正方形なのに長方形に見えてしまう、シャドウを与えていないのにぼんやりとシャドウが見える、ボーダーを加えただけなのに塗りも変わったように見える、そんな経験はありませんか? WebサイトのUI、アイコン、ロゴ、イラストなどでデザインしている時に誰しも経験したことがあると思います。これらの原因は目の錯覚によるもので、その仕組みを理解することで困惑されることなく、効果的に利用することもできます。 11 Optical Illusions Found in Visual Design by Balraj Chana 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 三角形の交点による錯覚 垂直の水平方向による錯覚 明度による錯覚 奥行きによる錯覚 格子による錯覚 コントラストによる錯覚 カラーによる錯
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く