{"id":195621,"date":"2015-02-11T09:45:05","date_gmt":"2015-02-11T16:45:05","guid":{"rendered":"http:\/\/css-tricks.com\/?p=195621"},"modified":"2015-02-11T09:45:05","modified_gmt":"2015-02-11T16:45:05","slug":"browsersync-2-0","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/browsersync-2-0\/","title":{"rendered":"BrowserSync 2.0"},"content":{"rendered":"

It was only a year and a half ago when Shane Osborne introduced BrowserSync here<\/a>. It does those things we really love as front end devs: style injection<\/a>, reloading when necessary, and running a server so you can test across multiple devices and see that stuff happen across all of them. But it did more: synced forms as-you-type, synced scroll position across devices, even followed links so as you navigated around the site all the devices would come with you.<\/p>\n

It’s great to see 2.0 launch with a UI for configuring it and some nice new features.<\/p>\n","protected":false},"excerpt":{"rendered":"

It was only a year and a half ago when Shane Osborne introduced BrowserSync here. It does those things we really love as front end devs: style injection, reloading when necessary, and running a server so you can test across multiple devices and see that stuff happen across all of them. But it did more: […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[17],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":154047,"url":"https:\/\/css-tricks.com\/cross-browser-css-injection\/","url_meta":{"origin":195621,"position":0},"title":"Cross Browser CSS Injection","date":"October 28, 2013","format":false,"excerpt":"The ability to inject newly-modified CSS on every file change (without reloading the page) is the type of workflow-enhancement that you never truly appreciate... until you lose it. This is exactly what happened to me recently. For at least the last 12 months I had been using Grunt and the\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":254853,"url":"https:\/\/css-tricks.com\/combine-webpack-gulp-4\/","url_meta":{"origin":195621,"position":1},"title":"Combine Webpack with Gulp 4","date":"May 15, 2017","format":false,"excerpt":"Webpack is so hot right now! Webpack is great when it comes to module bundling and working with frameworks like Vue or React, but it is a bit more awkward when handling static assets (like CSS). You might be more used to handling your static assets with something like Gulp,\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/05\/webpackgulp.png?fit=1200%2C759&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":207144,"url":"https:\/\/css-tricks.com\/gulp-for-beginners\/","url_meta":{"origin":195621,"position":2},"title":"Gulp for Beginners","date":"September 1, 2015","format":false,"excerpt":"Gulp is a tool that helps you out with several tasks when it comes to web development. It's often used to do front end tasks like: Spinning up a web server Reloading the browser automatically whenever a file is saved Using preprocessors like Sass or LESS Optimizing assets like CSS,\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":301432,"url":"https:\/\/css-tricks.com\/netnewswire-and-feedbin\/","url_meta":{"origin":195621,"position":3},"title":"NetNewsWire and Feedbin","date":"January 16, 2020","format":false,"excerpt":"NetNewsWire is one of the classic RSS apps, debuting in 2002. I was pretty stoked when it went 5.0 and was open-sourced in August 2019! You can snag it right here. (Sorry, Mac only.) It's super nice, is fast, and looks great. It has just the right features. But... I\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/netnewswire.png?fit=1200%2C826&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":237960,"url":"https:\/\/css-tricks.com\/why-npm-scripts\/","url_meta":{"origin":195621,"position":4},"title":"Why npm Scripts?","date":"February 12, 2016","format":false,"excerpt":"There has been a growing sentiment (for instance) that using node packages directly, with the command line interfaces they provide, is a good route to take. As opposed to abstracting the functionality away behind a task runner. Partly: you use npm anyway, npm provides scripting functionality, why not just use\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":253478,"url":"https:\/\/css-tricks.com\/fabrica-dev-kit\/","url_meta":{"origin":195621,"position":5},"title":"Fabrica Dev Kit","date":"April 10, 2017","format":false,"excerpt":"Fabrica Dev Kit is a toolkit for WordPress development. You... Clone a GitHub Repo Configure your WordPress project (settings, plugins, etc) through a `.yml` file Run a Ruby setup script which Downloads dev dependencies (like Gulp) through npm or yarn Builds a Docker container and volumes to run everything inside\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/195621"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=195621"}],"version-history":[{"count":1,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/195621\/revisions"}],"predecessor-version":[{"id":195623,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/195621\/revisions\/195623"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=195621"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=195621"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=195621"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}