How to create a color ramp used in design systems
If you’re new to creating color palettes for digital spaces, check out my previous article, Color for brand designers working with product teams, for tips on selecting your brand colors. 👉🏻 Follow along in Figma: Community File What is a color ramp?A color ramp, also known as a color scale, is a visual representation of how colors transition from light to dark in a smooth and continuous manner.
【まとめ】エンジニア向けデザイン参考サイト - Qiita
本記事は、身の回りの困りごとを楽しく解決！ by Works Human Intelligence Advent Calendar 2022の13日目の記事です。 はじめに エンジニアの私「個人開発したアプリのデザインがイマイチで世に出す勇気がなくて困っとる」 デザイナーの知人「どれどれ。あー確かに。いい意味でエンジニアらしさ出てますな♪」 私「『いい意味で』を先頭に付ければ何いっても許される説！！」 知人「デザイン作るときは既存にあるアプリやサービスのUIを参考にするといいですよ」 私「具体的には何を参考にすればエンジニアでもいい感じにデザイン作れそうですか？」 知人「それでは自分が参考にしているデザイン系のサイトをいくつか紹介していきます」 てことで、今回はエンジニア向けの個人開発やアイディア探しで役立つサイトをまとめていきます。 「ポートフォリオのアイディアが思いつかない」「開発した
プログラミングせずAIをDIY！ Webブラウザで動くGoogleの機械学習サービスを試す AIの出来栄えは？
プログラミングせずAIをDIY！ Webブラウザで動くGoogleの機械学習サービスを試す AIの出来栄えは？：遊んで学べる「Experiments with Google」（第19回）（1/3 ページ） 「Experiments with Google」は、Googleが人工知能（AI）や拡張現実（AR）といった最新技術の可能性を示すために、実験的な応用例を紹介するショーケースだ。膨大なコンテンツを公開しており、その多くはスマートフォンやPCで試せる。 この連載では、多種多様な応用例の中から興味深いものをピックアップ。実際に遊んだ体験レポートを通して、裏側にあるテクノロジーや、技術の活用方法とその目的を解説する。 読者の皆さんも、ぜひ自分の手で試しながらその仕組みを学んでもらえたらうれしい。きっと、最新技術の魅力に気付くはずだ。 プログラミングできなくてもAIを作れる「Teachable
2020年のフロントエンドマスターになりたければこの9プロジェクトを作れ - Qiita
以下はSimon Holdorf( dev.to/ Twitter / GitHub )による記事、9 Projects you can do to become a Frontend Master in 2020の日本語訳です。 9 Projects you can do to become a Frontend Master in 2020 Introduction あなたがプログラミングの初心者であるか、既に経験豊富な開発者であるかにかかわらず、この業界では、急速な変化に追いつくために新しい概念と言語・フレームワークを学び続けることが必要です。 たとえばFacebookが4年前にオープンソース化したReactは、既に世界中のJavaScript開発者にとって第一の選択肢になっています。 もちろんVueとAngularにも多くのフォロアーがついています。 さらにはSvelte、Next
DBの寿命はアプリより長い！ 長生きするDBに必要な設計とリファクタリングを実践から学ぶ - エンジニアHub｜若手Webエンジニアのキャリアを考える！
DBの寿命はアプリより長い！ 長生きするDBに必要な設計とリファクタリングを実践から学ぶ アプリケーションの寿命よりも長く、データの追加やテーブルの変更で成長し続ける「データベース」と、どのように付き合っていけばよいのでしょうか？ 曽根壮大（soudai）さんによる寄稿です。 こんにちは。そーだい（@soudai1025）です。 新しいサービスを始めるとき、必ずと言っていいほどデータベースは利用されています。また今稼働しているサービスの多くでも、RDBMSをはじめ、いろいろなデータベースが利用されています。そんなに広く利用されているデータベースだからこそ、多くの問題の元になるのもまた事実です。 そこで今回は、Webサービスを中心にデータベースの選び方、設計についてお話していきたいと思います。そして私もまさに今、2011年から続くWebサービス「オミカレ」のRDBMSのリファクタリングに携わ
日本のWebデザインで見かける10個の特徴
ここ数年で、日本のWebデザインは大きく進化しました。 洗練されたデザインといえば、海外のものでしたが、今では日本でも数多く見られます。 デザインのスタイル、芸術的アプローチ、高度なソリューション、そして漢字や縦書きの文字を使ったデザインなど、日本のWebデザインで見かける10個の特徴を紹介します。 10 Distinctive Features of Japanese-Style Web Design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. ハイテクな演出 02. 他とは異なるソリューション 03. 日本独自の配色 04. 縦書き 05. 自然の風景 06. 巧妙なヒーローエリア 07. アニメに影響を受けたイラスト 08. キャラクター 09. 日本の漢字 10. 日本の伝統的な音 01. ハイテクな演出 W
ロゴの自動生成サービス「Free Logo Generator Online」が今までにないレベルで高機能だった話と、これはデザイナの仕事を奪うのかどうか。｜榊原昌彦
ロゴの自動生成サービス「Free Logo Generator Online」が今までにないレベルで高機能だった話と、これはデザイナの仕事を奪うのかどうか。 このツイートをしたところ、大きな反響をいただきまして、かるく解説記事を書いておきます。 どういうサービスなの？オンラインでネットショッピングをつくることができる有名サービス「Shopify」のはじめたロゴ自動生成サービスです。13のビジネス分野、18のデザイン属性から自分にあったものを選択し、ロゴに入れる文字をタイプするだけでロゴを自動生成することができます。また、生成したロゴのフォント、色、アイコン、レイアウトの調整も可能ですので、自動生成といいながらほぼあなただけのロゴを自動生成することができます。 使い方ログイン不要です。https://hatchful.shopify.com/ にアクセスして、右上の「GET STARTED」
Web Architecture 101
Modern web application architecture overviewThe above diagram is a fairly good representation of our architecture at Storyblocks. If you’re not an experienced web developer, you’ll likely find it complicated. The walk through below should make it more approachable before we dive into the details of each component. A user searches on Google for “Strong Beautiful Fog And Sunbeams In The Forest”. The
「自立」したWebシステムを創る。自分の好きなことをする世界を目指して。/ ipsj-one-2018-rrreeeyyy
IPSJ-ONE 2018 で、インターネットと運用技術研究会に推薦していただき、"「自立」したWebシステムを創る。自分の好きなことをする世界を目指して。" というタイトルで登壇しました。
2018年のフロントエンドエンジニアならこの程度は知ってて当然だよな？ - Qiita
可及的速やかにReactが絶滅しますように。 以下はFront-End Developer Handbook 2018の第三部、Front-end Developer Toolsからリンクされているツールと、その簡単な紹介です。 ドキュメントツール 開発者向けドキュメント、APIリファレンス Dash 200以上のAPIリファレンス、100以上のチートシートを一括ダウンロードできる。有料、Mac用。 DevDocs 200以上のライブラリをオンラインで検索できる。無料。 Velocity 中身はDashと同じ。有料、Windows用。 Zeal Windows、Linux、MacOS用各種揃っている無料のオフラインドキュメント。 チートシート devhints.io JavaScript、CSS、Go、vim等のショートカット、書式などチートシート。字が薄くて見辛い。 SEOツール Key
全文パクリサイトに発信者情報開示請求して1000万円請求した話
「ブログの文章や画像をパクったサイトを作られた！ しかもググったら私のブログより上に出てくる！」といった話を見聞きするようになった。 細々とブログを運営している私には対岸の火事と思っていたのだが、先日、私のブログもパクリ被害を受けた。そこで泣き寝入りせず、逃げ得させない方針で対抗し、ある程度、成功を収めたので、個人情報などはぼかしつつ、その経験を共有したい。 ———————————————————————————————————— 私がパクリに気付いたのは、外出先で自分の記事を確認しようと、最新の記事タイトルで検索した時のこと。検索一覧で、自分のブログのすぐ下に、見慣れない名前のサイトが現れたのだ。「たまたま同じタイトルの記事を書いた人がいるのかな？」と確認すると、文章も画像も私のブログとまったく同じ。 「パクられてる・・・」 血の気が引いた。パクリサイトを詳しく見ると、なぜか記事の筆者と
OWASPが公開している”セキュアではない”Webアプリ「OWASP Juice Shop」を試してみる | DevelopersIO
森永です。 セキュリティ製品の検証などで脆弱性のあるWebアプリが欲しいということがあります。自分で作るのもいいのですが、手軽に使える"セキュアではない"Webアプリがないかを探してみました。Webアプリのセキュリティに関するコミュニティであるOWASP(Open Web Application Security Project)が「OWASP Juice Shop」という脆弱性のあるWebアプリを公開していたので試してみます。 OWASP Juice Shopとは OWASP(Open Web Application Security Project)が公開しているWebアプリです。OWASPはインパクトのある脆弱性をOWASP Top 10として発表しており、その脆弱性をふんだんに盛り込んだものとなっています。これを使ってセキュリティの検証をしたり、ハードニングのトレーニングをすること
step-by-step BFF
Microservices Meetup で話した step by step BFF の話です。
Angular 2を使うならUIはコレで！Ionic 2ことはじめ（正式リリース版対応） | HTML5Experts.jp
Angular 2を使うならUIはコレで！Ionic 2ことはじめ（正式リリース版対応） 榊原昌彦（一般社団法人リレーションデザイン研究所 ...） Web制作してると、また新技術が出たのかと思うと、気づいたら「新常識」が増えてたということに頻繁に出会います。 タスクランナー、SCSS、LiveReload、SPA、PWA、ハイブリッドアプリ。そういった近年のキーワードを一気に体験できるUIフレームワーク「Ionic 2」が先日リリースされましたので、ご紹介します。 編集部注: Angular 2の正式名称は「Angular」ですが、現状だと「AngularJS 1.x」のことを呼称していると誤解される可能性が高いと判断し、本稿では「Angular 2」で統一させていただきます 記事の内容が古くなってたので、2017年8月11日に更新しました Ionic 2の概要 Ionic2は、アメリカ
2017年のフロントエンドエンジニアならこの程度は知ってて当然だよな？ - Qiita
って海の向こうの人が言ってました。 私はjQueryさえあれば概ね生きていけるので全然知らないけど、 あなたは全部知ってるフロントエンドエンジニアなんだね。すごーい！ 以下はFront-End Developer Handbook 2017の第三部、Front-end Developer Toolsからリンクされているツールと、その簡単な紹介です。 ドキュメントツール Dash 150以上のライブラリのAPIリファレンスを検索できる。有料、Mac専用。 DevDocs 200以上のライブラリをオンラインで検索できる。無料。 Velocity 中身はDashと同じ。 有料、Windows専用。 Zeal 200以上略 無料のオフラインドキュメント。 SEOツール Keyword Tool 検索ワードを入れると関連キーワードを教えてくれる。 Google Webmasters Search C
イベント駆動型サービス実行基盤としての Service Worker - Qiita
当初は better AppCache1 として開発が始まった Service Worker2 ですが、ページとは独立したライフサイクルを持つことでイベント駆動型のサービス3実行基盤としての色合いが強くなっています。本記事では、イベント駆動型のサービス実行基盤とは何なのか、そこへと発展していった流れについて紹介します。 なお本記事は Service Worker の使い方を紹介するものではありません。Service Worker をある程度理解している開発者を想定読者としています。また、本記事はすべて私の個人的な意見や調査に基づくものであり、所属する組織、団体とは一切関係ありません。前置きおわり。 AppCache、そして Service Worker へ 冒頭でも述べた通り、Service Worker は当初 better AppCache として開発が始まりました4 5 6。AppC
「Chrome」がWebVRを正式サポート
最新バージョンの「Chrome」ブラウザには、「WebVR」技術が搭載されている。プログラマーはこの技術を利用して、CGによる3Dの仮想現実（VR）世界を描いたウェブサイトを開設できる。VRに興味のある人なら、Googleの「Daydream View」やFacebookの「Oculus Rift」のようなVRヘッドセットで得られる体験をWebVRが広げてくれる可能性を正しく認識できるだろう。 それは、WebVRを利用すれば、少なくとも原理的には、開発者がデバイスごとに異なるバージョンを作らなくても、さまざまなVRヘッドセットで同一のVR体験をもっと簡単に提供できるようになるからだ。WebVRは、1つのウェブサイトでノートPCや「Android」搭載端末、「iPad」に対応できる仕組みを拡張する。 WebVRのおかげで「お気に入りのウェブページにアクセスするのと同じくらい簡単に、米大統領専
「Front-End Developer Handbook 2017」がGitBookで無償公開。フロントエンドデベロッパーに求められるさまざまなスキル、要素技術、ツールなどを幅広く紹介する一冊
「Front-End Developer Handbook 2017」がGitBookで無償公開。フロントエンドデベロッパーに求められるさまざまなスキル、要素技術、ツールなどを幅広く紹介する一冊 WebサイトやWebアプリケーションにおいて、ユーザーが操作する部分の開発を担う「フロントエンドデベロッパー」が扱う技術は急速に広がっています。 もちろんその基盤はHTML/CSS/JavaScriptにありますが、より高度で快適なユーザー体験を実現するにはその基盤となるHTTPやDNSといった下位レイヤの技術やSEOやUIデザイン、フォントといった細分化された専門性、そしてもちろんJavaScriptプログラミングやjQuery、React、Angularといったフレームワーク、JSONやAPIやパッケージマネージャ、ビルドツール、エディタやデバッガなどの周辺ツールとそのトレンドなど、とても一人
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webサービスの初期開発とマイクロサービス・BFF
Webエンジニアに知ってほしいRDBアンチパターン
