Bubble sort is a sequential sort algorithm. It sorts by comparing neighbouring elements and swaps them if they are out of order. It just occured to me why it is called bubble sort and how cleverly it was named. Consider the following bubble sort implementation in Python. We pass this algorithm an unsorted list. For each index position in the list we compare the element at that position to the element that comes after it. If the element before is greater than the element after then we swap them. When bubble sort reaches the largest element in the list that element will be pushed forwards again and again until it hits the end. On the next iteration the second largest element will be pushed to the back, and so on. So why is it called bubble sort? Air bubbles that are more buoyant than surrounding water rise to the top. Similarly, list elements with greater value than their surrounding elements “bubble” to the end of the list. How interesting!

Why it’s called bubble sort.

https://i.ytimg.com/vi/ArGh6FurR0Q/maxresdefault.jpg is a popular presentation service used by procrastinating teens and adults alike who haven’t learned how to use powerpoint. It breaks away from the boring slide to slide style and gives some flair to a presentation. While I have never used this service I noticed they had a bounty program and decided to look into it. Prezi bug I found this exploit a couple months ago when I began penetration testing, so my only hope at the time was spamming the url with some characters and seeing what the program gave me. I began with control characters like %0A and %0D and got some peculiar results; with a string like “helloWorld%0A” the new line would be successfuly parsed in the DOM: helloWorld%0A The Almighty After a few more tries I was unable to gain anything from this, since Prezi successfully encodes quotation marks and other XSS characters. After one more refresh though, to the delight of my skiddie knowledge, I was presented with the Almighty of debug pages. Top of debug page This was the result of the “Debug=True” flag accidentally being set on a development server exposed to production. After this section there was a dump of 718 environmental server variables. Beginning of environmental variables These variables included a lot, but most that were highly sensitive were censored due to Django’s built-in debug code: HIDDEN_SETTINGS = re.compile(‘API|TOKEN|KEY|SECRET|PASS|SIGNATURE’, flags=re.IGNORECASE) CLEANSED_SUBSTITUTE = ‘********************’ The then was the responsibility of the server admin to name all sensitive variables with one of those in the “HIDDEN_SETTINGS” variable (only as a last resort, turning debug off in servers exposed to prod is the first line of defense). After triggering this error once, I was not able to trigger it again with the same string. I later found out this was because only one of their servers had the debug flag on, making it hard to reproduce. security He is risen At this point I was ready to report the issue but I decided to try the other control character ‘%0D’ and see what happend. This time I found the Almighty debug page’s Son The control character doesn’t show up in the request URL for some unknown reason. Since this was in another part of the site a different error was triggered and different info presented. This then dumped 313 url regex routes for their Django app. Most were properly configured to not allow unauthenticated viewing, but a more sophisticated actor could likely have made something of these. He is risen, indeed At this point I reported the vulnerability to Prezi through email and continued looking into the information that was given in these variable dumps. An interesting variable combination that was not masked by Django was GOOGLE_ANALYTICS_USER_EMAIL and GOOGLE_ANALYTICS_USER_PASS (which should have been masked). I reported this to Prezi and they verified this could have resulted in take over of that gmail account and the associated analytics account, but it was not in use anymore so they retired the account. Prezi quickly discovered that they had just one server with a debug flag on and it was a development server accidentally exposed to prod, which is why this was not easily reproducible. They reconfigured that server and resolved the issue. Resolution Timeline 4/27/16 12:03 AM CDT: Issue reported to Prezi over email 6:45 AM CDT: Confirmation by Prezi of email receipt 5/6/16 8:42 AM CDT: Issue confirmed fixed and $1000 bounty awarded At the time this was my first experience reporting to a bug bounty program and it was very enjoyable, I would like to thank Prezi for their professionalism and speedy responses. If you are interested make sure to check out https://bugbounty.prezi.com/

Google

Prezi: 1031 variables

TL;DR: IoT has a lot of , but these guys are legit. Try them and you will fall in love.¹ BS You do (1). They do the rest. *** Update: resin.io sent swag! See Update below. *** No, I’m not talking about . I’m talking about the IoT . the Java resin resin.io makes it trivial to deploy an application to a fleet of devices, including Pi, Arduino and even the rather beefy Intel NUC. They already , and new devices are constantly being supported. Resin.io support over a dozen device families On the web, cloud-based deployment has come a long way with tools like (ease-of-use), ( with CloudFormation extensions), (security) and (one URL per deploy). Heroku AWS ElasticBeanStalk unlimited power drie.co now Now imagine all of the above, but with physical flipping hardware. That’s . resin.io Kicking ass and taking names Baller product It. Just. Works. Burn your SD card with their nifty tool.² Etcher 2. Pop SD card into your device 3. Turn on device (and connect it to the interwebs) 4. See device on web dashboard resin.io 5. Deploy your software ` via a `git push Software updates are easy, fleet-wide, and lightning fast (see pro-tips).³ Most things can be done via their web dashboard. For power users, everything is available via API, CLI and . SDK Now don’t get me wrong, all this didn’t happen over night. Pre-Etcher, burning the SD card from an ISO was a little cumbersome. There’s also the occasional annoyance, like getting at your logs past the 100 or so lines that are displayed via the dashboard (see pro-tips). Overall though, they have spent the past few years relentlessly focused on their users, and it shows. Fanatical support Have an issue with custom linux kernel header compilation? Their engineers will work with you to immediately support the use-case (until it’s done, and it was gnarly). Then they’ll add the issue to the backlog for a perma-fix (which you can see!, see transparency below). Then they’ll keep you updated. The things we brought-up have always had a tendency to show-up in within a few hours, or at most the next day. It’s no surprise that we’ve little cause to contact support anymore. the docs Honestly, it’s gotten to the point where we to because it’s so well done and their support is too good to feel like we’re squandering it. want RTFM Update — 2016-10-07 In keeping with their tradition of fanatical support, we received a care package today (from Athens, Greece)! Send more swag (T-shirts)! Transparency Everything but the web dashboard is open source. Nuff said. Their entire issue backlog is there for anyone to see and comment on. If that’s not transparency, I don’t know what is.⁴ It’s tech, so unsurprisingly the company is exceedingly white, and exceedingly male; but, even that’s transparent on . :-p the team page Conclusion If you were… waiting to try → Don’t. resin.io thinking I’m ashamed of my unrepentant fanboyery → Nope. resin.io wondering why I keep saying resin.io → . Here BTW, if folks want to do a conf/meetup, lets make it happen. I’ve been pestering and Marcus about this for sometime now. Ronald Do comment below! Pro tips Faster deploy: Since it’s all docker-based, you can use your own image, pre-compiled on a docker registry if you’ve a large dependency. For example, . we did this with OpenCV3 Logs: Pipe script output to a file, or try to use a . low level tool Image size: Use Alpine for tiny images [ ]. blog Footnotes [1] I am unaffiliated with . My team and I have been using on a daily basis for the past two years. It just keeps getting better. I have never taken compensation (update: except some swag…thanks ). I was never asked/prompted to write this article. I simply love their product. resin.io resin.io resin.io [2] OMG, in action. # electron BobbySqueal [3] In their blue/green deploys, compiles everything , pushes the update and only then restarts the container with the new code. Simple idea, but so powerful in practice. resin.io [4] They closed their series B a few months ago [ ]. I will be out for blood if the VCs ruin them. news Seriously, show some love! resin.io

Amazon

Funding

Heroku

Intel

YouTube

I’m a resin.io fanboy, and you should be too

Thoughts to prevent us from embarking on an endless journey A design artwork representing the stereotype of the perfect city of the future Discussions are a fundamental part of , they are a necessary friction to increase scalability. A few patterns can emerge from those discussions that allow us to spot problems early when those problems can have an impact on the quality of the outcome. One of them is the . software development Proper Solution The is a common expression in software development. It can come in many forms such as "the best solution", "doing the right way", "making it better" or "improving it". All of them share the same fundamental: Proper Solution Just because one believes to have the best answer, that doesn't mean that it is the best answer In most software projects, an intuitive analysis of a problem is necessary because the more acceptable answer lies in achieving the best outcome among many variables (business requirements, human resources, code complexity, technical debt, etc.). The main issue is that "best" or "proper" is hard to measure and depends on each specific case. Just as , the "proper solution" can be subjective or inaccurate when concluded by a single person because it relies on the current knowledge and state of mind of that person. When working as a team, however, the chances of coming up with subjective and inaccurate answers are lower, although they are still restricted to the level of knowledge of the members of that team. Besides, two individuals of the same team can come up with a solution that looks the same for the core of the current issue but is , for better or worse. legibility different for edge cases The reason why it's very hard (either as an individual or as a team) to come up with a proper solution for a problem is that the human knowledge in all areas is too vast. Even if we could hold the current knowledge of all mankind in our pockets, there would be still many things to discover. The only way to really come up with a proper solution is to know everything, including what is unknown, and use that as an attempt to craft the best possible and measurable outcome. The only way to really come up with the proper solution is to know everything, including what is unknown, and use that as an attempt to craft the best possible and measurable outcome Unfortunately, being able to measure something in this industry is a challenge on its own. Each specific circumstance is dynamic. Variables change often and we can't effectively predict the outcome using efficient models like the scientific method, for example. Knowing everything (including what is unknown) is a Utopia. It's reasonable to conclude that the Proper Solution is a fallacy. It's impossible to be achieved. If we're aware that the Proper Solution is impossible to be achieved, we can at least try to get as closer as possible to it given the current knowledge or circumstances of an individual or team. Even if we can't measure a proper solution that will be the same for all situations, we can still experiment something to see if it works in our context. If it works, that doesn't mean it will work for all cases, but at least that means it works for the business requirements, human resources, code complexity or technical debt we have right now. There's no such thing as the "Proper Solution", there's only the best solution we are able to come up given the current knowledge and circumstances The code is already legacy at the moment it reaches the master branch, the decision is already made at the moment it goes to production. The only thing we can do is improve our own capabilities to make it better the next time. Reaching to the Proper Solution is a , that doesn't mean we should stop using the term, just that it shouldn't stop us from getting closer and closer to it everyday, in a journey of continuous improvement. If we do like that, we will eventually reach a state where we will find ourselves solving problems faster and better from what we did a long time ago. myth However, if we don't feel that we are improving every day, then that means that we are not getting even closer. And that, my friend, is a much bigger problem. Thanks for reading. If you have some feedback, reach out to me on , or . Twitter Facebook Github

Facebook

Twitter

How To Destroy The Myth Of The Proper Solution

So I decided to code my first bot the other day. I was looking to learn the most basic concepts of how a server communicates with Slack to create the bot experience, while hopefully creating something useful while I’m at it. Slack This is how was born. I hacked on the project for a few hours during one evening and the result was surprisingly useful IMHO. redibot is basically a go application that communicates with on one hand (this is the API for real time communication within Slack. As you can imagine, this communication is websockets-based) and redis on the other hand (using the awesome ). redibot Slack RTM API redigo package Initially I was looking to replicate the redis-cli experience of running from within Slack. The idea was to make it easier for the team to work with redis by using Slack instead of having to use redis-cli on the side. redis commands While I was at it, a couple of interesting things happened. It turns out that Slack’s collaborative nature works pretty well when integrated with a DB-platform like redis. Often times you may find channels where the team discusses a day-to-day operation which requires access to data. For example, on a certain channel, you may have the QA person asking something about data from yesterday. This will be followed by a response from one or more of the engineers on the team, and then perhaps the data scientist would step in providing a query to be ran. This all becomes a lot more comfortable when used directly from Slack. Everyone is exposed to the sequence of the redis commands used to produce the story which the data tells us. The data itself is of course right there as well. I found this to be very useful. Pub-sub using redis with Slack can change the way you use notifications on Slack forever Well, perhaps that’s being a bit being over dramatic, but with redibot, since you can publish and subscribe to an arbitrary redis channel directly from Slack, you no longer need any other notification mechanism. All of your servers which have access to publish to redis can now push notifications directly into Slack, without having to go through web hooks. This is especially useful if you already have lots of backends working with redis. They now have a simple way of reporting stuff to Slack without significant code changes. Contribute! redibot is and it would be cool to have this nice little project become something more serious. open source

Slack

redibot: Bring redis into the Conversation!

A big project in Android with several modules also has several Gradle files that need to be configured, and that´s a tedious task. Something that is usually done is adding dependencies to each module, in this post it will be explained how to control all modules dependencies using just a single Gradle file. Our goal is transforming this file into this one Dependencies File In order to get this transformation done, first create a file to control all the project dependencies. Create a file called inside root projet, and specify all the library versions that will be used. dependencies.gradle Once it is done, let´s create the dependencies definition maps. In order to make the file as much organized as possible, three maps will be defined: one for the Android libraries, another one for third party libraries and the last one for testing libraries. This is how the file should look like Now each module needs a list to be created containing all dependencies needed respectively. As an example, having a module called app that will use AppCompat, Dagger, RxJava and RxAndroid following list is defined. Each object from the list contains a map defining the dependency and a configuration for it. In this example “compile” and “apt” configurations are used but there are much more such as “provided”, “testCompile”, “androidTestCompile”, etc… Now open app module´s gradle file and use the following code. How does this works? (◔_◔)? Usually adding a dependency inside dependencies block looks like the following. compile 'com.google.code.gson:gson:2.7' DependencyHandle object add method it´s being directly called. Let´s take a look to the add method. ( configurationName, dependencyNotation) add String Object Adds a dependency to the given configuration. This method takes as first parameter the configuration name (compile, testCompile, androidTestCompile…) and as second parameter the dependency itself. Dependency may be defined the regular way as a String variable. 'com.google.code.gson:gson:2.7' If using last Gradle versions (the way Android Studio does) it may be defined as a map. [group: ‘com.google.code.gson’, name: ‘gson’, version: '2.7'] Going back with the code… appDependencies list created before is being iterated, each iteration adds a dependency and its configuration. To represent current element in the iteration with Groovy use ‘ variable. it’ This process should be repeated in each module´s file, this way anytime a new dependency is needed just add it to the corresponding list inside de dependencies file. This is how all dependencies will be controlled with just one file. Notice this file will be reusable in other Android projects. build.gradle Dependencies between modules This process may be applied to add dependencies between modules. To do so, inside all modules should be specified first. For example app, data and domain modules. dependencies.gradle If app module will be using domain module, the dependency should be added the following way: Options If any additional options are needed such as excluding modules or using transitive, the regular way to do this was: androidTestCompile ('com.android.support.test🏃0.5') {exclude module: 'support-annotations'} First thing to be done, is adding into the dependency an extra key-value to represent options. Let´s see this with an example: Now, inside app module´s build.gradle file needs to be modified and change the add method so it adds a closure as an extra parameter in order to add options. ( configurationName, dependencyNotation, configureClosure) add String Object Closure Adds a dependency to the given configuration, and configures the dependency using the given closure. The build.gradle file should look like this: Plugins With this process is also possible to manage the plugins we use en each module and control all of them from dependencies.gradle file, let´s see an example in which this file May be substituted by this one Just create a list with the plugins that will be used by a module inside file. dependencies.gradle Call dependencies.gradle The way all this process would work, is calling dependencies.gradle file from build.gradle file located in the root project. apply from: 'dependencies.gradle' Check this from a GitHub repository. example Disadvantages Not everything in this process is beautiful, this way of adding an managing dependencies makes Android Studio incapable of notify when a library is out-to-date. In order to solve this, you can mix both ways of adding and managing dependencies and using the regular way to manage Android libraries so it is notified when any library is out-to-date.

Oracle

Android — How to add Gradle dependencies using ‘foreach’

You want to build the front end for a simple web app and next thing you know you’re worrying about React, Redux, Thunk, Babel, ES6, Flow, Browserify, BrowserSync, Gulp, SASS, Radium, Karma, Jasmine and Nightwatch.js (for example). Smarter people than I have complained at about this, and so I will not. great length Instead, having recently struggled with this problem myself, I would like to teach you how not to build a shed. How not to build a shed Disclaimer: I have never built a shed When building a shed, you do not need large amounts of scaffolding. You do not need a crane (2017 edition or otherwise). You don’t even need a modern slick delivery pipeline that will automatically ship in your raw materials as you need them with the shiniest modern cool trucks. In fact, these things are not just overkill, they will actually get in the way. You’ll be knee-deep in your crane’s instruction manual long after you could have already finished building your little shed. The same applies to building with JS. Those who are starting out, aren’t building rockets or skyscrapers; we’re building sheds. And so the question is, how much scaffolding do you need for that? It can be tempting to err on the side of caution and just include all the things. Scaffolding generators (e.g. Yeoman) make it really easy for us to do this from day one, however this is often unhelpful*. The result is often a bloated project which is difficult to get started on. In my experience having too much stuff in a project is more destructive than not having enough. *As much as I love them, I’d suggest holding off on scaffolding generators until you have a good idea about what you need. Add your scaffolding as you need it Try and start building your shed with the absolute minimum tooling. You’ll make quick progress and the shed will probably fall over, but that’s OK. This gives you time to get to know the you’re using and help you understand what you need to do to stop it falling over in future. Then, add your extra tooling as you need it. Rinse, repeat. tools For example, it can be difficult to know if/when to include flux (redux or otherwise). To quote , one of the early React guys: Pete Hunt You’ll know when you need Flux. If you aren’t sure if you need it, you don’t need it And, in response to that, , creator of Redux: Dan Abramov I would like to amend this: don’t use Redux until you have problems with vanilla React. I think both guys appreciate that, especially for beginners, more harm can be done than good by just using it for the sake of it. The universe makes it easy to plug in new tools and switch out parts of your stack. Use that to your advantage! You don’t need to buy into a monolithic opinionated methodology. JavaScript For example, not a fan of TypeScript, Browserify or inline styling? No worries, take something else for a spin. Useful tip #1: Be mindful of what problems have already been solved When trendy developers namedrop the latest nounJS, ask why it’s needed and make a note of it. You may well find it useful in future. Even if you don’t start out by using redux, it is useful to know what problem it solves. That way when you hit that problem you don’t reinvent the wheel (or give up trying). Useful tip #2: Reference project templates and starter kits When adding scaffolding as you need it, you don’t want to spend to much time manually configuring your infrastructure. If you find your wheels are spinning, reference some of the for your stack. Then shamelessly steal from them. These are made by some clever guys, who might help you learn some best practices in the process. many awesome template Wrapping it up Check out Pete Hunt’s awesome guide ( ) on how to get to grips with React and friends, in an iterative manner. Crucially: here “Only move to the next step if you have a problem that needs to be solved.” HN discussion here: https://news.ycombinator.com/item?id=12677640 is how hackers start their afternoons. We’re a part of the family. We are now and happy to opportunities. Hacker Noon @AMI accepting submissions discuss advertising &sponsorship To learn more, , , or simply, read our about page like/message us on Facebook tweet/DM @HackerNoon. If you enjoyed this story, we recommend reading our and . Until next time, don’t take the realities of the world for granted! latest tech stories trending tech stories

Flow

JavaScript in 2017: How much scaffolding do you need?

….very few people. Probably nobody. Last year was my . I streamed pretty much everything. I even at a live streaming company. But as time went on, this realization hit me: “This isn’t super fun all the time. People really don’t (and shouldn’t) care about my daily life.” At least not the people who would watch me on Meerkat. livestreaming life got a job Let me say this though — I am to all those who watched, supported, commented, liked & retweeted last year. Whether it was an early morning coding session, a Product Hunt review or a 24 hour meerathon, you were there, you were (mostly) nice and you were helpful. I appreciate every single one of you. SO GRATEFUL Being LIVE is not a natural state of being for most people. Mobile live streaming in the broadcaster & audience (one-to-many) paradigm is simply not sustainable as a standalone business or platform. As a feature to an existing network, it makes sense (but barely). I spent many months analyzing data for Meerkat; the users were as ephemeral as the streams they created. Thinking about why, leads to one very important question. Why are you streaming? 1) You’re famous and trying to “connect” with your fans This one is easy. You go to with the platform that has your biggest audience built in. You want the best integration with that platform. Your live streams are now just another form of content that goes into your presence on that platform. 2) You’re trying to get famous Sorry, nobody is going to get famous livestreaming. You’re going to go where there’s a real valuable replay capability and easy native sharability. But your content is going to be geared not towards live interactivity that LIVE is good for, because that doesn’t replay well. You’re basically just live-recording your youtube uploads. You’ll realize that this is a lot of work and a lot lower quality… so you’ll stop and focus on post-production. The argument can be made here about how YouTubers, Viners, Snapchatters etc… become famous, so why won’t live streamers? The answer in my opinion, is all about the medium. Discoverability and sharability of live HAPPENING NOW moments is just not feasible for mass consumption. It is exactly the inherent asynchronous & distributed consumption of those other platforms that can lead people to become famous. LIVE doesn’t have this, and realistically, I believe never can. 3) You’re trying to get paid Again, super easy — who is PAYING broadcasters? The answer was NEVER Meerkat. This is something I’m super proud of. Live streams are a part of a package a brand can buy, in addition to other social posts, mentions etc... Not standalone, you have to have a presence elsewhere. There’s also YouNow, for (primarily) younger streamers. When fans can directly support broadcasters, there is a direct incentive to stream and a barometer for what your audience thinks is valuable content. 4) You’re looking for “community” I do believe that there was a genuine closeness of broadcasters and watchers in the very early days of Meerkat. But I don’t know that many people showed up (as streamers or watchers) to be a part of some newfound community. Streaming about your interests can certainly help you attract like-minded people, and community can form… But is live streaming the right vehicle for this? Is it not better suited as an extension of an existing community of friends/strangers? 5) You’re into marketing (self-promotion) This is the big one. The one I personally dislike the most. People who hop from platform to platform hocking their “services” and trying to become (be thought of as) experts. They espouse “rules” and “wisdom” and it’s pretty awful. Just because you were there first, does NOT make you an expert. 6) Teleportation Streams This is where most streams are heading, and where livestreaming has always flourished. It’s teleportation. It’s streaming a conference, an event, a one-off thing that gives the watcher a feeling like they’re there, but is limited on the interactivity and spontaneity that made the early days of Meerkat fun. Brands will continue to see value from this, and it’s a great way for the #5 people to “prove” their livestreaming prowess. 7) Livestreaming is fun This is the one that got me. It was a ton of fun. But the emphasis is on “was” — it gets real old, real fast. BUT even from the beginning I always asked why people were watching. These people are the hardest to retain: if fun relies on viewership, then streamers have to have an audience, but why should people watch this average joe? It’s really a chicken-and-egg problem and the people won’t come back to stream (or watch) again. How does one turn entertaining voyeurism into long term value? Be together, but apart. Live video has this amazing potential to bring people together. But it doesn’t and cannot start with “I want to talk to anybody” — in order to build a comfortable, understandable medium, it must begin with “I want to talk to the people I know.” The movement away from being LIVE may seem small, but it’s monumental. There’s something else — a shift from “me” to “we” as in, not just me alone on screen… but we are together, video of equal importance for all in the conversation. The “Me” to “We” transition is both imperative and counterintuitive in the transformation from a public to private medium. Before anyone compares to Skype, or Hangouts, or Oovoo or anything that’s been around for years… Use the product. Please. It’s a drastically different experience that makes a conversation a fluid experience. Blurry lines between beginning and ending… Like at a party, you can walk up to someone, say hey and walk away… there’s no commitment, there’s no formality to it. It’s not a meeting, it’s a conversation. Houseparty But you work there I do! It’s true. is a foundation for a new type of social interaction, built on top of concepts in the real world that we experience every day. For me, transitioning away from Meerkat was extremely tough at the beginning. But as we saw the usage on Houseparty explode… it was just a no-brainer. RIP Meerkat, but welcome to the Party. Houseparty Like this? Show it with the 💚 below. Share it all over the place, I won’t mind. Also, you can on twitter. follow me

Super

Livestreaming is destined to fail.

Setting up a comfortable dev environment for an application may be sometimes a complicated task. Many issues should be considered, mainly: Angular Copy HTML files Concatenate, annotate and minimize .js files Minimize and copy CSS files Copy images and fonts Inject dependencies from a package manager (particularly bower) Fortunately, solves all of the above mentioned tasks and more. I won’t be covering all the capabilities a developer can achieve with and it’s powerful plugins, but anyone with no previous gulp background can use this article to set up his first development environment. gulp.js gulp So,with no further delay, let’s get started! First steps Now, let us create a new project folder and define our project’s architecture. I usually use to go in for folders for scripts(with subfolders for angular directives, services and controllers), stylesheets, views (HTML files, maybe divided into relevant folders for each application feature — depends on the scale of a project), images and fonts, with an file at the document root. Basically, the structure looks like this: index.html Folder tree structure for a simple angular app Here we are. From this point we need to start understanding how gulp works. Go on and install it with npm . $ npm install gulp Create a gulpfile.js file in the document root of your application. Let’s start with a basic task — copy all html files from ‘views’ folder to our ‘dist’ folder (which is going to be the root folder of our production-ready (well, harshly said) application version), while preserving the file/folder structure. var gulp = require('gulp'); // import the gulp module itself gulp.task('copy-html-files', function () {var stream =  gulp.src('./app/views/**/*.html') .pipe(gulp.dest('./dist/views/')); return stream;}); // stream source // copy to dist/views Then you just run $ gulp copy-html-files in your terminal. What gulp does here? It just takes all .html files from the app/views folder and copy-pastes them to the dist directory, while creating folders with similar structure as it was before. Let’s now dive into some more complicated tasks. Introducing gulp-useref Say we want to take all our .css files, minify and concatenate them into a single file. We are going to use for concatenation and sourcing, for minification and for conditional statements. minify-css is pretty simple, you just call it on a stream with pipe. gulp-if is not hard too: it just takes a string argument as a condition (to filter the files that meet this particular condition) and executes a task if the condition is true. gulp-useref, on the contrary, has a pretty convenient and (to be honest) awesome usage: it allows to inject dependent files into your html files and tell useref what to take into a stream for concatenation. Let’s take a look at a sample from index.html file at our root directory: gulp-useref gulp-minify-css gulp-if only <link rel="stylesheet" href="styles/custom-css-file.css"><link rel="stylesheet" href="styles/some-plugin-css-file.css"> The comments that begin and end this section just tell gulp-useref that the linked files are going to be taken into one stream, concatenated and copy-pasted to dist/styles/main.css file. Here’s the gulpfile.js code for this action: useref = require('gulp-useref'); minifyCss = require('gulp-minify-css'); gulpif = require('gulp-if'); var var var gulp.task('css-files', () { stream = gulp.src('./app/index.html').pipe(useref()) .pipe(gulpif('*.css', minifyCss())) .pipe(gulpif('*.css', gulp.dest('./dist'))); stream;}); function var //take a streem from index.html comment // if .css file, minify // copy to dist return This will create a main.css file inside dist/styles, including a minified version of all your css files between the comments tag. Not only css: injecting dependencies from a package manager You can use useref not only for managing custom files, but injecting dependencies from a package manager (npm, bower…). I personally prefer and will cover an example on it here. bower Let’s assume we are going to need and for our project. Go on and install it with bower: angular jQuery $ bower install angular$ bower install jquery bower will create a bower_components folder inside your document root. Now we are going to use to inject these dependencies into our index.html file and concatenate/uglify them into a single vendor.js file. We will use and . wiredep ngAnnotate uglify $ npm install gulp-uglify$ npm install wiredep$npm install gulp-ng-annotate Now, in our index.html file:   // concatenate to vendor.js // tells wiredep to inject all bower dependencies  And create a task for bower files: wiredep = require('wiredep').stream; uglify = require('gulp-uglify'); ngAnnotate = require('gulp-ng-annotate'); var var var gulp.task('bower-files', () { stream = gulp.src('./app/index.html').pipe(wiredep({directory: 'bower_components' })).pipe(useref()).pipe(gulpif('*.js', ngAnnotate())) .pipe(gulpif('*.js', uglify())) .pipe(gulpif('*.js', gulp.dest('./dist'))); stream;}); function var //inject dependencies // ng-annotate if .js // uglify if .js // paste to dist return And run $ gulp bower-files So, that’s all! Our bower dependencies are successfully included into a single vendor.js file and compressed. Too many tasks ‘So, when I am going to deploy my project, I have to run all this tasks one by one?’ — may be a beginner’s obvious question. Of course you don’t. You will just use . It allows you to run several tasks on a single command from terminal. gulp-run-sequence $ npm install gulp-run-sequence Implement a sequence in your gulpfile.js: runSequence = require('run-sequence'); var /* some other plugins go here */ /* define our tasks here */ gulp.task('build', (callback) {runSequence('css-files','bower-files','copy-html-files',/* other tasks maybe */callback);}); function Now run $ gulp build This will execute the tasks passed to runSequence as strings. run-sequence executes tasks meaning that they will start (almost) at the same time and be executed in parallel. Thus, if you have tasks that may depend on other tasks to be completed, they may cause unexpected behavior when being run in a sequence. To avoid this, you should return the stream from the task function. Just like this: Note an important thing: asynchronously, gulp.task('some-task', function(){var stream = gulp.src('some-source') return stream; }); // save the stream/* do some stuff here */ // return the stream so task can be run // in queue This will help you avoid any unpleasant issues with run-sequence. Remove them all! Sometimes you will probably need to remove the contents of your dist folder. In your normal development lifecycle you’ll have to do that any time you make a change — just before you start copying your files again! (see next section) is what you’re after. gulp-clean $ npm install gulp-clean Now define a simple task: var clean require('gulp-clean'); = gulp.task('clean', function () {var stream =  gulp.src('./dist', {read**:** false}).pipe(clean());return stream}); This will safely remove everything from your dist folder. From the official documentation: Option read:false prevents gulp from reading the contents of the file and makes this task a lot faster. If you need the file and its contents after cleaning in the same stream, do not set the read option to false. Automation? ‘So I have to run gulp tasks every time I make a change in my project files?’, may be another obvious beginner question. And no, you have not to. Actually, you SHOULD NOT. solves the problem. Go on and install it: gulp-watch $ npm install gulp-watch Setting up the task is as easy as anything else in gulp: gulp.task('watch', () {gulp.watch('./app/**/**/*.*', () {runSequence('task1', 'task2', ...);});}); function function This will re-execute any commands you define in the run-sequence every time you make changes in your files. This is an example of how dist folder may look after calling gulp. As you can see, the folder structure is preserved, but the .css and .js files have been concatenated. A look on the document-folder tree after gulp Some tips You probably would be tempted to create tasks for every deployment feature, run them in sequence and put a watcher. But beware! On a large-scale project this may sometimes take from 10 to 15 seconds, and will really slow down your development. For this I prefer to create some kind of ‘mini’ version of my tasks (just basic copy pasting and/or may be concatenation and dependency injection) with a gulp-watch, and a production version, which is slow, minifies just everything and does not turn on a watcher. This will allow you to both avoid slowing down your work and to have capability of creating a cool, tiny, production-ready version of your development environment. Concatenating and minifying a lot of files every time a change is made is time-consuming. Summary Never do any kind of work with your bare hands, if it can be automated. gulp.js is a great tool for that, extremely widely used, easy and convenient. Feel interested? Here is a link to my own version of gulpfile, which I use every day, on github: github.com Armenvardanyan95/gulpfile.js

HackerNoon Tech Stories Archive October 6th, 2016

Why it’s called bubble sort.

@ManBearPigCode
ManBearPig

Prezi: 1031 variables

@jakereynolds
Jake Reynolds

I’m a resin.io fanboy, and you should be too

@rmharrison
Ryan M Harrison

How To Destroy The Myth Of The Proper Solution

@fagnerbrack
Fagner Brack

redibot: Bring redis into the Conversation!

@_orcaman
Or Hiltch

Android — How to add Gradle dependencies using ‘foreach’

@develodroid
Chema Rubio

JavaScript in 2017: How much scaffolding do you need?

@Haakathon
Alex Haak

Livestreaming is destined to fail.

@jsneedles
jsneedles

Building Angular development environment with Gulp

@Armandotrue
Armen Vardanyan

HackerNoon Tech Stories Archive October 6th, 2016

@ManBearPigCodeManBearPig

@jakereynoldsJake Reynolds

@rmharrisonRyan M Harrison

@fagnerbrackFagner Brack

@_orcamanOr Hiltch

@develodroidChema Rubio

@HaakathonAlex Haak

@jsneedlesjsneedles

@ArmandotrueArmen Vardanyan