Kanon - プログラミングコードを可視化
プログラミングは構造的です。そのため、構文解析して別な言語にしたり、ツリー構造に展開したりできます。それらの構造を見ることで、綺麗な設計になっているかどうかも分かりそうです。 そんな可能性を感じさせるのがKanonです。JavaScriptのコードを解析、ビジュアル化します。 Kanonの使い方 左側にコード、右上にクラスの構造、右下にメインスクリプトの実行が可視化されています。 処理を増やしたところ。 コードが複雑になると、可視化された構造も複雑化します。 Kanonを使うことでプログラミングコードを別な視点から見られるようになります。コードは自動的に更新されるので、自分のコードを貼り付けてみて、どんな構造になっているのか見てみるのも面白そうです。 KanonはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 prg-titech/Kanon: A l
【JavaScript SEO】サーバーサイドでレンダリングすべき要素: メインコンテンツ、構造化データ、titleタグ、hreflangほか
[レベル: 上級] DeepCrawl が主催したウェビナーで Google の Martin Splitt（マーティン・スプリット）氏が、JavaScript サイトの SEO に関するさまざまな質問に回答しました。 このなかで、サーバーサイドでレンダリングすべき要素、言い換えると、JavaScript を介してレンダリングさせるべきではない要素をスプリット氏は挙げました。 スプリット氏によると、SEO を考慮するのであれば、次の要素はサーバーサイドでレンダリングしてからクライアント（ユーザーと Googlebot）に配信したほうがいいとのことです。 メインコンテンツ 構造化データ title タグ meta description hreflang 日付に関する記述 メインコンテンツは、ページの評価において最も重要です。 現在の WRS（ウェブ レンダリング サービス）が、古い Chr
要チェックな10個の Node.js フレームワーク - Qiita
本記事は、10 Node.js Frameworks Worth Checking Out: Express, Loopback, Hapi, and Beyond の日本語訳です。 要チェックな10個のNode.js フレームワーク テクノロジーは急速に変化しているので、開発者たちは新しいテクノロジーを使用し、Web開発のニーズに合わせて、より便利なフレームワークを採用しています。Node.js は、アプリ開発にJavaScriptを使うのが好きな開発者達から、大いに注目されています。 開発者であるあなたは、クライアントサイドとサーバーサイドのスクリプト両方を同じ言語で管理できます。そしてこれは、Nodeの膨大な利用や採用をもたらしました。 Node.js フレームワークは、Web開発の市場で膨大な需要を獲得し続けており、2019年でも、より多くの機能や利点をもたらし続けています。現在の
React.js, Vue.jsが使えない状況でメンテナンス性の高いJavaScriptを書く3つのポイント - エムスリーテックブログ
エムスリー エンジニアの岩本です。 この記事は エムスリー Advent Calendar 2018 の23日目の記事です。 React.jsやVue.jsを使えれば、開発のベストプラクティスなどがあるので、メンテナンス性の高いプログラムはずいぶんと書きやすくなったと思います。本当に仮想DOMの功績は大きいですね。 しかし、世の中にはそういったライブラリを使うことができないプロジェクトもあるわけです。古すぎて、一部分だけ最新のソースコードにすることが憚られたり、サイズの問題でライブラリを入れることができなかったり。。。 その場合どのように書けばメンテナンス性の高いプログラムを書くことができるのでしょうか。そこでIE6時代からJavaScriptをもりもりと書いている私なりのベストプラクティスを紹介します。 そもそもなぜメンテナンス性の悪いコードとなってしまうのか jQueryではセレクタで
【追加開催】上級者お断り！ゼロから始めるフロント開発（HTML,CSS,JS）入門 - connpass
イベント概要 組込、インフラ、保守・運用の仕事をしているけど、Web開発をしてみたい・・・ 上流フェーズを担当しているけど、プログラムの仕事をしてみたい・・・ 今は勉強中であまり知識はないけど、Webプログラマーにあこがれている・・・ このように感じている人、いませんか？ 本イベントは、Webエンジニアへのスキルチェンジ、スキルアップ、キャリアチェンジを考えている方むけに フロントエンドエンジニアに必要な基本的な知識を座学と実技を通して理解いただく内容となっています。 弊社社員がサポートいたしますので、Webシステムの開発をしたことがない人はもちろん、 あまり業務経験が少ない方でも気軽に参加いただけます。 また、開発経験豊富な講師が、普段聞くことのできない、業務でおきた体験談、失敗談などを交え、 楽しく勉強会をおこないます。 ※PCの貸出をご希望の方は「イベントへのお問い合わせ」よりご相談
Web Creators MeetUp 新年！ビアバッシュLT会 #8 - connpass
お知らせ 【重要なお知らせ】iOSアプリの運用および提供を2024年6月3日(月)を以て終了いたします。詳細は お知らせをご覧ください。 お知らせ connpassではさらなる価値のあるデータを提供するため、イベントサーチAPIの提供方法の見直しを決定しました。2024年5月23日(木)より 「企業・法人」「コミュニティ及び個人」向けの2プランを提供開始いたします。ご利用にあたっては利用申請及び審査がございます。詳細はヘルプページをご確認ください。 1月 25 【増枠】Web Creators MeetUp 新年！ビアバッシュLT会 #8 主に交流を目的としたWebクリエイター（エンジニアもデザイナーも）が気軽に集えるLT会です。
初心者向け！WebRTCハンズオン #5 - connpass
お知らせ 【重要なお知らせ】iOSアプリの運用および提供を2024年6月3日(月)を以て終了いたします。詳細は お知らせをご覧ください。 お知らせ connpassではさらなる価値のあるデータを提供するため、イベントサーチAPIの提供方法の見直しを決定しました。2024年5月23日(木)より 「企業・法人」「コミュニティ及び個人」向けの2プランを提供開始いたします。ご利用にあたっては利用申請及び審査がございます。詳細はヘルプページをご確認ください。
最新のJavaScript技術を使ったウェブサイトを検索向けにする方法 #ChromeDevSummit | 海外SEO情報ブログ
[レベル: 上級] この記事では、11 月 12 〜 13 日に米サンフランシスコで開催された Chrome Dev Summit 2018 に参加した際のセッションをレポートします。 セッションテーマは、JavaScript を多用したサイトを検索で発見されやすくするためのベストプラクティスと注意点です。 セッションスピーカーは、Google チューリッヒの Martin Splitt（マーティン・スプリット）氏と Google シドニーの Tom Greenaway（トム・グリーンアウェイ）氏です。 最新の JavaScript 技術で構成されたウェブサイトを検索フレンドリーにするための秘訣をマーティンとトムの2人がどんなふうに解説したのかを一緒に見ていきましょう。 JavaScript コンテンツの処理プロセス 1. クロール ⇒ 2. レンダリング ⇒ 3. インデックス 静的な
新人にドヤ顔で説明できるか、今風フロントエンド開発ハンズオン(git/node.js/ES6/webpack4/babel7) - Qiita
新人にドヤ顔で説明できるか、今風フロントエンド開発ハンズオン(Git/Node.js/ES6/webpack4/Babel7)JavaScriptNode.jses6webpackbabel 概要 今風の手法でJavaScriptアプリを作ろうとすると色々ツールがあって便利な反面、複雑でわからないことがたくさんあります。 わからないことがあったら、それを放置せず、しっかり理解して大いに寄り道しつつブラウザで動作するJavaScriptアプリをゼロから作っていきます ブラウザ上で動作するフロントエンドアプリを作ったら、ライブラリ化してnpmモジュールとして公開します 対象読者＝今風のJavaScript開発の入門者、初心者 11年前からタイムトラベルしてきたひと ブラウザ用アプリを作りたいが今風の手法の初心者(jQueryだけでなんとか生きてきた人とか） Node.jsの環境をつかってフロン
極小WebアプリをURLに埋め込んで超ポータブルなWebアプリを作りたい！ - Qiita
やりたいこと データを変形・加工するスクリプトをURL上にホストをして、 ポータブルで永続的でブラウザで完結するWebアプリを作れるようにします！ Rubyはデータ加工に最適！ Rubyは豊富なメソッドが標準で用意されていて、特にArray, Enumerator, Stringなどよくデータを加工したいときに使えるメソッドがとても豊富です。 メソッドチェーンでつなげていけるところが、人の思考にあっていて、どんどんデータを変えていけるところがRubyの良さだと思います。 そのためデフォルトの言語はRubyです。JavaScriptもオプションで選べるようになってます。 そこで、 データ加工に便利なRubyで書いた小さいWebアプリをURL上にホストします！ URLにすべてのコードを載せてしまえば究極的にポータブルなWebアプリになるのではないかという発想です。Itty.bittyにインスパ
ブロックチェーンにアクセスできるウェブサイトを作ってみる
はじめに 前回の記事ではイーサリアムで動くフリマアプリのスマートコントラクトを作成しました．Remix（スマートコントラクトの総合開発環境）からフリマアプリを実行することは可能ですが，一般ユーザーには敷居が高いかもしれません．そこで今回は名簿を作成するコントラクトをテストネットワークに公開し，ウェブサイトからアクセスするところまでをご紹介したいと思います． この記事で作成するウェブサイトは以下で公開しています． https://yutaizumi.github.io/AddressSmartContract/address.html 使用するツールとライブラリ MetaMask MetaMaskはイーサリアム用のウォレットアプリで，GoogleChromeやFierFoxのアドオンとして提供されています．これを使うとイーサリアムの送金やコントラクトの実行が簡単にできます．インストール方法に
JavaScript で体感する関数型プログラミング | PLAID engineer blog
Ramda.jsの関数を例にしてJavaScriptによる関数型プログラミングの考え方を紹介します
PC・スマホからJavaScriptの開発環境を構築できるサービスを厳選してみた！ - paiza開発日誌
どうも、まさとらん（@0310lan）です！ 最近はJavaScriptの開発環境を提供してくれるWebサービスが増えており、なかにはスマホからでも気軽にプログラミングできるように最適化されているモノも少なくありません。 そこで今回は、PC・スマホのブラウザ（もしくはアプリ）から手軽にJavaScriptの開発環境を利用できるサービスを厳選してみましたのでご紹介しようと思います！ ちなみにスマホの場合はBluetoothキーボードを併用すると、さらに快適な環境が整えられますよ。 なお、JavaScriptはpaizaラーニングの「JavaScript入門編」（完全無料）で学ぶことができます。そちらも合わせてチェックしてみてください。 ■スマホでも気軽にJavaScriptプログラミングを楽しめるエディタ！ 【 Spck Editor 】 気軽にプログラミングを楽しめるという点では「Plun
これならすごく簡単！ページを高速に表示させるLazy Loadを実装できる超軽量ライブラリ -Lazyestload.js | コリス
最近はLazy Loadを採用しているサイトが増えていますね。 Lazy Loadとは、画像やiframeコンテンツなどが見えていない状態（ビューポート外）はロードさせずに、見えはじめた状態（ビューポート内）の時だけロードさせるようにして、ページの表示を速くするテクニックです。 そんなLazy Loadを外部ファイルとimg要素にclassを加えるだけで、簡単に実装できる超軽量JavaScriptライブラリを紹介します。 Lazyestload.js -GitHub Lazyestload.jsの特徴 Lazyestload.jsのデモ Lazyestload.jsの使い方 Lazyestload.jsの特徴 Lazy Loadを外部ファイルとimg要素にclassを加えるだけで実装。 画像はビューポート内にある時、およびスクロールが停止した時にロード。 ロード前の状態は、CSSで簡単にス
WebAssembly's post-MVP future: A cartoon skill tree - Mozilla Hacks - the Web developer blog
People have a misconception about WebAssembly. They think that the WebAssembly that landed in browsers back in 2017—which we called the minimum viable product (or MVP) of WebAssembly—is the final version of WebAssembly. I can understand where that misconception comes from. The WebAssembly community group is really committed to backwards compatibility. This means that the WebAssembly that you creat
古巣の侍エンジニア塾（株式会社侍）の炎上について思うこと【2018/10/23追記】 - INODEVLOG
現在 侍エンジニア塾が大炎上 していますね。 自分はもともと侍でお仕事させて頂いていたこともあり、中の人の知り合いも何人もいたりします…。 だからこそ、炎上及び その後の対応にブチ切れてしまった ので、ブログに経緯と心境、今後取ってほしい対応をまとめておきます。 正直、胸が苦しすぎて昨日から仕事どころじゃなかったよ…。 ほんとに…。 こんなにストレスで動悸が激しくなったの久々だよ…。 多分、侍の知り合いもこれ読むだろうけど、むしろ読んで反省しやがれください。 ひっさびさのブログ更新がこんなネタとは…。 引用元： 侍エンジニア塾マンツーマンコースのご案内 権利者： 株式会社侍 侍エンジニア塾の炎上の経緯 炎上の発端 【10/12 (金) 18:36】侍への指摘が入る 炎上後の経緯 【10/13 (土)】炎上を確認した為一旦該当のバナーを外す 【10/15 (月)】企業サイトのTOP下部に謝罪
PHPで動くファミコンエミュレータを作った
TL;DR PHPで動くファミコンエミュレータを作った php-terminal-nes-emulator画面描画は点字を使って文字出力コントローラは標準入力からfread() 経緯 2016年の2月にPHPで動くゲームボーイのエミュレータ、php-terminal-gameboy-emulator に衝撃を受けて、その実装の解説を勉強会やカンファレンスでトークしたりSoftware Design誌に書いたりしました。(*1) カンファレンスでのトークでは時間の都合もあって全体のごく一部しか話が出来ないのですが、Software Design誌では誌面をたっぷり頂いてCPU、メモリアクセス、画面表示とphp-terminal-gameboy-emulator のほぼ全域を解説出来たので満足し、その熱は落ち着いていました。 そんな中、9月に開催されたbuilderscon tokyo 201
Codomisu - Qrunch
**「もっと気軽にアウトプットできる」**を コンセプトにした **技術ブログサービス「Qrunch（クランチ）」**のβ版をリリースしました！ 6月頃から実装に取り掛かり、隙間時間を使いながらコツコツ開発してきたのですが、4ヵ月経った今、こうして無事リリースに辿り着けてほっとしています。 今回は、そのサービスの紹介と技術周りの話を軽くまとめてみます。 個人でWebサービスだったり、アプリ開発をしている人・したいと思っている人のモチベアップにでも繋がれば幸いです！ リリースしたサービス Qrunch（クランチ） - もっと気軽に技術ブログを書こう！ Qrunch専用のChrome拡張機能 - Qrunchをもっと身近に！ 先日行われた大幅リニューアルにより、QrunchのURLはqrunch.netに変更されました。 サービスTOP TOPページは「自分も参加したい！」と思わせるようなデザ
エンジニアのための、いますぐ使える文章校正テクニック - ICS MEDIA
ウェブ制作や開発の仕事で文章を扱う機会は多いはず。書き手は不自然に思っていない文章でも、読み手は違和感をもっていることがあります。文章校正テクニックを覚えるだけでおかしな表現は少なくなり、読みやすい文章を書けるようになります。 本記事では、ICS MEDIAで実践している文章校正の一例を紹介します。 レベル1、基本的な校正ルールを使う いろんな場面で使える基本的な文章校正テクニックから紹介します。 テクノロジー系の名詞は正しく記載しているか テクノロジー系の名詞を間違って使うと、「本当に技術に詳しいの？」と読者からの信頼度が下がります。名詞は大文字小文字、スペース有無含めて正確に記述しましょう。 Github → GitHub（Hは大文字） Javascript → JavaScript（Sは大文字） After Effect → After Effects（複数形の「s」を忘れてはいけな
Hyperappを理解する - Qiita
1. はじめに Hyperappでタスク管理アプリの開発をし、 ある程度理解する事ができたので、思いのままに語ります。 1-1. I love Hyperapp React,Reduxを愛しState管理以外は考えられない私。 2018年、Hyperappと出会いました。 なんというシンプルさでしょう。 まさに、この1KBのソースコードに出会うため 血と汗を流しながらシステムエンジニアを続けてきたと言っても過言ではありません。 React,Reduxの公式ページを頑張って読んでいた頃が懐かしい。 今はHyperappの1KBのソースを何度も読み返すのです。 是非Hyperappについて語り合いましょう。 1-2. 基本的な考え方を知っておく State管理が基本です。 先ず、State管理によるDOM更新を考えた天才に、改めて拍手を送りたい👏 おかげで本当に楽しくコーディングが出来るよう
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
