p5.jsでビジュアルコーディングしてみる。 - Qiita
◆p5.jsとは processingをjavascriptに移植したものです。 javascriptなので環境を作らなくてもすぐにコードを書くことができます。 さらに拡張機能をライブラリとして使用可能で、サウンド、3D、グラフィックス、htmlやDOMの直接操作することもできます。 図形やグラフィカルな描画に特化しているので、アーティストやデザイナにも取っ付きやすいビジュアルコーディングツールになってます。ありがたや… ◆環境を整える http://p5js.org/ 公式ページからCDNのリンクをHTMLに貼付けるだけで環境設定終了。 codepenでのプログラミングが便利！ http://codepen.io 打ち込んだコードが即反映されるので試し書きしたいときに。 ◆描画してみる ↓p5.jsは下記のサイトで基本的な流れを学ぶことができます。 ドットインストールp5.js入門 ht
自作のp5.js学習環境を作った話 - Qiita
TL;DR 自作のp5.js学習環境を作ったよ ここにあるよ 使ってみてね これからもアップデートしていくから感想や要望があったら教えてね はじめに この記事ではProcessingと、そのライブラリであるp5.jsについて扱います。 Processingとは、電子アートとビジュアルデザインのためのプログラミング言語、およびその総合開発環境（IDE）を指します。シンプルなコードを書くだけで、数々の美しい作品を作り出すことができます。 また、p5.jsとはProcessingをJavaScriptへ移植したものであり、Web上で手軽にクリエイティブコーディング（独創的、創造的な表現をプログラミングによって行うこと）を行えるほか、p5.js独自の機能もいくつか追加されています。 p5.jsは素晴らしい p5.jsは素晴らしいライブラリです。 本家本元のProcessingは（それほど大掛かりで
これからReactを勉強する人が最初に見るべきスライド７選
React.js（以下、React）は、Facebookが作ったJavaScriptのビュー・ライブラリです。最近よく耳にするけどあまり理解していないという人も多いのではないでしょうか。 そこで今回は、 「Reactって最近よく聞くけど一体何？」 「jQueryと何が違うの？」 といった疑問にこたえてくれる初心者向けのスライドを厳選して紹介します。JavaScriptは苦手だけど概念だけは理解したいといった人のために、なるべくわかりやすいものを選んでいます。 ＊もし、「このスライドもおすすめ」というものがあったら教えてください。 Reactとは？ なぜ人は必死でjQueryを捨てようとしているのか なぜjQueryを捨て、Reactを採用しようとするのかについて説明してくれるスライドです。ページ遷移のないシングルページアプリケーション（SPA）への需要が増えてきているといった最近のトレンド
browserl.ist: A page to display compatible browsers from a browserslist string.
Shared browser compatibility config for popular JavaScript tools like Autoprefixer, Babel, ESLint, PostCSS, and Webpack Supported by Evil Martians and Cube Check compatible browsers How to get started Use defaults if you're building a web application for the global audience. Use node 18 if you're building a Node.js application, e.g., for server-side rendering. Autoprefixer, Babel and many other to
スマホ対応の優れもの！クリック・タップの直前にページを先読み、高速表示する超軽量スクリプト -instant.page
ユーザーがリンクをクリックする際のhoverとタップする際のtouchstartに合わせて、クリック・タップする直前にページのHTMLをプリロードし、高速に表示するわずか1kBの超軽量スクリプトを紹介します。 ページに外部スクリプトを1つ加えるだけの簡単実装です。 instant.page instant.page -GitHub instant.pageの特徴 instant.pageのデモ instant.pageの使い方 instant.pageの特徴 instant.pageはprefetchを使用し、ユーザーがクリック・タップする直前にページをプリロードして、ページを高速に表示します。 ユーザーがリンクをクリックする際には、そのリンクの上にマウスを移動します。そのリンクをユーザーが65ミリ秒間ホバーした場合、そのリンクをクリックする確率は1/2であるため、この時instant.p
↔ Responsive design testing tool – Viewport Resizer – Emulate various screen resolutions - Best developer device testing toolbar
Responsive design testing tool It only takes 2 seconds! More than 720k people visited this site in 190 countries! Thank you for your support! Viewport resizer is a browser-based tool to test any website’s responsiveness. Just save the bookmarklet, go to the page you want to test, click on your created bookmarklet and check all kinds of screen resolutions of the page. The smartest way to share your
マルチカーソルを使わないVSCodeはただのVSCodeだ！〜解説編〜 - memo.md
先日投稿した以下のエントリで、「使い方がわからない」という意見を多く頂いた。 mugi1.hateblo.jp マルチカーソル自体の操作方法は調べれば出てくるし、事例だけ紹介しとけばええやろ、と思っていたのだが、いきなり応用のサンプルを貼りすぎてわけがわからなかったらしい。申し訳ない。 せっかくなので、基礎から含め、どういったキー入力で上記のような操作を実現しているのかを紹介したいと思う。 🔥実践！マルチカーソル / 入門編 なおmac環境です。Windowsやその他環境の方は気合で調べてください。 また、言い訳臭くて申し訳ないが、私は普段はSublime Text Keymap and Settings Importerを使っており、SublimeTextっぽいキーバインドに変えて編集している。 一旦無効にしたうえでVSCodeデフォルトの状態で一通り調べて書いたつもりだが、もし違って
CSSセレクタのチートシート｜37パターンを一覧で解説
CSSセレクタのチートシートでは、要素セレクタ / classセレクタ / idセレクタ / 属性セレクタ / 複数セレクタ / 子孫セレクタ / 兄弟セレクタ / 隣接セレクタ / 擬似クラス / 擬似要素 / 全称セレクターから37パターンのセレクタの説明と実際のコードで使い方サンプルを紹介しています。
アイコンフォント「FontAwesome」の使い方
FontAwesomeはWebサイトや、ブログなどで簡単にアイコンを表示させることができるサービスです。バージョンアップや仕様変更を経て、現在ではPRO版(有料)も用意されています。無料版でも2,016種類(2022年8月現在)のアイコンが用意され、世界中で多くユーザーに利用されています。今回はF初心者にも分かりやすいようにFontAwesomeの使い方を紹介します。
ホームページ制作なら渋谷のウェブ制作会社【スタイル】
【スタイル】は東京都渋谷区でホームページ制作を行うウェブ制作会社です。ウェブサイト制作、SEO対策、ウェブマーケティングなどを承っています。良質テンプレートでの格安ホームページ制作プランもあります。
いざ使う時忘れてる！.htaccessを使ったリダイレクト設定 - copypet.jp｜パーツで探す、web制作に使えるコピペサイト。
よく使うHTTPステータスコードの種類とhtaccessの書き方 HTTPステータスコードの種類 100番台：リクエスト処理中 200番台：リクエスト処理成功 300番台：リダイレクト処理 400番台：クライアントエラー 500番台：サーバーエラー 今回は300番台：リダイレクト処理についてです。 htaccessでリダイレクトさせる基本的な書き方 RewriteEngine on・・・URLの書き換えを許可 RewriteBase /・・・URL書き換えのベースになるURLを指定 RewriteRule・・・URL書き換え内容を指示 空改行・・・.htaccessの最後の行は必ず改行 *「.htaccess」のパーミッション（属性）は「604」に。 *htaccess.txtというファイルを作成して編集、ftpサーバにアップしたあとで「.htaccess」にリネームする。 *「.」で始ま
レスポンシブ対応、ページ確認が劇的に楽になるブックマークレット (PIXEL LAB)
ウェブ制作のページ確認において、非常に便利なブックマークレットをつくったので紹介します。 全体を俯瞰する感じでサイト制作できます ウェブ制作において、きちんとページが表示されているかをチェックする検証作業は、とても大変ですが、このブックマークレットをつかえば、非常に効率的にページ確認 を行うことができます。 サイト構築時は、通常は1ページづつ移動し、1画面づつスクロールして確認していきますが、このブックマークレットをつかえば、ページを縮小してプレビューするので広いエリアを一度に確認 でき、さらに複数ページを1画面でまとめて確認 できるので、ページ全体を俯瞰するように、ページ確認が行えます。 導入方法 ボタンをブックマークバーへドラッグするだけで、すぐに導入できます。 対応ブラウザは、Google ChromeとFirefox になります。(IEとSafariは非対応です)
Visual Studio Code用カラーテーマの作り方 - Qiita
とすると、どの拡張機能を作成するか訊かれますので、"New Color Theme"を選びます。 次に、カラーテーマのファイル名を訊かれるので、さきほど保存しておいたファイルを指定します。 その後もextensionの名前などを訊かれますので適当に入力します。 "publisher name"はMarketPlaceに公開するときにはMicrosoftのアカウント名が必要になりますが、そうでなければ適当でよいでしょう。 ローカルにインストール テーマが出来たら、~/.vscode/extensions/にフォルダごとコピーするだけです。 あとはVisual Studio Codeを再起動すれば、「Codeメニュー」 -> 「基本設定」 -> 「配色テーマ」で作成したテーマを選択可能になります。 Market Placeに公開 Extension Marketplaceに公開したいときは、v
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ジェネレーティブアートに挑戦するならp5.jsがはじめやすい - IT系女子ログ
Web制作者が厳選したブックマークを晒してみる。Webツールやデザインサイトなど30選
app
I/O 3000
Wordmark
現在のgulpfile.jsを公開します（2018年8月版）※8/23更新 | chlonolog
AutoPrefixerの設定を変更しました | chlonolog