【追加開催】上級者お断り！ゼロから始めるフロント開発（HTML,CSS,JS）入門 - connpass
イベント概要 組込、インフラ、保守・運用の仕事をしているけど、Web開発をしてみたい・・・ 上流フェーズを担当しているけど、プログラムの仕事をしてみたい・・・ 今は勉強中であまり知識はないけど、Webプログラマーにあこがれている・・・ このように感じている人、いませんか？ 本イベントは、Webエンジニアへのスキルチェンジ、スキルアップ、キャリアチェンジを考えている方むけに フロントエンドエンジニアに必要な基本的な知識を座学と実技を通して理解いただく内容となっています。 弊社社員がサポートいたしますので、Webシステムの開発をしたことがない人はもちろん、 あまり業務経験が少ない方でも気軽に参加いただけます。 また、開発経験豊富な講師が、普段聞くことのできない、業務でおきた体験談、失敗談などを交え、 楽しく勉強会をおこないます。 ※PCの貸出をご希望の方は「イベントへのお問い合わせ」よりご相談
極小WebアプリをURLに埋め込んで超ポータブルなWebアプリを作りたい！ - Qiita
やりたいこと データを変形・加工するスクリプトをURL上にホストをして、 ポータブルで永続的でブラウザで完結するWebアプリを作れるようにします！ Rubyはデータ加工に最適！ Rubyは豊富なメソッドが標準で用意されていて、特にArray, Enumerator, Stringなどよくデータを加工したいときに使えるメソッドがとても豊富です。 メソッドチェーンでつなげていけるところが、人の思考にあっていて、どんどんデータを変えていけるところがRubyの良さだと思います。 そのためデフォルトの言語はRubyです。JavaScriptもオプションで選べるようになってます。 そこで、 データ加工に便利なRubyで書いた小さいWebアプリをURL上にホストします！ URLにすべてのコードを載せてしまえば究極的にポータブルなWebアプリになるのではないかという発想です。Itty.bittyにインスパ
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で簡単にス
Codomisu - Qrunch
**「もっと気軽にアウトプットできる」**を コンセプトにした **技術ブログサービス「Qrunch（クランチ）」**のβ版をリリースしました！ 6月頃から実装に取り掛かり、隙間時間を使いながらコツコツ開発してきたのですが、4ヵ月経った今、こうして無事リリースに辿り着けてほっとしています。 今回は、そのサービスの紹介と技術周りの話を軽くまとめてみます。 個人でWebサービスだったり、アプリ開発をしている人・したいと思っている人のモチベアップにでも繋がれば幸いです！ リリースしたサービス Qrunch（クランチ） - もっと気軽に技術ブログを書こう！ Qrunch専用のChrome拡張機能 - Qrunchをもっと身近に！ 先日行われた大幅リニューアルにより、QrunchのURLはqrunch.netに変更されました。 サービスTOP TOPページは「自分も参加したい！」と思わせるようなデザ
CSSやJavaScriptなどの技術を競い合うコード共有サイト・「Codier」
CodierはCSSやJavaScript、HTMLのコード技術を競い合うコード共有コミュニティサイトです。基本的にはjsdo.itやcodepenのようなコード共有サイト同様、その場で書いて実行すると結果が表示、というものですが、違う点は決められたテーマに沿って書くというルールが仕様になっている点です。テーマもユーザーが決めるみたいで、掲示板のスレを作る感覚でテーマを作成、ルールを記述し、それに沿って他ユーザーがコードを書く、というもの。例えばCSSだけで背景パターンを作ろう、といった具合です。Codepenでたびたび行われているコードチャレンジを仕様に含めた感じでしょうか。なかなか面白い試みだなぁと思います。もっとユーザーに認知されれば盛り上がるかもしれませんね。 Codier
自分流の静的ウェブ開発環境 2018年版 - Qiita
出来上がったもの(2018年9月) ソースコード この記事は半起半眠みたいな状態で書いたので、文章が壊滅している可能性がありますがご了承ください。 dependencies yarn add -D parcel-bundler babel-core babel-preset-env css-mqpacker eslint eslint-config-precure husky lint-staged node-sass node-sass-package-importer parcel-bundler parcel-plugin-imagemin parcel-plugin-inlinesvg postcss postcss-short postcss-sorting pug stylelint stylelint-config-recommended-scss stylelint-scs
Vue CLI 3.0 が来ました！ — Vue.js
Aug 11, 2018 このブログはこちらの翻訳ブログです。 過去数ヶ月にわたり、私たちは Vue アプリケーション用の標準ビルドツールチェーン、次世代の Vue CLI について懸命に取り組んできました。 今日私たちは Vue CLI 3.0 のリリースとそれに付随する全てのエキサイティングな機能を発表することにわくわくしています。 豊富なビルトイン機能Vue CLI 3 は以前のバージョンとは全く別物です。書換えのゴールは以下の 2 つです： モダンなフロントエンドツール、特に複数のツールを混在させる場合の構築疲れを軽減する； どんな Vue アプリのデフォルトにもなるよう、可能な限りツールチェインにベストプラクティスを組込む 核として、 Vue CLI は webpack 4 の上に構築された事前設定済みのビルド設定を提供します。開発者が必要とする構成の量を最小限に抑えることを目指
【保存版】半年以内にエンジニアになりたい人が読んだ方がいい新卒研修資料まとめ - プログラミングとデザイン、スタートアップの話
エンジニアを目指して今プログラミングを勉強している人向けに、開発に関してより知識を深められる新人研修スライドをまとめました。 Progateやプログラミングスクールだけでは学べない内容ばかりなので、新人エンジニアの人は目を通しておくといいです。 各企業で新人研修で実際に使われた資料なので、どんなことが開発の現場では求められるのかということが掴めます。 ここにある内容を100%理解することは難しいですが、少なからずインターンや就職をする時に役立つはずです(わからない箇所は本などを読んで補足しましょう)。 ▶プログラミングを効率良く勉強したい人はこちらの記事 もオススメ 全員共通で読むべきスライド Cookpad★ この資料で学べること リクルートテクノロジーズ★ この資料で学べること Git/コードレビュー GMOペパボ この資料で学べること GMOペパボ この資料で学べること GMOペパボ
Flexbox — The Animated Tutorial
Complete CSS flex tutorial on Hashnode. Ultimate CSS grid tutorial on Hashnode. Higher-order functions .map, .filter & .reduce on Hashnode. You can follow me on Twitter to get tutorials, JavaScript tips, etc. To get a good idea of how flex works try flex layout editor on this page. If a picture is worth a thousand words — how many more animation? Flex cannot be efficiently & fully explained by tex
Here's the thing about "unused CSS" tools | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. There are a lot of tools that aim to help you remove “unused CSS” from your project. Never a week goes by that I don’t see a tool for this being shared or promoted. It must strike some kind of perfect chord for some developers. I care about performance, and I know that reduc
7 Performance Tips for Jank-free JavaScript Animations — SitePoint
The role of web animation has evolved from mere decorative fluff to serving concrete purposes in the context of user experience — such as providing visual feedback as users interact with your app, directing users’ attention to fulfill your app’s goals, offering visual cues that help users make sense of your app’s interface, and so on. To ensure web animation is up to such crucial tasks, it’s impor
Mixed-Nuts モダンなWebサイト制作環境を爆速で構築する - Qiita
始めはただSassをビルドしたかった... 困ったこと、やりたかったこと sassをビルドする記事はあるけど...compass?grunt?gulp?webpack? Windows/Mac/Linux でも動く環境を作りたい。 JavaScriptもビルドしたい。 一つのファイルにまとめたい。 JavaScriptもES6を書きたい。 SourceMapを出力したい。 ヘッダーやフッター、メニューなどの共通化したい。全部のファイルを修正したくない。 ファイルが変更されたら... SassやJavaScriptは自動でビルドしたい。 ブラウザもファイル変更を検知してリロードさせたい。 ブラウザのキャッシュが残らないようバージョニング対策したい。 クリーンなHTML/CSSを書きたい。 ブラウザ特有のベンダープレフィックスは自動で付与したい。 使っていないスタイルは除去したい。 本番用のフ
100 Tiny CSS Tools & Apps for Web Designers – Speckyboy
Each of these free web-based tools and apps have been built by web designers for web designers. They all offer a time-saving solution to some of those monotonous or even complex CSS tasks you may need to perform from time to time. Without needing to install anything, all you have to do is bookmark, and save them for that day when required. From assessing your website’s accessibility to generating
CSSコーダーにとっての2018年のコーディング事情。アンケート結果から分析するイマドキのウェブ制作 - ICS MEDIA
CSSコーダーにとっての2018年のコーディング事情。アンケート結果から分析するイマドキのウェブ制作 ウェブ業界の当たり前だと思っていることでも、同業他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか・・・ この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。 連載第4回目となる本記事ではウェブ業界の「CSSコーダーにとっての2018年のコーディング事情」と題してアンケート結果を紹介します。アンケートは筆者のTwitterから実施していたものです。 CSSのベンダープレフィックスは今も付けてますか？ ブラウザのサポートが拡大し、多くのCSSプロパティでベンダープレフィックスの記載が不要になってきました。みなさんは今もベンダープレフィックスを書いているのでしょうか？ 309票の回答があり「ごく一部のものに付けてる」が38%、「なるべく付けて
1行のコードでモバイルブラウザに開発者ツールを搭載できるJavaScriptライブラリ「Eruda」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、スマホのモバイルブラウザに本格的な開発者ツールを組み込むことができるJavaScriptライブラリをご紹介します！ 「コンソール」機能を使ったデバッグやエラーログの確認、「ネットワーク」機能で通信状態を確認したり、「リソース」機能でCookieデータを確認するなどなど…、開発する上で便利な機能が満載です。 スマホ1つあれば開発者ツールが利用できるので、ぜひみなさんも試してみて下さい！ 【 Eruda 】 ■「Eruda」の使い方 それでは、「Eruda」を利用して開発者ツールを使うための準備作業から始めましょう！ 準備といってもやることは簡単で、「Eruda」のライブラリファイルをインストールするだけです。 Node.jsの開発環境を持っている人であれば、npmから以下のようにインストールできます。 npm install eruda
こっそり改変を見逃さない! いざという時に役立つ"魚拓"サービス5選
Webページの内容を証拠として残したい場合に役立つのが、いわゆる"魚拓"サービスだ。クローラが自動巡回するのではなく、利用者がURLを入力することでWebサイトのコピーをオンラインに残せるこれらのサービスは、オンラインでの共有が容易なため、改変などの行為を見逃さないためのチェックツールとして重宝する。 魚拓サービスの必要性や適法性についてはさまざまな見解があるが、修正履歴を残さずに記事を大きく改変したり、短期間で記事ごと削除するメディアは少なくない。また、Webサービスの利用規約の変更であったり、個人レベルでも、誹謗中傷発言を削除して存在自体がなかったようにふるまうユーザは後を絶たないだけに、それらに対して少なからぬ抑止力となっていることは間違いのないところだ。 こうした魚拓サービスは、日本における元祖と言える「ウェブ魚拓」以外にもさまざまなサービスが存在しており、最近ではTwitter専
プログラミングが便利に！2018年に取り入れたいオススメのタスクランナー5選
JavaScriptをはじめとしたブラウザサイドのWebプログラミングを総称して「フロントエンドプログラミング」と呼びます。そんなフロントエンド周りの環境は昨今多様化しており、様々なツールが乱立しているため、使いこなすのは至難の技です。 そこで2009年頃から登場したのがタスクランナーです。タスクランナーとはWebサイト構築に必要な処理をタスクとして自動化してくれるプログラムで、とても便利です。 タスクランナーという言葉自体は聞いたことがある方もいるかもしれませんが、どんなものなのか、そもそも何なのかというのを、ここで改めて整理してみましょう。今回は2018年こそ取り入れたいおすすめタスクランナー5選をご紹介します。 タスクランナーとは タスクランナーとは、先にも触れたとおり、Web構築に必要な処理を自動で行ってくれるプログラムのことです。 近年のWeb技術は非常に高度化・広範化しており、
spa_performance_beginning
Eureka EngineeringLearn about Eureka’s engineering efforts, product developments and more.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webサイト開発スピードをサポートするモダンなCSSフレームワーク・「BuddyCSS」
