バックエンドエンジニアがフロントエンドで注目されているT3 Stackについて調べてみた - Qiita
はじめに 前回『TypeScript+NestJS+PrismaでGraphQLサーバーを作成してみた』という記事を書きました。今回は最近フロントエンドWeb開発技術で注目されているT3 Stackとは何なのかを調べてみました。合わせてCLIを使って環境構築をすることでフロントエンドの知見を増やそうと思います。 T3 Stackとは The "T3 Stack" is a web development stack made by Theo focused on simplicity, modularity, and full-stack typesafety. It consists of: Next.js tRPC Tailwind CSS TypeScript Prisma NextAuth.js T3 StackとはTheo氏が開発した「シンプル」で「モジュラリティ」で「フルスタッ
date-fnsで日時をフォーマットしたり、パースする - Qiita
Javascriptで日付操作をするライブラリとして、date-fnsを重用しています。 これまではmoment.jsやdayjsなどが使われていたみたいですが momentは開発が止まっていたり、date-fnsの方が関数型で個人的に読みやすいので 今関わっている案件でもmoment => date-fnsに書き換える作業などを行なっています。 という事で今回は、date-fnsでよく使っている操作を紹介したいと思います。 import { format } from 'date-fns' import ja from 'date-fns/locale/ja' console.log(new Date()) // Dateオブジェクト => yyyy/MM/dd format(new Date(), 'yyyy/MM/dd') // Dateオブジェクト => yyyy/MM/dd HH
フロントエンドエンジニアが変える現場のモデリング意識/modeling-awareness-changed-by-front-end-engineers
フロントエンドエンジニアが変える現場のモデリング意識/modeling-awareness-changed-by-front-end-engineers
2022年におけるフロントエンド開発のベースライン
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog TL;DR:2022にフロントエンド開発で最も考慮すべきユーザー環境は、パフォーマンスでは低スペックのAndroid端末、標準仕様では2年前のSafari、そしてネットワークでは４Gです。それに対してはJSへの過剰依存などが原因で主にパフォーマンスの面でのウェブ全体の対応がよくありません。 こんにちは！LINEフロントエンド開発室のダバロス アランです。この記事のタイトルを見て「釣りタイトルですね〜」と考えている方がいると思いますが今回に限ってはそれを大目に見てください。それはなぜかと言いますと、2021年から2022年にかけて私たちフロントエンドエンジニアが全体的に考え方を改める必要が出るほど大きな変化がありました。 その変
スライドを簡単に実装できるJavaScriptライブラリ「Swiper」
Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. ローカルにファイルを設置したい場合は公式サイトからswiper.min.cssとswiper.min.jsをダウンロードして読み込みます。 CDNでの使用もできて、その場合は下記のコードを読み込みます。 <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css"> <script src="https://unpkg.com/swiper/js/swiper.min.js"></script>Swiperの使い方スライドを使いたい場所に下記のHTMLを記述します。 <di
swiper.js6系使ってみたからそのオプションについて(v6.0.4) | なんかいろいろデザインする人
3系swiper、4系swiperのオプション記事を以前書いたんだけど、また久しぶりに公式見たら6系まで進んでたから再々記事。 ※この記事は実装方法が解説しているというよりは、オプションを実際触ってみてその効果をひたすら書いた記事になります。 以前のバージョンの記事も需要ありそうだから残しておく。 【4系】こちら 【3系】こちら ※2系以前と5系は記事にしてないです。許して。 5系についてはオススメサイトのリンクを貼っておくのでよければこちら参考に！ Web Design Leaves様の5系に関する記事 swiper.jsってなんぞ？ swiper.jsの公式サイト 簡単に言うと、スライダー系のJSプラグイン。スライダーはswiper以外にもいくつかあるけど、中でもオプションが多く、更新も多い個人的にはかなり熱いプラグイン。 このswiper.jsのメリットデメリットはこんな感じ。 メリ
aタグに付いているrel=”noopener”って何？ | ocws BLOG
こんにちは、早速ですがrel=”noopener”について書きたいと思います。 rel=”noopener”って知ってますか？ rel=”noopener”とはいわゆる一種のセキュリティ対策のようなものなんですね。 WordPressされている方ならわかるかもしれないですが、rel=”noopener”がたまに付いたりますよね。これってたまたま付いているわけではなくってtarget=”_blank”が付いたときに自動で付くようになっているんです。 なんで自動でrel=”noopener”付くの？ そもそもtarget=”_blank”はセキュリティ上の脆弱性もあるらしく（驚き）、この脆弱性をカバーするためにrel=”noopener”を付けるという風になっているそうです。 Google Developersの見解 サイトで rel=”noopener” を使用して外部アンカーを開く その脆
知ってトクするDevToolsの使い方 / DevTools Tips you should know
社内勉強会用資料 文字起こし版 前編: https://knowledge.sakura.ad.jp/27872/ 後編: https://knowledge.sakura.ad.jp/28024/
PerfectPixelを使えばデザインカンプを完全再現したコーディングができる！ | HPcode
PerfectPixelを使えばデザインカンプを完全再現したコーディングができる！ 2018 10/31 コーダーとしての質の高さの指標の1つに、デザインカンプからの再現度の高さが挙げられると思っています。 PCサイトだけ作っていればいい時代に生まれた言葉で「ピクセルパーフェクト」があります。ピクセルパーフェクトとはデザインカンプから1mmもズラさずに再現するというものです。 今の時代にそこまで厳密に求めてくる会社はないと思いますが、それでもデザインカンプの再現を理由もなく怠るのはコーダーとしてありえないと思います。 「PerfectPixel」という（名前そのままの）ブラウザ拡張ツールを使えば、デザインカンプの再現を高いレベルで担保することができます。コーディングを担当している方は、ぜひ使ってみてほしいツールです！ 📝コーディング時にデザインカンプを100%再現するためのツール「Per
2020年のフロントエンドマスターになりたければこの9プロジェクトを作れ - Qiita
以下はSimon Holdorf( dev.to/ Twitter / GitHub )による記事、9 Projects you can do to become a Frontend Master in 2020の日本語訳です。 9 Projects you can do to become a Frontend Master in 2020 Introduction あなたがプログラミングの初心者であるか、既に経験豊富な開発者であるかにかかわらず、この業界では、急速な変化に追いつくために新しい概念と言語・フレームワークを学び続けることが必要です。 たとえばFacebookが4年前にオープンソース化したReactは、既に世界中のJavaScript開発者にとって第一の選択肢になっています。 もちろんVueとAngularにも多くのフォロアーがついています。 さらにはSvelte、Next
私たちはなぜ SPA で開発するのか / Why you choose SPA
2019.11.02 に FRONTEND CONFERENCE 2019 (#frontkansai) にて発表したスライドです。
すべての新米フロントエンドエンジニアに読んでほしい50の資料 - Qiita
はじめに さいきんのWebはSPA技術を中心としたフロントエンドが賑わっていますね💪 従来サーバーサイドを扱っていた人もフロントを触る機会が増えていたり、これからプログラミングを学んでいく人も、フロントエンド領域に興味を持っているのではと思います。 そこで、フロントエンドの経験が浅い方や初学者向けに、おすすめのドキュメントや勉強すべき領域をまとめました。 とりあえず動けば良い段階から一歩進んで、フロントエンドエンジニアとして、良いアプリケーションを作るために必要な知識を浅く広く紹介します。 ※補足 新米と表記しましたが、実際には新卒や未経験でなく、新卒2~3年目の若手フロントエンドエンジニアやフロント分野に苦手意識のあるバックエンドエンジニアの方を対象としています。 数日で目を通せるような内容ではないため、マイルストーンやスキルセットの一つの参考にして頂けると幸いです。 フロントエンド入
無料でiOSとAndroidのストアにリダイレクトする - Qiita
はじめに 個人ゲームを作っていてTwitterなんかを始めると、iOSとAndroidのストアページのリンクを両方貼っていたら140文字になんか収まらなくなりますね。 本来ならランディングページを作って、AppStoreとGooglePlayのバナーを貼るのがベストなんでしょうが、デザインを作る余裕もないし、サーバーなんか持っていない！ だけど、とりあえず1つのURLでAppStoreとGooglePlayのストアに飛ばしわけたいというケースはそこそこあるんじゃないでしょうか。 技術的には端末のUserAgentをみてリダイレクトするだけなんですが、無料という縛りが入ると、意外と選択肢は少なかったです。今回はクライアントサイドのJavaScriptで実現しました。 検討した候補 Heroku 無料だとスリープするのが必須とかで、スリープしないためにCronでジョブ実行するとか本末転倒な感じ
Online Image Сompressor
This online image optimizer uses a smart combination of the best optimization and lossy compression algorithms to shrink JPEG, GIF and PNG images to the minimum possible size while keeping the required level of quality. Upload up to 20 images. Wait for the compression to finish. Click thumbnails in the queue for quality setting. Use the slider to control the compression level and mouse/gestures to
フロントエンドのコーダーの頭の中、デザインを見た時にどんなことを考えるのか
フロントエンドのコーダーがデザインを見た時にどんなことを考えるのかを紹介します。デザインカンプを手がかりに、そのデザインが意味する仕様上のさまざまな可能性やそれらを実現するための実装方法を考えるなど、コーダーとして最も楽しい時間の一つです。 Your Brain on Front-End Development 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 デザインがあがってきた！ 複数行のテキストの長さに沿った背景 ヘッダはFlexboxで レイアウトはCSS Gridで 縦書きの要素 テキストの省略 カスタム フォント 画像上のテキスト SVGアイコン・レイティング ハンバーガーメニュー デザインがあがってきた！ フロントエンド デベロッパーの仕事は、さまざまなテクニックとテクノロジーを使用して望まれるUIとUXを引き出す
2018年、フロントエンドのデベロッパーがプロジェクトで使用しているCSS, JavaScriptのツールを調査
フロントエンドのデベロッパーがプロジェクトで使用しているCSS, JavaScriptのツールについての調査結果を紹介します。 SassやLESS、BootstrapやFoundation、AutoprefixerやModernizr、BEMやCSS-in-JS、CSS GridやFlexbox、NPMやGulp、jQueryやReactやVue.js、WebpackやESLintなど、実際にどのように使用されているかが分かります。 5,000人を超える現役デベロッパーを対象に調査が行われ、まさに現場の現在の状況がよく分かります。 The Front-End Tooling Survey 2018 by Ashley Nolan 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Q1. フロントエンドの経験年数 Q2. CSSの知
コーディングをするときに鼻血がでるほど便利なwebツールリスト - Qiita
普段お世話になっているwebツール達の紹介です。 以下のサイトはすべて 無料 & 登録不要 です。 正規表現 regexper 正規表現を可視化してくれます。 複雑な正規表現を書くときやコードリーディングのお供に重宝します。 Rubular Rubyの正規表現をテストできます。 JSON JSON FORMATTER & VALIDATOR JSON系のツールが集まったサイト。 それぞれ、サイト名とドメインが違うのでリンクはそのうちの１つになっています。 (画像クリックでそれぞれのツールに飛べます。) ひとつずつ紹介します。 JSONをフォーマットしてくれます。 出力結果は折りたたむことができるので、長いJSONを読むときにも便利です。 JSONを含めた様々なデータ形式を変換できます。 Inputの以下に対応。 CSV INI JSON XML YAML Outputは以下に対応。 JSO
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web development - Custom network throttling profiles
20 年代のフロントエンド.md
【2018年版】フロントエンドエンジニアがよく使うWebサービス・アプリまとめ - たこさんちゃんねる(別枠)
