はじめに 今回のDeveloper Siteリデザインの目的は英語のコーポレートサイト（https://nulab.com/ ）とのUIを合わせることでした。旧Developer Siteのヘッダーやフッターなどの共通パーツは古いデザインのままだったため刷新する必要がありました。 旧Developer Siteのトップページ Developer Siteのトップページ 使用した技術 今回使用した技術は、静的サイトジェネレータであるAstroとユーティリティファーストのCSSフレームワークであるTailwind CSSです。 旧サイトはHugoとSCSSを用いて構成されており、今回はコンテンツはそのままで見た目のみを変更する制作だったため仕様の変更は不要でした。しかし、パフォーマンスの向上を目指し、かつ新しい技術に挑戦するためAstroとTailwind CSSを採用することにしました。 A
はじめに Github Copilotって便利ですよね。コードを一部分だけ打っても、内容を予測して続きを予測して補完してくれます。 マークダウンファイル内では文字列についても使えます。 VScode + Github Copilotっぽいエディタを自分でも作成してみました。 技術的な学びについて解説を加えていきます。 なお、Claudeを使いながら作成しているため不自然なコードが含まれている可能性があります。ご注意ください。 作ったもの 文字を入力すると、予測した続きの文章がグレーで表示されます。Tabキーを押すと確定します。 解説している技術的要素 useRef 日本語IMEの入力状態判定 デバウンス処理 useEffectのクリーンアップ関数 イベントリスナー（onKeyDown）を使用したキーボード入力の処理 カーソル位置の移動 コード コード import { NextRespon
Most days, I’m writing vanilla CSS. Thanks to CSS variables and nesting, I have fewer reasons to reach for Sass or any other preprocessor. The times I reach for Sass tend to be when I need a @mixin to loop through a list of items or help keep common styles DRY. That could change for me in the not-so-distant future since a new CSS Functions and Mixins Module draft was published in late June after t
【新型コペン】「XPLAY廃止&安全システム採用!」2024年10月改良発売！ - New Car/最新自動車情報/車好き新型車ニュース
ダイハツが、「コペン」の改良発売を予定しています。 改良により変更されるダイハツ新型コペンについて、スペックや価格などを最新情報からご紹介します。 ▼この記事の目次 【最新情報】モデル集約＆法規対応！ダイハツ「新型コペン」改良発売！ ダイハツ新型コペンの【変更点まとめ】 多彩！ダイハツ新型コペンの外装（エクステリア）デザイン 新型コペンGRスポーツも！専用装備、カスタムパーツは？ 軽快！ダイハツ新型コペンのボディサイズは？ 上質！ダイハツ新型コペンの内装（インテリア）デザイン パワフル！ダイハツ新型コペンのエンジンとスペックは？ ダイハツ新型コペンを試乗動画でチェック！ 良好！ダイハツ新型コペンの燃費は？ アップ！ダイハツ新型コペンの価格は？ いつ？ダイハツ新型コペンの発売日は？ ダイハツ・コペンを「おさらい」 【最新情報】モデル集約＆法規対応！ダイハツ「新型コペン」改良発売！ ▼コペンX
はじめに こんにちは！WEBエンジニア転職を目指しているK.Yです！ 今回は、ReactアプリをNext.jsへ移行してみました！ JavascriptとReactで簡易的なブログ作った記事もありますので、そちらもよかったらご覧ください！ 前提 ルーターは、App Router CSSは、tailwindCSS バージョン react: 18.3.1, react-dom: 18.3.1, react-router-dom: 6.23.1 JavaScript ES6以降 Next.js Next.jsとは、Reactをベースにしたウェブアプリケーションフレームワークで、 サーバサイドレンダリング(SSR)と静的サイト生成(SSG)を簡単に実現するためのツールです。 これによって、WEBアプリケーションのパフォーマンスが向上し、SEO対策ができます。 Next.jsでは、ページごとにJav
初めに こんにちは！24卒で某大手ECサイトの保守・運用会社に入社した新米エンジニアです。最近はbrSEとして中規模ECサイトの案件を中国側とやり取りする業務をしています。 そんな空いた時間や帰宅後の時間を使って、ちょっとしたサービスを作ってみました。その名も「QuickSplit」！ QuickSplitって何よ？ 「QuickSplit」は、グループでの割り勘を簡単に管理できるWebアプリです。 URL: https://quickaplit.web.app/ 友達との旅行や飲み会で、「あれ？誰が何を払ったっけ？」「いくら返せばいいの？」なんて悩んだことありませんか？私はよくあります（笑） そんな時、メモ帳でガリガリ計算して、LINEで「おい、1500円な」なんて送るのも面倒くさい...。そこでQuickSplitの出番です！ なぜ作ったの？ 正直、メモ帳で割り勘管理して友達に連絡する
![【割り勘アプリ】QuickSplit - メモ帳よさようなら、みんなで割り勘管理！[個人開発]](https://cdn-ak-scissors.b.st-hatena.com/image/square/8750bb910ee44c22f25a74be16bed7493c2900f1/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--sUiONIIg--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%2525E3%252580%252590%2525E5%252589%2525B2%2525E3%252582%25258A%2525E5%25258B%252598%2525E3%252582%2525A2%2525E3%252583%252597%2525E3%252583%2525AA%2525E3%252580%252591QuickSplit%252520-%252520%2525E3%252583%2525A1%2525E3%252583%2525A2%2525E5%2525B8%2525B3%2525E3%252582%252588%2525E3%252581%252595%2525E3%252582%252588%2525E3%252581%252586%2525E3%252581%2525AA%2525E3%252582%252589%2525E3%252580%252581%2525E3%252581%2525BF%2525E3%252582%252593%2525E3%252581%2525AA%2525E3%252581%2525A7%2525E5%252589%2525B2%2525E3%252582%25258A%2525E5%25258B%252598%2525E7%2525AE%2525A1%2525E7%252590%252586%2525EF%2525BC%252581%25255B%2525E5%252580%25258B%2525E4%2525BA%2525BA%2525E9%252596%25258B%2525E7%252599%2525BA%25255D%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3A%2525E3%252581%2525BA%2525E3%252581%2525A3%2525E3%252581%25258F%2525E3%252582%25258B%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzk1ZGM2ODI5NjcuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
TailwindとMUIで作るデザイン - Qiita
<div style="position:relative;border:1px solid #efc4c0;border-radius:4px;padding:1.5em 1em;"> <div style="position:absolute;top: -12px;left: 10px;padding: 5px 25px;background-color:#ffffff;border-radius:4px;color:#F6BCAC;line-height: 1em;">タイトル入力</div> <div style="margin: 0; padding: 0;">テキスト入力</div> </div> <div className="relative border-2 border-orange-200 rounded-md p-3"> <div className="absolu
こんなガールズバンドあったのか。ZARDへのリスペクトが感じられるな。 https://www.youtube.com/watch?v=_mT2V0PmMKE
LINEで更新通知を受け取れます 長野駅に来ると自撮り写真を 撮る習慣あるのは何故なのか？ イーンスパイアの横田です。 https://www.enspire.co.jp さて、本題です。 人工知能AIに関するニュースなどは 以下で随時更新して配信しています。 早速、2024年7月分の人工知能(AI)に 関するニュースを解説したいと思います↓ https://yokotashurin.com/etc/ai-seminar2.html#202407 https://yokotashurin.com/etc/image.html#202407 https://yokotashurin.com/etc/facial-recognition.html#202407 https://yokotashurin.com/youtube/fake.html#202407 https://yokotashu
本日のニュースオチ
▼東証、「パニック」売り＝不安が増幅、歴史的暴落―年明けの株高ふいに、投資家痛手〔潮流底流〕 ▼東急電鉄は2024年8月6日の初電から事前払い方式のデジタルチケットサービス「Q SKIP」において、クレジットカードのタッチ機能を使用した乗車を当面の間休止する。QRコードを使用した乗車に1本化する。 「株価暴落で手付金が払えず…湾岸タワマン購入予定のエリート夫婦のヤバすぎる結末…」という与太話をコタツ記事に仕立て上げてヤフトピ入りを目指します。 — 窓際三等兵 (@nekogal21) August 5, 2024 あんた、ずーっと『利上げしろ』って言ってただろ。 なに慌てたふりしてんだよ。 アンタが望んでた事だろ。 https://t.co/4aLsvkVFXR — 闇のクマさん世界のネットニュース (@CYXuAxfGlfFzZCT) August 5, 2024 38℃#chainsa
はじめに というか実現できるの？ chrome拡張機能について マニフェスト サービスワーカー コンテンツスクリプト ツールバーアクション とりあえず先人の知恵を借りながら作ってみる。 カスタムについて まとめ 参考URL 宣伝コーナー はじめに 今年の夏も暑すぎませんかね……。 暑すぎて涼しい夜に蝉が鳴いていたり、庭に湧いたコガネムシやカメムシがぶんぶん飛び交ったり。 年々、最高気温の記録が更新されすぎて暑さのボジョ○ヌーヴォ感。 夏って何ですかね……。 とまあ夏の暑さについては置いといて、、 入力チームにてフロントエンドを担当しております、入社半年の新人（だと思いたい）まつむらです。 iimonのプロダクトは主にchrome拡張機能での使用を前提に開発されています。 ですが、恥ずかしながら、今までの経歴としてはVueを用いたSPA開発が主で、chrome拡張機能の開発は入社時までゼロと
【激歪み】MESA BOOGIE THROTTLE BOX メサブギー スロットルボックス【レビュー・評価】 - エフェクターノート
※この記事は2024年07月23日に更新されました。 jundrive3（@effectornote）です。 今回は、MESA BOOGIE HROTTLE BOX（メサブギー スロットルボックス）についてレビューします！ とりあえずカッコいいぞ。MESA BOOGIE THROTTLE BOX！ MESA BOOGIE THROTTLE BOXの音はどうなの？ MESA BOOGIE THROTTLE BOXの使い方 MESA BOOGIE THROTTLE BOXのまとめ 良いところ 悪いところ 本記事内のリンクには広告が含まれています。 MESA BOOGIEと言えば、ハイゲインアンプのRectifier Head（レクチファイア）をイメージする方が多いのではないでしょうか。 MESA BOOGIEと言えば、激歪みサウンドのイメージがありますよね。 THROTTLE BOX（スロット
resources :companies do get 'sites', on: :member get 'waste_kinds', on: :member end def sites company = Company.find(params[:id]) sites = company.sites respond_to do |format| format.json { render json: sites } end end def waste_kinds company = Company.find(params[:id]) waste_kinds = company.waste_kinds respond_to do |format| format.json { render json: waste_kinds } end end <div data-controller="co
【悲報】東京五輪さん、実は開会式以外のことは完璧だったｗｗｗｗｗｗｗｗｗｗ Tweet 1: それでも動く名無し 警備員[Lv.4][新芽] 2024/07/31(水) 15:51:02.97 ID:FCiPGee40 運営面とか海外のメディアから絶賛されてた模様 7: それでも動く名無し 警備員[Lv.11] 2024/07/31(水) 15:53:16.05 ID:eBE3h5+k0 閉会式なかったことにしようとしてて草 8: それでも動く名無し 警備員[Lv.3][警] 2024/07/31(水) 15:53:53.26 ID:X8wc3V030 開会式でマイナス100点定期 19: それでも動く名無し 警備員[Lv.9][新] 2024/07/31(水) 15:56:41.87 ID:bLsrQ3iw0 隠してるだけで完璧じゃなかったんだよなあ 【おすすめ記事】 ◆【画像】五輪フェ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
AstroとTailwind CSSを使ってDeveloper Siteをリデザインした話 | 株式会社ヌーラボ(Nulab inc.)
Github CopilotみたいなAIアシスト日記エディターを作る
CSS Functions And Mixins Module Notes | CSS-Tricks
TypeScript化したReactアプリを、Next.jsへ移行してみた！ - Qiita
【割り勘アプリ】QuickSplit - メモ帳よさようなら、みんなで割り勘管理！[個人開発]
こんなガールズバンドあったのか。ZARDへのリスペクトが感じられるな。 https:..
人工知能AIニュース(2024年7月分)Podcast配信･文字起こし | ネットビジネス・アナリスト横田秀珠
えぇ！？Reactをchrome拡張機能に載せてもいいんですか！？ - iimon TECH BLOG
【備忘録】Rails7 Stimulus セレクトボックス 親子 複数 連動 - Qiita
【悲報】東京五輪さん、実は開会式以外のことは完璧だったｗｗｗｗｗｗｗｗｗｗ : 暇人＼(^o^)／速報