Ben Nadel demonstrates how to load the Commons IP Math library into ColdFusion using the JavaLoader project. Then, check to see if a given IPv4 or IPv6 address exists within the given CIDR range….

Source:: bennadel.com

Ben Nadel shares the approach to lazy loading modules that he’s finally got working with Angular 6.1.7, Webpack 4, and Ahead of Time (AoT) compiling. This approach uses symmetric loading semantics (between statically loaded and lazy loaded modules). And, allows each feature module to fully encapsulate its own router segment definitions….

Source:: bennadel.com

By John Papa

Remember that time you had that bug that too took you an all-nighter to solve? And that time when you first saw hot-reloading work and it saved you tons of time when making sure your website looked right?

We all have real life development stories we tell each other about the good and bad struggles we faced, and how we ultimately came to overcome them. Often these experiences define why we choose to use the technologies that we use today. We think it would be great to share these stories with everyone.

Real Talk JavaScript

We’re excited to announce we’ve created a new podcast titled Real Talk JavaScript. It will be on all the major podcast channels starting October 2, 2018 and then every Tuesday morning! You can follow us at @realtalkjs on Twitter for announcements.

Here is the key theme you will hear on the podcast:

real developers talking to other real developers about real applications they’ve built and why they chose the technologies.

Simply put, Real Talk JavaScript is a weekly podcast where you can hear about the challenges facing Web developers today while expert guests on the show share their experience solving concrete problems while building real Web applications.

Along with my co-hosts, Ward Bell and Dan Wahlin, we’ll dive into JavaScript and Web development stories for practical insights and honest talk about the topics you are facing today.

Asking Why

There are plenty of great shows about ideas and architectures and new products. We love those shows. We’re doing something different. We’re digging into the techniques and technologies we use, solving challenges many of us have. We think it’s good to ask “why”. Why did we choose a technology to solve this problem we face? Did it go well? Did it go poorly? What did you learn? What was the journey like and what advice would you share with someone following your footsteps?

We’re focusing on concrete experiences. While we will absolutely center around great technologies like Angular, Vue, React, Node.js and more, we’ll invite our guests to talk about specific problems they’ve encountered and how they addressed those problems with the tools and techniques.

We think that many of you want to hear these stories and can likely recognize yourselves being in similar situations!

The Topics and Flow

Want a sneak peek into how the show till flow? Here’s an example Ward wrote.

Imagine you were on the show to talk about Dependency Injection (that’s native to Angular but you could be talking about DI in react or vue … or why react or vue doesn’t need it in your opinion).

You might begin like this:

“I and many others want to handle Http calls the same way no matter where they are in the component hierarchy. Just the other day I was looking at our app and each component was calling http directly. Each component handled its own errors (or not) and did so in its own way. Each added headers it’s own way. Each handled results its own way.

Every component did it differently. This was a big project, expected to last years. We were building a team for the long haul. People would come and go. Consistency would matter, both in training new people and crushing bugs. Yet, even today, with the code fresh in our minds, no one could predict how a component would get its data. We also found that testing the components was hard because we spent so much time mocking http calls. And our components were full of stuff that didn’t have anything to do with presentation. That made them bigger and harder to understand then they needed to be.

Dependency Injection helped us out of our hole. We pulled all that Http code out into separate service classes that we inject into the component class constructors.

It took us about a week to sweep the code base. And here’s what happened.”

From such a beginning, together we can explore probing questions:

• Didn’t that double the number of classes you had to manage? Did that bother you?
• How did you make sure that the services themselves were consistent … or did that just move the consistency problem somewhere else?
• What if you hadn’t used DI? Could you have achieved the same result some other way? Maybe with redux/ngrx/vuex/mobx/suspense?
• Would you do it again? Slightly differently?
• How did the team respond? How did you convince them to do it? Was there resistance? How
  did you overcome that (if you did)?

This type of flow focuses on “why” and the experience, while also allowing us to share what technologies can help us all with everyday Web development. This means our topics can be about great platforms and frameworks like Node.js, Angular, React and Vue, but also about tools like VS Code or WebPack, or docker, cloud solutions, AI and ML, mobile, testing, or pretty much anything that touches Web development.

Community

The Web community has amazingly generous and kind people who share. Many of us receive help along the way. We believe paying it forward is the right thing to do. This is why we also share, at the end of our show, “someone to follow”. This can be anyone our guests feel should be shared more widely in a nod to the community that helps us all.

We’ll kick things off with a mailbag question from some of you. We’ll use social media to gather questions for our guests and read and answer some of them on air.

We love the Web and we know so many other people do too. We hope you enjoy hearing these stories of Web developers, their struggles, their successes, and the tools that they use.

Welcome to Real World JavaScript!

John, Ward, and Dan

Source:: johnpapa

Ben Nadel thinks about all of the changes that you can make in an API which could be considered a “breaking change” for a consumer. Depending on how hard you squint, the breadth of breaking changes can be quite a bit larger than we usually think it is….

Source:: bennadel.com

By Sentry

There are few things in life that I enjoy more than good, healthy, broken code. It’s inevitable that things are going to break, it’s inevitable that I’m going to need to debug those things, and it’s inevitable that I’ll need do whatever is necessary to fix them. No one ever ships 100% perfect code.

This happens all the time: we ship code to production, all our tests pass, things seem fine, we celebrate… and then users start complaining. Sometimes they complain right away. Sometimes days later. We usually have no idea what happened to make them complain in the first place. No one has ever intended their code to unexpectedly break whatever it broke.

So we end up scrambling to do post-mortem debugging. An exception has happened, we don’t have the info as to why, but we need to figure it all out real quick by debugging after the fact.

But we want to catch these issues before users have the chance to complain to us. Ideally, this would be solved easily with tests. Why not just cover every scenario with a test? Then life would be perfect and fine and great.

Why Not Tests?

Because here in reality, humans are pretty bad at writing tests. Not just because we’re all kinda lazy and maybe a little dumb, but also because:

– Who wants to write tests for everything?

If your product has a customer base and one of those customers emails you to complain about something being broken, they probably send you a message like: “It doesn’t work for me. Please fix! I’m losing revenue.” People are always losing revenue, even if your app just hosts cool pictures of dogs.

If you’re fortunate enough to hear from a tech savvy user, then you can maybe somehow convince them to open up their browser console, reproduce the bug, and send you a screenshot. If an exception happens in production and nobody sees the Chrome debug console, did it really happen?

You probably won’t be so fortunate. Which may lead you to throw up your hands. “It works for me and I’m not going to fix this cause I don’t know how to debug your problem. And I’m not getting enough info to fix.”

Why Not Rely on Users?

Obviously we don’t want to rely on users sending angry messages and faulty screenshots to tell us what happened. We want to see what happened in real time. We want to see the stack trace and the problem in context. How can we be more proactive about this?

Well, there’s always the most obvious way to go about doing this, my absolute old time favorite: a window.onerror.

If you’re not familiar, it’s essentially a global callback that throws a net over your entire application. I call it window.onNOPE. It’s literally the worst way to capture an exception other than mind melding with your code so that it makes you faint every time it breaks.

The callback signature used to look something like this:

function(message, url, lineNumber)

It took three arguments, the first one being a message, the url of the file that caused the exception, and the lineNumber

The problem here is that none of these are an actual Error object. They’re just a message, url, and a number. In practice these three arguments end up looking like this:

message: "TypeError: Cannot read property 'foo' of undefined" 
url: "http://example.com/foo.js"
lineNumber: 10

At a glance this looks really useful. We can drill into our code, look at line 10, and figure out what’s going on. The issue is that your code is probably minified. Line 1 is your entire application. You have a million characters on this one really (really) really long line.

Also, your JS Is likely hosted on another domain. A CDN or a subdomain or a cookie-less domain, something like that. If a script is on another domain, it’s subject to CORS (Cross Origin Resource Sharing). And if the page it’s on doesn’t have the proper CORS headers — and it probably doesn’t — then all window.onerror is gonna tell you is “Script Error”. So you have literally no idea what happened, just that something happened. It’s like if someone called the fire department to alert them there was a fire somewhere in a thousand mile radius and that they really need to get on that.

Over time browsers have expanded on window.onerror to include more information:

function(message, url, lineNumber, columnNumber, error)

Now we have our Error object. This is nice, cause we can (try to) get a stack trace from this. For those unaware (though you are almost certainly already very much aware), a stack trace is just a record of the function calls up to this point within the current call stack. A series of function calls: you call a, a calls b, b calls c, and on down the call stack.

When you’re debugging something, if you don’t have a stack trace it’s going to be very difficult to fix. You can maybe see that the exception happened at this line, but you don’t know how you actually got there: you don’t know which function called that function; you don’t know the order of events that preceded it.

Let’s explore by opening up our favorite executable to throw a new error:

$ node 
> throw new Error('lol')

I’m sure you’ve seen something like this:

Error: lol
    at repl:1:7
    at REPLServer.self.eval (repl.js.110:21) 
    at repl.js:249:20
    at REPLServer.self.eval (repl.js:122:7)
    at Interface.<anonymous> (repl.js:239:12) 
    at Interface.EventEmitter.emit (events.js:95:17)
    at Interface._onLine (readline.js:202:10) 
    at Interface._line (readline.js:531:8) 
    at Interface._ttyWrite (readline.js:760:14) 
    at ReadStream.onkeypress (readline.js:99:10)

This is what comes back when you arbitrarily throw and do not catch an exception. What do each of these things mean?

It gives us the caller, aka the function of the frame (Interface.EventEmitter.emit). The source the function was called in (events.js). The line number (95). And the column number (17).

We also now have this property off the error prototype “.stack”. A string. Probably the most useless thing you can get back from this.

If you want to start breaking this apart and extract the pieces out of it, you need to use a regular expression, something like:

/at (?:(.+)s+)?(?(?:(.+?):(d+)|([^)]+)))?/

What’s this look like in practice? Great question. And something we’ll dive into in our next edition of All My Javascript is Broken and I Don’t Know Why.

We’re Here to Help.

As always, you can try Sentry for your JavaScript app (or an app written in virtually any other language too). We’re 100% open source and we’ll give you all the details you need so you don’t have to worry about the above.

Now get out there and break some code.

Source:: scotch.io

By Chris Nwamba

I’m not so sure, but I think JavaScript might be the only web technology where you can destructure objects and assign the individual units in one take. It is also one great feature that allows you can get straight to the point with what you have to do and keep things very clean.

Destructuring assignment in more simple words means unpacking the values of objects or arrays into simple variables. You have probably already seen it used somewhere, and it never made sense to you. At the end of this guide, we will see how to use it and what it can replace for you.

Prerequisites

Let’s Start With Arrays

Old school ways tell us that if we have an array and we want to assign some of it’s values to variables, we do something like this:

let johnDoe = ["John", "Doe", "Iskolo"]
let firstName = johnDoe[0]
let lastName = johnDoe[1]
let title = johnDoe[2]

console.log(firstName, lastName, title) // John Doe Iskolo

But would you not like to do this instead?

let johnDoe = ["John", "Doe", "Iskolo"]
let [firstName, lastName, title] = johnDoe
console.log(firstName, lastName, title) // John Doe Iskolo

The best part is that you can pick any number of elements you want

let johnDoe = ["John", "Doe", "Iskolo"]
let [firstName, lastName] = johnDoe
console.log(firstName, lastName) // John Doe

Or

let johnDoe = ["John", "Doe", "Iskolo"]
let [, lastName, title] = johnDoe
console.log(lastName, title) // Doe Iskolo

We can do it with strings as well

let [firstName, ,title] = "John Doe Iskolo".split(" ")
console.log(firstName, title) // John Iskolo

We can throw in the rest operator to collect the rest 😆

let [firstName, ...others] = "John Doe Iskolo".split(" ")
console.log(firstName, others) // John Iskolo

And we can even bring in objects here

let johnDone = {}
[johnDoe.first, johnDoe.last] = "John Doe Iskolo".split(" ")
console.log(johnDoe.first, johnDoe.last) // John Doe

In Looping Through Objects
We can use it in looping through a key-value pair variable like an object or map. Here is what is very common:

let obj = {
  firstName : "John",
  lastName : "Doe",
  title : "Iskolo"
}
Object.keys(obj).forEach(key => {
  console.log(`${key} : ${obj[key]}`)
})

We can spin that differently like this:

let obj = {
  firstName : "John",
  lastName : "Doe",
  title : "Iskolo"
}
for(let [key, value] of Object.entries(obj)) {
  console.log(`${key} : ${value}`)
}

It might look like the same thing to you, but it is not. In using forEach above, we pull the keys of the object into an array, then looping through that array of keys now and using those keys to pick out the values of objects. Phew! I lost my breath for a second reading that 😃.

In the second part, we just go straight and loop through each object entries and extracting the keys and values.

Assigning default values
We can assign defaults values, just for a situation where the variable we wish to destructure is empty

let [firstName = "John", ,title = "Fire"] = "John Doe".split(" ")
console.log(firstName, title) // John Fire

Now To Objects

Like we did with arrays, we can destructure objects as well. If you have ever used React, you are likely to have seen this used when importing a module.

let obj = {
  firstName : "John",
  lastName : "Doe",
  title : "Iskolo"
}

let {firstName, lastName) = obj
console.log(firstName, lastName) // John Doe

When destructuring objects, we use the keys as variable names. This is how JavaScript knows which property of the object you want to assign. Unlike arrays where you use their index/positions in the assignment, here you use the keys.

This destructuring works on any kind of object. If your object has nested values, you can still destructure that and extract the values into variables.

let obj = {
  name : "John Doe",
  address : {
    city : "Omsk",
    country : "Russia"
  }
}
let {city, country} = obj.address
console.log(city, country) // Omsk Russia

Using It To Pass Function Arguments

Let’s be frank, you might have seen functions that look like this:

function sumFunc(a = true, b = "", c = "", d = 0, e = false) {
  console.log(a,b,c,d,e)
}
// Call the function
sumFunc(true, "", "", "", true)
// Or if we want to preserve default values
sumFunc(true, undefined, undefined, undefined, true)

It doesn’t look so good. It gets worse if you are trying to perform a function like making a chart and you need a lot of arguments (think like 15 optional arguments) to create the chat. It is plainly unsustainable.

Let destructuring save the day 😃

function sumFunc({a = true, b = "", c = "", d = 0, e = false}) {
  console.log(a,b,c,d,e)
}
let args = {a : false, e: true}
// Call the function
sumFunc(args)

By passing the function arguments as an object, they will get automatically resolved into independent arguments. Now, we pass an object with matching key-value pairs and the function will work nicely.

Admit it, you love the destructured way 😁.

Conclusion

Destructuring is an operation you can do without, however, you can already see how it makes you a better developer. Cleaner code, fewer repetitions and more structure over what you have.

Use destructuring today and make your code a better code 😀.

Source:: scotch.io

By Nicholas Cerminara

So what the heck is monday.com? You’re probably see a bunch of promotions for it.

Every project management tool seeks to do the same instrumental thing: keep teams connected, on task and on deadline to get major initiatives done.

But the market is getting pretty crowded, and for good reason — no platform seems to have gotten the right feel for what people need to see, and how that information should be displayed so that it’s both actionable/relevant, and contextualized.

Introduction

That’s why monday.com is worth a shot. The platform is based off a simple, but powerful idea: that as humans, we like to feel like we’re contributing to part of a greater/effort good — an idea that sometimes gets lost in the shuffle as we focus on the details of getting stuff done.

So projects are put onto a task board (think of it like a digital whiteboard), where everyone can have the same level of visibility into anyone else who’s contributing set of tasks. That transparency breaks down the silos between teams that cause communication errors and costly project mistakes — and it’s a beautiful, simple way to connect people to the processes that drive forward big business initiatives.

Clean Design

Whether you’re part of a tech-forward team or not, monday.com is a welcome relief to cumbersome Excel files, messy (physical) whiteboards, or meetings that waste time when actual work could be completed.

The scalable, intuitive structure can effectively work for a team of two, or an international team of 2,000+ — and a beautiful, color-coded board lays out tasks you can cleanly see and tag for various stages of completion. That way, employees can see exactly what needs to be done (and who needs to do it), while managers can optimize their time re-allocating resources as necessary to optimize processes. It’s a win-win.

Team Focused

monday.com also allows teams to communicate within the platform, cutting down on the amount of laborious sifting through various email threads to figure out a workflow. Messages can be sent inside of tasks — so all the communication is contextualized before meeting resolution or seeking it.

The platform also supports uploads, so documents and videos can be added to facilitate more collaboration, and integration with other productivity apps. So if your team is already using tools like Slack, Google Calendar, Dropbox, Microsoft Excel, Trello, and Jira, there’s specific, clean shortcuts to integrate the information from those platforms into monday.com. And even beyond team communication and management, you can use monday.com for client-facing exchanges, so all your messages are consolidated into a single place.

Conclusion

The platform recently raised $50M in funding, and received nods from the likes of Forbes, Entrepreneur, Business Insider, and more for its ability to empower international teams to do better work together. Best of all, unlike other team management software, which can be pricey and time-intensive to scope, test and run, you can try monday.com today — for free.

See if monday.com is the right fit for your team: create your free account and start using the platform today.

—

This post is sponsored.

Source:: scotch.io

Ben Nadel looks at how to determine if a given IP v4 Address is in an IP address range (ala CIDR notation) using ColdFusion and the built-in Jakarta Commons Net project, SubnetUtils….

Source:: bennadel.com

By BuilderX

BuilderX is a screen design tool that codes React Native* for you. It generates beautiful, readable and editable code for the designs. Just design the components in your app, or import your Sketch file and it generates the corresponding code. You can hop between design and code with just a click owing to the amazing bi-directional flow in BuilderX.

The Problem

It’s 2018, and Designers and Developers still don’t speak the same language. There is still a huge gap between the Design and Development phase. Designers and Developers work on different workspaces, tools, and most importantly, file formats. BuilderX is a revolutionary tool that seamlessly bridges this gap.

First, you will need to install BuilderX. Just go to builderx.io and install BuilderX.

BuilderX Interface

BuilderX workspace is majorly divided in five sections:

• Artboard – Artboard corresponds to a screen in your app. This is where you design awesome stuff.
• Toolbar – The toolbar on the top contains some basic tools for your design like Shapes, Text, Images, etc. and also some useful actions like create group and create symbol.
• Properties Panel – Properties panel on the right lets you adjust the properties of the selected layers and artboard.
• Left Panel – The left panel contains Layers and Symbols list. The layer list shows all the layers in your current Artboard. Symbols panel contains pre-built components as well as your project’s symbols that you can drag and use.
• Code Editor – Code editor is useful for developers as it lets you make changes in your code directly and changes will be reflected in real-time.

Creating the App

In this tutorial, we will be creating a Hacker News App clone using BuilderX to design our components and then integrate the API calls with code generated to fetch the data in real-time and run the app on the device. First, we will create a new project from the BuilderX launch screen.

On creating a new project, you see the project screen where the Artboard is shown in the centre as described in the previous section.

This is where we create our components. We will be saving the project as HackerNews-BuilderX.

First, let’s create a rect and give it a color, which in code would correspond to component in React Native.
<img data-src="https://cdn.scotch.io/68403/nMy76KsBStGoVsk1Y3Ux_creating-rect.gif" alt="Draw a Component”>

Then, to create a header, we will insert some icons by using icon menu in top toolbar. After inserting the icon, we change it to menu icon. Similarly, we can design the whole header. By using flex or different alignments, we can adjust the icons in the header.
<img data-src="https://cdn.scotch.io/68403/3PotRTXSVWGpK1OgoEUF_Creating-Icon.gif" alt="Design a

By Chris Sevilleja

I’ve been waiting to write this post for a very very very long time. Work on this v8 site started in February of this year. This is version 8 in the 4.5 years we’ve been in existence.

Rebuilding Scotch has always been a fun project for me. Getting to try all the latest and greatest toys in a site. Aside from trying new toys though, here’s the main reasons I decided to start another new site:

Site speed was slow for international users

Since our servers live in New York, we saw site loading speeds of 5-10 seconds. For international users however, they were seeing a 20+ second load time. Unacceptable!

Finding content was difficult

We now have over 400+ guest authors. We were often publishing these amazing articles and then seeing them get buried down the feed. On top of that, our site search didn’t surface the right content.

Our main nav in the previous site only had three links in it to find content. People didn’t even know we had three major sections for:

• Guides: Think docs for specific technologies
• Courses: Videos to build real-world projects
• Posts: Written tutorials

Better author tools for coding tutorials

Our previous editor was old school. A combination of textarea, wysiwyg, and some JavaScript. I’ve learned a fair amount about writing coding tutorials and think that the tools for writing these should be better. More on this in the coming months, but this new site was meant to be a foundation for all those cool new things coming.

Those were the three big reasons for jumping to another redesign. This v8 will be the foundation for Scotch moving forward and I swear I’m done redesigning. If I start to try, somebody take away my keyboard.

Major Features

These are the features I’m most excited about:

Speed! Speed! Speed!

Performance is a feature. With Google using site speed as a ranking factor, this was very important now more than ever. Using SpeedCurve, we can see the differences between old site and new site.

I did a writeup on How We’re Getting to 1s Speeds. TLDR: We are fully caching the HTML of our pages and serving globally using Cloudflare.

I’ll be doing a whole guide on web performance soon, but here’s the gist of what we did technically:

• Fully cache entire HTML
• Auth moved to JavaScript (React) and JWTs
• Responsive and optimized images with Cloudinary
• Multiple lazy-loaded JS files with webpack

We moved closer to a JAM stack type setup without completely moving to a JAM stack setup. v8 is JAMstack-ish! There’s all this great work happening around static sites generated with tools like Gatsby and Hugo. We can have that fun too and cache our entire site.

Backend is still Laravel. Frontend is React. All API communication between the two using JWTs.

Pages fully cached by Cloudflare

Cloudflare is a brilliant service that helped us grow Scotch from a tiny Digital Ocean box to what we are today. Up until now, we’ve had Cloudflare only cache assets like images/js/css.

A BIG performance boost can be found in letting Cloudflare cache your entire siteincluding the HTML.

This effectively means that Cloudflare can serve HTML directly to your users without having to hit your server.
By turning on full page cache through Cloudflare, we’ve been able to save server usage. We may even get to downgrade our servers and save some dough.

A caveat for doing full page cache through Cloudflare’s page rules is that all your authentication has to be done via client-side JavaScript. If you handle authentication server side, then an authenticated page may be served to future users that aren’t authenticated. This is similar to how you would handle authentication in a single page app.

Real-time search everywhere

We had worked on a little real-time search in v7. It was only on our /tutorials page though. In v8, real-time search courtesy of Algolia is everywhere. Give it a try!
undefined

• The header search bar
• The home page
• Courses and Posts pages

Please excuse the ugly gif color representation

And the header search:

Better Discoverability

With the new header and also real-time search, I’m hoping that readers can find more of what they need. A good exercise is:

Try finding your favorite Scotch post and see if it comes up!

The header also has links to popular tags and sections of Scotch. I’m hoping the nav let’s people see that we have more than just the written tutorials. More to be added soon!

New Dashboard

The new dashboard is found at https://my.scotch.io and is fully a React SPA. The dashboard was moved out of the main site repo and into it’s own repo.

The new dashboard is authenticated using JWTs and powered by the Laravel API.

It is hosted on Netlify, which is an awesome tool if you are looking to host any Single Page Apps. It was between Netlify and zeit’s now service which is also awesome.

New Writing Tools

With the help of genius Samuel Oloruntoba (@kayandrae07), we’ve been able to build out a new editor that is far more modern than our last one.

The goal is to have the best writing experience and tools for coding tutorials.

This is the foundation of our new editor and we’ll be adding more to this in the coming weeks. Here’s a couple things we’re looking at

Writing Templates

A lot of posts that you want to write will have the same foundations. I’m also sprinkling in my favorite best practices for writing each type of post. Coming soon.

A Better Video Experience

Our courses and videos have gotten a big redesign to be much simpler to click around.

Playlist on the right side just like you’d expect from any of the viewing sites.

Conclusion and Future

Moving forward, I think we’ve landed on a good foundation for all the goals we have for the coming year. Let me know in the comments what you think. Is the site fast for you? Can you find what you’re looking for?

Here’s some things I’m looking to add in the coming weeks:

• Learning Guides. Everything you need to learn a language/library/project in one centralized location
• Post Ideas: Submit and vote on what posts you’d like to see written next
• Job Board
• Cool Stuff: I get asked a lot what kind of tools I use, I’ll write it all here

Bonus

I’m super stoked to have this tiny feature. Hover over the logo in the top left for the animated logo made by Luis Manuel (@lmgonzalves)!

Source:: scotch.io