※前回の2020年12月からベゼルレスのiPad mini6（8.3インチ）が出たので更新しています。 記事の詳細の内容はiPad mini6が入っていない内容です。 MacBookもM1チップでProじゃなくてAirで十分みたいになっていて、大きさやスペックが大きければいいみたいな時代は終わって、自分に合ったものを選ぶ人がより増えてきたように感じています。 前回が2019年5月にレスポンシブデザインのブレイクポイントの記事を書いて、今でもたくさんのアクセスがあり、たいへん嬉しく思っています。 そこで今回2021年に向けて内容を見直しました。 最近発売されたベゼルレスのiPad AirやiPhone12 miniなど新しいサイズも増えて、より複雑になった印象です。 iPadのSplit Viewを気にしない人は、去年と同じ560px/960pxでも問題はないです。 hashimotosan

Visual Studio Code 入門 この記事はオマケみたいなモノで、今回の本編はこっちの入門記事になります。既に VS Code を利用されてる方が、これから VS Code を触っていこうとされてる方に「とりあえずここ見とけ」と勧められるモノになるよう意識して書いてみました。 0回 : イントロダクション 1回 : コマンドパレット 2回 : 設定 今年作った拡張 Bracket Lens 今年作った拡張の中では一番人気のヤツで、閉じ括弧の後ろにそのスコープがなんのスコープなのかを全自動で表示します。 Blitz 自分的に今年作った拡張の中ではイチオシなのはこっちなんですが、残念ながら全く注目されてません。クイックピック主体の UI で VS Code の設定を行える拡張で、画面を殆ど占有せずに設定が行え、設定の Undo/Redo も備えますし、コンフィグターゲット別の設定値を

はじめに この記事は #EveOneZenn (Everyday One Zenn) vol.14 です。 Next.js などを手掛ける Vercel Inc.（旧 Zeit ）が運営しているサービス、Vercel（旧 Zeit Now）の料金形態とその内容についてまとめます。 なお、掲載内容は 2020/12/08 時点のものです。 （過去に別所で公開していた記事の加筆版です） Note: 2020/12/08 19:51 - Hobby プランは個人的かつ非営利目的な目的でのみ利用できる旨を追記 Note: 2021/02/06 - 禁止されている用途について追記 Note: 2021/02/11 - Hobby プランにおける広告を掲載した、個人ブログでの利用について追記 Note: 2022/02/26 - Hobby プランにおける広告掲載の利用不可について追記 前回： Ver

Figmaは、ブラウザ上から利用できるデザインアプリですが、特にチームでの共同デザインプロジェクトに最適なツールと言えます。 さらに、「こんな機能があればいいのに」というときも、プラグインを利用することで、自分好みにアプリの使いやすさをカスタマイズできる点も人気の理由のひとつです。 今回は、何千とあるプラグインの中から、実際にインストールしてみたWeb制作の作業効率がアップする便利なFigmaプラグインやツールをまとめてご紹介します。 自分だけの「最強」Figma、はじめませんか。 Figmaって何？ Figmaには、本格的なイラストも描くことができるベクターツールをはじめ、ウェブサイトのプロトタイプ作成機能、完成したデザインをWeb用HTMLに変換など、デザインプロジェクト全体を通して必要なツールが揃います。 Figmaはブラウザ上でデザインを行うため、共同作業によるリアルタイムのコラボ

HTML5ではIndexedDBというデータベースAPIが実装されています。しかし、若干利用法が独特な分、なかなか使いこなすのが難しいようです。昔ながらのRDBMSであったり、廃止になってしまったWebSQLデータベースの方が使いやすかったかも知れません。 今回紹介するsql.jsはSQLiteをEmscriptenを使ってJavaScriptで使えるようにしたライブラリになります。 sql.jsの使い方 デモです。SQLを実行できます。 結果も取得できます。 任意のSQLiteファイルを読み込めます。 sql.jsはSQLiteをWebAssemblyにし、実行できるようになっています。仮想ファイルシステムを使っており、インメモリで動作しています。そのため、Webブラウザをリロードしてしまうと消えてしまうのが難点です。その点さえ目をつぶれば、Webブラウザ上で自由にSQLを実行できる環境

Merpay Advent Calendar 2020 の 8 日目は、メルペイフロントエンドチーム の @tanakaworld がお送りします。 2020 年後半からフロントエンドチームと QA チーム合同で、リグレッションテストの自動化に取り組んできました。E2E テストフレームワークである Cypress でマニュアルテストを自動化し、加えて TestRail を用いてテストケース管理も仕組み化することでワークフローの整備を進めています。本記事では、それらの取り組みについて紹介します。 ワークフロー改善後の全体像 リグレッションテストとは 実装を変更した結果、アプリケーション全体の振る舞いに予期せぬ影響がないかどうかを確認するテストです。メルペイではリリース前 QA の最終フェーズでリグレッションテストを実施しています。Web アプリケーションを End To End (E2E)

ページのレイアウトやUIコンポーネントを実装する時に、フロントエンドのデベロッパーはいろいろなことを考えます。スクリーンのサイズが小さい時はどうなるのか、デザインでは中央配置に見えるけど実装はどうすべきか、要素が少ない場合や多い場合があるのか、max-やmin-を定義した方がよいのか、、、 フロントエンドのデベロッパーはCSSでレイアウトを実装する時に何を考えるか、その思考プロセスを言語化した解説記事を紹介します。 下記は、頭の中のメガネで見える実装のイメージです。 Thinking Like a Front-end Developer by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに デザインのディテールは脇に置いておく 配下ページのレイアウトを実装する時に考えること ディテールを掘り

この記事は クラウドワークスアドベントカレンダー2020 8日目の記事です。 概要 こんにちは、クソコードを爆殺リファクタリングするのが大好きなミノ駆動です。 今回は単一責任原則の話です。 単一責任原則はSOLID原則のひとつとして有名で、2020年のオブジェクト指向カンファレンスのアンケートでも、SOLID原則の中で最も人気がありました。 皆さんは単一責任原則を遵守した設計をしていますか。 どんな構造が単一責任設計で、一方どんな構造が単一責任でない設計か、明確に意識していますか。説明できますでしょうか。 ところで「単一責任原則とはなんぞや」について、少なくとも私の観測範囲では、概念的な話にとどまっているものが多く、コードレベルで具体的に説明しているものは少ないように感じます。 そうした状況からか、単一責任原則の解釈が人によって違っていたりしているように感じます。 本記事は、今一度単一責任

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

はじめに これは Go 4 Advent Calendar 2020 8日目の記事です。 Goのテストにおいて、構造体を含めて型の値を比較したいという場合は往々にしてあります。ロジックの結果はなんらかの値として作用することが多いですから、型の値を比較したい、というのは自然です。私は型の値が等価であるかどうか判定するために、go-cmp というライブラリを使うことが多いです。 github.com しかしGoにおける等価性の仕様は決まっていますし、標準ライブラリの reflect パッケージにも DeepEqual という deeply equal, かどうか判定するメソッドがあります。そこで本記事ではなぜわざわざ go-cmp を使っているのかという理由と、go-cmp を使ったときにどのようにして使うか？という go-cmp の使う上でよく使う以下のTipsを提供したいと思います。 Ti

The Bootstrap Blog News and announcements for all things Bootstrap, including new releases, Bootstrap Themes, and Bootstrap Icons. With our first beta release of Bootstrap 5, we’re calling it on new features and breaking changes. From here on out, we’re only fine-tuning features, bugs, and documentation on our way to a stable v5 release. Woohoo! Just like with the v4 development process, our docs

みなさんこんにちは。一段と寒くなって参りましたがいかがお過ごしでしょうか。インフルエンザの予防接種を受けに来たら病院が休診日でした。その敗戦の帰りにドトールで記事を仕上げております、池内です。おこしやす。 2015年に設立した法人を2019年に閉じることになったいきさつは廃業エントリで書いたとおりですが ↓ 今回は起業中の2つ目のプロダクトであった slideship.com について振り返り・お焚き上げ申しあげたいと思います。 slideship.com は、2020年12月31日をもって全サービスを終了し、サービスクローズすることになりました。slideship.com はなぜうまくいかなかったのか。 slideship.com とはslideship.com とは、Markdown 形式でプレゼンテーション・スライドの作成が行え、オンライン上でスライドの公開までワンストップで行えるク

この記事はBASE Advent Calendar 2020の6日目の記事です。 devblog.thebase.in こんにちは。BASE BANK 株式会社 Dev Division所属、Software Developer の松雪（@applepine1125）です。 現在、BASE BANK株式会社(以下BASE BANK)内で事業に対する認識を揃え効率良くプロダクト開発を行うために行っているドメインモデリングについてご紹介します。 BASE, BASE BANKのドメインとは BASE BANKでのドメインモデリングの話をする前に、まずはBASE株式会社(以下BASE)やBASE BANKの事業領域について少しお話しましょう。 BASEでは、誰でも簡単にネットショップを作成できるサービス「BASE」 を運営しており、ショップ画面のカスタマイズや商品の管理、決済、発送、売上管理など

✅ はじめに こんにちは！「あったらいいなを速攻で！」をモットーに活動している有志エンジニアチーム速攻エンジニアリングです。 去る10月に始まったGo To Eatキャンペーンは、近所の飲食店を改めて開拓する良い機会となりましたが、真っ先に感じたのが、 「対応店舗が調べにくい。。。」 ということでした。サイトによって掲載されている店舗が違っていたり、サイト内でフィルタができなかったりしていたためです。 無いなら作るがエンジニア。リリース速度を優先し、流行りのNoCodeサービスを使って作ってみました(※ Go To Eatキャンペーン終了に伴いサービスは終了しています)。 今回はGlideを使用しました。Google SheetをDBとして扱い、ブラウザ上からGUI操作のみでPWAをつくることができます。 今回こういったNoCodeのサービスは初めて触りましたが、たった数時間で大枠を完成さ

Semgrepはr2cという会社/サービスが開発しているツールです。 Semgrepの特徴としてTree-sitterでコードをパースしたConcrete Syntax Tree(CST)の構文木をベースにして検索や置換ができます。 コードをCSTにパースした構文木に対して検索/置換することで、ただの文字列検索/置換に比べてミスマッチしない検索/置換ができます。 例えば、次のa.js、b.js、c.jsはそれぞれevalを使っていますが、スタイルは違いますが意味はほとんど同じです。 // a.js eval("const a = 1, b = 2; eval(a + b);"); // b.js eval('const a = 1, b = 2;\ eval(a + b);'); // c.js eval(`const a = 1, b = 2; eval(a + b);`); $ sem

export type Param = { action: string; created_at: string; status: "Failure" | "OK"; version: number; } というinterfaceを生成してくれるライブラリです。jsonタグを見ます。 つまるところ、OpenAPIやgRPCを利用すればGoとTypeScriptで共通の型を利用できますが、それをもっと手軽にGoの型からTypeScriptのinterfaceを生成できたら便利そうだな、というのが開発した理由です。 類似のライブラリはあったのですが型解析のために一度コンパイルし、reflectを利用した型解析をしており一時ファイルを生成していました。そのためあまり使い勝手が良くなく、また実行に時間がかかるなどの問題があったため独自で作ることにしました。 Goの静的解析 Goでは静的解析ツールを

4 日目の記事です。 DevToolsおれおれAdvent Calendar 2020やります。ひとりで。 デバッグ時に console.log() は大変便利でよく使ってるんですが、DevTools を使うとコードを書き換えることなく同じことをやれます。 毎回スクリプトを書き直し→（ビルド待ち）→画面再読み込みする手間が省けて良いですね。 手順は簡単。 DevTools の Scripts パネルを開く 目的の JS ファイルを開く (CTRL+P) 出力したい位置の行番号を右クリックし “Add logpoint…” を選択 出力する内容を記述 スクリプトを実行（ボタンを押すとか） 編集したい場合も行番号を右クリックからやります。 DevTools のログポイントを編集する様子。行番号を右クリックして追加、編集。 設置すると、Chrome の場合は赤紫の矢印的なものが行番号の上に表示さ

リポジトリ euxn23/babel-and-polyfill-sample 想定読者 Babel を使っているが、 Polyfill がいまいちわからない方 Polyfill は使えるが、より最適なビルドを生成したい方 @babel/polyfill が非推奨になったことを受け現在の推奨実装を知りたい方 Polyfill とは 例として、以下の Promise を使ったコードを、 @babel/preset-env を使用して IE11 向けにビルドします。 input const main = () => { Promise.resolve().then(() => console.log('then')); } main(); output "use strict"; var main = function main() { Promise.resolve().then(functi

こんにちは！QUOITWORKS Incでディレクションとデザインを担当しておりますワタナベです(@ws0606)。今回はデザイナー向けに押さえておきたい「写真の構図」について記事を書きました。 デザインをする上で欠かせない素材の一つが「写真」。カメラマンと撮影に同行して写真の指示や良し悪しの判断を求められたり、フォトストックから選定をして加工、トリミングをしたりとデザイナーが写真と関わる場面は多くあります。 そういった場合に写真の知識があれば、カメラマンと円滑にコミュニケーションが取れ、自分で加工する際もより魅力的に見せることが出来ます。 またデザインの画面上での見え方（特にファーストビューなど）もこの構図の考え方を取り入れることにより安定したスタイリングができるなどメリットや、それをお客さんに説明するときも協力な根拠になります。 そこで今回は現場にも役立つ代表的な写真の構図やアングルに

こんにちは。メルカリの画像検索チームでTech Leadをしています葛岡です。 今回は、メルカリのMLシステムの中で一、二を争う複雑なシステムである画像検索の基盤を再設計し、経済的にも技術的にもみんなが幸せになったお話をしたいと思います。 画像検索ってなぁに？ その名の通り、画像をベースに視覚的に似ている商品を検索する機能です。この機能は２年ほど前にリリースされていて、すでにiOSバージョンのメルカリではご利用いただけます。 当時のシステムはブログ記事になっているので、ご確認ください。 再設計？なにそれ？おいしいの？ さてこの機能を支えるシステムですが、当時開発されて以来、大きな再設計などは特になく、つい最近まで運用されていて、画像検索やその他のメルカリサービスでも内部的に呼ばれていて、プラットフォーム的な立ち位置を担っていました。 画像検索は定期的に新しい画像インデックスを構築するのです

この記事は 「Webアクセシビリティ Advent Calendar 2020」 5日目の記事です。 アクセシビリティ Advent Calenderの記事を寄稿するにあたり、少しの工夫であらゆるユーザーに対して優しいWebサイトを作れるようなHTML/CSSコーディングの方法についてまとめました。より多くの人にとって優しい・使いやすいWebサイトを作ることは訪れてくださるユーザーの方々だけでなく、クライアントにとってもユーザーの機会損失を防ぐことができるので多大なるメリットがあります。（よくコードが適当でもデザインが見えていれば良いって意見を聞くけれどそんなことはない） ただ、アクセシビリティを意識したHTML/CSSコーディングについてのまとめだと内容量が非常に多くなりZennなら記事より本で出したほうがベターになってしまうので、今回は数あるアクセシビリティの視点から「キーボード操作で

CSSを10年以上書いてきた人にとって、この2020年は今までとは全く違ったCSSになったと感じた人も多いと思います。 レスポンシブはブレークポイントの代わりにCSS Gridでより簡単に実装できるようになり、グローバルなスタイルシートに頼るのではなく、CSS-in-JSでスタイルをコンポーネントに配置してテーマ性のあるデザインシステムを構築できます。 フレームワークではTailwind CSSが浸透し、ユーティリティ・ファーストのCSSが使用されるようになりました。2020年現在、CSSの使用状況を調査した「The State of CSS 2020」を紹介します。 The State of CSS 2020 The State of CSS 2020は、The State of CSS Surveyでアンケートを行った調査結果をまとめたものです。私も1票分参加しました。 ちなみに、代表

Research indicates that carbon dioxide removal plans will not be enough to meet Paris treaty goals

この記事ははてなエンジニア Advent Calendar 2020の6日目の記事です。 qiita.com 5日目は id:mizdra さんによるpolyfill を深堀りするでした。フロントエンド周りは弱い自分としてもこの記事を読むだけでpolyfillの概要から今後どうすると良いかなど知れてとてもありがたい記事でした。 www.mizdra.net さて今日は視点変えてツールの話を書きます。毎日使っているツールこそ、提供されている便利な機能を把握しておきたい。Macで使ってるターミナルアプリ「iTerm2」について書きます。 iterm2.com まずはみんながひょっとしたら知らない基本操作についていくつか紹介し、後半はTriggersという機能の使い方をいくつか紹介します。 (記事執筆時点ではver.3.4を使っています) tl;dr 公式ドキュメントにいろいろ書いてあるので読み