【catnose】Zennを生んだ個人開発者に聞く、プロダクト開発の美学
個人開発者 catnose ソフトウェア開発者・デザイナー。 個人開発者として、Webデザイナー向けメディア「サルワカ」、ポートフォリオ作成サービス「RESUME」、技術情報共有サービス「Zenn」、簡単にAIサービスがつくれる「だれでもAIメーカー」など、数々のプロダクトを世に送り出す。家族は妻、娘、犬、猫。 個人開発者として、ポートフォリオ作成サービス「RESUME（レジュメ）」や技術情報共有サービス「Zenn（ゼン）」、入力欄や選択ボックスを組み合わせるだけで簡単にAIサービスがつくれる「だれでもAIメーカー」など、数々のプロダクトをヒットさせてきたcatnose（キャットノーズ）さん。現在も複数の開発案件に関わりながら、新たなプロダクトを開発中だといいます。 今回はそんなcatnoseさんのこれまでの作品を振り返りながら、個人開発者として培った開発哲学や、30代になるとともに起きた
UAスタイルシートとリセットCSSとは - 2023 - kojika17
以前に 劇薬の The New CSS Reset という記事を書き、その中で「UAスタイルシートを理解していれば、どんなCSSリセットも使える」と言いました。 ただ改めてUAスタイルシートの事を検索にかけても「ブラウザのデフォルトのスタイルシートです」で終わる記事が多く、これでUAスタイルシートを理解しろというのは無理な話です。 そこで後進のために、UAスタイルシートとは何なのか？ UAスタイルシートとリセットCSSの付き合い方を文章として残しておきます。 UAスタイルシートとは？ UAスタイルシートとは、User Agent Style Sheet の略で、webブラウザがデフォルトで持っているスタイルシートのことです。これは、HTML要素をどのように表示するか、振る舞いを持たせるかを定義したものです。 スタイルシートの種類と階層 スタイルシートといっても、いくつかあります。 多くのド
30分でわかるデータ指向アプリケーションデザイン - Data Engineering Study #18
600ページを超える書籍である「データ指向アプリケーションデザイン」の要点を最近の話題を交えながら解説します。 Data Engineering Study #18 の発表資料です プレゼンテーション https://www.youtube.com/watch?v=ZiKWXc0fSCw イベントURL https://forkwell.connpass.com/event/269125/ データ指向アプリケーションデザイン https://www.oreilly.co.jp/books/9784873118703/
HTML制作で気をつけたいスクロールバーの挙動 - ガタつきをCSSのscrollbar-gutterで防ぐ方法など - ICS MEDIA
HTML制作で気をつけたい スクロールバーの挙動 - ガタつきをCSSのscrollbar-gutterで防ぐ方法など - ブラウザのスクロールバーは、OSの種類によって挙動や見た目がさまざまです。環境によって挙動が違うため、自分の環境では問題なくても、ユーザーの環境から見ると問題が起きていることがあります。次のような問題を経験したことがある人も多いのではないでしょうか？ 不要なスクロール領域ができていた スクロールバーの切り替わりで画面がガタつく これらの問題を防ぐためには、対処法のほかにどんな環境で発生するのかを知っておく必要があります。本記事では、スクロールバーの簡単な説明と、2つのよくある問題と対処法について紹介します。 スクロールバーの簡単な説明と、制作時のポイント よくある問題を紹介する前に、スクロールバーの簡単な説明と、macOSで制作する時の注意点について触れておきたいと思
divはボタンではない、ボタンの実装について知っておくべきすべてのこと
クリックできるボタンを実装するとき、HTMLの何をよく使用しますか？ buttonタグ、もしくはdivタグ？ divを使用してはいけない理由、buttonを使用するときの注意点、場合によってはaがよい理由を紹介します。 Everything you didn’t know you need to know about buttons by Steve Sewell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ボタンの実装にdivを使用したときの問題点 ボタンをbuttonで実装する buttonのスタイルに関する問題点 buttonのスタイルを正しく設定する方法 フォーム内のbuttonの動作を修正する 他のページへのリンクに使用する場合はaタグで ボタンの実装をコンポーネントにする 終わりに はじめに クリックで
プログラミング初学者のための「即戦力ノウハウ」（4 万字） - Qiita
はじめに これは文系出身の私が、入社後に早く教えて欲しかったことをまとめたものです。 私は 10 年ほど前に文系大学を卒業して技術職で採用されましたが、入社 1 年も経たないうちに「使えない」と言われ、お客様向けのサポートセンター業務に就くことになりました。 その間も個人ではコーディングを続け、開発チームに厄介な口出しなどしているうちに、いつの間にか技術職に戻っていました。 プログラミング未経験者のよくある回り道をした身として、同じような境遇の方の助けになれば幸いです。 以下はすぐに使えるものから、未経験の方には難しい内容まで含まれます。 すぐに分からなくても知ってさえいれば後々効いてくる内容にしたつもりですので、「そのうち分かるかな」くらいの気持ちで読んでもらえればと思います。 👑 コーディングの基礎テクニック 初学者に役立つ汎用的なテクニックをまとめます。 特に説明のない限り、コード
新人君に身に着けて欲しいマインドや習慣 - Qiita
三行 報告と確認は大事だから怠らないように 手段と目的を履き違えるな 勉強は大事だから習慣化する(軽くでいい) 新人教育に手を出そうかと思ったんです おはようございます。この季節は手元が冷えまくってさむ谷園の冷え茶漬けなのでなるたけキーボードいじりたくないデブです。 私事ですが去年に転職しまして、いい感じにやれてます。フルリモート最高です。 そんなこんなでまあまあ月日も経って試用期間も終わり、前々から思ってた教育関連に手を出したいと本社で色々言ってます。 とは言え本社側としても長期で色々考えててとりあえず今々私が手を付けれそうなのが参画後研修というやつっぽい空気なのでそれ向けに一本記事を書きます。 で、その参画後研修の対象が以下の感じです。(以降新人君、とします) 研修終わって本格的に業務に参加しだした人 大体1,2年目くらい はい。大事な時期です。 どのくらい大事かと言うとアニメの1～3
CTO から見た，なぜスタートアップ
初期のソフトウェア設計は壊れがちなのか - Speaker Deck
Speaker Deck This deck requires a password Password
2023年最新版: HTMLのheadの書き方、head内に記述する要素の総まとめ
HTMLページのhead内に記述する最小限の構成、そしてmeta要素やlink要素、ソーシャルサービス用の要素、デスクトップ・スマホのブラウザ用の要素などがまとめられた「HEAD」を紹介します。 HEAD: A simple guide to HTML <head> elements 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 以前の版からいろいろと変更されています。 2016年版: head内に記述する要素の総まとめ 2018年版: head内に記述する要素の総まとめ head内に記述する最小限の構成 head内の要素 meta要素 link要素 ソーシャル関連のhead内の要素 ブラウザ・プラットフォーム関連のhead内の要素 メモ head内に記述する最小限の構成 下記はシンプルなWebサイトで必須となるhead内に記
Guzzle Promiseを使った
非同期処理によるAPIコールの高速化
JavaScript で非同期処理を実現する Promise という機構はご存知でしょうか？ 今回は「Promise の考え方を PHP で実装した Guzzle Promise」を使って、大量の API コールを高速化したときの経験についてお話してみたいと思います。 Talked: - …
ピクシブ、自社で使っている「iOSアプリエンジニア育成教材」を無償公開
ピクシブは、初学者向けiOSアプリ開発の教材資料を無償公開した。お絵かきSNSの開発を通して、実例に近いiOSアプリ開発を学ぶことができるという。 ピクシブは1月19日、初学者向けiOSアプリ開発の教材資料を無償公開した。内容はお絵かきSNSを開発するというもので、実例に近いiOSアプリ開発を学ぶことができるという。また、同社でモバイルアプリ開発の初学者向けに実施した研修の内容についても紹介している。 同社では2022年2月からiOS・Androidアプリエンジニアの育成プロジェクトを始めている。モバイルアプリの開発手段の多様化に伴い、エンジニア採用のミスマッチが増加。モバイルアプリエンジニア不足を解消するために、自社で育成していく取り組みを始めたという。 研修ではまず、プログラミング言語「Swift」と開発ツール「Xcode」に慣れるように、米Appleが提供しているアプリ開発のための課
最近のWeb制作に役立つ、CSSの便利ツール総まとめ
最近のWeb制作に役立つ、CSSの便利ツールをまとめました。 CSS Grid, Flexboxで実装するときに役立つレイアウトのツール、CSSやSVGでさまざまな背景・区切り線を生成するツール、美しいシャドウやグラデーションを生成するツール、色選びや配色に役立つツール、コピペで利用できるボタン、可変のフォントサイズ、CSSアニメーション、コードの管理・品質・デバッグに役立つツールなど、もりだくさんです。 CSS Layout Generator Webサイトでよく使用される「ヘッダ・メイン・フッタ」「ヘッダ・サイドバー・メイン・フッタ」「カード型」「サイドバー」などのレイアウトを確認しながら、CSSのコードを生成できる無料オンラインツール。以前紹介したときは、CSS Gridのみでしたが、Flexboxにも対応しました。
便利なのが登場！ 最近見かけるさまざまなUI要素600種類以上をシンプルなHTMLとCSSで簡単に実装できる -UIverse
button { --border-radius: 15px; --border-width: 4px; appearance: none; position: relative; padding: 1em 2em; border: 0; background-color: #212121; font-family: "Roboto", Arial, "Segoe UI", sans-serif; font-size: 18px; font-weight: 500; color: #fff; z-index: 2; } button::after { --m-i: linear-gradient(#000, #000); --m-o: content-box, padding-box; content: ""; position: absolute; left: 0; top: 0; wi
React で作るゆっくり解説 feat. Remotion
export const FirstVideoConfig: VideoConfig = { sections: [ { title: 'イントロダクション', bgmSrc: '/audio/bgm/honobono-wartz.wav', backgroundVideo: '/video/cyber-bg.mp4', afterMovie: '/video/yukkuri-opening.mp4', talks: [ { text: 'ねえねえ魔理沙', speaker: 'reimu', id: '59f8c2cd81334be5ab5cdc7899fad286', audioDurationFrames: 25, }, { text: 'なんだ霊夢', speaker: 'marisa', id: '0ba332a465c3404a870de15cad021407', audioD
これがフロントエンドで話題になった記事！ ICS MEDIAの2022年 - ICS MEDIA
ICSはフロントエンドを専門とするウェブ制作会社ですが、オウンドメディアとして技術情報発信サイトを運用しています。このサイトは開設から9年目をむかえましたが、今年は「国内のウェブ水準を前進させる記事を。話題のテーマも、他のサイトでは読めないニッチな技術も」をテーマとしてやってきました。そんなICS MEDIAにとっての2022年を、あらゆる数値を使って多角的にレポートします。 今年はどの記事がもっとも読まれたのでしょうか？ 今年執筆した記事で上位10記事をピックアップしました。 1位 : Vue 3 2022年の最新標準！Vue 3の新しい開発体験に触れよう 24,500PV Vue 3（開発コード：ワンピース）がリリースされたのは2020年9月。Vue 3のリリース以降は周辺ツールも進化しました。Vue 2の構成よりVue 3周辺ツールは型安全になったことが特徴です。ICSではVue 3
1ミリ秒でも早く届けたい! HTMLで画像読込を高速化するために取り組んでいること - ICS MEDIA
ウェブサイトの表示スピードはサイトの健全性における重要な観点の一つです。Googleが提唱するCore Web Vitalsコア・ウェブ・バイタルズと呼ばれる指標の中にもサイト表示スピードに関する項目があり、表示されるまでの時間が単なるユーザー体験だけでなく、SEOでも無視できない存在です。表示スピード低下の要因はネットワークやサーバーサイド、そしてフロントエンドまで広範囲におよびます。本記事ではその中でも画像の読み込みについて改善できるテクニックを改善前と改善後を比べながら紹介します。 改善前サンプルを別ウインドウで開く 改善後サンプルを別ウインドウで開く 画像読み込みBefore / Afeter 上図はLighthouseによるチェックの結果です。Lighthouseはウェブサイト検査ツールで、ウェブページのパフォーマンス、アクセシビリティ、SEOなどの状態を計測できます。Googl
どこよりも早い｢新NISA｣の賢い使い方を教えよう
コンテンツブロックが有効であることを検知しました。 このサイトを利用するには、コンテンツブロック機能（広告ブロック機能を持つ拡張機能等）を無効にしてページを再読み込みしてください。 ✕
AI絵師、お金を稼ぐ：2ヶ月で11万円稼いだ方法・そして今後どのようにお金を稼ぐことができるか - uenoyamagooo’s diary
・はじめに：自己紹介とAI絵師になったきっかけ ・AI絵師を始めたきっかけ ・AIイラストをどのように売るか ・そもそも、現状のAI絵師を取り巻く環境は？ ・AIイラストの強みと弱みを理解する ・AI絵師にとって一番の脅威は「画像生成AIを使いこなす神絵師」 ・AIイラストに価値を感じさせるために ・どのようにAI絵師は自身をブランディングするか？ ・AIイラストのクオリティアップに真面目に取り組む ・AI絵師はこれからどのように稼ぐ？ ・1年以内にできること ・画像生成AIは倫理的な正当性を獲得できるか？ ・最後に ・はじめに：自己紹介とAI絵師になったきっかけ 本記事はあるふ氏が主催の「画像生成AIアドベントカレンダー」に寄稿したものである。主に、自分がAI絵師としてお金稼ぎをする上で考えたことや、その方法について紹介しようと思う。 先に、AI絵師としてお金稼ぎをする際のエッセンスにつ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Grid・Flexboxの 最近の進化とミライ
Webパフォーマンス高速化とこれからのアーキテクチャ
