【まとめ】エンジニア向けデザイン参考サイト - Qiita
本記事は、身の回りの困りごとを楽しく解決！ by Works Human Intelligence Advent Calendar 2022の13日目の記事です。 はじめに エンジニアの私「個人開発したアプリのデザインがイマイチで世に出す勇気がなくて困っとる」 デザイナーの知人「どれどれ。あー確かに。いい意味でエンジニアらしさ出てますな♪」 私「『いい意味で』を先頭に付ければ何いっても許される説！！」 知人「デザイン作るときは既存にあるアプリやサービスのUIを参考にするといいですよ」 私「具体的には何を参考にすればエンジニアでもいい感じにデザイン作れそうですか？」 知人「それでは自分が参考にしているデザイン系のサイトをいくつか紹介していきます」 てことで、今回はエンジニア向けの個人開発やアイディア探しで役立つサイトをまとめていきます。 「ポートフォリオのアイディアが思いつかない」「開発した
Web制作を変える！2022年の便利オンラインツール・ベスト110選
Web制作を変える！2022年の便利オンラインツール・ベスト110選 これからのウェブデザインに欠かせないツール大集合 この記事では、2022年に公開された便利なWebオンラインツール・ベスト110個+をまとめてご紹介します。 定期的にリストアップしている最新オンラインツールまとめ記事では、2022年にかけて、合計343個の新しいツールやサービスを紹介してきました。 その中でも、Webデザイン制作に便利なツールを厳選したコレクションで、「無料で利用できるツール」を揃えています。 特に今年は、人工知能やAIテクノロジー関連のツールが増えたことで、Webデザイン制作をより快適に進めることができるでしょう。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 🕹 CSSツール（16個） 🧰 Webデザイン便利ツール（19個） 🦄 デザインツール
2020年に立ち上げたWebフロントエンド構成の振り返り
こんにちは、よしこです。 株式会社ナレッジワーク というスタートアップで、2020年4月の創業時から一人目のフロントエンドエンジニアをしています。 初期に考えて組み上げたスタックで1年半ほど開発・運用してみて、なかなか快適に日々開発ができているので 新規開発のプロダクト立ち上げ時にどのようにフロントエンドを構築したのか？ 立ち上げから1年以上開発・運用を続けてきた今、それらの選択はどうだったのか？ を記事にして振り返り、公開したいなと思いました。 （プロダクトの内容はステルスで進めていてあまり対外的な発信ができないので、かわりに技術的なところはどんどんオープンにしていきたいなという気持ちがあります） いろいろな項目ごとに振り返りたいので、この記事は各項目を横断するindexとして項目ごとの概要を簡単に説明し、深堀りは項目ごとに追って詳細な記事を書いていく予定です！ 前提 プロダクトとしての
HTTP検索条件、GETにするか？POSTにするか？ | フューチャー技術ブログ
はじめにTIG DXユニット 1真野です。 RESTfullとかRESTishな方針でWebA PIの横断検索を設計する際にチーム内で方針について議論したやり取りの備忘記事です。 注意としてB2C向けなWeb APIを提供するというよりは、主に企業間または企業内部で使われるようなAPIの設計のバイアスがあります。LSUDs（Large Set of Unknown Developers）かSSKDs（Small Set of Known Developers）で言えば、確実にSSKDs脳で記事が書かれています。 REST API広く使われているため日本語記事も多数です。実践RESTful HTTP - InfoQ や、0からREST APIについて調べてみた など良さそうな記事が沢山でてくるの読むと良いでしょう。一般的な設計方法はやや古いですがWeb API: The Good Parts
Flutter実践入門
📕書籍化お知らせ📕 本書が翔泳社様から「動かして学ぶ!Flutter開発入門」として出版されることになりました!! https://www.shoeisha.co.jp/book/detail/9784798177731 書籍化できましたのは、読者の皆様のご高評のおかげです。いつもご利用本当にありがとうございます！ 書籍の内容は、2023年4月15日の内容と概ね同じになっています。 ただし、書籍の方は、イラスト/手順の項番/キャプションなどが非常にわかりやすくなっており、プロジェクト形式でのサンプルソースコードも提供されます。 🚨有料化のお知らせ🚨 書籍化に伴う諸般の都合により、出版された部分の削除や非公開などはしないのですが、出版日に有料化をさせて頂く予定です。 今まで2年以上無料で公開をさせて頂いた状況もあり心苦しいのですが、ご理解頂けますと幸いです ⚠️⚠️⚠️翔泳社様の書籍
君たちはどう逃げるか - megamouthの葬列
平成が終わるというのに、暗い話題ばかり目につく。 おおまかに言って、アラフォーは自分たちの老後はどうなるのかと、心配しているし、若い人はそもそも結婚して子供を作れるのかと、疑問に思っているし、年金世代は死ぬまで今の生活を続けられるだろうかと、気が気でない。 世間の憎しみは、この世界を作った政治家や官僚だけでなく、逃げ切ろうとしている社会階層にも向けられつつある。 はじめは、そこそこジョークじみたニュアンスで発せられていた「上級国民」という言葉が、最近では真性の憎悪以外に説明のつかない熱量を帯びて、口々にささやかれ始めているのだ。 もはやこの国で、人生の盤石と安心を確立することは難しくなった。 だからこそ、かつての繁栄と秩序がまだ残っているうちに「逃げ切る」という考え方が、注目され、羨望され、時には嫉妬深く、語られるようになっている。 そういう私も、出来ることなら逃げ出して、海辺でギターを弾
マイクロソフト、Progressive Web Appsの開発支援ツール「PWA Builder 2.0」公開
Progressive Web Apps（PWA）とは、Webの標準技術を用いて開発されたWebアプリケーションの一種。通常のWebアプリケーションとして振る舞うことに加えて、リソースをローカルに保存しオフラインでの実行にも対応し、Service Workerによるバックグラウンド処理やプッシュ通知なども可能。デスクトップにWebアプリケーション単独のアイコンを登録し、ダブルクリックで実行可能なため、まるでネイティブアプリケーションのように振る舞うことができます。 すでにChrome、Firefox、Safari、iOS、Android、Windowsなど主要なWebブラウザやプラットフォームはPWA対応を実現しており、ネイティブアプリケーションのようにPWAを実行するだけでなく、AppStoreやGoogle Playストアで配布することも可能です。 PWA Builder 2.0はこう
ご注文はCIですか？ - megamouthの葬列
いい歳なのにWebプログラマなんていう仕事をしている。 正確に言えばWeb屋だ。今や絶滅危惧種になったこの職業は、デザインをPhotoshopやIllustratorでちょっと修正するところから、サーバーのファイアウォールの設定をちょっと変更するところまで、Webに関する何でもをこなす便利屋みたいなものだ。 一時は、Web屋みたいな人をフルスタックエンジニアなんて呼んでいた時期もあって、私も格好をつけたい時に便利に使わせてもらっていたけど、ただの銀玉鉄砲をシルバーバレット・オートマチック・モデルガンと呼んでるみたいで、口にする度に気恥ずかしくなってしまい、すぐに言わなくなってしまった。 これは言葉が悪いのではなくて、きっと私がWeb屋で、フルスタックエンジニアではなかったからだと思う。 銀玉鉄砲が、軽いアルミ缶すら撃ち抜けないように、Web屋もまた、ネットワークやサーバー運用の深淵を知らな
Microsoft EdgeのChromium移行とか - fragmentary
週明けに出回った、Microsoft EdgeがChromiumベースになるという話について、Microsoftからアナウンスがあった。 Microsoft Edge: Making the web better through more open source collaboration - Windows Experience Blog For the past few years, Microsoft has meaningfully increased participation in the open source software (OSS) community, becoming one of the world’s largest supporters of OSS projects. Today we’re announcing that we intend to ado
ヤフー株式会社におけるWebフロントエンドの技術選定 - Yahoo! JAPAN Tech Blog
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo! JAPAN Tech Advent Calendar 2018の6日目を担当します、Webフロントエンドエンジニアをやっている向井(@sakito)です！ 今回はヤフー株式会社でWebフロントエンドエンジニアがどのような取り組みを行なっているのかをお伝えします。 ヤフーの組織体制 Webフロントエンドエンジニアの取り組みを紹介する前に、ヤフーがどのような組織体制なのか紹介します。 冒頭画像のようにヤフーではカンパニー制度を取り入れており、それぞれのカンパニーにサービスを開発する事業本部があり、この事業本部単位でデザイナーやエンジニア、そのほかにもさまざまな職種の方が所属し、サービスごとで日々開発に取り組んでいます。
モバイルウェブのスピードアップに不可欠なのは 画像・JS・フォント の最適化 #ChromeDevSummit
[レベル: 中級] 昨日とおとといに続いて、今日も Chrome Dev Summit 2018 のセッションレポートをお届けします。 セッションのタイトルは “Speed Essentials: Key Techniques for Fast Websites” です。 昨日レポートしたセッションと同じようにモバイルウェブの高速化がテーマです。 しかし、こちらはより実践的な内容になっています。 パフォーマンス改善に非常に役立つテクニックが満載です。 パフォーマンス改善の優先対象は画像とJS、フォントの3つ モバイルウェブで 1 ページあたりデータ量が多いリソースは次の順番（HTTP Archive 調べ） 画像 (約 500 KB) JavaScript (約 380 KB) フォント (約 80 KB) この 3 つは Performance Budget（パフォーマンス バジェット）
ページのダウンロード時間が1000ミリ秒を超えると、Googlebotがクロールに制限をかける可能性あり
[レベル: 上級] Googlebot がページをクロールするときにかかるダウンロード時間が 1,000 ミリ秒を超えると、クロールに支障をきたすかもしれません。 一応の目安として、100 〜 500 ミリ秒以内を考慮しておくとよさそうです。 ページのダウンロード時間は 100 〜 500 ミリ秒が理想、1,000 ミリ秒は遅すぎ （旧）Search Console のクロールの統計情報レポートでは、ページのダウンロード時間の情報を確認することができます。 ページのダウンロード時間は、Googlebot がリソースを純粋にリクエストするのにかかった時間を示すデータです。 PageSpeed Insights のようにユーザーが使うブラウザの表示にかかる時間ではありません。 リソースは、HTML のほか画像や CSS、JavaScript、PDF なども含みます。 ダウンロード時間の目安に関
静的サイトを公開するならどこがいいの？ #技術書典 - Crieit
静的サイト（PHPやRubyなどのサーバープログラムを走らせない環境でのWebサイト）でSPAを公開するにあたって、運用・配信（ホスティング）するならどこがいいかと最近聞かれまして、その際の回答を技術書典の宣伝も兼ねてブログにしたためます。 今回は次の４つで比較しています。 GitHub Pages Firebase Hosting GitLab Pages Netlify 上記４つはどれも独自ドメインの設定とSSL対応が無料で行うことが出来ます。 ※比較的初心者に向けて書いている前提です。 AWS S3やGCP等の利用は初心者がいきなり設定を行うには項目が多いため除外しています。 レンタルサーバーも基本料金が発生し、スケール・管理し辛いため今回は除外しています。 また、少し機能について説明が必要な部分があるので、先に説明を書きます。 Rewrite設定について 静的サイト化したSPAを公
Webフロントエンド パフォーマンス改善ハンドブックを公開しました - dwango on GitHub
パフォーマンス改善ハンドブック ウェブページにおけるパフォーマンスに関する問題の見つけ方や考え方の事例をまとめた Webフロントエンド パフォーマンス改善ハンドブックを公開しました。 URL: https://dwango-js.github.io/performance-handbook/ このハンドブックでは過去に行ったWebフロントエンドのパフォーマンス改善の事例を中心に紹介しています。 注意点としてWebフロントエンドは常に変化しているため、現在の最適な解決方法を提案するものではありません。 また、アプリケーションによっても最適な解決方法は異なります。 今回の事例ではViewライブラリにReactを用い、映像再生プレイヤーなどある程度複雑な機能を持ったウェブアプリケーションのWebフロントエンドを扱います。 具体的にはニコニコ生放送（以下「生放送」）で行った事例を中心に書かれていま
ReactとVueってどう違う？全く同じアプリをReactとVueで作成してみて分かった相違点
日常的にVueを使用している開発者が、Reactはどうなのだろうと思い、ReactとVueで全く同じアプリを作成した時のそれぞれの工程を比較して分かった相違点を紹介します。 I created the exact same app in React and Vue. Here are the differences. 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 隣の家の芝生は青く見える VueとReactで作成したアプリの見た目を比較 VueとReactはデータをどのように変更させるか アイテムの新規作成 アイテムの削除 イベントリスナーを渡す 子コンポーネントにデータを渡す 親コンポーネントにデータを戻す 終わりに 隣の家の芝生は青く見える 私は現在の職場でVueを使用しており、Vueがどのように機能するかかなり理解してい
リソース指向アーキテクチャ(ROA)とは何なのか - Qiita
リソースの操作をする時に、全てHTTPメソッドが定義通りに使われることを「統一インターフェース」と呼ぶ。 例えば、リソースを取得する場合、/getResourceのようにURI中に操作を表す語彙(get)を使わず、/resourceのようにしてHTTPのGETメソッドを利用する。そうすることで、一貫した(統一された)インターフェースを保証している。 GET クライアントは必要なリソースを取得する場合に、そのURIにGETリクエストを送信してリソースを取得する。サーバはレスポンスのエンティティボディでリソースを表現し送信する。 DELETE クライアントは不要なリソースを削除する場合に、そのURIにDELETEリクエストを送信してリソースを削除する。DELETEの場合、レスポンスのエンティティボディはステータスメッセージを含んでいるか空である。 PUT PUTには以下の2つの役割がある。 1
ダークウェブ界の大物、痛恨のミス 見えてきた“正体”
ダークウェブを調査するホワイトハッカーが、世界最大のダークウェブマーケットであるDream Marketの管理人の素性に迫る。 連載：知られざるダークウェブの世界 ダークウェブを調査・監視するホワイトハッカーのSh1ttyKids（してぃーきっず）さんが、知られざる「ネットの裏側」をレポートする。 著者：Sh1ttyKids（してぃーきっず） ダークウェブ上のサイトについて、調査・監視活動を行うホワイトハッカー。大麻販売サイトが秘匿するIPアドレスを探し当て、法執行機関へ提供するなどの実績を持つ。 過去の連載記事一覧 ダークウェブマーケットとは、接続経路匿名化ソフト「Tor」の機能である「Hidden Service」（秘匿サービス）を用いて構築された闇市場です。違法薬物や偽造パスポート、運転免許証、ハッキングのチュートリアルなどの商品が多数取引されており、その匿名性の高さが捜査を困難にし
Google、Chromeブラウザでの劣悪広告ブロック開始、仕組みを説明
Chromeブラウザでの劣悪広告ブロックがバージョン64へのアップデートでスタートした。「Better Ads Standard」を満たさない広告を掲載するWebサイトには改善通告し、30日以内に改善しないと、そのサイトのすべての広告をブロックする。 米Googleは2月14日（現地時間）、15日のChromeブラウザのアップデートで、予告通り一定水準に達しない広告を自動的にブロックする対策を開始すると発表した。 “一定の水準”とは、同社が米Facebookやネット広告業界団体Interactive Advertising Bureau（IAB）などと共に2016年9月に設立したオンライン広告改善団体「The Coalition for Better Ads」が策定する広告基準「Better Ads Standard」のことで、例えば、ページを開くと自動的に音声付きで再生される動画広告や、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ジャニーズ○○ならずに済んだのに大喜利
Yahoo!ブックマークサービス継続（一部機能を除く）のお知らせ