Codomisu - Qrunch
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? **「もっと気軽にアウトプットできる」**を コンセプトにした **技術ブログサービス「Qrunch（クランチ）」**のβ版をリリースしました！ 6月頃から実装に取り掛かり、隙間時間を使いながらコツコツ開発してきたのですが、4ヵ月経った今、こうして無事リリースに辿り着けてほっとしています。 今回は、そのサービスの紹介と技術周りの話を軽くまとめてみます。 個人でWebサービスだったり、アプリ開発をしている人・したいと思っている人のモチベアップにでも繋がれば幸いです！ リリースしたサービス Qrunch（クランチ） - もっと気軽に技術ブロ
依存パッケージを更新するサービス「Dependabot」で Dockerfile の更新をチェックする - kakakakakku blog
Dependabot は依存パッケージの更新を定期的にチェックし，更新があった場合にプルリクエストを作成してくれるサービスで，現時点で「Ruby, JavaScript, Python, PHP」など，多くのプログラミング言語がサポートされている．他にも「Go, .NET」などは BETA & ALPHA 版でサポートされている．依存パッケージの更新が重要なのはわかっていても，月に1回など，定期的なイベントとして実施しているチームも多いと思うので，Dependabot を使うメリットがある． dependabot.com Dependabot 以外だと Greenkeeper や Tachikoma.io を使っているチームもあるし，CircleCI などと組み合わせて独自実装で実現しているチームもある．あえて自動化はせず「チームメンバーの教育目的で手動で依存パッケージを更新する」というチ
一休.comレストランのスマートフォン検索ページがSPAになりました - 一休.com Developers Blog
一休.com レストランは今年の 7 月 18 日、スマートフォン向け検索ページのリニューアルを行いました。このエントリーでは、その中身について少し紹介させていただきます。 検索ページの課題 一休.com レストランではスマートフォン向け検索ページに対して「遅い」という課題意識がありました。これは技術面で少しブレイクダウンすると; パーソナライズドを含む複雑な処理を行っているため、サーバーサイド処理が重い。 UI 上無駄な遅延処理を行っているため、クライアントサイドの描画が遅い。 というサーバー側とクライアント側両方の課題がありました。クライアントサイドの「無駄な遅延処理」というのは; 検索結果取得が REST API 化されているにも関わず、再検索の度にページリロードを行い、サーバーサイドの描画からやり直している。 という実装に問題がありました。下図がリニューアル前のページ描画の様子です
Nuxt.jsで作った静的サイトのビルド/テスト/デプロイを自動化して、毎朝10時に更新する。
AWSとCircleCIの力を借りて、Nuxt.jsで作った静的サイトの運用をできるかぎり自動化した話です。 3ヶ月ほど前からCIのサービスを使うようになり、入門記事はたくさんあって助かったのですが、具体的にどんな感じで使っているかの情報が少なかったので記事にしました。 もしかしたら、CIの使い方が間違っているかもしれないので、そのときは優しくコメントをいただけたら嬉しいです。 できあがった流れ 毎朝10時にLambdaを起こしてデータの更新を行い、静的ファイルを再生成してからデプロイする流れになっています。 対象のサイト ざっくりAWSという、AWSの料金を日本円でざっくり計算できるサイトです。 Nuxt.jsで作成したものを、静的サイトとして生成して、AWSのS3にホスティングしています。 計算に必要なAWSの価格や為替は、毎朝10時に取得したものをS3にJSONで保存し、そのJSON
ASCII.jp：フロントエンドエンジニアの本気を見てみる？さくらが挑戦した初めてのブラウザゲーム開発｜中の人が語るさくらインターネット
2018年6月29日、さくらインターネットは「さくらの勉強会 フロントエンドナイト」を開催した。「ブラウザゲーム開発の初心者」だったというさくらのクラウドのメンバーがブラウザゲーム「さくらのINFRA WARS」の開発にチャレンジした試行錯誤をこってり語った。 エイプリルフールネタでブラウザゲームをイチから作ってみる 「さくらのINFRA WARS」は2018年のエイプリルフールネタとして、さくらのクラウドのチームが開発したブラウザゲーム。「インフラエンジニア育成型サーバー防衛シミュレーション」を謳うさくらのINFRA WARSは、プレイヤーがインフラエンジニアになり、襲いかかるサイバー攻撃から身を挺してサーバーを守り、お客様に安定したサービスを提供するという内容で、いかにもさくららしいゲーム。年齢層の高いユーザーが喜びそうなドットの荒いレトロゲームらしい見た目もゲームの大きな売りと言える
off-the-main-thread の時代 - mizchi's blog
off-the-main-thread は今フロントエンドで熱いテーマの一つです。日本語圏では今ひとつ話題になってないので紹介しておきます。 off-the-main-thread の概念の大まかな概要については、Chrome 開発者の nhiroki さんの日本語の記事があるので、こちらを参照してください。 nhiroki.jp speakerdeck.com ここまでのあらすじ 従来のウェブブラウザーでは、一つの画面につき一つ割り当てられる、UI スレッドと呼ばれる名前空間で様々な処理を行ってきました。DOMセマンティクスの評価, CSS による rendering / painting、JSのScripting…。もちろん裏側ではブラウザが様々なバックグラウンドサービスに処理を委譲し、スレッドで実行され、その非同期な結果を受け取っているわけですが、少なくともUIスレッドで走るJSから
半年間、自分を騙しながらアウトプットに積極的になってみた - valid,invalid
この半年間はソフトウェアエンジニアとしてのアウトプットに積極的になるよう意識的に行動してみたので振り返ってみます。長くなってしまったので3行でまとめるとこんな感じです。 成長と刺激を求めて OSS contribution や登壇やイベント運営を頑張ってみた 成長したかはわからないが、知り合いが増えたりして刺激を受けることが多くなった これからも続けていくが持続可能なペースにしたい この半年間、登壇とかイベント運営とかに積極的になるよう"試験運用-セルフコントロール-"してきたのでそろそろ振り返ってまとめたい— 広島の粗大ゴミ (@ohbarye) 2018年9月27日 だいたい2018年上半期の話ですが一部期間外の話もあります。 なぜアウトプットを増やすか 唐突ですが、現職では日常の業務を漫然と続けるだけで成長するフェーズは終わったのかなぁと思っています。新しく何ができるか、何をすべきか
Vue.jsで構築された、デスクトップでもスマホでも快適に操作できるスライドショーのフレームワーク -Eagle.js | コリス
Vue.jsで構築されたスライドショーのフレームワークを紹介します。 デスクトップ・スマホに完全対応、プレゼンテーションモードも備えており、キーボード・マウス・タッチ操作をサポートしている快適なスライドショーを実装できます。 Vue.jsで構築された、軽快に動作するスライドショーのフレームワーク。 アニメーション、テーマ、インタラクティブウィジェットをサポート。 プレゼンテーション全体でコンポーネント、スライド、スタイルを再利用可能。 ビルトインプレゼンターモードとさまざまな便利なウィジェット。 すべてのAPIが公開されており、カスタマイズ可能。 ライセンスはISC Licenseで、商用でも無料で利用できます。 Eagle.jsのデモ Eagle.jsを使用したさまざまなスライドショーを楽しめます。 まずは、スライドやフェードなどのアニメーションが仕込まれたスライドショーから。 Eagl
Announcing TypeScript 3.1 | TypeScript
Today we’re announcing the release of TypeScript 3.1!If you haven’t heard of TypeScript, it’s a language that builds on top of modern JavaScript and adds static type-checking. When you write TypeScript code, you can use a tool like the TypeScript compiler to remove type-specific constructs, and rewrite any newer ECMAScript code to something that older browsers & runtimes can understand. Additional
あの「Vue.js」が、悶々としていた新人エンジニア時代の僕を助けてくれたという話 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアのライダーです。 ひと昔前は「フロントエンドは技術の進歩や流行が早い」といわれていましたが、それもずいぶんと落ち着いてきた気がしています（一方で、最近デザインツールめっちゃ出てない……？）。 突然ですが、今回はタイトルにもある通り「Vue.js」に助けてもらったという話をしたいと思います。 なんとなく悶々としていた 入社1年目の当時、僕はしばらく悶々としていました。その理由をあえて言語化すると、「なんか流行りに乗れてなさそう 」という、とてもとても表面的なものでした。主にフロントエンド技術周りの話です。 LIGのWeb事業部は主軸に受託のWeb制作を置き、事業を展開しています。 作るものは主にWebサイトです。コーポレートサイトやメディアサイト、キャンペーンサイトなどなど……、その種類は多岐に渡りますが、ほとんどがWordPressサイト。コーディング時
レガシーシステムの大規模リプレイスで分かった「Vue.jsでSPAならNuxt.jsが有力」 #エンジニアHub - エンジニアHub｜若手Webエンジニアのキャリアを考える！
レガシーシステムの大規模リプレイスで分かった「Vue.jsでSPAならNuxt.jsが有力」 10年以上前に作られたレガシーシステムをVue.jsで大規模リプレイスしたエムスリーに、導入して感じたVue.jsのメリットや、活用法を伺いました。 JavaScript（JS）のフレームワークは、何を使うのがベストなのでしょうか。ここ3年ほどで数々のJSフレームワークが誕生していますが、React、Angularという二大巨塔を超えるものはなかなか現れていません。 そんな状況の中、GitHubではReactを上回るスター数を誇っている1のが、2014年のリリース後、着実に進化を重ね、日本でも採用事例が増えてきているVue.jsです。「JavaScript ベスト・オブ・ザ・イヤー」に2016年、2017年と2年連続で選ばれているほか、Ruby on Rails（Rails）やLaravel とい
フロントエンド開発に迷ったら「Vue.js入門」を読もう - JavaScript関連の書籍とかまとめてみた - Lean Baseball
先日のPyCon JP 2018の野球の話にてVue.js（Nuxt.js）の話をした結果、技術評論社様のご厚意により、一冊頂戴いたしました. Vue.js入門 基礎から実践アプリケーション開発まで 作者: 川口和也,喜多啓介,野田陽平,手島拓也,片山真也出版社/メーカー: 技術評論社発売日: 2018/09/22メディア: 単行本（ソフトカバー）この商品を含むブログを見る 正に欲しかった類の本で大変助かりました、ホントありがとうございます！ 結論から言うと、 Vue.js（またはNuxt.js）で開発するなら一冊持っておけ！（ただし他のFWにもいい本がある） っていうくらい素晴らしい書籍でした、自信を持ってオススメができるレベルです. このエントリーでは、 「 Vue.js入門 基礎から実践アプリケーション開発まで」の簡単な感想 私がフロントエンド開発するまでにやってきたJavaScri
JavaScriptでクリーンアーキテクチャはどうすればいいのか(DataStore編)
DataStoreとは? DBやExternal InterfacesへのGateway(の様子) DBやExternal interfacesとはつまり、データの入手先・保存先のこと Gateway? どういうことだってばよ? gateway.q(from:"勤務実績")と唱えるだけで、必要な結果が得られる 勤務実績がどのDBにあってもよい DBMS、WebSite、ファイル、、、全てOK! データへのアクセス手段をドライバとして提供する必要がありますな 複数のデータソースを一個に 役割名はGateway(入出力どちらもあるから) DBの足りない値を補完(表示順序値とか)できる RDBのview張るようなもん? COMPANY.tables = { "勤務実績": "labor_cost", "所属部門": "departmentList", "従業員": "users" } COMPA
Google Apps ScriptsでTypescriptが超簡単に使えるようになった！ - アクトインディ開発者ブログ
morishitaです。 Cloud Functions と並ぶ(?)Google のサーバレスな JavaScript 実行環境といえば Google Apps Scripts（GAS）です。 GAS ってあの Excel で言う VB スクリプト環境のようなものでしょう？ と思ったあなた！ このエントリでその認識が変わると思います。 以前は使いやすいとは言い難かったGASですが、最近は使いやすくなってきました。 といっても、GAS 自体がアップデートされたのではなく周辺ツールが整備が進み開発・運用しやすい状況が整ってきたからです。 そして、なんと最近Typescript でとても実装しやすくなったので、それをご紹介したいと思います。 google/clasp 以前の GAS は Web エディタ上でしか実装できず、コードを VCS で管理することもままならない状況でしたが、Google
GoogleのエキスパートがChromeのフリーズを直すまでの奮闘記
「24コアもあるCPUを積んでいるハイエンドPCであるにもかかわらずGmailを使っている際にChromeがフリーズしてしまった」という現象に遭遇したブルース・ドーソンさんが、その原因を発見するまでの取り組みをブログに書き残しています。なお、ドーソンさんはGoogleでChromeを開発しているエキスパート開発者です。 24-core CPU and I can’t type an email (part one) | Random ASCII https://randomascii.wordpress.com/2018/08/16/24-core-cpu-and-i-cant-type-an-email-part-one/ ある日の朝、ドーソンさんは極めて日常的な「メールを書く」という作業をGmailで行っていたところ、入力した文字が遅れて表示されるなどの怪しい挙動を見せた後、突然Gma
OSS を収益化して持続的開発を実現する方法をまとめた - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? OSS は無償で公開されていても、当然ながらその開発には必ず誰かの時間が費やされています。 バグを修正するのも機能を追加するのも大抵はボランティアで、ほとんどの開発者は兼業で OSS に関わっているはずです。 もしも開発者がフルタイムで OSS に関わることができれば、OSS をより早く成長させられ、開発者としても 楽しい 時間が増やせるはずです。でもそのためには、OSS 活動そのものから収益を生み出すことが必要です。 最近は OSS のサステナビリティ に興味があって、いろいろと調べた+貢献できそうなものを作ってみたので、簡単な Pr
コードが非常に見やすくて、使いやすい！Visual Studio Codeでお勧めのテーマファイル -Code Blue
目に優しいブルーの背景に、コードは明るいカラーで非常に見やすいVisual Studio Codeのテーマファイルを紹介します。一般的な言語はすべてサポートされており、HTML, CSS, JavaScriptをはじめ、Markdownも見やすいテーマです。 Code Blue Code Blue -GitHub Visual Studio Codeのテーマ: Code Blue Code Blueのインストール、テーマの変更方法 テーマをもっといろいろ見てみたい人には、先日の記事もお勧めします。 Visual Studio Codeで見やすいテーマファイルのまとめ Visual Studio Codeのテーマ: Code Blue 各言語でどのように見えるかチェックしてみましょう。 画像は縮小していますが、コードが見やすいのが分かると思います。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Lazy Loading Images with Vue.js Directives and Intersection Observer | CSS-Tricks
GitHub - victorqribeiro/imgToAscii: A JavaScript implementation of a image to Ascii code
Node.jsとJSが合併の意向を共同発表――JavaScriptコミュニティーの統合を図る | TechCrunch Japan
