これでUIデザイン用のSVGアイコンに困らない！ 1,700種類以上が揃った商用利用無料、改変・再配布可の太っ腹ライセンス- MingCute Icon
WebサイトやスマホアプリのさまざまなUIデザイン用に、シンプルで洗練されたデザインのSVGアイコンが完全無料で利用できるMingCute Iconを紹介します。 このアイコンの特徴は、小さいサイズでもくっきり見えること。1,700種類以上のアイテムが揃っており、すべてSVGアイコン、そしてWebフォントとして利用できます。 MingCute Icon MingCute Icon -GitHub MingCute Iconの特徴 MingCute Iconのダウンロード MingCute Iconのアイコン MingCute Iconの特徴 MingCute Iconは、Webサイトやスマホアプリ用にシンプルで洗練されたデザインのアイコンです。すべてのアイコンは、24x24のグリッド内に設計されており、アウトラインと塗りつぶしの2スタイル、2pxのストロークとなっています。アイコンのフォー
ChatGPTを最強の学習ツールにする方法 - Qiita
こちらの記事は随時追加更新していきます 記事の内容 何かと話題のChatGPTですが、今回はこのChatGPTをプログラミング学習として活用し、 「最強の学習ツール」にしてしまおうという記事になります。 内容を書き換えれば、英語学習などにも置き換えることができます。 筆者の関連記事 ChatGPTはそのチャット内で質問した内容を記憶しそれによって回答が異なるケースがあります。 もし、意図した回答が得られない場合などは「New chat」から新たに質問するなどの工夫が必要です。 そして、ChatGPTからの回答内容はあくまでも一つの例であるという認識で向き合いましょう。 アジェンダ 登録方法 質問のコツについて ロードマップ(カリキュラム)を提案してもらう ふんわりとした内容を具体的にしていく 更に深掘りして手順を教えてもらう 「何がわからないかわからない」状態をなくしていく 次のレベルアッ
社内システムを外注する際のポイント
私分かりませんから全てお願いしますは止めろコンサルも込なら良いが大体は要件定義からだ。つまりお前らは要求定義は出来ている前提だ。なんも分からないから経営層や現場との橋渡しのみなら邪魔だから今すぐSE名乗るの止めて仕事辞めて田舎で畑耕せ。 自社の業務は理解しておけAccessやFilemakerで弄れる程度でSE名乗るならせめて自社業務の流れや種類は把握しておけ。何聞いても現場に確認しますじゃ時間かかるんだよ。なんなら分かるんだ？別に業務フロー寄越せとか言ってないぞ。 要求を理解しておけ割とマジで自分が経営層から何をシステム化してほしいのか分かってない奴が多い。体感5割以上。最近じゃインボイス対応。インボイス対応してください言われて現状や影響箇所は何をしたいか聞いたら「さぁ？」って言う。じゃ、何しにきた。挙句に「そのやり方も提案するのがシステム会社でしょ！」とキレる役職者まで。コンサルは契約
（基礎編）jQuery使いのエンジニアがReactとNext.jsでWebサイト制作するために最低限押さえておきたいコード
なぜ書いたか 筆者もWebサイト制作をそこそこ長くやってきておりいまは業務でVueを書いたりちょっとReactを書いたりSvelteを書いたりしていますが、2年前くらいまではReactやES6の構文すら書いたことがありませんでした。 WordPressでのサイト制作が多く、機能が少ないサイト制作会社ではjQueryで充分なことも多く、恥ずかしながら業務時間外での学習や外部の情報を追うこともしていなかったため、開発系の技術スタックに慣れるのにかなり時間がかかりました。 まずはよく使うコードを見て解説しながら答えの一つを示し、よく出てくるコードをざっくり理解して書けるようにすることで、実務でReactを取り入れる取っ掛かりになればいいなぁという思いでこの記事を書いています。 続編は多分今月中に書きます。 こちらは基礎編です。 対象者 普段jQueryでWebサイトを制作している 生のJSはあん
ChatGPTのVSCodeプラグインが神すぎる件について
(追記) 自動ログイン機能が利用規約に抵触していたらしく、マーケットプレイスより削除されました。 GitHubにAPIを使ったものは残っているので、知識があれば動作させられるかと思います。（自己責任） これを使った再配布等の行動はトラブルの元なので控えた方がよいでしょう。 ChatGPT いいよね 最近一番メッセージやりとりしてるのChatGPTだし、なんなら1日にしゃべる量よりChatGPTと話してることの方が多い可能性まであります ChatGPTのチャットツール自体はこちらから参加して試せるわけですが、プログラムを書くときに使ったことのない言語やライブラリを開拓する際ここまで有難い存在はありません． このようにネット上を探し回ると地味に時間のかかる情報もチャット形式で手に入ります． さて、今回の話題ですが、我が愛しのテキストエディタ「Visual Studio Code」のChatGP
デザイン素人に贈る、UIディレクション10個のポイント｜ひとし｜note
トレタ代表の中村です。 年末ですね。僭越ながら、今年もアドベントカレンダーの大トリを務めさせていただきます。 今年は何を書こうかなあってずっと悩んでいたのですが、毎年「想い」やら「ビジョン」「意義」やら、同じようなことばかり書いていても芸がないので、今年は趣向を変えてみたいと思います。 テーマは実務方向に振りきって「非デザイナーはどうやってデザイナーにUIディレクションをしたらいいのか」をお題に選びました。ビジネスサイドなど、デザイナーではない人たち向けの記事です。 僕はもともとデザイナーとしての専門的な訓練は受けていないのですが、それでもUI/UXにこだわったサービスを作ろうとすると、どうしてもデザイナーの皆さんとの議論や相談、互いの考えをすり合わせることから避けられなくなります。時には対立することもありますから、このコミュニケーションは本当に大事。 とはいえ経験や知識が乏しいと、デザイ
なぜ出力時のHTMLエスケープを省略してはならないのか - Qiita
メリークリスマス！ 週末もPHPを楽しんでますか？ ところでWebセキュリティはWebアプリケーションを公開する上で基礎中の基礎ですよね！ メジャーな脆弱性を作り込まないことはWeb開発においては専門技術ではなく、プロとしての基本です。 中でもXSS (Cross-Site Scriptingクロスサイトスクリプティング)やインジェクションについての考慮は常に絶対に欠いてはならないものです。 現実にはプログラミングには自動車のような運転免許制度がないため、自動車学校に通わず独学で公道に出ることができてしまいます。つまりは基礎知識がないままにWebプログラマとして就職したり、フリーランスとして案件を請けることも現実には罷り通っています。それは一時停止標識も赤信号も知らずにタクシー営業しているようなものです。 このような事情により、体系的な理解のないWeb開発初心者は (時にはn年のキャリアを
わいテクノロジー化石おじさん、いまどきAjaxって呼ばれないことに震える
SPAってゆうのね エイジャックスとか言ったら若者に鼻で笑われたわ
これがフロントエンドで話題になった記事！ ICS MEDIAの2022年 - ICS MEDIA
ICSはフロントエンドを専門とするウェブ制作会社ですが、オウンドメディアとして技術情報発信サイトを運用しています。このサイトは開設から9年目をむかえましたが、今年は「国内のウェブ水準を前進させる記事を。話題のテーマも、他のサイトでは読めないニッチな技術も」をテーマとしてやってきました。そんなICS MEDIAにとっての2022年を、あらゆる数値を使って多角的にレポートします。 今年はどの記事がもっとも読まれたのでしょうか？ 今年執筆した記事で上位10記事をピックアップしました。 1位 : Vue 3 2022年の最新標準！Vue 3の新しい開発体験に触れよう 24,500PV Vue 3（開発コード：ワンピース）がリリースされたのは2020年9月。Vue 3のリリース以降は周辺ツールも進化しました。Vue 2の構成よりVue 3周辺ツールは型安全になったことが特徴です。ICSではVue 3
Web APIを手作りする時代は終わった？
::: message info これは[フィヨルドブートキャンプ Advent Calendar 2022 Part.1](https://adventar.org/calendars/7760)の25日目の記事です。 昨日の記事は:@shujiwatanabe:shujiwatanabeさんの[質問しながら出来るようにしていく](https://shu91327.hatenablog.com/entry/2022/12/24/091025)と:@saeyama:saeyamaさんの[Rails/Vue 編集時に画像をD&Dで入れ替えした時のActive Storageの保存方法](https://saeyama.hatenablog.com/entry/2022/12/24/000123)でした。 ::: ↓こういうのを職人が丹精込めて一つ一つ手作りする時代は終わりました。 ```sh
Youtubeをホームページに埋め込み、SEO対策の手助けをしよう | リアサポート
YoutubeはGoogleが常にクロール可能な状態になっている 元々、SEOに重要なのはテキストで、動画や画像は関係がないといわれてきました。 しかし最近は、Googleで検索すると、動画が検索結果の上位に現れたり、検索結果が表示された際に検索窓の下に現れる「すべて・画像・動画・ショッピング・ニュース」の中から動画を選択せずとも検索結果の中に動画が表示されたりします。 特に何かのやり方やノウハウを知りたい場合は動画のほうがわかりやすいこともあり、動画の価値は上昇傾向にあります。 特にYoutubeはGoogleが常にクロールできる状態のため、クローラーに情報を知らせることで動画を認識してもらえます。 実際、動画があるページの方が動画がないページに比べ、検索上位に表示される傾向にあります。 参考：Google 動画のベスト プラクティス 動画をホームページに埋め込むメリット 動画をホームペ
成功法則が詰まったBtoBサイトの標準ワイヤーフレームを無料配布します | knowledge / baigie
約1年前、BtoB企業における顧客獲得型サイトの勝ちパターンをまとめた『BtoBサイト・チェックリスト』を、ベイジ、才流さん、WACULさんの3社連名で発表し、大きな反響をいただきました。 このチェックリストはブログで公開しただけではなく、私たちのウェブ制作の現場でもフル活用されています。この1年間に手掛けた多くのBtoBサイトが、このチェックリストを満たすように設計され、多くのBtoBサイトでコンバージョン数/率やフォーム誘導数/率の向上など、ポジティブな変化が生まれました。 このような活動の中から、『BtoBサイト・チェックリスト』の内容を満たした『BtoBサイト・ワイヤーフレーム』なるものが誕生しました。これを今回、皆さんにご提供します。リード情報なども一切取らず、そのまま丸ごとお渡しします。 BtoBサイト標準ワイヤーフレームXD版（770KB） BtoBサイト標準ワイヤーフレーム
知っておくと便利なCSSのセレクタ！ :has()疑似クラスを使用すると、子の数に基づいて親要素のスタイルを定義できる
CSSはどんどん便利になってますね！ :has()もその一つで、指定した要素がある場合にのみスタイルを適用できます。その機能を利用して、子の数に基づいて親要素のスタイルを定義することができます。たとえば、子要素が3個以下の場合、ちょうど5個の場合、7～9個の場合などに親要素に異なるスタイルを設定するのが簡単です。 Style a parent element based on its number of children using CSS :has() by Bramus :has()について詳しく知りたい人は、以前の記事をご覧ください。 CSSの:has()疑似クラスの便利な使い方を徹底解説 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに :has()を使用して、子の数に基づいて親要素のスタイルを設定 :has()
日本のウェブデザインの特異な事例
sabrinas.spaceより。 8週間もかからなかったはずのプロジェクト 日本のウェブデザインはどう違うのか? 2013年のRandomwireのブログ投稿で、著者(David)は、日本のデザインの興味深い相違点を強調しました。日本人はミニマリストのライフスタイルで海外に知られていますが、ウェブサイトは奇妙なほどマキシマリストです。ページには様々な明るい色(3色デザイン原則を破っている)、小さな画像、そして多くのテキストが使われています。2022年11月に撮影されたこれらのスクリーンショットで、自分の目で確かめて下さい。 ブログ投稿には、文化的専門家、デザイナー仲間、そして不満を抱く市民によって支持されている、考えられる理由がいくつか挙げられていました。 この理論が今でも正しいのか、また、もっと定量的なアプローチが可能なのか気になったのでやってみました。 私が見つけたもの 各国の最も人
Swiper DEMO
#01 基本カード型 01 スライドの横幅は可変 前へ / 次へボタンだけがコンテンツ幅からはみ出る 前へ / 次へボタンはスライドに対して上下中央揃え
sitemap.xmlの作り方と効果的な使い方 | プロモニスタ
「XMLサイトマップって何？」「必ず設定しないといけないの？」と疑問に感じているWebサイト運営者の方もいるのではないでしょうか。 XMLサイトマップとは、検索エンジンに任意のWebサイトのページ内容をすべて知らせるために用いられるXML形式のファイルです。 検索エンジンはXMLサイトマップを参考にWebサイト内をクロールするため、少しでも早くインデックスさせたいなら設置することをおすすめします。 本記事では、XMLサイトマップの役割やSEO効果、作成方法について詳しく解説します。 XMLサイトマップとは？ XMLサイトマップとは、検索エンジンに任意のWebサイトのページ内容をすべて知らせるために用いられるものです。 各ページのURLが記載されたXML形式のファイルで、「sitemap.xml」というファイル名を付けてトップディレクトリにアップロードすることが一般的です。 検索エンジンはX
STORES 予約 コンテナ化への道のり 前編 - STORES Product Blog
はじめに STORES 予約でSREを担当している矢作です。 STORES 予約では今年(2022年)の9月にアプリケーションを構成する大多数のサーバーをEC2からECSへと移行することでコンテナ化(以降ECS化)しました。 今回はコンテナ化をすることで解決を目指した課題についてや、コンテナ環境でどういったアーキテクチャを構築し、その後移行していったのかについてお話ししていきます。 コンテナ化以前の構成 コンテナ化する前のSTORES 予約のざっくりとしたインフラ構成は以下のようになっています。 一台のEC2インスタンスの中に、Nginx(緑のアイコン)、Next.js(黒のアイコン)を利用して作られたコードベース、Railsを利用して作られたコードベースの3者が同梱されています。 Nginxがリクエストを受け取り、パスベースでNext.jsかRailsのプロセスへとインスタンス内でリバー
.htaccess ファイルを簡単作成「.htaccess Editor」
リダイレクト Fromにサイトパスを入力、ToにURLを入力 301 Moved Permanently 恒久的に移動 From: To: From: To: From: To: 302 Moved Temporarily 一時的に移動 From: To: From: To: From: To:
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
つよつよエンジニアだらけの大企業に転職すると…「技術の前にメンタル鍛えたい系エンジニア」→「無理っすね！知見無いので工数倍ください！」
Clippy — CSS clip-path maker