Some useful websites for programmers : Best websites a programmer should visit Javascript versions of classic software development algorithms js-algorithms Algorithms and data structures implemented in JavaScript with explanations and links to further readings javascript-algorithms Data Structures and Algorithms using ES6 data-structure-and-algorithms-with-ES6 :octocat: A curated awesome list of l
Protected routes using Next.js Edge Middleware & Supabase
IntroNext.js now provides middleware functionality, allowing us to execute code before a request is processed — at the edge. We can inspect the request coming from the client, and modify the response. We’ll make use of this to check for a cookie on protected routes, and redirect if the client doesn’t contain the cookie. Handling the redirect at the edge, rather than the client, improves the user e
How I Structure My CSS (for Now) · Matthias Ott – User Experience Designer
Published by Matthias Ott Tuesday, 11 August 2020 #architecture #css #ITCSS #methodologies #sass When it comes to structuring CSS, there is no shortage of different naming conventions, methodologies, and architectures. Be it BEM, OOCSS, SMACSS, ITCSS, or CUBE CSS – over the last years, many different approaches to managing modular CSS have emerged. Some are offering strategies on how to split CSS
Chrome 81 breaks the ability to bold system fonts on Macs
A style bug in version 81 of the Google Chrome browser was discovered before it was released, but a decision was made to not fix it until the next version. Sites that default to the system font can no longer fully bold text for users on macOS Catalina. Before and after comparison of Chrome 81 breaking the ability to bold headings on macOS Catalina System fonts are fonts that come with the operatin
Be Wary of doc-subtitle
Be Wary of doc-subtitle In early March, Steve Faulkner shared this nugget for making sub-headings: 👉If you want to semantically identify a heading subtitle, look no further than role="doc-subtitle" w3.org/TR/dpub-aria-1.0/#doc-subtitle #HTML #ARIA #WebDev pic.twitter.com/uaHcVRp6oz On its surface it looks pretty handy. Handy enough that Chris Ferdinandi wrote about it in his July 23 post How to c
今回は、CSSアニメーションを設定する際によく使うscale()を紹介します。 この機能を使うことで、要素を自由に拡大・縮小することができますので、是非参考にしてみてください。
Awesome Django
Awesome Django Fork me on GitHub A curated list of awesome things related to Django. Maintained by William Vincent and Jeff Triplett. Please consider supporting Django by making a donation to the Django Software Foundation, sponsoring via GitHub Sponsors, or buying official merchandise. Contents Third-Party Packages Admin APIs Async Caching Commands Configuration Content Management Systems Databas
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Cherry Blossom DEMO</title> <link rel="stylesheet" href="style.css"><!-- CSS読み込み --> </head> <body> <div class="cherry-blossom-container"> <!-- ここにコンテンツを入れる --> </div> <script src="main.js"></script><!-- JS読み込み --> </body> </html> /* 桜を表示するコンテナのスタイル */ .cherr
:focus-visible Is Here · Matthias Ott – User Experience Designer
Published by Matthias Ott Saturday, 10 October 2020 #a11y #accessibility #browsers #css #focus #ui #usability One of the most important features of a website that is built with accessibility in mind is that it can be navigated with a keyboard. Most blind users and many users with motor disabilities rely on keyboard navigation, either with a standard keyboard or with a device that mimics the functi
The Many Jobs of JS Build Tools
Home Ideas Writing & Speaking Book Tactics, Strategy, Principles About Bio, Talks, Photos Subscribe RSS, Newsletter, Mixtape Essay status: mostly baked, sat on this for about 3 weeks and got some amount of peer review One of my regrets in my recent SE Daily interview was my rather poor, panicked description of “Why Webpack” and “Why Gatsby”. Jeff, the host, doesn’t do much frontend coverage, where
Best aspects of C language
How comes that, after over half a century, C is still a relatively popular and widely used language when others have withered into obscurity? Why, over all this time, was nothing able to fully replace it? Why is it still taught in schools? Let's have a look at some of the best, in my opinion, aspects of the language (although not all) that contributed to such a state of affairs. Spirit of C Let's
Cascade
Cascade is a live-coding environment It runs in the web browser, turning CSS rules into sound Cascade Cascade is a live coding parasite to Cascading Style Sheets Website Requirements A modern browser (better performances with Chromium / Chrome browsers) For local use, because of tone.js, Cascade requires a webserver to run, you can use Apache, Node or Python: $ python -m SimpleHTTPServer 8000. How
【jQueryを完全再現】slideUp, slideDown, slideToggleを素のJavaScriptで実装する方法 | WebDev Tech
jQueryにはslideUp(),slideDown(), slideToggle()といったメソッドがあります。 これらを使用すると、少ないコードで要素をスライドしつつ表示/非表示にできるので、すごく便利ですね。 しかし案件によっては、jQueryを使いたくない場合があるかと思います。 そこで今回の記事では、jQueryのslide系メソッドをJavaScriptで実装する方法を紹介します！ 「jQueryを読み込みたくないけど、slide系のメソッドは使用したい」という方は、ぜひ使ってみてください。
みなさんこんにちは！宮水です！ 2019年11月3日にVimConf 2019に参加しました。 私はVimを使い始めて1年半近く経とうとしています。 正直に申し上げますと、歳だけ重ねてVimmerとしてはほとんど成長を遂げていません。本当にお恥ずかしいばかりです。 VimConfに参加して「ただ使っているだけの人」から「もう一歩進んだVimmer」になるためのヒントを得られました。 VimConfに参加して今度自分は何をしていきたいか、また全体的な感想を記載したいと思います。 おことわり： この記事では、各セッションについての詳しい言及はありません。感想を書きたいセッションが多すぎるのと、写真NGだったのでどこまで書いていいのか温度感がわからないというのがあります。他の方の記事を熟読してから、またぽつりぽつり追記していくかも知れません。 今後Vimmerとしてやっていきたいこと ①公式ドキ
Webページ上に「ノートのような罫線つきのデザインを実装したい！」という方もいるかと思います。 単純に線を引くだけならborderプロパティを使えばよいのですが、ノートの罫線のように何本も線を引く場面には向いていません…。 そこで今回の記事では、CSSのグラデーションlinear-gradient()を使用して、ノート風の罫線を引くデザインの実装方法を紹介します！ この方法を使うと、文字の長さや改行に合わせて何本も線を引くことができるので、オススメです。 また、文字サイズ、罫線の色、背景色などのカスタマイズ方法も解説しますので、是非参考にしてみてください。
あかり on Twitter: "市職員がというよりは役所から受注を引っ張るのに良さそう。 >職員がパソコンにログインするたびに、画面に広告（縦１７センチ、横２１センチ）が１５秒間現れる仕組み。 - 市職員用パソコンに広告いかが https://t.co/HMWyp2ldaW"
市職員がというよりは役所から受注を引っ張るのに良さそう。 >職員がパソコンにログインするたびに、画面に広告（縦１７センチ、横２１センチ）が１５秒間現れる仕組み。 - 市職員用パソコンに広告いかが https://t.co/HMWyp2ldaW
Failing to Learn Zig via Advent of Code - ForrestTheWoods
Failing to Learn Zig via Advent of Code January 17th, 2022 This isn't the blog post I intended to write. In 2018 I wrote Learning Rust via Advent of Code. This was supposed to be the exciting sequel where I learn Zig. Unfortunately I failed. Zig sparked more frustration than joy and I fizzled out after 6 days. My biggest failure was a poor decision to solve all Advent of Code puzzles in both Rust
Firefoxはchromeを超えられるか？ 海外の反応 2020年10月13日 カテゴリ：海外の反応 エンターテインメント コメント(39) ツイッターでシェア Facebookでシェア はてブに追加 ブラウザのシェアは2019年時点でGoogle Chromeが2位と大きな差を付けて断トツの1位となっていますが、2位のFirefoxはマーケットシェアよりもウェブの未来を守ろうと奮闘しています。 コメント欄でもFirefoxは強い支持を得ていることが分かります。 アクセスの多い記事 引用元:Mozilla is finally moving beyond Firefox! 1: 海外の反応 オープンウェブは死にかけている。 Firefoxがなくなると、広く使用されているブラウザ市場ではChromeとSafariだけが残るだろう。 2: 海外の反応 Mozillaは良い会社です。彼らは、簡
スマホでWebページを開くと、縦長なのでどうしてもスクロール量が多くなりますよね。 PCだと少しのスクロールでページ全体を見ることができますが、スマホだと倍以上のスクロールが必要になります。 こんなとき、今ページのどの辺にいるのか、後どのくらいでページを読み終えるのかがわかると便利ですよね。 今回の記事では、スクロール進捗度が一目でわかるプログレスバーの実装方法を紹介します！ jQueryを使わず素のJavaScriptで実装していきますので、よければ参考にしてみてください。
今回の記事では、CSSのcolumnsプロパティを使用して、段組みレイアウトを実装する方法を紹介します。 段組みレイアウトとは、本や新聞などで使われているように、長い文章をいくつかの段にわけて表示する手法です。 Web上では文章は左端から始まり、右端までいくと改行して次の行に移りますよね。 このとき、1行が長すぎると、行末から次の行の先頭までの距離も長くなり、見失ってしまうことがあります。 columnsプロパティではこれを防ぐために、文章を複数の段に分けたり、段の横幅を指定したりすることが可能です。 ここでは一番シンプルな例として、本のような2段組みのレイアウトを作成する方法を紹介していきます。 以下で実装DEMOやコードの解説を行いますので、Web上で長い文章を扱う場合はぜひ参考にしてみてください。
HTMLには、箇条書きリストを作成する際に使えるulタグがありますね。 ulタグでリストを作成すると、デフォルトでテキストの左側に丸がつきます。 箇条書きリストサンプルテキスト1箇条書きリストサンプルテキスト2箇条書きリストサンプルテキスト3 今回の記事では、この黒丸をカスタマイズして、好きな色を指定＆脈動するようなアニメーションを実装していきます！
DOM取得はレンダリングされた後（mounted）に取るものなので、Vueファイルを読み込んだとき（created）に取ることはできません。 なので、mountedをsetup内で使うときのフック「onMounted」を使ってDOM取得をします。 今の簡単な流れをもう少し砕いてみてみましょう。 Refを使えるようにする ①Refを使うためにimportしていきます。 ②DOM取得したい場所にref属性を追加します。 https://v3.ja.vuejs.org/guide/reactivity-fundamentals.html#%E7%8B%AC%E7%AB%8B%E3%81%97%E3%81%9F%E3%83%AA%E3%82%A2%E3%82%AF%E3%83%86%E3%82%A3%E3%83%95%E3%82%99%E3%81%AA%E5%80%A4%E3%82%92-ref-
ffmpegでよく使うコマンドチート
for f in *.mov; do ffmpeg -i "$f" -pix_fmt yuv420p -crf 22 "${f%.mov}.mp4"; done
インフォグラフィックスとは？人気の理由について解説
近年、身近なところにあるインフォグラフィックスについてご存知でしょうか？言葉は聞いたことあるけれど具体的にどのようなものなのか知らない方も多いと思います。 インフォグラフィックス(infographics)とはinformation＋graphicsという意味の造語で、インフォグラフィックスは昔から私たちの身近なところで活用されています。 当社、株式会社ジオコードへも、情報の見せ方をわかりすくしたい、インフォグラフィックを集客に活かしたいなど、情報を可視化するデザインについてのご相談を多く寄せられています。 WebデザインやWebマーケティングのご相談などございましたら、気兼ねなくお尋ねください。 インフォグラフィックスとは？ 改めて、インフォグラフィックスとは言葉や数字だけでは伝わりづらい情報を「整理」「分析」「編集」してイラスト・チャート・グラフ・表・地図などで表現したものです。例えば
どうも、siinoです。 フロントエンドエンジニアを目指して勉強しているビギナーです。 皆様は健やかにお過ごしでしょうか？ 僕はというと、学習することが日々多くなり、細かい部分の理解がおろそかになってしまいがちな毎日を送っています。（カイジくん...学習のしかたがへたっぴさ...) まあそんなわけでサラッと勉強して終わりになってしまいがちなので、日々学んだことをアウトプットして理解を深めるとともに、自分用の備忘録を作っておきたいと思い筆を執った次第です。 2～3か月ぐらい前の、JS始めたての頃の自分に向けて書いている感じとも言えますね。 今回はJavaScriptで行う文字列操作の基礎のほんの一部をおさらいしたいと思います。 基礎を復習したい初学者の方は、是非一緒にコードを書きましょう！ それではLet's & GO!! 参考にしたドキュメント・教材 今回の内容のみの参考というよりは、僕が
Sassとは、CSSを効率的に記述できるように設計・開発された言語です。 入れ子の使用、変数・関数の使用など便利な機能が多く、Web制作者なら必ず身につけておきたいスキルですね。 Sassファイルには.scssまたは.sassという拡張子がつきますが、これらはブラウザが解釈できないためそのまま読み込むことができません。 HTMLで読み込むには、SassファイルをCSSファイルに変換する作業（コンパイル）が必要となります。 このコンパイル作業でアウトプットされるCSSの形式は、以下の4つから選択することができます。
list-style-image : <li>のマーカーに画像ファイルを設定する - CSSプロパティ - Web開発 - fromkato.com
list-style-typeプロパティも同時に指定した場合、記述の順番に関わらずlist-style-imageが優先される。
私はMastodon（Fediverse）のココが好き- 歴が浅い人の感想 | 東京都・駒込のWeb制作 ペンタプログラム
このところ SNS は Mastodon を中心に使っており、現時点で良いなと思ったことを残しておきます。 Mastodon はサーバーによって機能が異なるので、私がいる Hachyderm サーバー（Mastodon v4.1.4）で使える機能の話を中心とします。例外を書き始めると、それが多すぎて訳の分からない投稿になってしまうからです。それぐらい多様性があるということですね。 タイトルの通り、Mastodon 歴は浅いので、何か間違いがあればご指摘ください Mastodon とはMastodon は、分散型のソーシャルネットワークです。 一般に SNS と言われるものですが、どこかひとつの企業が開発運営しているサービスではなく、オープンソースのソフトウェアを使って、誰でも自分でサーバーを立てて運営できるようになっています。ソフトウェアを改造して、自分のサーバーに独自の機能を持たせること
[ログイン新規ID登録]閲覧履歴ご利用ガイド 『ルーターを変えたら接続できなくなりました。』のクチコミ掲示板 ホーム > パソコン > NAS(ネットワークHDD) > Synology(シノロジー) > DS215j > クチコミ掲示板 Synology 2014年11月27日 登録 DS215j お気に入り登録 363 最安お知らせメールが受け取れます 他の画像も見る 価格情報の登録がありません 価格推移グラフ お気に入り製品に登録すると、価格が掲載された時にメールやMyページでお知らせいたします 価格帯：¥―～¥― (―店舗) メーカー希望小売価格：¥― ドライブベイ数：HDD/SSDx2 DLNA：○ メーカートップページ NAS(ネットワークHDD)の人気売れ筋ランキング ―位 3.90 20人 905件(2023年12月21日更新) この製品をキープ ピックアップリストを作成
手順1: フォームのタグを作成する MW WP Formの編集画面上で、フォームに表示するタグを準備していきます。 以下のコードを編集画面のエディタにコピペしてください。 <label>メールアドレス</label> [mwform_email name="email" size="60"] <label>メールアドレス（確認）</label> [mwform_email name="email-confirm" size="60"] [mwform_bsubmit name="submit" value="send" display_input="true"]送信する[/mwform_bsubmit] ここではメールアドレスのname属性をemail、確認用メールアドレスのname属性をemail-confirmとしていますが、自由に設定していただいて構いません。 これらをコピペすると、
white-space : スペース・タブ・改行の表示方法 - CSSプロパティ - Web開発 - fromkato.com
<table> <tr> <td> 🍎ホワイト・スペースの表示方法について設定する。🍎 </td> </tr> </table>
Theme 第 134 回のテーマは 2023 年 10 月の Monthly Platform です。 Show Note Chrome 動向 Stable: 118 Updates New in Chrome 118 - Chrome for Developers https://developer.chrome.com/en/blog/new-in-chrome-118/ CSS @scope rule. scripting and prefers-reduced-transparency media features Sources panel improvements in DevTools Chrome 119 beta - Chrome for Developers https://developer.chrome.com/en/blog/chrome-119-beta/ C
【コピペ用】デジタル時計の全体コード まずはデジタル時計実装コードを全て載せておきます。 index.html style.css clock.jsを作成し、それぞれのコードをコピペしてお使いください。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Digital Clock</title> <!-- CSSファイル読み込み --> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="clock"> <p class="cloc
Microsoftは本日、ChromiumベースのMicrosoft Edgeの最新安定版「Microsoft Edge 86」を公開しました(リリースノート、Neowin)。最新版は自動的に導入されますが「設定 > Microsoft Edgeについて」から手動で更新することもできます。 Version 86.0.622.38では、EdgeのUIを使用してInternet Explorerモードを使用することができるIEモードの改善や、ダウンロードマネージャーに対するファイル削除機能の追加、Microsoft Edgeのロールバック機能の追加、PDF関連の更新など以下のような新機能が追加されています。 Internet Explorer mode: Let users use the Microsoft Edge User Interface (UI) to test sites in
といったようなメリットがあります。 このアコーディオンメニューの多くはjQueryのスライド系メソッドで実装されていますね。 素のJavaScriptで実装したいと思い調べてみると、以下のような問題点があるものばかり紹介されてました。
以前の記事で、padding-topの性質を利用して、要素のアスペクト比を固定しつつレスポンシブ化する方法を紹介しました。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Vertical Slider DEMO</title> <!-- CDN読み込み --> <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" /> <!-- CSSファイル読み込み --> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="swiper-container vertical-slider"> <di
ブログ記事を読んでいると、よく蛍光ペン風マーカーで装飾されているのを見かけますよね。（←こういうやつ） こういった単色のマーカーはカンタンに実装できるのですが、2色以上が混ざったマーカーを作るとなると、少し難しくなります。 そこでこの記事では、CSSのみでグラデーションマーカーを作る方法をシェアしようと思います。 CSSをコピペするだけで使えますので、ぜひ試してみてください。 また、カスタマイズして使いたい方のために、コードの詳しい説明も書いています。
WebDev Tech |
「Custom Post Type UI」は、管理画面からカスタム投稿タイプやタクソノミーを作成できるプラグインです。 PHPコードを書くことなくカスタム投稿タイプを作成できるので...
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>【Swiper】無限ループスライドショーの実装DEMO</title> <!-- CDN読み込み --> <link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css" /> <!-- CSSファイル読み込み --> <link rel="stylesheet" href="style.css" />
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Best Github Repositories a programmer should check out
【CSS】transform: scale()で要素を拡大・縮小する方法 | WebDev Tech
JSとCSSで桜を降らせるエフェクトを実装する方法【コピペOK】 | WebDev Tech
ただVimを使っている人がVimConfに参加して学んだこと - 宮水の日記
CSSのみでノートの罫線のようなスタイルを実装する方法【実線・点線】 | WebDev Tech
Firefoxはchromeを超えられるか？ 海外の反応 : 翻訳ちゃんねる | 海外の反応まとめブログ
【Vanilla JS】スクロール量をプログレスバーでページ上部に表示する方法 | WebDev Tech
【CSS】columnsプロパティで本のような段組みレイアウトを実装する方法 | WebDev Tech
【CSS】ulタグの丸が脈動するアニメーションを実装する方法 | WebDev Tech
【Vue3】compositionAPIでDOMを取得する方法 - ちいブログ
JS(ES6)の文字列操作をプチ復習 - Qiita
Sassで使用できる4つのアウトプット形式の特徴や使い方を解説 | WebDev Tech
『ルーターを変えたら接続できなくなりました。』 Synology DS215j のクチコミ掲示板
MW WP Formでメールアドレス確認用の入力欄を作成する方法 | WebDev Tech
ep134 Monthly Platform 202310 | mozaic.fm
CSSとJavaScriptでおしゃれなデジタル時計を実装する方法 | WebDev Tech
Microsoft Edge 86安定版が公開 - IEモードの改善など | ソフトアンテナ
素のJavaScriptでアニメーション付きアコーディオンを実装する方法【3通り】 | WebDev Tech
【モダンブラウザ対応】アスペクト比を固定するaspect-ratioプロパティの使い方 | WebDev Tech
【Swiper】縦スライド可能な全画面ページを実装する方法 | WebDev Tech
【CSS】複数色のグラデーションマーカーを実装する方法 | WebDev Tech
【Swiper】一定速度で横に流れ続ける無限ループスライドショーを実装する方法 | WebDev Tech