2018年4月25日をもちまして、 『CodeIQ』のプログラミング腕試しサービス、年収確約スカウトサービスは、 ITエンジニアのための年収確約スカウトサービス『moffers by CodeIQ』https://moffers.jp/ へ一本化いたしました。 これまで多くのITエンジニアの方に『CodeIQ』をご利用いただきまして、 改めて心より深く御礼申し上げます。 また、エンジニアのためのWebマガジン「CodeIQ MAGAZINE」は、 リクナビNEXTジャーナル( https://next.rikunabi.com/journal/ )に一部の記事の移行を予定しております。 今後は『moffers by CodeIQ』にて、 ITエンジニアの皆様のより良い転職をサポートするために、より一層努めてまいりますので、 引き続きご愛顧のほど何卒よろしくお願い申し上げます。 また、Cod
ウェブサイト制作には煩雑な処理を自動化する「タスクランナー」や「ビルドシステム」というツールがあります。この記事では、タスクランナー「Gulp.jsガルプ」の導入手順を解説します。 導入は簡単で、本記事の手順では5分程度でセットアップできます。Gulpはコマンドラインで使うのが一般的ですが苦手な人でも安心して学べるよう、ビデオでも解説します。 この記事で学べること イマドキのGulpの導入手順 Gulp 5に対応した書き方 Sassサスの導入手順 GulpやSassの導入や使い方にはいろんな方法がありますが、この記事では現場で使われている方法を紹介します。Gulpの入門記事は他のサイトにもありますが、対象バージョンが古くて使えなかったりします。本記事は最新版に対応させているので、安心して読み進めてください。 ※この記事では、Node.js v18〜v20で動作検証をしています。 ※Gulp
WordBench仙台 2014年6月勉強会 「黒い画面も怖くない。WP-CLIの便利な使い方」のセッション資料
背景 Javascript で Web アプリを作ろうとすると、よくわからないことだらけで超混乱します。 npm と bower の違いは？ npm はサーバーサイド用、bower はクライアントサイド用らしいよ えっ、でもなんで bower のインストールに npm が必要なの？ サーバーサイドは Rails で書きたいから npm 要らないと思うんだけど・・・ ていうかサーバーサイドJSとか node.js って何？ よく見る browserify って何？ こういった疑問が沸き上がるのは、各ツールが生まれた文脈がよくわかっていないからです。いろいろ調べてやっとちょっとわかってきたのでメモします。間違いがあったらご指摘ください。 「CommonJS」誕生 - Javascript は汎用プログラミング言語へ その昔、Javascript 大好きおじさんは言いました。 Javascrip
PostCSSというnode.js製のツールがある。 PostCSSのGitHubでのStar数は4000を超え、海外のブログではPostCSSについての記事をよく目にするようになった。しかしまだ日本では盛り上がりを感じていないので、日本語のPostCSSの記事を書くことにした。 PostCSS PostCSSとは、JavaScriptで書いたプラグインでCSSを変換するためのツールだ。 PostCSS自体は、CSSパーサーとそのASTを操作するためのAPIのみを提供していて、ユーザーはPostCSSのプラグインを書くことでCSSを変換することができる。 僕もPostCSSを使って、以前ブログにも書いたAtCSSというCSSプリプロセッサーや、postcss-style-guideというスタイルガイドをMarkdownから自動生成するためのプラグインなどを書いたことがある。 PostCSS
はじめに 少し間が空いてしまいましたが、今回はクラウド上のIDE（統合開発環境）であるCloud9 IDEを使って、Node.jsアプリケーションの開発を行う方法について紹介します。前回紹介したHerokuとの連携機能およびGitを用いて、Cloud9 IDEとソースコードを相互にやり取りする方法を説明します。 Cloud9 IDEでは、統合開発環境では基本的なコード補完やシンタックスチェック、Git、Mercurialのバージョン管理ツールの利用だけでなく、SSH、FTPなどのCUIによる操作もサポートからチームによるチャットなどを使った共同での開発作業と、幅広く多機能な環境をブラウザから利用することができます。 Cloud9 IDEにサインアップ まず、Cloud9 IDEのサイトから、［Sign up］ボタンよりアカウントを登録しましょう。GitHubまたはBitbucketのアカ
Run JavaScript EverywhereNode.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts. Download Node.js (LTS)Download Node.js (LTS)Downloads Node.js v22.16.01 with long-term support. Node.js can also be installed via version managers.Want new features sooner? Get Node.js v24.1.01 instead. // server.mjs
No matter your role, or your automation goals, Ansible can help you connect teams and deliver efficiencies. Ansible is an open source IT automation engine that automates provisioning, configuration management, application deployment, orchestration, and many other IT processes. It is free to use, and the project benefits from the experience and intelligence of its thousands of contributors. Red Hat
こんにちは！スタッフのめぐみです。 今回は私が Web 制作の際に使用している gulp というビルドシステムの紹介をしたいと思います。 タイトルの通り gulp を試してみよう！ということで、用意したサンプルを使って実際に手を動かしながら記事を読み進めてみてください。 ※ この記事では sass (ver 3.1 以上)がすでにインストールされているものとして話を進めますので、ご留意下さい。 gulp とは gulp は Node.js をベースにした、 Sass のコンパイルや js ファイルの結合・圧縮などを自動化してくれるビルドシステム(ツール)です。同じようなものに Grunt があり、タスクの記述の仕方が違いますができることはほとんど同じです。gulp の場合、必要なタスクはgulpfile.jsに記述します。 ちなみに、 Node.js についての説明は割愛します。以下の記事
Time-saving synchronised browser testing. It’s wicked-fast and totally free. npm install -g browser-sync Get Started Your indispensable test assistant. With each web page, device and browser, testing time grows exponentially. From live reloads to URL pushing, form replication to click mirroring, Browsersync cuts out repetitive manual tasks. It’s like an extra pair of hands. Customise an array of s
It has been said that one should code as if the person maintaining the code is a violent psychopath who knows where you live. But why do we work with psychopaths? That question unfortunately cannot be answered in this presentation. However, we can shed some light on how to code for readability hopefully avoiding the problem altogether. Readable code is about a lot more than producing beautiful cod
１．gulpfile.js を分割して管理しよう gulp への依存度が高くなると、gulpfile.js の記述が増えどこに何の処理を入れたかわかりづらくなり管理が困難になります。 そこで今回はまず gulpfile.js を分割して管理する方法を導入し、今後追加するタスクを容易に管理できるようにします。 また gulpfile.js を別プロジェクトに流用できるよう、入力元た出力先などをオブジェクト化し一括管理できるようにします。 ２．画像を自動で最適化しよう 通信量の削減や表示速度向上のための画像最適化、TinyPNG (https://tinypng.com/) などで都度圧縮していませんか？ 今回は作業時間の削減ということが主テーマですので、画像の圧縮も自動化したいと思います。任意のフォルダに画像を保存すると、出力先のディレクトリに最適化画像を生成するという一連の流れを構築します
This is a book about JavaScript, programming, and the wonders of the digital. You can read it online here, or buy your own paperback copy (3rd edition). Written by Marijn Haverbeke. Licensed under a Creative Commons attribution-noncommercial license. All code in this book may also be considered licensed under an MIT license. Illustrations by various artists: Cover by Péchane Sumi-e. Chapter illust
連載目次 一昔前であれば、HTML／JavaScript／CSSを使用してWebアプリを作成する場合、（筆者の経験では）所定の位置にファイルを置くだけでした。最近はHTML／JavaScript／CSS関連の技術も複雑化／多様化し、いろいろなことを考慮しなければなりません。 例えばJavaScriptファイルの場合は、以下の作業を行うこともあるでしょう。 minify（圧縮）や結合 単体テストの実行 JSLint（構文チェック）の実行 さらに、CoffeeScriptやTypeScriptを使用している場合にはコンパイル（JavaScript変換）を行う必要もあります。 また、SCSS（Sass）やLESSなどのCSS拡張メタ言語を使用している場合にも、コンパイル（CSS変換）作業が必要です。 ファイルを修正してビルドするたびに、これらの作業をいちいち手作業で行っていては非常に面倒でしょう
CSSは非常に簡単な言語だ。セレクタとプロパティと値を宣言するだけである。だが、スパゲッティなコードにならずにメンテナンスしやすく、スケーラブルなCSSを書くことは非常に難しい。 そのため、あなたの書くスタイルシートは時とともに重く、汚いものになっていき、手の施しようがなくなる。そうなると、今度はそれを読み込むWebサイト・アプリに害をもたらすことになってしまう。 そう、Critical Rendering Pathの問題だ。レンダリングをブロックするのはなにもJavaScriptだけではない。CSSもレンダリングをブロックするので、我々はCSSに関しても細心の注意を払わなければならない。 しかし、CSSを書く人にその意識があるのだろうか、疑問だ。前述のとおり、CSSをただ書くこと自体は簡単なため、CSSという言語自体も軽んじられている気がする。 CSSを書くためには自分を厳しく律しなけれ
なんだか、Web制作の際に起こる様々な面倒くさいタスクを自動化してくれるGruntというツールがあるらしく、私の周りのWebデザイナーさんやコーダーさんがこぞって導入されておりました。 はじめは「へぇ…あちきは別に興味ないからいいでありんすよ」と指をくわえて傍観していたのですが、便利便利の声を聞くにつれやっぱり羨ましくなってきました。だから導入した。使った。良かった。 そんな訳で今回は、Grunt.jsの導入から簡単な使い方までを紹介したいと思います。私のような黒い画面に抵抗を持っている初心者の方でも導入できるよう、コピペさえ出来ればGruntが使えるようになる記事にしてあるつもりです。 なお、今回導入した私のPC環境はOS X 10.9.1です。Windowsでの導入手順は今更だけどやるgrunt入門編・インストールから基本的な使い方｜WEB Drawerをご覧下さい。 Gruntで何が
CSSを少し簡単に、かつ少し先を見据えて書いてみるのはどうだろう？ LESSやSassといったCSSプリプロセッサは確かに便利。「なんかCSSプリプロセッサって複雑そう…、こわい」という初学者の方も、「変数？（ぽかーん）」みたいな方でも、「Myth」ならなんとなくわかるかも。 Mythのいいところは普通のCSSをちょいと拡張して書けるところ。それも少し先を見据えた感じで。ベンダープリフィクスとかも必要であれば勝手に追加される。 「:root {}」の中に「var-hogehoge: 値」を入れておけば、その「var-」以降に指定した変数名「hogehoge」を「var(hogehoge)」で使い回せる。calc()やcolor()も使えるので、単純な四則演算だけじゃなくて色の計算なんかもオッケー。 これなら「やれextendだ、mixinsだ」と覚えなくてもいい。今書いてるCSSにちょっと
About Control | «前日 – 1時間前 – 1時間後 – 翌日» – 最新 – 現在地 Overlay | None – Temp – Hum – WV – IN – NO – NO2 – NOX OX – SO2 – CO – CH4 – NMHC – SPM – PM2.5 Air Data | 東京都環境局環境改善部大気保全課 Map Data | 国土数値情報（行政区域データ）国土交通省 Author | Cameron Beccario @cambecc, Facebook, はてな Source | github.com/cambecc/air Modules | node.js, D3.js, when.js Inspiration | HINT.FM wind map 免責事項 | 正確な情報を提供するためのものではありません
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く