デザイナー向けのリソースを収集、公開しているプロジェクト・「DesignBase」DesignBaseはアプリやWebなどのデザイナー向けのリソースを収集しているプロジェクトサイトです。色やフォント、UI、モックアップからインスピレーション、ストックフォトなどなど様々なリソースがまとめられています。見やすく探しやすいのでストレスなく探し物が出来そうです。 DesignBase
ブラウザで使える超シンプルでログインもユーザー登録も不要のタスク管理ツール・「Timo」
Timoはブラウザベースのタスク管理アプリです。シンプルで使いやすく、ログインもユーザー登録も不要で利用できます。ウィークカレンダー式に1週間分のタスクを管理できて各タスクは時間もトラッキングするので、その日の全てのタスクに費やした時間、各タスクに費やした時間も確認できるようになっています。また、時間経過はブラウザのタブにも表示されるので常にTimoのタブを表示しておく必要もありません。データの保存は多分Cookieとかローカルストレージを利用しているので、ブラウザから削除するとTimoに設定したタスクやタイムログが消えてしまうので注意が必要な点以外はこれといってデメリットは無い印象です。 Timo
30秒で理解できるものだけを集めたJavaScriptコードスニペット集・「30 seconds of code」
30 seconds of codeは「30秒で理解できるJavaScriptコード」をまとめたスニペット集です。理解力に欠ける自分の脳では30秒は難しかったですが、シンプルながら便利そうなコードが沢山掲載されていました。暇なうちに試してみようかと思います。尚、本コードはGithubでも公開されており、CC0ライセンスの元で配布されています。 30 seconds of code ご挨拶あけましておめでとうございます。 本年もよろしくお願いいたします。
ノイズが走っているようなエフェクトのテキスト
Result CSSのみでノイズなテキストエフェクトを実装しています。 clipとkeyframesを応用しているようです。 css.glitch {/*基本設定*/ color: white; font-size: 40px; position: relative; width: 400px; margin: 0 auto; } @keyframes noise-anim {/*細かい動きを設定してノイズが走っているかのように動かす*/ 0% { clip: rect(77px, 9999px, 6px, 0); } 5% { clip: rect(65px, 9999px, 70px, 0); } 10% { clip: rect(82px, 9999px, 82px, 0); } 15% { clip: rect(32px, 9999px, 35px, 0); } 20% { cli
開発者向けのBootstrap 4のテーマやツールキットを配布する・「HackerThemes」
HackerThemesはBootstrap 4のテーマやツールキットを配布するプロジェクトサイトです。Bootstrapを使った開発ワークフローのスピードアップをサポートするのが目的だそう。公開されているのはFOSS(Free/Open Source Software)で配布されるいくつかのテーマ、チートシート、Photoshop向けのグリッドや勉強用テーマ、有償のテーマが１つといったところでした。開発者向けとの事でしたが、すでにスタイリングは完成されている印象で個人的にはあまり装飾せずにコンポーネントを含めてもらえた方が良い気もしました。と思いましたけど、デザインしなくても済むように、というプログラマーさん向けの配布プロジェクトという意味なのかな。これから増えていくと良いですね。 HackerThemes
複数ユーザーで共同作業も可能な、簡単に使えるシンプルなフローチャート作成ツール・「Wireflow」
Wireflowは簡単に使えるシンプルなフローチャート作成ツールです。この手のツールの中でも特に手軽に作成できる印象でした。コンテナは既にデザインされたものを追加する簡易的なタイプですが、任意の画像をアップロードする事も可能です。ユニークなURLがランダムで発行されますが、そのURLを知らせれば複数ユーザーでの共同作業も可能となっています。最初の読み込みがちょっと時間かかりますが、基本的にはユーザー登録不要で作成からjpgへのエクスポートまで出来ます。複数ユーザーの動作確認でスマホからアクセスしましたがスマホからでも使えました。読み込みさえもう少し早いと嬉しいですね。 Wireflow
UI制作の際に役立ちそうなツールやリソース等の情報をまとめた・「designer lynx」
designer lynxはUI制作の際に役に立つかもしれない情報をキュレーションしているWebサイトです。デザインギャラリーやカラーツールやプロトタイプツール、アイコンやタイポグラフィの情報などなど。施工で困ったときに眺めてみるのもいいかもしれません。 designer lynx
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Alibabaが開発、公開しているオープンソースのHTML5製ゲームソリューション・「Hilo」
オープンソースのヨガ教室用管理ツール・「OpenStudio」
他のミニマルなCSSフレームワークを参考にして作られた超軽量CSSフレームワーク・「lit」
画像にインスタグラムのようなフィルターを付与できるスタイルシート・「Instagram.css」
チームで情報を管理、共有するためのオンラインツール・「Tixio」
オープンソースのTrelloライクなカンバンボードシステム・「Restyaboard」
ストックフォトやフォント、アイコン、カラースキームやチュートリアル等、Web制作に役立つツールやリソースを収集、公開している・「PinTab」
手軽に画像にパララックス効果を与えられるスクリプト・「simpleParallax」
ユーザー登録不要で使えるチャット機能付きのホワイトボードツール・「Draw.Chat」
HTMLやCSS、JavaScriptのコードを綺麗に整形してくれる・「DirtyMarkup」
線で描かれたシンプルなアイコン200以上を配布する・「Iconbros」
任意の画像をデバイス画像に合成し、任意の画像やテキストも挿入できるモックアップ作成ツール・「MOCKUP GENERATOR」
UI開発速度を上げるために作られたユーティリティファーストなCSSフレームワーク・「Tailwind CSS」
