world’s-first-ai-powered-lego-sorting-machine-built-with-10k-lego-bricks

There are some individuals who find sorting LEGO pieces therapeutic, but most of us loathe the task. And there are entirely non-LEGO machines that could do it, although what fun is that? Some people have tried to use LEGO to build sorting machines, yet their limitations have been quickly apparent. Enter Daniel West and his incredible Universal LEGO Sorting Machine! This baby uses Artificial Intelligence, with the most extensive index to date, to sort parts at a speedy one brick every 2 seconds!

What makes this sorting machine so unique is that it utilizes a concept called a Convolutional Neural Network. It uses existing databases to learn and recognize nearly all pieces ever produced, even positioned different ways. That’s over 25 million 3D images! What databases, you ask? They’re ones that you may use on a regular basis, such as the LDraw parts library and Rebrickable. We asked Daniel about some other aspects of the project and the numbers are certainly impressive. He estimates that the build uses roughly 10,000 LEGO elements, including six LEGO motors. It also uses several non-LEGO parts, including nine servo-motors and a Raspberry Pi brain. It’s split into three modules — part separation, scanning, and bucket distribution.

The build process and concept design

As Daniel tells us, the inspiration came in 2011 after seeing other sorting machines on Youtube, but work didn’t start until 2016 while he was studying “computer vision” at university. Unfortunately, early tests didn’t work, until a year later when he realized he should implement AI. The building portion took about 6 months, with many iterations by trial and error.  The most difficult parts to incorporate were the vibrating feeder and output buckets. But the real triumph was the programming development, which took a whopping 2.5 years! For the programming geeks out there: Daniel used Python to write the code, as well as Tensorflow for the machine learning framework. Processing 25 million images also required a huge amount of computing power: Daniel used Amazon Web Services (AWS) to perform 2 years of CPU core time in just over a day!

Some of you might have an excellent grasp on what that is, but for the laypeople out there, Daniel has a video to explain it more simply.

While building this marvelous machine, Daniel tells us that he realized these complex problems were nearly impossible to solve with LEGO-produced electronics. The possibilities of LEGO may be virtually endless, but this required some more serious technology. For example, vivid lighting, a high-resolution camera, and a special conveyor belt were all necessary. Additionally, the cost of using LEGO servo motors and Mindstorms brains would’ve been too expensive. Daniel also says that his goal was actually not to build the machine out of LEGO, but that LEGO lent itself perfectly to some of the structure.

Moving forward

Daniel is continuing to fine-tune his work. He has already written more than one article about the project on Toward Data Science, and he hopes to also write an academic paper on the topic. When asked about drawing up early building plans, he tells The Brothers Brick that he didn’t use any and says, “I think one of the key benefits of working with LEGO is that redesigning or changing the shape of something is so nondestructive, it allows you to be really flexible and agile when it comes to design.” It’s uncertain if he will offer building instructions to people who want one of their own, but the good news is that he hopes to turn the programming into an open-source dataset! He’s excited to see what others come up with. It’s safe to say that his advice to builders attempting something similar would be to go for it and don’t give up.


Although it’s less advanced, check out another impressive LEGO sorting machine built by the BrickIt team using only LEGO. Or if you’re stuck with doing it the old-fashioned way, consider this sorting tips essay. And if you’re a fan of both LEGO and AI (if you’re here, of course you are!) check out Braille LEGO and AI.

build-your-first-real-time-app-in-node

Have you ever wondered how real-time apps like chat apps and online games are built? If you’ve never built one before, read this tutorial as I’m going to show you how to build a simple one using socket.io.

What are we going to build?

It’s a simple app with one button and a label below it. The label displays “Likes: X” (where x is the current number of likes). When the user clicks on the button, the number of likes increases by one.

We’re going to make it real time by showing users on the app how the number of likes increases as other users are clicking on the button. So you don’t need to reload the page to see the latest value.

Here’s how the app would look like:

You can get the source code of this project on GitHub.

Creating a new project

In a new folder, add package.json using npm init -y, and then install these three packages:

npm install express ejs socket.io

We’ll use ejs as the templating engine, and socket.io for making our app a real-time app.

Displaying a hello world page

As mentioned above, we’ll use ejs for rendering our views. So create index.ejs and add the following:




  
  Realtime like app


  Hello World!


Now let’s create our node server and serve the above file as the homepage.

So create node.js and add this:

const app = require('express')()
const path = require('path')

app.engine('html', require('ejs').renderFile)
app.set('view engine', 'html')

app.get('/', (req, res) => {
  res.render(path.join(__dirname   '/index.ejs'), null, (err, html) => {
    res.send(html)
  })
})

app.listen(3000, () => console.log('the app is running on localhost:3000'))

So we created a new server that runs on port 3000. When the user hits http://localhost:3000/ in the browser, we’ll render index.ejs and display it.

If you run the app using node index.js (or using nodemon if you want the app to restart automatically on changes) and open http://localhost:3000/, you should see “Hello World!” displayed.

Adding style.css

This isn’t a CSS tutorial, so let’s quickly add style.css in the root directory and fill it with this:

body {
  background: hsl(0, 50%, 80%);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  padding: 0;
}

button {
  background: hsl(0, 50%, 90%);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 150px;
  cursor: pointer;
  outline: none;
  box-shadow: 0 14px 28px hsla(0, 50%, 10%, 25%), 0 10px 10px hsla(0, 50%, 10%, 22%);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

button:hover {
  box-shadow: 0 1px 3px hsla(0, 50%, 10%, 12%), 0 1px 2px hsla(0, 50%, 10%, 24%);
}

button:active {
  box-shadow: none;
}

svg path {
  fill: hsl(0, 30%, 30%);
}

.main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.likes {
  margin-top: 20px;
  color: hsl(0, 60%, 20%);
  font-weight: bold;
  font-family: sans-serif;
  text-transform: uppercase;
  font-size: 20px;
}

Now let’s tell our server about it so when we request it, it responds with this file.

Add this route in index.js (below the root route):

app.get('/style.css', (req, res) => {
  res.sendFile(path.join(__dirname   '/style.css'))
})

And then let’s use it in our index.ejs by adding this at the bottom of :


Displaying the button and the label

Open index.ejs and update it like this:




  
  Realtime like app
  


  

For this to work, we have to pass likes from the server when rendering the template.

So open index.js and update the root route like this:

let likes = 0

app.get('/', (req, res) => {
  res.render(path.join(__dirname   '/index.ejs'), { likes }, (err, html) => {
    res.send(html)
  })
})

Note how we defined likes above it.

To keep this example simple, we defined likes in the memory, which means its value will go back to 0 when the server restarts. Typically in real-world apps you’ll have your data stored in the database.

Incrementing likes by clicking on the button

To do so, we need to add a new route that increments likes and returns the new value. And then we’ll make a request to this endpoint from index.ejs, when the user clicks on the button.

Let’s define the route first, in index.js.

app.post('/like', (req, res) => {
  likes  
  res.json({ likes })
})

So it’s a POST endpoint at /like.

Now let’s listen for the button’s click event and send this request using the Fetch API.

Add the following above :


The app is now ready to be used but without showing the updated value in realtime. So if you open the app in multiple browser windows and try to update one, you won’t see the value updated in realtime on other browser windows until you reload them.

Making it a real-time app

Socket.io isn’t the only way to build real-time apps but it’s the most popular one. Not only that, but it’s also very good and easy to use.

We’ve already installed socket.io, so let’s initialize it.

But before I show you how, note that socket.io is composed of two parts:

  1. The server that we integrate with node http server.
  2. The client library that we use on the browser to communicate with the server part.

To initialize the server part, open index.js and update the top part like this:

const app = require('express')()
const http = require('http').createServer(app)
const path = require('path')
const io = require('socket.io')(http)

So we imported socket.io and passed it the http server object.

Now let’s use the http object to run the server instead of app.

http.listen(3000, () => console.log('the app is running on localhost:3000'))

With that, socket.io is initialized on the server!

When socket.io is initialized it exposes /socket.io/socket.io.js endpoint. This endpoint contains the JS file that we’ll use in the browser to connect with socket.io. (So it’s the socket.io’s client library.)

Go to index.ejs and include that file above the

After you add this, you should have the io object exposed globally on the browser (check that from the console).

To connect the browser to the server, just call io() and store the returned socket in a variable.

So put the following at the top of your , add this:

socket.on('likes:update', likes => {
  likesOutput.textContent = `Likes: ${likes}`
})

That's it! Now our app is completely a real-time app!

If your code is not working, compare it with the source code of this demo on GitHub to make sure you haven't forgotten anything.

be-the-first-to-see-the-new-smx-west-agenda

Smart marketers know that continued training is the key to staying ahead of the competition and achieving professional goals. That’s why they’re attending a completely revamped and redesigned Search Marketing Expo – SMX West.

Join us in San Jose, February 19-20, 2020, to cross-train on the most important elements of successful search marketing campaigns… you know, the traffic-driving, lead-generating, revenue-boosting ones.

The Search Engine Land experts — the industry publication of record — have reorganized the agenda into three search marketing lanes with no learning limits: You’ll get double the amount of tactic-rich SEO and SEM sessions SMX is known for, together with brand new programming on digital commerce marketing.

Here’s a taste of the 60 sessions in store:

SEO

  • Site Speed Is A Crucial Ranking Factor. Here’s What You Need To Know.
  • Future-Proof Your Sites For Google Core Updates
  • The New NoFollow And Snippet Rules

SEM

  • Tactical Tips For Creating More Persuasive Ads
  • Understanding And Analyzing The Customer Journey
  • Automation: How To Push Forward; When To Push Back

Digital Commerce Marketing (new)

  • Driving Profitable Sales With Amazon Search Ads
  • Optimize Your Holiday Plans To Beat The Competition
  • SEO For E-commerce Category, Product Detail Pages

Bonus! The Search Engine Land experts have carved out room in the agenda to tackle late-breaking topics (BERT, anyone?), so you’re sure to get the most up-to-date advice and insights possible.

Register with the confidence of the SMX guarantee — and do it now to lock in our best rates: up to $700 off on-site prices!

  • All Access: The complete SMX experience — all sessions, keynotes, clinics, networking events, and amenities, including hot meals, refreshments, free WiFi, speaker presentation downloads, the SMX mobile app, and more. Book by December 21 and save $450 off on-site rates.
  • All Access Workshop (best value): Maximize your learning with a full-day post-conference workshop. Book by December 21 and save $700 off on-site rates.
  • Expo : Interested in growing your network and meeting vendors? This free pass gets you the entire Expo Hall, sponsored sessions, Q&A clinics, refreshments, select networking, WiFi, the SMX mobile app, and more. Book now and it’s… free!

For over a decade, more than 70,000 marketers from around the planet have trusted SMX with their professional training needs. Make this the year you take your company (and your career) to a new level of success.

Register now and I’ll see you in San Jose!

Psst… Need approval from your manager? We’ve created these helpful Get Your Boss On Board resources including talking points, pricing breakdown, and templated letter.



About The Author

Lauren Donovan has worked in online marketing since 2006, specializing in content generation, organic social media, community management, real-time journalism, and holistic social befriending. She currently serves as the Content Marketing Manager at Third Door Media, parent company to Search Engine Land, Marketing Land, MarTech Today, SMX, and The MarTech Conference.



first-look:-vectornator-pro-ux-on mac

Vectornator Team

In this article we dive deep into the heart of our new user interface and the soul of our refined user experience of Vectornator Pro on MacOS Catalina.

First, Vectornator Pro packs all the features you need on macOS starting with the beloved Menu bar, the home of all the functions and controls you’re searching for. The Toolbar for all the quick shortcuts that you use and Custom cursors for all the different types of tools and functions.

Our new refined user experience is tailored for the mouse and trackpad input. In order to do that, we had to reimagine our sliders, buttons and UI elements to fit the Mac. We created our Mac precision sliders to give you great accuracy with your mouse pointer. Plus, you could easily input any variable with your keyboard by simply tapping on any text box on the right of each slider.

Vectornator Mac Sliders

With all the added space that we get on Mac, we moved our Layers inspector to the left side to give you two inspector views! Plus, we combined our Style, Arrange and Paths tab into a single powerful inspector. This optimized interface results in a faster, more powerful worklfow.

Two Inspectors — Vectornator Mac

Small details matter. And we know how much designers hate searching for hidden functions, menus and options. With Vectornator Pro, there is no need to find the advanced functions like text or Autotrace options. Because all the options you’re looking for will appear in the main inspector as soon as you select a text box or an image to Autotrace. Simple as that.

Finally, our user experience comes full circle, with our wide range of Keyboard shortcuts that further enhance your workflow.

Of course, Other than the simple copy, paste, cut, delete shortcuts, we added the popular shortcuts like holding (⌥ Alt) to enable duplicate mode, holding (⇧ Shift) for multi-select or locking the aspect ratio while resizing objects and last but not least all the simple shortcuts to seamlessly switch between your tools, opening and closing the inspectors, applying functions and more!

Keyboard Shortcuts

Indeed, just like our iPad software, Vectornator Pro brings the superpowers of Vector graphic design softwares for free to your Mac. In the meantime, prepare your Mac, upgrade to Catalina and wait for our announcement soon!

Thank you for reading our first deep dive into Vectornator Pro, we hope you are as excited as we are!

Best regards,

Your Vectornator team.

Vectornator Pro for MacOS Catalina
here-are-the-winners-of-the-first-contest-for-hacker-stock-photos

Cybersecurity—and the lack thereof—is a constant topic in our digital age. But the way it’s represented in the media, particularly with the use of outdated stock photos and graphics, tends to be needlessly complex, and sometimes even comical.

Last year, the William and Flora Hewlett Foundation and OpenIDEO launched an international competition to address this lack of clear, compelling images to accompany journalism on these topics. Their Cybersecurity Visuals Challenge tasked participants with designing a new library of hoodie-free “hacker” images that can be freely used by news organizations and the like.

Yesterday, the top five winners of the global contest have been announced, representing artists and designers from India to Mexico, Australia, and the U.S.

Mariah Jochai [Image: courtesy Hewlett Foundation]

“The challenges we face today online keeping networks and devices secure are far too complex to be illustrated by a shadowy figure in a hoodie hunched over a laptop,” Eli Sugarman, program officer at the Hewlett Foundation in charge of the Cyber Initiative, said in a statement. “Sophisticated organizations are attacking the security of the internet, and we believe the images produced by the participating artists will help increase understanding of these issues for policymakers and the broader public alike.”

Abraham Joel Pena Puleo [Image: courtesy Hewlett Foundation]

Abraham Peña’s design targets phishing; in his graphic, he cleverly plays on the homonym by depitcing hackers as sharks circling an unassuming user.

Meanwhile, Afsal CMK illustrated encryption with accessible, brightly colored sketches. Claudio Rousselon’s detailed pen-and-ink drawings make cyber alliances look like the beautiful mess they are. Information warfare is represented by Ivana Troselj as a bird “mistakenly rearing a grenade in a nest of its own eggs,” and Mariah Jochai’s text-based graphic shows how hacking threats can hide in plain sight.

These creative, relatable images work to simplify the pitfalls of our tech-reliant world for the public. Since digital privacy is a necessarily complex facet of culture, it’s vital that a broad audience can grasp how high the stakes of creating a secure digital landscape is. Right now, publications and platforms rely on archaic—and inaccurate—stock images that depict hackers as goofy pranksters to illustrate security concerns that plague both major organizations and private citizens alike. The contest’s openly licensed designs, which are as varied as the individuals who imagined them, stand to help.

“We were thrilled by the passionate community of cybersecurity professionals and visual creators that joined this global call, committing their time and skills to this important work, together,” Jason Rissman, managing director at OpenIDEO, said in a statement.

Beyond the fame and glory of creating free stock images, the winners each received a $7,000 prize. (All 23 semifinalists received $500.) As we previously reported, the five finalists’ artwork will be available in the public domain, able to be shared and repurposed under an open Creative Commons license.

cnn.com-receives-first-verified-mark-certificate-in-preparation-for-bimi-email-standard

Identity and encryption provider DigiCert, Inc. has issued that world’s first Verified Mark Certificate (VMC) to CNN.com, a move that will enable the company to participate in upcoming trials of the Brand Indicators for Message Identification (BIMI).

VMC, a new digital certificate that validates the authenticity of the brand logo attached to an email sender’s domain. The BIMI standard requires validated logos but currently does not use VMC. The certificate is expected to become a requirement for senders in the next year in addition to domain authentication through DMARC.

Why we should care

The BIMI initiative will be a new standard for high-volume senders that will allow brands to display designated logos for authenticated messages. And while DMARC will authenticate the domain sending an email, VMC will validate the logo itself in order for BIMI to work.

Yahoo Mail is currently running a pilot of BIMI, and Google has announced plans for its BIMI pilot for next year. Other inbox providers are also expected to begin pilot programs in the coming months. Through these programs — and taking the right steps to configure certificates — marketers will be positioned to increase their brands’ online presence, increase brand recognition and establish trust amongst email recipients.

“CNN’s adoption of BIMI with VMC is a game-changing development for the email ecosystem and demonstrates CNN’s technical leadership,” said Seth Blank, director of industry initiatives for Valimail and chair of the AuthIndicators Working Group, which is developing the BIMI standard. “We commend DigiCert for helping to lay the groundwork for this important enhancement of internet email. The AuthIndicators Working Group is excited for many more brands to follow CNN’s leadership.”

More on the news

  • The VMC certificate issued by DigiCert to CNN.com is the first certificate for a domain used to send high volume consumer emails.
  • DigiCert will work with members of the AuthIndicators Working Group to issue VMCs to brands at scale.
  • DigiCert plans to have VMCs integrated into its DigiCert CertCentral platform by early 2020.


About The Author

Jennifer Videtta Cannon serves as Third Door Media’s Senior Editor, covering topics from email marketing and analytics to CRM and project management. With over a decade of organizational digital marketing experience, she has overseen digital marketing operations for NHL franchises and held roles at tech companies including Salesforce, advising enterprise marketers on maximizing their martech capabilities. Jennifer formerly organized the Inbound Marketing Summit and holds a certificate in Digital Marketing Analytics from MIT Sloan School of Management.



how-to-land-your-first-ux-role

I recently did an Instagram live session with Britney for juniors looking to break into the market. I thought I’d put my answers into an article for people who couldn’t make it.

Tom Cotterill


Me: I don’t hire for juniors very often, in fact, hardly at all. The reason is that companies should only reach out to recruiters for niche roles i.e they are finding it difficult to fill the role.

Juniors lack commercial experience, so there isn’t much which separates them from the rest so all companies need to do is post on LinkedIn and get a ton of applicants.

But I believe a junior should focus on these areas ?

  • Portfolio — This is your pitch. Make it special.
  • Online presence — Can people recognize you on LinkedIn, Medium or other channels?
  • Offline meetings — go for coffee with people, attend meet-ups.

I look at early stage folks as a package, not just portfolio because it’s highly likely the work isn’t going to help them stand out. It’s their attitude, grit, communication, soft skills etc.


  • Relying on recruiters. We work for clients, not candidates. That means 95% of the time recruiters won’t help juniors because there is no money in placing juniors. I know it sounds brutal, but don’t forget recruiting is a business. The great recruiters will always make time, even if it’s for 10 minutes.
  • Getting caught up with wanting to work for certain companies. Look at each opportunity with your next role in mind. What do I mean by that? Well, if you go and work for Facebook and work on a like button or a start-up where you’ve worked across the full end-to-end process, what do you think has progressed your portfolio more?
  • Getting too much advice or advice from the wrong people. Don’t just contact design leaders, but look at people who found jobs 1–2 years ago as THEY will have more knowledge than most design leaders. Your only focus at this stage of your career is to find a job.

  • Process.
  • Showcasing side projects, not just 3 case studies from a General Assembly course.
  • Showcase some personality.

As a new UX designer, it’s only natural that you won’t have vast quantities of work to show in your portfolio, so instead, you need to find a unique angle to stand out. Personally, when I look through junior portfolios I like to see some personality in there, even if there are only a handful of projects.

Ways to inject personality include adding any personal projects you have attempted and talking the reader through how you went from an idea to a finished solution. Even if it was a complete failure or it was part of your UX design course rather than a paid gig, show it!

For me, failing but being humble around the fact you know that you can improve shows determination, grit, and motivation. From multiple conversations with hiring managers that I’ve had on the topic of junior UX portfolios, I can tell you that they’re not expecting examples of perfect process-driven work, they want to see personality and if you’ll be a good fit culturally. The rest you can learn on the job!


I asked Scott Smallman as obviously I am not one ?

“Whenever I see someone who has a rationale for the choices they made. It’s not about being right or wrong in the approach or decision but having an understanding and ability to discuss their choices rather than just ‘doing UX’ activities is important.”


  • Too much obsession with “process”

I believe it’s an opportunity to showcase 1) your skills 2) who you are as a human being. We spend more time with our colleagues than our family, so don’t be afraid to show personality.

In an age where there is more emphasis on hiring people who match the culture of the business, a portfolio is a perfect opportunity to show that you’re a cultural fit. It’s much harder to get your personality across on a CV given that approximately 99% of CVs follow the same format.

The ultimate aim is to get hired (duh!) but maybe start to think about your career vision.

Can you take the reader on a journey?

Are you allowing yourself a higher opportunity to be headhunted? (There is a difference between headhunted and applying for a job). Top companies scour portfolios, Medium, GitHub to look for the next thought leaders.

Can you build your brand? A portfolio should be to showcase your work, but all the things you do outside of your day job for the community such as talks, conferences, teaching etc.

Have the questions in mind:

As we all know there is a lot of juniors in the market so do something that will help you stand out.

  • What makes you stand out from hundreds of juniors?
  • Why should someone give you a chance? How much grit and determination have you got?
  • What’s your 5–10-year plan? Give companies an idea of how you want to grow your career.
  • Do you look up to anyone in UX and why?

I’d rather see a junior portfolio which isn’t perfect in terms of process but rather someone who demonstrates they are moldable, teachable, likeable and enjoyable to be around.


I really disagree. You need to be targeted.

Think of a few questions such as:

Does your current work have a UX function? Can you move over? This is a perfect way because you already have buy-in from the company.

You’ve done the course, you’ve got basic knowledge. Now what?

Map out your perfect role

Three things I urge you to look at when mapping out your perfect role:

  • Career advancement.
  • Values.
  • Health/Well-being.

Career development is very important for your first role. Things to consider:

  • Is there a team to learn from?
  • A budget for courses, conferences etc.
  • Have they bought in a junior before? Was it a success?
  • Does the UX work get shipped? You want a portfolio full of end-to-end UX work that gets implemented.
  • Focus on the project, not who the company is. I’d rather work for a small product company on an end-to-end complex project than Facebook on a small microsite. Your first role is vital to get exposure across a breadth of projects.
  • UX research. If you want to be in UX, don’t go to a company who doesn’t do research or have plans to. Makes 0 sense, that’s not UX that is a user-centred UI Designer.