「専門性が高い人になりたいですか？」 そう問われたら、多くの人が「はい！」と答えるでしょう。エンジニアやデザイナーのような専門職に限らず、ビジネスパーソンの多くも、「できることなら何らかの専門性を高めたい」と思っているはずです。 しかし、そもそも「専門性が高い」とはどういう状態を指すのでしょうか。どんな人になれば「専門家」だと評価されるようになるのでしょうか。それを突き詰めて考えることが専門性を高めるヒントになると思い、少し深堀してみました。 最後には、まだ実験中ですが、ChatGPTを活用して専門性を高める方法をご紹介します。 専門性と体系化の関係 辞書サイトのWeblioを見ると、専門性とは「特定の分野のみに深く関わっているさま。高度な知識や経験を要求されることや、その度合い」と書かれています。この定義に従うと、専門性には「特定の分野の高度な知識や経験」が必要だということになります。
更新履歴 追加 2024/04/01 「Epic Easing」を掲載しました 2024/03/07 「Filter Blend」を掲載しました 2024/03/04 「Tooltips & Speech Bubbles」を掲載しました 2023 2023/07/04 「CSS Box Shadows Generator」を掲載しました 2023/06/29 「Regulex」を掲載しました 2023/04/05 「Colorable」を掲載しました 2023/03/09 「Scrollbar.app」を掲載しました 2022 2022/10/04 「CSS Shadow Palette Generator」を掲載しました 2022/09/07 「Wayback Machine」を掲載しました 2022/05/31 「Min-Max-Value Interpolation」を掲載しました
2020年初め、Chromium版のMicrosoft Edge（以下新Edge）がリリースされました。新Edgeは「Microsoft Edge Legacy」（以下Edge Legacy）と比べて多くの機能が使えるようになっており、Chrome・Firefox・Safariのモダンブラウザと遜色ないレベルになっています。 先日5月29日にリリースされた「Windows 10 May 2020 Update」では、Edge Legacyの開発が終了することもアナウンスされており（参考記事「Windows 10 features we’re no longer developing - Windows Deployment」）、今後のWindows標準ブラウザは新Edgeとなっていくでしょう。 ウェブ制作の面で嬉しいことは、多くのCSSやJavaScriptの機能が使えるようになったことで
去年8年ぶりに vimrc を書き直した時はLSPの体験があんまりよくなくてLSPなしでNeovimを使い続けていたのだが、様々な言語のOSSをメンテする都合で用途に応じてIntelliJとVSCodeとNeovimの三刀流で暮らしていた結果、可能ならNeovimに寄せたいけどそれならLSPを使いたいなということになり、今回LSPの所を真面目に設定し直して、かなり良い体験になっている。 正直Neovimの設定はVSCodeのそれに比べたら面倒なんじゃないかという印象がありサボっていた節があるが、実際にやってみるとVSCodeと同程度に簡単に済む方法もあったので紹介したい。 何故Neovimなのか LSPの話の前に、タイトルだけ見た人がそもそも単にVSCode使えばいいじゃんと言いそうなので、どうしてIntelliJやVSCodeではなくNeovimに揃えようと思ったのかについて書いておく。
HTML制作で気をつけたい スクロールバーの挙動 - ガタつきをCSSのscrollbar-gutterで防ぐ方法など - ブラウザのスクロールバーは、OSの種類によって挙動や見た目がさまざまです。環境によって挙動が違うため、自分の環境では問題なくても、ユーザーの環境から見ると問題が起きていることがあります。次のような問題を経験したことがある人も多いのではないでしょうか？ 不要なスクロール領域ができていた スクロールバーの切り替わりで画面がガタつく これらの問題を防ぐためには、対処法のほかにどんな環境で発生するのかを知っておく必要があります。本記事では、スクロールバーの簡単な説明と、2つのよくある問題と対処法について紹介します。 スクロールバーの簡単な説明と、制作時のポイント よくある問題を紹介する前に、スクロールバーの簡単な説明と、macOSで制作する時の注意点について触れておきたいと思
IEのサポートが終了した現在、古いCSSリセットからもう卒業！ 最近のデバイス・ブラウザの仕様に適した新しいCSSリセット -EllyLoel/reset.css
*{margin:0;padding:0;line-height:calc(0.25rem + 1em + 0.25rem)}*,::before,::after{box-sizing:border-box}*:where(:not(fieldset,progress,meter)){border-width:0;border-style:solid;background-origin:border-box;background-repeat:no-repeat}html{block-size:100%;-webkit-text-size-adjust:none}@media (prefers-reduced-motion:no-preference){html:focus-within{scroll-behavior:smooth}}body{-webkit-font-smoothing
gzip圧縮だとあまり圧縮できていなく、スライディングウィンドウが小さいせいかなと思ったのですが、実際に大きさがかなり違うみたいなので、それが原因としてありえそうです。 Gzip uses a fixed size, 32KB window, and Brotli can use any window size from 1KB to 16MB, in powers of 2 (minus 16 bytes). This means that the Brotli window can be up to 512 times larger window than the deflate window. Results of experimenting with Brotli for dynamic web content - The Cloudflare Blog AudioContextの
この記事はCSS Advent Calendar 2022の9日目の分です。 CSSのボックスモデルにおいては、ボーダーの内辺とパディングの外辺の間にスクロールバーが配置されます。最近はどのOSでもオーバーレイスクロールバー（スクロールバーが内容の前面に覆いかぶさるようなもの）が主流となり、スクロールバーが存在してもしなくても内容の幅が変わらないようになっています。一方、クラシックスクロールバー（スクロールバーが常に表示されるようなもの）が使われる環境では、overflow: autoな要素において内容がはみ出すときとはみ出さないときで内容の幅が変わってきます。 クラシックスクロールバーが使われる環境でも内容の幅を一定に保ちたいという場合は、scrollbar-gutterプロパティを使います。scrollbar-gutter: stableを指定すれば、スクロールバーが表示されないときで
この記事では、あまり知られていないCSSの小技20個を実例サンプルと一緒にご紹介します。 わずかなコードで実装可能なテクニックばかりで、ウェブ制作でも気軽に活用することができます。 HTMLの小技テクと一緒に活用してみてはいかがでしょう。 【HTML】知っておくと便利！短いHTMLコードで実装できる小技テク17選 そもそもCSSってなに？ CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）とは、HTMLなどのマークアップ言語で書かれた文書の表示方法を記述するためのスタイルシート言語です。CSSは、HTMLやJavaScriptと並んでWebの主要な技術です。 CSSは、レイアウトや配色、フォントなど、デザインとコンテンツを分別することを目的としています。これによって、コンテンツのアクセシビリティの向上、デザインの柔軟性やコンテンツの制御しやすさ、関連
筆者はこれまで、定期的にVimのプラグイン紹介の記事を定期的に投稿していたのですが、2019年のVim AdventCalenaderに投稿したNeovimでモダンなPython環境を構築するv2(LSPを添えて)以降、ほとんどプラグイン紹介記事を執筆していませんでした。 他のかたの記載されるNeovim環境構築記事を見るたびに、筆者も自分の環境を紹介したいと常々思っていました。 ワシの使っているNeovimプラグインは200個近くあるぞ vim沼: NeovimのReact、TypeScript、Tailwind CSS用セットアップ Neovimでのフロントエンド開発環境 2022 しかしNeovim v0.5のリリース以降、増え続けるluaプラグインの洪水に飲まれ、筆者のNeovim環境はプラグインを入れては消しを繰り返し、安定しない日々を過ごしていました。 Neovim v0.5リ
Custom Scrollbars In CSS
Custom scrollbars are getting more popular nowadays, and I’m very keen to dig into them. There are different reasons why to customize a scrollbar. For example, the default scrollbar can make an app UI look inconsistent across multiple operating systems, and here we can get the benefit of having a unified style. I have always been interested in learning about how to customize a scrollbar in CSS but
WebKit Features in Safari 16.4
Mar 27, 2023 by Patrick Angle, Marcos Caceres, Razvan Caliman, Jon Davis, Brady Eidson, Timothy Hatcher, Ryosuke Niwa, and Jen Simmons ContentsWeb Push on iOS and iPadOSImprovements for Web AppsWeb ComponentsCSSHTMLJavaScript and WebAssemblyWeb APIImages, Video, and AudioWKWebViewDeveloper ToolingWeb InspectorSafari Web ExtensionsSafari Content BlockersNew Restrictions in Lockdown ModeMore Improve
スクロールバーは、長いコンテンツのWebサイトに不可欠な要素です。ブラウザにはスクロールバーのデフォルトのスタイルがありますが、サイトのデザインに最適とは限りません。スクロールバーのデザインを変更するのは、CSSで簡単にできます。 スクロールバーのデザインを変更するCSSを確認しながら生成できるオンラインツールを紹介します。 Scrollbar.app Scrollbar.app -GitHub スクロールバーのデザインを変更するCSS Scrollbar.appの特徴 Scrollbar.appのの使い方 スクロールバーのデザインを変更するCSS スクロールバーのデザインを変更するCSSは、下記の通りです。 ::-webkit-scrollbar: スクロールバー全体 ::-webkit-scrollbar-thumb: ドラッグ可能なスクロールのハンドル ::-webkit-scrol
昔はこういうの結構やられてた気がするけど最近あんまり見なくなったのでやってみました。 タイトルは から借用しました。 注意点 プラグイン自体の説明はあまりするつもりはないので、GitHub の README を読むなり使ってみるなりしてみてください。 私は結構頻繁にプラグイン乗り換えるので 2022 春バージョンと思ってください。 私が言うのもあれですが、プラグインはいっぱい入れればいいというものではありません。ひとつひとつを使いこなすのが大事です。多ければそれだけ管理も大変です。 競合があるプラグインは比較して選定しているつもりですが、あくまでも私の趣味の範囲での選定となります。絶対的な指標があってこっちの方が優れているといった判断をしているわけではありません。 私の Neovim の使い方 使い方が違うと参考にならないことが多いため前提としてどういうふうに Neovim を使っているか
Defensive CSS
👋 This article has been expanded into a new project called Defensive CSS. Due to the fact that the content here will not be updated, I recommend you to read defensivecss.dev instead. Oftentimes, we wish that there was a way to avoid a certain CSS issue or behaviors from happening. You know, content is dynamic, and things can change on a web page, thus increasing the possibility of a CSS issue or
Scrollbar.app
Simple CSS scrollbar editor.
content-visibility: the new CSS property that boosts your rendering performance | Articles | web.dev
The content-visibility property, launching in Chromium 85, might be one of the most impactful new CSS properties for improving page load performance. content-visibility enables the user agent to skip an element's rendering work, including layout and painting, until it is needed. Because rendering is skipped, if a large portion of your content is off-screen, leveraging the content-visibility proper
世間に死ぬほど色々な方法があるのはわかっているがとにかくまっさらな状態から最短手順でEmacsでJSX/TSXが書けるようになりたい! という話。VSCodeとかそういう話には目を背ける。 tsxファイルはweb-modeで起動するようにすればシンタックスハイライトとインデントはうまくいくので、あとはlspを起動するようにすれば快適です！— つかもとたけし (@itometeam) 2023年1月23日 自分で調べつつ試行錯誤したんだけど、最終的にはこのtweetで教えてもらった通りになった。メジャーモードとしてweb-modeを使いつつflycheckとLSPで開発支援。 macOSにインストールしたEmacs*1、およびMELPAにあるパッケージだけで、以下のようになった。 (require 'web-mode) (add-to-list 'auto-mode-alist '("\\.
CSS accent-color Stay organized with collections Save and categorize content based on your preferences. Today's HTML form elements are difficult to customize. It feels as if it's a choice between few or no custom styles, or resetting input styles and build it up from scratch. Building it up from scratch ends up being much more work than anticipated. It can also lead to forgotten styles for element
本記事で出来るコト お知らせ機能を「Googleドライブ」と「Googleスプレッドシート」で作ります。 はじめに ゲームクリエイターのべすとまんです。 突然ですが、自分の開発するゲームに「お知らせ」を実装したくなることありませんか？ 本記事では、Googleドライブとスプレッドシートを使用し、Unity製のゲームへお知らせ機能を実装する方法を紹介します。 もちろん専用のサーバーを用意する必要もありません！ 注意点 キャッシュせずに実行するたびに画像をダウンロードする方法のため、容量の大きい画像を指定すると通信料が大きくなる可能性があります。 600ユーザー以上からのアクセスがあるとアクセス制限がかかる、などのGoogle側の制限（参照： 共有ドライブの制限）があるため、大規模ゲームへの実装は非推奨となります。 Googleへのアクセスができない環境での動作確認は行っておりません。 たまに
CSSを書く前にスクロールバーを表示しよう
これを読むあなたはCSSを書く方だと思いますので、お尋ねします。 あなたは普段、幅と高さを持つ、クラシカルなスクロールバーを表示していますか？ していないのだとしら、それはどうしてなのでしょう。 OSの初期設定から変えていないだけかもしれません。スクロールバーを醜いものだと考えていて、スクロールするときだけに出現する控えめなスクロールバーを好んでいるからかもしれません。 あなたがどう考えていようと、現実にはそのような、ユーザーの操作に応じてオーバーレイで表示されるスクロールバーが選択できない環境も存在します。 そういった環境では、スクロールバーはウェブページ上で幅と高さを持ち、レイアウトに影響を与えます。 それを忘れて書かれたCSSは、オーバーレイ・スクロールバー前提のレイアウトであったり、不必要なスクロールバーの存在を生み出してしまうことがあります。 スクロールバーを表示、つまり、ウェブ
Sublime Text 4
The first stable release of Sublime Text 4 has finally arrived! We've worked hard on providing improvements without losing focus on what makes Sublime Text great. There are some new major features that we hope will significantly improve your workflow and a countless number of minor improvements across the board. A huge thanks goes out to all the beta testers on discord and all the contributors to
23 Feb JavaScript performance beyond bundle size Posted February 23, 2021 by Nolan Lawson in performance, Web. 8 Comments There’s an old story about a drunk trying to find his keys in the streetlight. Why? Well, because that’s where it’s the brightest. It’s a funny story, but also relatable, because as humans we all tend to take the path of least resistance. I think we have the same problem in the
Some iconic scrollbars recreated as faithfully as possible.
Welcome to my new series Emacs From Scratch. I’m far from an Emacs expert, so join me in my quest to figure out how to create a useful Emacs setup from nothing1. In this part, we’ll install Emacs, set up sane defaults, packaging and do some basic UI tweaks to build a solid foundation. Table of Contents Install Emacs Remove UI elements Configure the package manager Set sane defaults Become evil Set
Thorium Browser
Chromium fork for Linux, Windows, MacOS, Android, and Raspberry Pi named after radioactive element No. 90. Highlights Compiler optimizations include SSE4.2, AVX, AES, and modifications to CFLAGS, LDFLAGS, thinLTO flags, import_instr_limit flags, and PGO, as well as other compiler flags. LLVM LOOP optimizations as -mllvm flags Learn more about these compiler optimizations and how they work Here. UI
I first got into web design/development in the late 90s, and only as I type this sentence do I realize how long ago that was. And boy, it was horrendous. I mean, being able to make stuff and put it online where other people could see it was pretty slick, but we did not have very much to work with. I’ve been taking for granted that most folks doing web stuff still remember those days, or at least t
WebKit Features in Safari 17.0
Sep 18, 2023 by Jen Simmons and the Safari / WebKit Team Today’s the day for Safari 17.0. It’s now available for iOS 17 and iPadOS 17. [Update September 26th] And now, Safari 17.0 is available for macOS Ventura, and macOS Monterey, and macOS Sonoma. Safari 17.0 is also available in the vision OS Simulator, where you can test your website by downloading the latest beta of Xcode 15, which supports t
What’s New in Flutter 2.0
Today, we’re pleased to announce the release of Flutter 2. It’s been a little more than two years since the Flutter 1.0 release, but in that short time, we’ve closed 24,541 issues and merged 17,039 PRs from 765 contributors. Just since the Flutter 1.22 release in September, we’ve closed 5807 issues and merged 4091 PRs from 298 contributors. Special thanks go out to our volunteer contributors who g
Debugging in CSS means figuring out what might be the problem when you have unexpected layout results. We’ll look at a few categories bugs often fit into, see how we can evaluate the situation, and explore techniques that help prevent these bugs. We’ve all been there, at the end of completing CSS for a layout and — what’s that? Ah! An extra scrollbar! Or maybe an element is an unexpected color. An
概要 原著者の依頼を受けて翻訳・公開いたします。 英語記事: Unveiling the big leap in Ruby 3.3’s IRB | Rails at Scale 原文公開日: 2023/12/25 原著者: Stan Lo -- ruby/irb、ruby/reline、ruby/tracerのメンテナーです 本記事では、Ruby 3.3でIRBに導入された主な機能強化と、現時点で来年に導入が予定されている機能について詳しく解説いたします。 Ruby 3.3のIRB強化の要点: デバッグ機能強化 オートコンプリートの使用感を強化 全体的な使用感を改善 耳より情報: Ruby 2.7以降のプロジェクトであれば、Gemfileにgem "irb"を追加することで、Ruby 3.3に今すぐアップグレードしなくてもRuby 3.3と同じバージョンのIRB（v1.11.0）を利用でき
2023年2月の、これだけは押さえておきたいWeb関連の動き
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 この画像は、Stable Diffusionの woolitize というモデルを使用して生成しました。 デザイン（Adobe・Figma） AdobeのFigma買収は独占禁止法違反だとしてアメリカ司法省が訴訟を準備していると報じられる XDが突然開発ストップしたのは、独占禁止法を回避しようとしているのだろうなと思っています。 Galileo AI · Copilot for interface design 欲しいUIをテキストで書くと、Figmaで編集できるファイルを作成してくれるAIのようです。早期アクセスをリクエストしておきました。 非デザイナーの僕が「デザインぽい」ことをする時に使う便
[CSS] スクロールバーを非表示にする（IE, Edge, Chrome, Safari, Firefoxに対応） - YoheiM .NET
[CSS] スクロールバーを非表示にする（IE, Edge, Chrome, Safari, Firefoxに対応） まとめ IE、Edge、Chrome、Safari、Firefox でスクロールバーを非表示にする実装方法はこちらです。 コード <div class="container">1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br></div> <style> .container { height: 150px; overflow-y: scroll; -ms-overflow-style: none; /* IE, Edge 対応 */ scrollbar-width: none; /* Firefox 対応 */ } .container::-webkit-scrollbar { /* Chrome, Safari 対応
![[CSS] スクロールバーを非表示にする（IE, Edge, Chrome, Safari, Firefoxに対応） - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/f69b4dd23e097182d68b71fbe62eef9d3a44a02c/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F626.png)
Ruby 3.3にはRubyのREPLであるIRB v1.11.0が同梱されました。新しいIRBでは補完機能やdebug.gemとの連携が強化されました。 この記事では、型補完の追加、補完ダイアログの色変更API、デバッグに便利な機能、その他便利な機能追加について紹介します。 なお、IRBはDefault gemsのため、Ruby 3.3.0以外のバージョン[1]でもgem update irbやbundle add irbでインストールすることで最新のIRBを利用できます。 動作確認環境 記事内容はRuby 3.3.0、IRB v1.11.1、Reline v0.4.1、repl_type_completor v0.1.2で動作確認しています。 IRBの補完機能の強化 IRBでは、型による補完機能の強化、補完ダイアログの色変更APIの追加が行われました。 型補完の導入 今までは正規表現を
今年もCSSはどんどん進化しそうですね！ 1/24にリリースされたChrome 121に追加された、CSSの新しい機能6つを紹介します。スクロールバーのスタイル、スペルミスや文法的に正しくないテキストをハイライトする疑似要素、SVGのCSSマスキングなど、これからのWeb制作に役立つ機能ばかりです。 New in Chrome 121 Chrome 121 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに CSSによるハイライトの継承 CSSによるスクロールバーのスタイル font-paletteプロパティでカラーフォントをアニメーション CSSのスペルチェック機能 SVGのCSSマスキングの改善 displayプロパティの新しい値 はじめに 1/24にリリースされたCh
Here's what you need to know: The default color space for <canvas> elements is now formally defined in the spec as SRGB, and you can change it to Display P3. WebCodecs is a new, low level way to access built in audio and video codecs, important for streaming games, video editors, and such. WebGPU starts its origin trial. The PWA Summit is coming up October 6-7. And there's plenty more. I'm Pete Le
OBSのブラウザソースで動くものを作るあなたへ
MacOSのみ一部バージョンが異なるのは26.1.1リリースのタイミングでブラウザソースがクラッシュする問題が発生し、hotfixとして26.1.2リリースのタイミングでMac版のみアップデートがなされたためです。 このようにバージョンアップのタイミングはまちまちで、XSplitに関しては最近までChrome 68系、OBSについても最新版の30.xでもChrome 103系と執筆現在(2024/04/22)での最新バージョンであるChrome 124から21バージョン遅れをとっている状況です。 これらのアップデートが進まないことの背景には、OBSがCEF経由でページの表示をテクスチャとして使用するためにテクスチャ共有を利用しながら、ゲームなどの他のソフトウェアやキャプチャを使用するためにもテクスチャ共有を利用していることと、CEFがOffscreen Rendering(OSR)時にハー
For this second post in Zed Decoded, our blog & video series in which we're taking a closer look at how Zed is built, I've talked to Zed's three co-founders — Nathan, Max, Antonio — about the data structure at the heart of Zed: the rope. Companion Video: Rope & SumTree This post comes with a 1hr companion video, in which Thorsten, Nathan, Antonio, and Max use Zed to look at how Zed uses the Rope a
Version 1.88 is now available! Read about the new features and fixes from March. January 2021 (version 1.53) Update 1.53.1: The update addresses these security issues. Update 1.53.2: The update addresses these issues. Downloads: Windows: x64 Arm64 | Mac: Intel | Linux: deb rpm tarball Arm snap Welcome to the January 2021 release of Visual Studio Code. There are a number of updates in this version
There are a lot of tutorials and guides out there that teach CSS grid in general, and I wrote about it multiple times. However, I noticed that there is a misunderstanding of the minmax() function as most of the articles are generic or don’t provide enough explanation and real-world use-cases. The minmax() is very powerful and useful. For that specific reason, I thought that writing a complete guid
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
さて、専門性と体系化の話をしようか | knowledge / baigie
フロントエンドコーディング時に便利なジェネレーターサイト（随時更新） - Qiita
全モダンブラウザ対応のCSS機能が爆増。Chromium版Edgeのもたらす次世代CSS表現 - ICS MEDIA
Neovimを一瞬でVSCode並みに便利にする - k0kubun's blog
HTML制作で気をつけたいスクロールバーの挙動 - ガタつきをCSSのscrollbar-gutterで防ぐ方法など - ICS MEDIA
Web Speed Hackathon 2021 miniでほぼ満点を出しました
CSSでスクロールバーの有無によるがたつきをなくす: Days on the Moon
【CSS】知っておくと便利！短いコードで実装できるCSS小技20選
使い込んで厳選したNeovimプラグインたちをご紹介します
これは簡単で楽！ スクロールバーのデザインを変更するCSSを確認しながら生成できるツール -Scrollbar.app
ワシの使っているNeovimプラグインは200個近くあるぞ
EmacsでTypeScript/React開発する2023 - たごもりすメモ
CSS accent-color | Articles | web.dev
【Unity】Googleドライブとスプレッドシートでお知らせ機能実装（専用サーバー不要） - Qiita
JavaScript performance beyond bundle size
Evolution of the Scrollbar
Emacs From Scratch, Part 1: Foundations
Old CSS, new CSS / fuzzy notepad
A Guide To CSS Debugging — Smashing Magazine
Ruby 3.3で大幅に強化されたIRBの解説（翻訳）｜TechRacho by BPS株式会社
IRBのアップデート 〜補完とデバッグ機能の強化 | gihyo.jp
Web制作者は要チェック！ Chrome 121で新しく追加された6つのCSSの機能
New in Chrome 94 | Blog | Chrome for Developers
Zed Decoded: Rope & SumTree - Zed Blog
Visual Studio Code January 2021
A Deep Dive Into CSS Grid minmax()