hostsファイルの設定を即時反映させる方法 - Qiita
hostsファイルを変更してもブラウザで反映されず、再起動してみたり、シークレットウインドウを開いてみたりと検証作業などで手間取ることがあったので調査。 検証環境 Windows 10 pro Google Chrome 75.0.3770.142 Opera 62.0.3331.99 Firefox 68.0.1 Internet Explorer 11.1387.15063.0 Edge 40.15063.674.0 Safari 5.1.7 Google Chrome / Opera hostsファイルを変更 下記ページにアクセスして「Clear host cache」ボタンを押してホストキャッシュをクリア chrome://net-internals/#dns 下記ページにアクセスして「Flush socket pools」ボタンを押してソケットプールの消去 chrome://ne
HTML Tips
In this article, I will share with you some very useful HTML tips. Enjoy! * Post will be updated regularly with new tips! But first, what is HTML? Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript. Let’s start!
こんなやり方が！フォトショップ時短テクニックや役立つヒント・裏技15個まとめ
こんなやり方が！フォトショップ時短テクニックや役立つヒント・裏技15個まとめ あまり知られていない、だれでも簡単な便利テクニックが集合 フォトショップをもっと使いこなしたい、と思っている人は多いでしょう。 しかし、フォトショップ経験が長くなってくると、いつも同じやり方ばかりで、新しい方法を取り入れていない、ということが結構あります。 そこでこの記事では、フォトショップを使う上で欠かせない、時短テクニックや役に立つヒント・裏技15個をご紹介します。 「こんなやり方があったのか」と思ってしまう、あまり知られていない、だれでも簡単な実用テクニックを中心にあつめました。 トーンカーブ二重使いの、直感的な写真レタッチ術 カンバスの向きをくるくる回転 ホットキーと隠しスライダーで不透明度を調整 スマートオブジェクトの調整はいつでも編集可能 選択したレイヤーのみ新規レイヤーに結合する方法 柔軟で思い通り
2022年上半期、注目されたUIデザインのテクニックのまとめ
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 2022年上半期に公開した中で最も注目されたUIデザインのテクニックをまとめました。 UI & UX Micro-Tips: Best of 2022 by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ダークにデザインする時はホワイトも和らげる 2. フォームのエラーは色だけに頼らない 3. ユーザーが選択したアイテムを目立たせる 4. 細いフォントは暗いカラーにする 5. 次のステップの情報を提供する 6. 最も重要な要素をより目立たせる 7. 検索ボックスの幅は広くする 8. 素早いアクセスは、ナビゲー
MySQLで発生し得る思わぬデッドロックと対応方法
はじめに この記事は実際の業務で発生した MySQL のデッドロックとそのいくつかの回避方法や対応方法を（テーマは変えて）手元で実行できるコードを用いて解説する記事です。具体的には「トランザクション張っておけば大丈夫」と思ってませんか？ バグの温床になる、よくある実装パターンの記事で紹介されている「1on1 チャットサービス」で紹介されているデッドロックとデータベースレイヤでは同じ状況だったのですが、記事で紹介されている方法とは別の方法でデッドロックを回避する必要があったため、同じ状況に遭遇した人の助けになればという思いで記事を書きました。また、こちらの記事が無ければ私自身も現象を理解するのにもっと苦労したと思うので、この場を借りてお礼申し上げます！ 出金サービス履歴登録サービスを例に考える コードと説明が https://github.com/shuntagami/withdrawal_
TypeScriptの安全性の穴
TypeScriptの型システムは不完全です。 型システム上しょうが無い所も、どうしてそうなってるのって所もあります。 この記事では共通認識となっているようなものから、あまり認知されていないものも含め、TypeScriptの安全性の穴になり得る所を紹介します。 tsconfig.json 項目が大量にありますが、この記事では型安全性に大きく影響のあるオプションのみ紹介します。 strict このオプションが無効だと型安全性が大幅に失われます。 具体的にはnull | undefinedが無かったことにされたり、暗黙のanyが大量発生したりします。 なんでデフォルトがfalseなんですか？ 詳しくはこの記事を読んでください。 noUncheckedIndexedAccess このオプションがfalseの場合、インデックスシグネチャへのプロパティーアクセスが型安全ではなくなります。 const
console.log(); しか使えなかった自分へ。。。 - Qiita
この記事について Webエンジニアになって早１年半。railsのデバッグをする時にはエディターのデバッガーでスマートにできていたが、javascriptになるといつもconsole.log();ばかりを使って原始的なデバッグをしていた。。。 そんな脳筋な過去の自分に教えてやるための記事です。 console.log({変数名}); 「いきなりconsole.log();の紹介かい！！！」って思われるかもしれませんが、この技を知ったときは「なんで知らんかったんや。。。」って思うくらい便利だったので最初に紹介します。 以下のようなHTMLがある場合 <form> <input type="text" value="名無しの権兵衛" id="name"> <input type="text" value="80歳" id="age"> <input type="text" value="バスケ"
最近のWebサイトで見かける！ フロントエンドのデベロッパーにもデザイナーにも役立つCSSの実装テクニックのまとめ
最近のWebサイトやアプリで見かけるUIコンポーネントやエフェクトを実装するCSSのテクニックを紹介します。 一昔前まではJavaScriptが必要だったりしましたが、現在ではCSSのみで実装できるようになり、覚えておくと非常に便利です。 10 Useful CSS Tricks for Front-end Developers by Alex Ivanovs 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. タイプライターのようなエフェクト 2. 透過画像用シャドウ 3. カーソルのカスタマイズ 4. attr()でシンプルなツールチップ 5. ピュアCSSによるチェックリスト 6. is()と:where()による要素のスタイル 7. キーフレームを使用したアコーディオン 8. ホバーエフェクトのサイドバー 9
［CEDEC＋KYUSHU］フロムゲーの硬派な背景やキャラは，どのように作られているのか。グラフィックス制作における実例の数々が紹介された
［CEDEC＋KYUSHU］フロムゲーの硬派な背景やキャラは，どのように作られているのか。グラフィックス制作における実例の数々が紹介された ライター：川崎政一郎 ゲーム開発者向けカンファレンス「CEDEC KYUSHU 2021 ONLINE」の初日となる2021年11月27日，「フロム・ソフトウェアのゲームグラフィックス制作の拘り」と題された講演が行われた。 フロム・ソフトウェアは「DARK SOULS」シリーズをはじめ，「Bloodborne」や「SEKIRO: SHADOWS DIE TWICE」，そして最新作となる「ELDEN RING」（PC / PS5 / Xbox Series X / PS4 / Xbox One）などを手掛けている。これらのタイトルに共通するリアルさ，硬派さは，多くのプレイヤーにとって強く印象に残っているだろう。 そういったイメージづくりに大きく貢献してい
今日からできるC#のパフォーマンス改善小ネタ11選 - Qiita
はじめに C#を使う際に、今日から使えそうなパフォーマンス改善につながる小ネタを10個まとめてみました。 BenchmarkDotnetを使ってベンチマーク測定したコードは下記においてあります。 ※他にもこんなのあるぜっていうのは是非教えて頂けると幸いです🙇♂️ 1. Capacityを設定する System.Collections.Generic に定義されているListなどのクラスはコンストラクタを呼び出す際にCapacityを設定することで無駄なアロケーションを削減できる可能性があります。 Listなどは内部に配列を持っており、Addなどの操作によってその配列サイズに収まらない要素数になった際に新しく配列を確保します。（現状の配列サイズ x 2サイズの配列を確保） 必要な要素数が明確な場合はCapacityを設定して無駄なアロケーションを避けるようにすることでパフォーマンス改善が
Windows Terminalのコマンドラインを極める (1/2)
Windows Terminalの-wオプションを使えば、コマンドラインから、同一ウィンドウのタブ内、別ウィンドウなどで任意のコマンドを実行させることが可能になる。うまく利用すると、コマンドラインの使い勝手が大きく変わる Windows Terminalは、UWPではあるが、wt.exeという「アプリ実行エイリアス」を使って、Win32コンソールアプリケーションのように扱うことができる。また、Ver.1.7からは、Windows Terminalのウィンドウを指定して起動コマンドを実行させることが可能になった。このあたりについては過去記事を参考にされたい。 ●コマンドラインからウィンドウの制御が可能になったWindows Terminal v1.7 https://ascii.jp/elem/000/004/049/4049105/ とりあえずは最新の安定版（Ver.1.9）、プレビュー版
mouseover 中に表示される DOM のデバッグ | blog.jxck.io
Update 2024-03-30: Chrome 123 から "Emulate a focused page" が追加された。 これを用いれば良いため、以降の全ての方式は古くなった。 Apply other effects: enable automatic dark theme, emulate focus, and more https://developer.chrome.com/docs/devtools/rendering/apply-effects#emulate_a_focused_page マウスが乗ってないと出ない UI も、そこに Tab などでフォーカスを移し、その状態で Dev Tools の "Emulate a focused page" を有効にすれば良い。 Intro 先日、後輩が「mouseover 中にしか表示されない DOM のデバッグ」に手こずっ
Chrome Extension を円滑に作るためのポイント
Chrome Extension を作った際にいくつかハマったことがあったのでメモします。 ページ上での JavaScript 実行結果を取得する scripting.executeScript を使うのですが、関数を指定する形式のみしか値が返ってきません。ファイルを指定する形式と同じページに書かれており、制限が明確に書かれていないため紛らわしいので注意が必要です。 NG 次は実行結果が null として返ってきます。 function getTitle() { return document.title; } // returns null getTitle(); // same result // (() => getTitle())(); async function walkDocumentTitle() { const tabId = getTabId(); const inje
これからはこの実装がオススメ！ iOSの100vhでアドレスバーがあっても高さいっぱいに表示するCSSのテクニック
高さいっぱいに表示したい時、古くはheight: 100%;、そしてmin-height: 100%;で実装していたと思います。現在ではビューポートの単位min-height: 100vh;が使用できるようになりました。 しかし、iOSでは100vhを使用してもアドレスバーが表示されていると下がその分隠れて表示されてしまい、高さいっぱいになりません。JavaScriptを使用するというやり方もありますが、CSSのみで対応できるので、そのCSSを紹介します。 Chromeにも対応しています。
Chrome DevToolsのRenderingタブを活用しよう | フロントエンドBlog | ミツエーリンクス
Chrome DevToolsにはさまざまな機能が搭載されています。そのうちの1つ「Rendering」には、ページのレンダリングパフォーマンスを視覚化する機能や、さまざまな見え方を疑似的に再現する機能が含まれています。 サイトのレンダリングパフォーマンス改善の取り組みに活用できる、こちらのRenderingタブ内の各機能についてご紹介します。 利用方法と各機能について Renderingタブはデフォルトだと非表示になっており、利用するにはまず次のいずれかの方法で表示する必要があります。 Chrome DevToolsを開いた状態でWindowsではCtrl+Shift+P、MacではCommand+Shift+Pを押して表示されるコマンドメニューに「Rendering」と入力し、「Show Rendering」を選択 Chrome DevTools内の三点ドットから「More tools
Blender×アニメーションTips１
●最初に こういうことがしたい！という事例に対しての逆引きBlenderアニメーション部門辞典。 AutoRig、AnimationLayerという2つのアドオンを使用します。 こちらはアニメーション部門ですので、モデリング、スキニングについては書いていません。 バージョンはBlender2.92＋AutoRig3.62.24です。 AutoRigとは、Blenderのアドオンでアニメーション関連をとても便利にするものです。 特にキャラクターリグはこのアドオンがあるととても楽になるのでアニメーターはすぐに買いましょう。モデラーもUE4やUnityへのエクスポートが楽になるので買いましょう。 Auto-Rig Pro Auto rigging character tool for Blender blendermarket.com ちなみに、こちらのAutoRigとAnimationLaye
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
研究のためのPython開発環境
CSSでこんなことができるの知ってた？ 要素・コンテナのサイズに関係なく、ボーダーや背景をはみ出して配置するテクニック
Defensive CSS
テクニカルライティングの基本
