ヌルヌル動くReactコンポーネントの作り方【入門】 - カミナシ エンジニアブログ
こんにちは、カミナシの浦岡です。 最近、弊社のメンバーとしてUIデザイナーが新たに加わり、プロダクトのUI改善を進めています。 以前は、AntDesignなどUIライブラリーのコンポーネントをそのままプロダクトで使用する機会が多かったのですが、UI改善を行う上で、UIライブラリーそのままでは要件を満たすことが困難なケースも出てきました。 その結果、独自のReactコンポーネントを実装する機会が増えているのですが、 この記事では、その独自コンポーネントを「ヌルヌル動く」仕上がりにするために気をつけている点を架空の題材を使って書きます。 題材 今回、「空を舞うカレンダー」（ペルソナ５風!?）のUIがデザイナーから提示されたと仮定して進めます。 極端な題材ですが、UIライブラリのカレンダーをベースには実現できそうにないので、独自コンポーネントとして作りましょう！ 先に、ヌルヌル動かす上で気をつけ
どう書くんだっけ？ を一発解決！コピペ用コードスニペットを集めたオススメWebサイトまとめ
この記事では、コーディング作業で迷ったときに確認したいコードスニペットを集めた便利サイトをまとめて紹介しています。 ウェブ開発において、フロントエンドやデベロッパーが悩んでしまう問題の解決方法を知ることができるだけでなく、世界中の優秀なプログラマーの作成したコードを確認、実際に動かしながら学ぶことができます。 ちなみに、2020年に人気だったコードスニペットランキングがこちら。 2020年にCodepenで話題！コピペ可なHTMLスニペット ベスト100発表 どう書くんだっけ？ を一発解決！コードスニペットを集めたオススメWebサイトまとめ CoddMyUI Javascript、HTML、CSS、jQueryプラグイン、ウェブ開発にできるデザインスニペット1200個以上が揃ったサイト。ボタンやホバーリンク、テキストアニメーションなど細かくカテゴリ分けされているので、必要なパーツごとのコー
Web制作フリーランス13年目の経験から
補足しました 2019/1/17 4:05 AMhttps://anond.hatelabo.jp/20190117033500 ブコメやトラバに一部お答えしています ※本文ここから↓ https://anond.hatelabo.jp/20190113133500 元増田へのブコメでも指摘されていたが、ひとくちに「フリーランス」といっても業種、業態、経験、実力、性格などによってその態様は異なる。 そこでひとつのケースとして俺がWeb制作業界でフリーランスとして約１３年間やってきた経験と、そこから得られた知見などを書いてみたい。Webデザイナー、Web系プログラマーには参考になるのではないかと思う。 どういう人間か満員電車やだ遅刻癖あるので会社員向いてない 朝に弱い、生活不規則自分に甘い。問題先送りタイプ。眼の前の楽しそうなことに飛びついて（増田執筆とか）やらなければならないことを後回しに
Herokuで成功させるサービス開発 - ボクココ
ページ版執筆にあたって ども、@kimihom です。 技術書典5で販売した書籍の記事版として公開します。より多くの方へ Heroku でサービス開発を成功させていただきたいという思いから、ボクココの固定ページとして無償公開するに至りました。 なお、本記事は、Heroku 社から認められていない非公式の記事となります。予めご了承ください。 はじめに Happy Coding! 本記事はWebサービス開発を本気で成功させたいと考えているエンジニア向けに、サービス開発とHerokuの運用に関して記しています。サービス開発を成功させるには、限られた時間の中で注力すべき内容を見極め、サービスの差別化を推し進めることが重要です。ユーザーはなぜ他の多くのサービスではなくて、あなたが作ったサービスを使うのか。その問いに自信を持って答えられるようにしなければなりません。その状況の中で、どのテクノロジーを採
Webアプリケーションフレームワークの作り方 in Python — c-bata.link
こんにちは、芝田 将 ( @c_bata_ ) です。 この資料はPyCon JP 2016で行った 「基礎から学ぶWebアプリケーションフレームワークの作り方」 の書き起こし資料です。 誤字等があれば、Issue or PRをお待ちしております。 はじめに¶ この資料では200行に満たないシンプルなWebフレームワークの作り方をボトムアップで解説します。 テンプレートエンジンとしてJinja2を使ったりもしますが、基本的にはPythonの標準ライブラリのみを使っています。 FlaskやDjango等を使ったWeb開発の経験があり、基本的なHTTPの知識があれば読み進められるんじゃないかなと思うのでぜひチャレンジしてみてください。 本資料を読み終えた方はBottleやDjango、筆者の公開している Kobin というフレームワークのコードを 読んでみたり、自分でWSGIフレームワークを実
dev.toと阿部寛のホームページどっちが速いですか？ - くうと徒然なるままに
dev.toと阿部寛のホームページどっちが速いですか？— あれからのぐりだけど (@_guri3) 2017年11月15日 という内容のツイートを見つけたので計測してみる。 ずっとパソコンに向かってて飽きてたので息抜きで。 dev.to というのは、 Qiita の海外版みたなやつです。一番の特徴はナビゲーションの速さ。 対抗するのは、 THE Traditional Web Site というたたずまいで有名？な 阿部寛のホームページ 計測 今回は、Google の PageSpeed Insights を利用していきます。 dev.to まずは、dev.to から 86/100 です！ 阿部 寛 のホームページ 92/100 です！ まとめ 伝統的ウェブサイトの方が早かった！
フロントエンドチェックリスト（日本語訳） - Qiita
GitHubで公開されているフロントエンドチェックリストというドキュメントが、網羅されている内容が幅広く便利そうだったので、日本語に翻訳しました。 日本語版は、以下のGitHubリポジトリにあります。GitHub側と自動的に連携するようにしておりますので、誤訳や誤りなどがあれば GitHub のプルリクエストまたは Issue で報告していただけると幸いです。 https://github.com/miya0001/Front-End-Checklist 日本語版への貢献方法 最終更新日時: 2017-11-19 03:50:47+09:00 (未翻訳) Front-End Checklist The Front-End Checklist is an exhaustive list of all elements you need to have / to test before lau
Webデベロッパのためのセキュリティ・チェックリスト | POSTD
安全で堅牢なWebアプリケーションをクラウドで開発するのは 非常に困難 です。それを簡単だと思っているような人は、例えばとんでもない頭脳をお持ちというなら別ですが、遠からず痛い目を見ることになるでしょう。 もし MVP（Minimal Viable Product：必要最低限の機能を備えた製品） のコンセプトを鵜呑みにして、有益かつ安全な製品を1ヶ月で作成できると考えているようなら、プロトタイプを立ち上げる前に一度考え直した方がいいと思います。以下に挙げたチェックリストをご覧いただければ、セキュリティに関するクリティカルな問題の多くをスキップしていることが分かるはずです。あるいは少なくとも、潜在的なユーザに対しては 誠実 であるように心がけ、製品が完全ではないこと、そしてセキュリティが不十分な製品を提供していることを伝えるようにしてください。 このチェックリストはシンプルなもので、決して完
まじな話をすると、N予備校のプログラミング入門コースやるのがオススメ。 ..
まじな話をすると、N予備校のプログラミング入門コースやるのがオススメ。 https://www.nnn.ed.nico 一日8時間勉強時間があるなら、だいたい一ヶ月で終わる内容。 月額1000円だけどしっかり勉強すれば一ヶ月の無料期間中に終わると思う。 もともとN高等学校のノンプログラマーの生徒をWebエンジニアとして就職させるために作られたカリキュラムで講師曰く去年はこれで二人エンジニア就職を決めたらしい。 内容も相当親切に説明していて、プログラミングで何か作るだけじゃなくて、就職に必要な環境構築やセキュリティまでみっちりやる。 http://qiita.com/sifue/items/7e7c7867b64ce9742aee#%E3%82%B3%E3%83%B3%E3%82%BB%E3%83%97%E3%83%88%E3%82%92%E3%82%82%E3%81%A8%E3%81%AB
翻訳：2017、私たちはこのような中国を生きる。 – 辺境通信
中国ではFacebookやTwitterを見ることができないということは、比較的良く知られている。政府が特定のサイトやサービスを見れないように命令するということは僕たちの感覚の外にあるから、とかく「怖い監視国家・社会主義だし」と思いがちである。しかし現地に降り立ち一定の時間をすごしてみると、生活上でそうした息苦しさを感じることはほぼない。 確かに外国のニュースではノーベル平和賞をとった某氏が病院から移送され結局亡くなったただの、政府に抗議した弁護士が拘束されて戻ってこないだの色々物騒なニュースを見ることはある。だがそれはあくまで（多くは別の言語で見る）メディアの中の世界で、わが身とは遠く離れた場所の出来事でしかない。 しかもそうした情報は、多くの場合は自分から探さないと出てこない。逆に、自分で検索するならばUFOもネッシーもイルミナティの陰謀もその実在の「証拠」を見つけることができるのが、
REST入門 基礎知識 - Qiita
REST入門 基礎知識 はじめに RESTサービスを開発するにあたって勉強したことをまとめました。RESTとはなんぞやというところについて書いていきます。実際の開発方法等については当記事では触れません。 RESTとは REST(REpresentational State Transfer)はWebサービスの設計モデルです。RESTなWebサービスは、そのサービスのURIにHTTPメソッドでアクセスすることでデータの送受信を行います。 例としてQiitaのREST APIを利用してみます。下記のURLにアクセスしてみてください。(ChromeかFirefoxでないと*.jsonファイルのダウンロードになる場合があります) https://qiita.com/api/v2/users/TakahiRoyte {}でくくられている文字が表示されたかと思います。これは JSON(JavaScri
［Slackbot大全］63種類の事例・ツールをまとめて紹介！ botを活用してSlackを便利に【2017夏】｜ハイクラス転職・求人情報サイト AMBI（アンビ）
［Slackbot大全］63種類の事例・ツールをまとめて紹介！ botを活用してSlackを便利に【2017夏】 Slackは、ChatOpsとの相性の良さから、エンジニアにも愛されるビジネスチャットツールです。本稿では、Slackを活用している28社1団体にアンケートを実施し、計63種類のbot事例・ツールをまとめて紹介します。 Slackは、エンジニアにも愛されるビジネスチャットツールです。ChatOps（チャットツールを活用してオペレーションの最適化・省力化を図ること）との相性の良さから、もはやSlackなしの業務は考えられない！ という方も少なくないでしょう。 Slackには、リマインドなどを実行するslackbotアカウントが最初からいるだけでなく、利用者自身がそれぞれの環境・業務内容に即したbotを自作でき、発言に自動応答してくれるものから業務の自動化まで、さまざまなbotをチ
PythonでWebスクレイピングする時の知見をまとめておく - Stimulator
- はじめに - 最近はWebスクレイピングにお熱である。 趣味の機械学習のデータセット集めに利用したり、自身のカードの情報や各アカウントの支払い状況をスクレイピングしてスプレッドシートで管理したりしている。 最近この手の記事は多くあるものの「～してみた」から抜けた記事が見当たらないので、大規模に処理する場合も含めた大きめの記事として知見をまとめておく。 追記 2018/03/05： 大きな内容なのでここに追記します。 github.com phantomJSについての記載が記事内でありますが、phantomJSのメンテナが止めたニュースが記憶に新しいですが、上記issueにて正式にこれ以上バージョンアップされないとの通達。 記事内でも推奨していますがheadless Chrome等を使う方が良さそうです。 - アジェンダ - 主に以下のような話をします。 - はじめに - - アジェンダ
CDN切り替え作業における、Web版メルカリの個人情報流出の原因につきまして - Mercari Engineering Blog
本日コーポレートサイトでお知らせした通り、Web版のメルカリにおいて一部のお客さまの個人情報が他者から閲覧できる状態になっていたことが判明しました。原因はすでに判明して修正が完了しております。また、個人情報を閲覧された可能性のあるお客さまには、メルカリ事務局より、メルカリ内の個別メッセージにてご連絡させていただきました。 お客さまの大切な個人情報をお預かりしているにも関わらず、このような事態に至り、深くお詫びを申し上げます。 本エントリでは技術的観点から詳細をお伝えさせていただきます。 2017年6月27日 CDNのキャッシュの動作について、CDNプロバイダと仕様について確認し検証を行いました。その結果一部記述に実際と異なる箇所があり、加筆修正いたしました。 概要 メルカリWeb版のコンテンツキャッシュをしているCDNのプロバイダ切り替えを行いました。 その際本来キャッシュされるべきでない
Webスクレイピングのノウハウを公開します | 東北ギーク
photo credit: the local eye sore : man scraping illegal billboard, castro, san francisco (2014) via photopin (license) こんにちは。リスペクトの木村です。 今回は「スクレイピング」についての話題をお送りします。 スクレイピングとは ウェブスクレイピング（Web scraping）とは、ウェブサイトから情報を抽出するコンピュータソフトウェア技術のこと。ウェブ・クローラー(Web crawler) あるいはウェブ・スパイダー(Web spider)とも呼ばれる。 ウェブスクレイピング – Wikipediaより 要するに、「APIを利用せずにWebページのHTMLデータを収集して、データを抽出したり整形する技術」の事を指します。 収集方法も様々で、最近ではkimonoのようなサ
OpenStackのアーキテクチャを理解しよう
OpenStackは、オープンソースで開発されているクラウド環境構築用のソフトウェア群です。クラウドの分類のうち、いわゆるIaaSと呼ばれる仮想マシンとストレージ、ネットワークといった、一番低いレイヤーのリソースを提供するクラウド環境が構築できます。もともとAWS（Amazon Web Services）を参考に開発が始まったこともあり、AWSのようなものを自分自身の環境でプライベートに構築できると考えるとよいでしょう。 OpenStackの国内導入事例 OpenStackはIaaS環境を構築するソフトウェア群ですが、国内での導入事例を見るとIaaSクラウドサービスを提供するために使っている例と、Webサービスを提供するインフラに採用しているパターンが多いようです。いくつかの事例を挙げてみます。 GMOインターネットのVPSサービス「ConoHa」 VPS（Virtual Private
Node.js を5分で大雑把に理解する - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 随時更新します。 対象の人 使ったことないけど、軽く理解はしておきたい人 本格的に勉強する前に、大まかな概要を知りたい人 特徴 サーバーサイドのJavaScript 非同期 (I/Oの処理結果を待たず処理を進める) ノンブロッキングI/O (I/Oの結果を待たないで処理をすすめる。I/O処理が終了したらコールバック関数を実行。) イベントドリブン (何かしらのキッカケで動き始める) シングルスレッド (メモリ消費が少ない、仕事切り替えが少ないので速い) JavaScript エンジンが Google の V8 で速い Node.jsで作
勤怠打刻機をRaspberry Pi 14台で本気で作ってみた - Speee DEVELOPER BLOG
こんにちは、プロジェクト推進室でエンジニアをやっている 山本 (id:bino98) です。 毎日のお勤め、お疲れ様でございます。皆さまが、日々の業務を行われる合間に 有給休暇を取得したり 遅刻の連絡をしたり 出張の申請を行ったり…。 様々な場面で自身の勤怠をその組織のやり方で管理されていると思います。弊社では、今年4月初頭から 社内で開発した新しい勤怠管理システム「 SpeeePORT 」による勤怠管理が始まりました。 弊社の新しい勤怠管理システム(以下、PORT)に関する詳しい記事は、ITproさまがこちらの記事にまとめてくださいましたので、ご覧頂けますと幸いです。 今回、PORTの ウリ の1つの 打刻機 について、まとめました。Raspberry Pi で打刻機を作りたいという、結構ニッチな要求を持つ方のお役にたてれればと思います。 Raspberry Piで打刻機を内製した経緯
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Basics_of_DNS_that_application_engineers_should_know - Speaker Deck
さくらインターネット創業日記
