「JavaScriptで要素をドラッグして移動する簡単な方法」という記事が初耳だらけだった件 - Qiita
はじめに まず↓の記事を見てない方はぜひ見てください！ 自分にとってはこの記事には「えっ、ナニコレ！」なテクニックが多く、特に解説もなかったのでいろいろ調べてたら休日が消えてました... なのでその時間の供養もかねて、自分が知らなかった部分を中心に、僭越ながら元記事の解説を書いてみたいと思います。 ちなみに、以下が元記事のコードそのままを実装したものです。たしかに掲載コードだけで要素がグリグリ動きますね。 See the Pen js-drag-move-original by www-tacos (@www-tacos) on CodePen. 初耳1: $img まずコードのここ <img id="$img" src="https://js.cx/clipart/ball.svg" width="40" height="40"> <script> $img.onpointermove
非デザイナーにも知っていて欲しい「色」と「特性」 - Qiita
はじめに 数年前から「デザインの民主化」「非デザイナー向けの〇〇」といったワードをよく見るようになりました。それに伴い、デザイナー不在でも制作ができる便利なツールも増えてきましたね。 ReactなどのUI制作に便利なライブラリが広く使われたり、Canvasを使ってのバナー制作を行う人も増えてきた印象があります。 一方で「たくさんあるテンプレートから何を基準に選べば良いのか分からない」「アレンジしたけど、なんだか上手くいかない」という人もいるのではないでしょうか。 「非デザイナー～」シリーズでは「知っているとちょっと得するデザインTIPS」や「話のネタになるデザイン豆知識」をお伝えしていこうと思います。 今回のテーマ「色」と「特性」 今回は色の見え方、なかでも色覚特性について書いていこうと思います。 色覚特性はさまざまな理由から、多数派とは違う色の見え方・感じ方をする状態のことを言います。色
新しく登場した一括管理アプリ「Stack」がガチで便利だったから聞いてほしい - Qiita
Product Huntをみていたら、 Stackというアプリが話題になっていたので、チラッとみてみました。 Webアプリを一元管理できるようで、有名どころだと「Franz」「Station」があります。 私は「Station」を愛用しており、乗り換える気持ちはなくて、「試しに触ってみるか」くらいの感覚でDLしました。 （Product Huntで超人気アプリを使ってみたかったというのもあります） 使ってみた結果、最高に便利な一元管理アプリで、速攻でstationから乗り換えました(掌返し) ぜひ皆様にその感動をいち早くお届けしたくて、超久しぶりにQiitaに投稿します。 →https://stackers.app/ ※2019/9/27時点、Mac限定のアプリです。 Stackを激推したい３つの理由 個人的にStackいいなぁと思うポイントは３つあります。 横スクロールで一望できる カテ
実はReact Native公式ドキュメントでReact Native for Webが使われている - Qiita
2019年8月追記： Expo SnackがWeb対応したことを受けて、React Native公式ドキュメントのライブプレビューはreact-native-web-playerからExpo Snackに戻りました。 http://facebook.github.io/react-native/docs/activityindicator 記事の内容は古くなってしまいましたが、React Native for Webが内部で使われていることに変更はありません。 React Native公式ドキュメントのプレビューを支える技術 React Nativeの公式ドキュメントでは、コンポーネントの実際の表示をWeb上で確認できるプレビューが用意されています。 少し前まではAppetize.ioが使われていて、実機のスクリーンキャストらしきものを見ることができていました。今でもExpo Snackは
意外と知らない？ Gitコマンド 100本ノック - Qiita
概要 みなさん、Git使ってますか？ もしくは、使いこなしていますか？ 独習Gitを読んで、思いの外Gitコマンドが多かったので、 タイトルの通り、Gitコマンドで100本ノックをまとめてみました。 Gitの環境構築が終わっている状態からを想定しています。 git initでローカルにリポジトリを用意してください。 問題に対して、直後に回答を載せる形式にしています。 Git初心者の方も、目を通して知らないオプションをググれば勉強になると思います。 参考文献 独習Git Gitに馴染む 1. メールアドレスをGitのグローバル設定に追加 git config --global user.email "Your E-mail@example.com" 2. user.nameの設定値を表示 git config user.name 3. user.emailの設定値を表示 git config
新QiitaでReactをやめてhyperappを採用した背景 - Qiita
12/1 に Qiita のトップページをリニューアルしました。これまで React を使っていましたが、それをやめて hyperapp を採用しました。まわりを見てもあまり採用事例が見当たらないので、この記事では一体なんで今をときめく React ではなく hyperapp を選択したのか、どういうところが魅力的なのかについて プレゼンテーション層を実装するためのツールとして 学習コスト の観点から書きたいと思います。なおこの記事に書かれていることは全て個人の感想であり、はっきりいって個人の日記レベルです。 それと hyperapp の開発者が社内にいるという事情もあるので、そこら辺さっぴいて読んでください。 TL;DR プレゼンテーション層を実装するためのツールとして React は機能過多だし、機能不足 hyperapp は過不足ない 学習コスト 仮想 DOM は学ぶ価値のある知識
良いエラーメッセージの書き方 - Qiita
エラーには大抵「エラーメッセージ」が付いています。 自分は過去に、エラーメッセージの内容を雑にしてしまい後悔することがよくありました。 その経験から、良いエラーメッセージの書き方を考えました。 エラーメッセージを2つに分類する まず、エラーメッセージといっても次の2つのパターンで大きく異なってきます。 (1) ユーザーが見るエラーメッセージ (2) 開発者が見るエラーメッセージ (1) ユーザーが見るエラーメッセージ 内部実装のことは書かないようにする
Rubyのtrueとfalseの話 - Qiita
この記事は、技術系同人誌としてまとめるはずだった原稿をほぼそのまま転載しています。諸事情により向こうかなり長い間同人誌即売会に売り手として参加することが難しくなったためです。 長いですが、お楽しみいただければ幸いです。 まえがき この本は、Rubyコミッタである卜部昌平に、その妻である私、卜部一恵がRubyのtrueとfalseについて突っ込んで聞いてみた話です。本文は両者の対話形式で進んでいきます。 私は昌平と同じ大学同じ研究室に所属していたのでプログラミングについての基礎は一応ありますが、エンジニアとして職を得たことはありません。つまり、プログラミング初級者です。この本はそのくらいのレベル感の本だと思います。 私自身が初級者なりにRubyを使っていて、if文が思った通りに動かない、そんなときに抱いた疑問からこの本が生まれました。 同じような疑問を抱いている方の一助になれば幸いです。 は
目指せ！落ちない高可用性サーバ、ハードウェアの選び方 - Qiita
10年以上金融機関で働いているインフラエンジニアの落ちないサーバにするための考察です。 ハードウェアの専門家ではないので、正確ではないかもしれません。 今までの経験からの個人的考え方になります。 私たちオンプレ重視のインフラエンジニアは、 クラウドサービスではできない高可用性サーバを導入したり、 複数台構成で１台故障しても問題ない構成のサーバはコスト重視するなど、 システムに最適なサーバを導入しようとしています。 高可用性サーバを追求する目的 ■アプリに影響を与えないように Active/Standby構成にしていて、インフラ的にはダウンタイムが数秒だとしても、 アプリによっては復旧に時間がかかったり、問題ないことの確認にも時間がかかってしまいます。 また、正しくサーバが落ちればアプリが問題ないとしても、 サーバが中途半端な状態のままになってしまい、なんだかおかしいということもあります。
mysqlをdisる会 - Qiita
はじめに やあ （´・ω・｀) ようこそ、バーボンハウスへ。 このmysqlはサービスだから、まずsystemctl start mysqld して落ち着いて欲しい。 うん、「また」なんだ。済まない。 仏の顔もって言うしね、謝って許してもらおうとも思っていない。 でも、このタイトルを見たとき、君は、きっと言葉では言い表せない 「ときめき」みたいなものを感じてくれたと思う。 殺伐とした世の中で、そういう気持ちを忘れないで欲しい そう思って、この記事をかいたんだ じゃあ、注文を聞こうか。 というわけでmysqlをdisります。disるだけなので内容はありません。いいね？ mysql には罠がいっぱい そうなんですよ罠がいっぱいなんですよ奥さん。 いやこれはおそらくmysqlに限った話ではないんですけど例えばこういうの！ MySQLのチューニングなんてしたらパフォーマンス落ちるだけだし、デフォル
Awesome Python：素晴らしい Python フレームワーク・ライブラリ・ソフトウェア・リソースの数々 - Qiita
元記事: Awesome Python Awesome List in Qiita Awesome Ruby Awesome Java Awesome JavaScript Awesome Node.js Awesome Go Awesome Selenium Awesome Appium 管理パネル 管理インタフェース用ライブラリ ajenti - サーバ用管理パネル. django-grappelli - Django 管理インターフェースのためのジャズスキン. django-jet - 改良された機能を備えた Django 管理インターフェース用の最新のレスポンシブテンプレート. django-suit - Django Admin インターフェースの代替 (非商用の場合のみ無料). django-xadmin - Django 管理者のドロップイン置換. jet-bridge -
質問は恥ではないし役に立つ - Qiita
一年半SEとして働いてきた中で、私自身が苦手だと思っており、他人からもそのように評価されていたのが「質問の仕方」でした。 それが先日、他人から「質問の仕方がうまいね」と褒められることがあり、ようやく一人前の質問の仕方ができるようになってきたので、どのようにして克服できたのか紹介したいと思います。 質問の基本形 私が入社したばかりの頃は、わからないことがあればすぐに先輩に質問していました。 そのときにしていた質問の内容はだいたいこんな感じです。 「環境構築を手順書通りにやったんですけど、○○のコマンドでエラーがでてしまいます！なんとかなりませんか？」 このような質問を受け取ったら、先輩は暇ならばエラーメッセージを見てくれ、エラーメッセージに書かれていることに対して調査してくれるかもしれませんが、忙しいときにはそんなことはしてもらえません。 こんな質問を繰り返しているうちに先輩からは「技術系メ
閲覧中のWebサイトで使われている技術を確認できるChrome拡張「Wappalyzer」のご紹介 - Qiita
はじめに エンジニアたるもの、よそで使われている技術は気になると思います。今回は、そんな時に役立つChrome Extensionの「Wappalyzer」をご紹介します。 概要 Wappalyzerは、ブラウザに現在閲覧しているWebサイト内で使われているテクノロジーを覗き見する機能を追加できる拡張スクリプトです。 Chrome Extensionとして配布されているほか、FirefoxのAdd-onとしても配布されているので、どちらでもお好みのブラウザで利用が可能です。 Chromeのかたはこちらのリンクより、Firefoxのかたはこちらのリンクよりダウンロードが可能です。 使ってみる 導入方法をご紹介しましたので、早速実際に使ってみましょう。 今回はWappalyzerを導入したGoogle Chromeにて、Qiitaの執筆画面を見てみます。 まずはじめに、対象とするページを開いた
Macでの開発環境構築をできる限り自動化する。 - Qiita
2023-03-24追記 気がつけばこのポストも7年の月日が経過しました。 くっそしょうもない話でしかないのに、妙に人気のある本記事です。 実のところあの頃のスクリプトを秘伝のタレのように微妙に変えながら使い続けて、と来たわけですが、 そうこうしている間に、時は流れ、Appleはx86を捨て、そしていつの間にか人類は自分の母語でやりたいこと書けば大体よしななコードが書かれる時代が到来しました。文字通りの未来です。 そして、Macをセットアップする最初に数時間を節約するために、わざわざスクリプトを親切に書き直すというモチベーションはそうそう湧くわけもなかった私に、7年前にやるべきだったことを変わりに、私でも、ましては人類でもなく、コンピュータ自身がその仕事をやってくれる時代が訪れました。 ありがとう、ChatGPT。彼（彼女？ああ、non-binary?コレも違うな）がやってくれました。 （
旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section2 ～CommonJSモジュールと仲良くなろう～ - Qiita
はじめに この記事は「旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門」の2つ目の記事です。 シリーズの最初から読みたい方は 旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section1 ～すぐにでも現代っぽく出来るワンポイントまとめ～ へどうぞ。 また、このシリーズではECMAScript5を概ね対応するブラウザを対象としています。 もっと平たくいうと、IE8以下は切り捨てます。ご了承ください。 そしてプロによるマサカリ 対策として一つ重要な注意書きをします。 この記事中で出てくる「CommonJSモジュール」という表現は全て「CommonJSのModules 1.0仕様をベースとして、Node.jsが独自に拡張したCommonJS派生のモジュール仕様及びインターフェース(require/exports
DIS例2 / PHPは配列型と辞書(HaspMap)型が区別不能な言語！ | PHPを使いもせずDISってる君達へ - Qiita
PHPはよくDISられることがあります。しかし、実際にはほとんどPHPを利用していない人が印象だけでDISってることが多いような気がします。 そこで、PHPがよくDISられている点について、実際どうなのかをPHP未体験者向けに解説していきたいと思います。PHPを触ったことない人でもわかりやすいようにシンプル目な仕様のRubyを例に説明していきたいと思います！( Ruby触ったことなくても、その他のOOP言語を触ったことあれば雰囲気は理解できるように書いています ) DIS例1 / PHPは配列操作がしづらい PHPの配列操作は扱いづらい等とDISる人たちがいます。実際のところどうでしょうか。 以下のような処理を配列への中間変数を用いず行うコードを例に考えてみます。 0. [2,4,6,8,10]という配列を用意して 1. ↑の配列から8以下の数だけを選択した配列を作る 2. ↑の配列から各
2015年までにWebのフロントエンドが辿ってきた道 - Qiita
背景 僕が本格的にWebのエンジニアになったのは2014年頃からで、早いものでもう丸2年ほど経ってしまうことになります。 Webに転向してからは主にフロントエンドエンジニアとして勤務してきました。 よく言われることですが、最近のフロントエンドの趨勢は本当に早いです。 最初はキャッチアップに苦労したことを覚えています。 しかし段々と新しい何かを覚えることは苦でなくなり、今はこの流れに身を置くことが楽しいと思えるようになってきました。 激動の趨勢の中で、Webのフロントエンドエンジニアが口にするパラダイムは日ごとに変化しています。 この記事は元々社内向けに書いたものです。 色々なバックグラウンドを持つエンジニアと一緒にフロントの設計を考える場面で、共通言語を持つきっかけになればいいなー、という思いから書いたものですが、いい機会なので外向けに修正して公開してみます。 Webのフロントエンドを新し
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
技術書典10の無料頒布まとめ - Qiita
Slack - Qiita
Google製可視化OSSのFacetsがめっちゃ便利だから使ってみてくれ - Qiita
