Convert Your Doodles into Horrific Images with Pix2Pix

What do you get when you blend man-made doodles and machine learning together? Well, the Dutch broadcaster NPO has an answer to that, something called Pix2Pix, a little web application that turns your doodles into rather terrifying images using the machine learning technology.

12 Sites to Create Cartoon Characters of Yourself

.no-js #ref-block-post-1030 .ref-block__thumbnail { background-image: url(“http://media02.hongkiat.com/thumbs/250×160/11-sites-to-create-cartoon-characters-of-yourself.jpg”); }

12 Sites to Create Cartoon Characters of Yourself

If you are not comfortable using real photos to represent yourself in any online profiles and avatars, why…Read more

Created using Google’s open-source machine learning platform called Tensorflow, Pix2Pix uses a system called generative adversarial network (GAN) to create a proper image out of the submitted doodle. To facilitate the creation of the image, NPO has fed the artificial intelligence system with thousands of images of Lara Rense, an anchor that works for NPO.

combine doodles and picturecombine doodles and picture

The end result of this little experiment is a web application that attempts to create a picture out of doodle by using bits and pieces of the images that has been fed to it. According to the demo image that greets the user when the first enter Pix2Pix, the system is capable of generating a rather decent picture of a human face.

However, if your doodling skills aren’t great, the end result tends to be rather terrifying.

Draw Something: Doodles That Go to Extremes [PICS]

.no-js #ref-block-post-11288 .ref-block__thumbnail { background-image: url(“http://media02.hongkiat.com/thumbs/250×160/draw-something-masterpieces.jpg”); }

Draw Something: Doodles That Go to Extremes [PICS]

I have never been much of an artist. Ask me to draw a cat and you may end…Read more

Source: http://www.hongkiat.com/blog/pix2pix-combine-doodles-machine-learning/

How to Manage Git and GitHub Projects with Atom

Great news for my developer friends; Git and GitHub integration have been just shipped with the new Atom release. The new feature was available as a beta for a while but now with Atom 1.18, it’s ready for use to the general public as well. From now on, you can perform common Git and GitHub operations without leaving the code editor.

A Look Into Atom: Github’s New Code Editor

.no-js #ref-block-post-19566 .ref-block__thumbnail { background-image: url(“http://media02.hongkiat.com/thumbs/250×160/atom-code-editor.jpg”); }

A Look Into Atom: Github’s New Code Editor

Github, a popular git repository that hosts a ton of open source projects, has recently announced a new…Read more

As Atom started as GitHub’s internal tool, the step of integrating Git and GitHub is not super-surprising, however it will further improve Atom’s development workflow for sure. With the new release, Atom also strengthens its position in the code editor scene, as Visual Studio Code has already offered the same feature for a while.

Atom with GitHubAtom with GitHub

Initialize a Git repository

Atom got two new tabs, one for Git and another for GitHub, through which you can handle your Git operations. You can access them either by clicking the View > Toggle Git Tab / Toggle GitHub Tab menus in the top menu bar, or by clicking the little > hover icon on the right-hand side of the editor pane.

(If your top menu bar is hidden you can reveal it by pressing the Alt key.)

Open Git tabOpen Git tab

You can also use the following keyboard shortcuts to access the tabs:

  • Git Tab: Ctrl + Shift + 9
  • GitHub Tab: Ctrl + Shift + 8

Click the Create repository button and choose the folder where you want your repo to be saved. Finally, click the +Init button.

Init Git repoInit Git repo

And that’s all, your Git repository has been initialized without having to touch the command line. This is how the starter screen of an empty Git repo looks like:

Starter screen of Git repoStarter screen of Git repo

As you can see, the layout is as convenient as it can be. You can see the staged and unstaged changes under each other, and make a commit at any time. Plus, you can switch the Git tab on and off by simply hitting the little > icon.

Although the “Project” pane on the left-hand side doesn’t show it, the repo, as it should, contains the hidden .git folder with your Git settings.

Stage changes

I quickly created two test files, index.html and style.css, to see how staging works.

Atom puts both files into the “Unstaged Changes” section in the Git pane on the right. And, in the “Project” pane on the left, the names of the unstaged files appear in green.

Unstaged changesUnstaged changes

There are three ways you can stage the changes:

  1. Stage File – stages only one individual file
  2. Stage Selection – stages a part of a particular file
  3. Stage All – stages all unstaged files
Stage an individual file or selection

If you want to stage only one file then just click on the file name in the “Unstaged Changes” section. A new tab will open up in the editor pane where you can choose if you want to stage the whole file (Stage File) or only a selection of it (Stage Selection).

Stage individual fileStage individual file
Stage all unstaged files

If you want to stage all unstaged files at once just click the Stage All menu on the top-right corner of the Git tab.

The staged files are moved to the “Staged Changes” section. And, if you change your mind you can unstage them by clicking the Unstage All menu at top of the “Staged Changes” section.

Staged changesStaged changes

Commit changes

The “Stage Changes” section is basically your staging area. When you reach a milestone in development you need to commit the changes. By committing, you save the momentary state of the project into the Git version control system so that you can return to it (if you want) without losing anything.

To commit your staging area, type a commit message (that shortly describes the changes you made since the last commit) into the Commit message box, and click the Commit button.

As a result, both the “Unstaged Changes” and “Staged Changes” section will be cleared and the color of file names in the “Project” pane will be changed back to white.

Clear staging areaClear staging area

Other Git operations

There are a bunch of other Git operations you can also perform right from the Atom editor. For instance, you can create a new branch by clicking on the branch name at the bottom of the Git tab. Here, you can also switch between the different branches.

Create new branchCreate new branch

However, not all Git operations are available from Atom yet. For instance, you can’t delete branches, or make configurations. To perform these tasks, you still have to use the command line. Atom’s Git integration is still very new, so hopefully, support will be added to these less frequently used operations in the future.

You can access a list of all Git-related features via the Command Palette by using the Ctrl + Shift + P key binding and typing “Git” into it.

Clone a GitHub repository

Atom’s new Git integration feature doesn’t only work locally but you can clone a GitHub repository as well.

To do so, open the Command Palette by hitting Ctrl + Shift + P and select the GitHub: Clone command. Then, add the URL where you want to clone from (the URL of the GitHub repo) and the folder where you want to clone the repo into. Finally, click the Clone button.

Clone GitHub repoClone GitHub repo

Authorize GitHub for Atom

To make changes in a GitHub project, you need to authorize GitHub for Atom. Follow the instructions you see inside Atom’s GitHub tab. First, visit the github.atom.io/login URL and sign in to your GitHub account. Here, you can generate a token with which you can perform the authorization.

Authorize GitHub for AtomAuthorize GitHub for Atom

Enter the authorization token into the input field you can see in Atom’s GitHub tab and log in to your account.

Enter authorization tokenEnter authorization token

From here, you can access the three most common GitHub operations: fetch, push, and pull requests by clicking the down arrow icon at the bottom of the GitHub tab.

GitHub operations available in AtomGitHub operations available in Atom
How to Add Custom Code Snippets to Atom

.no-js #ref-block-post-28067 .ref-block__thumbnail { background-image: url(“http://media02.hongkiat.com/thumbs/250×160/add-custom-code-snippets-atom.jpg”); }

How to Add Custom Code Snippets to Atom

It’s not a coincidence that Atom, the source code editor created by Github is popular in the web…Read more

Source: http://www.hongkiat.com/blog/manage-git-github-atom/

Create Cascading Effects Easily with CascadeJS

Fancy animations are a dime a dozen on the web. They’re getting easier to create with tons of incredible animation libraries.

Cascade.js is one more library to add to the list, and it’s definitely a unique one. With Cascade, you can design custom animation effects using cascading letters in text or cascading elements in a main container.

This library has no dependencies; it runs on classic JavaScript. You can install it through npm, Bower, or by downloading a copy right from GitHub.

To get CascadeJS working, you’ll need two files: a CSS file and a JavaScript file. They both come packaged with minified versions to save you a few KBs on page size.

Each Cascade element gets broken down into separate parts which animate individually through <span> elements. These are added dynamically, so you don’t need to change anything in your HTML.

But, you will need to set up the flow() function in your file, after targeting whatever element you want to animate.

You can actually use jQuery with this library if you want, however it’s not required. So, if you prefer selecting elements with jQuery then feel free to use that instead.

Here’s a snippet of vanilla JavaScript from the main site’s demo:

<script>
  var element = document.getElementsByTagName('h1')[0];
  var cascade = new Cascade(element).flow();
</script>

You can pass the flow() element with no parameters, or you can configure them all yourself. It takes eight optional parameters for editing the animation style, timing, duration, and optional CSS classes.

CascadeJS has another function called fragment() which lets you split up letters (or elements) into separate containers, without animating them. You can use this function to color and restyle text on the page by targeting each individual letter in a word. Pretty cool, right?

All code samples are openly available on the main library page, so you can copy/paste and tinker on your own. But, you’ll also find the documentation on the GitHub page if you’re looking for a clearer way to get started.

CascadeJS pluginCascadeJS plugin

Source: http://www.hongkiat.com/blog/build-cascading-animations-cascadejs/

Developers: Larder is The Bookmarking Tool You’ll Love

GitHub is a powerful resource for developers to connect and share work. But, it’s not the best organizational tool for saving and sorting through libraries.

With Larder, you can bookmark all your favorite libraries, frameworks, plugins, and tools in one place. You can organize by languages and by tags to make sorting easier. Plus, it comes with a free plan, so developers can use this for life without ever paying a dime.

10 Useful Github Features You Need To Know

.no-js #ref-block-post-22344 .ref-block__thumbnail { background-image: url(“http://media02.hongkiat.com/thumbs/250×160/github-overlooked-features.jpg&#8221;); }

10 Useful Github Features You Need To Know

Github is now the place where programmers and designers work together. They collaborate, contribute, and fix bugs. It…Read more

If you have a GitHub account connect directly to Larder to share your stars and personal bookmarks. This is perhaps the easiest way to sync everything together into one place. Larder will automatically refresh your GitHub stars every 24 hours to pull the latest changes each day.

If you’re an Android user you can also the Larder app completely free from the Google Play store. The team is also working on an iOS app which should be out at some point in the near future.

Don’t look at Larder as a code-only resource. It’s also fantastic for saving tutorials, opinion pieces, or comment threads on Reddit that you’ll want to read through again.

If you’re a fervent developer you should give Larder a try. It’s free to join and it provides the best bookmarking service for coding anywhere on the net.

Not to mention, they also have a free API so developers can connect to the site and build their own related apps.

Larder app for AndroidLarder app for Android

GitHub users will find the most value from Larder’s sync feature. It pulls all your stars and bookmarks them automatically, plus it pulls weekly updates on those starred repos. This way you can stay on top of all your favorite libraries & frameworks with updates cataloged in one place. Very handy!

Source: http://www.hongkiat.com/blog/bookmark-codes-dev-tools-larder/

20 Free SEO Ebooks To Improve Your Website

The field of Search Engine Optimization (SEO) is changing at a very fast pace. The era of yearly algorithm updates has pretty much ended. These days, Google algorithms hit on monthly or even weekly basis and without even a warning causing dramatic changes in ranking and altering the SEO practices.

20 Free Ebooks For Social Media Marketers

.no-js #ref-block-post-19812 .ref-block__thumbnail { background-image: url(“http://media02.hongkiat.com/thumbs/250×160/free-ebooks-social-media-marketers.jpg&#8221;); }

20 Free Ebooks For Social Media Marketers

If you run a business or provide a sort of service in this day and age, it’s incredibly…Read more

With so much hurly-burly going on in the SEO world, it becomes important to keep your SEO knowledge up to date, and for that, there’s no other source better and more accessible than e-books.

In this post, I’m going to share with you 20 e-books to update your know-how about latest SEO practices that you can download and read for free. So, let’s go over this list and see what each e-book has to offer.

Link Building Strategies for 2017

This e-book features 13 SEO tactics on how to build backlinks, improve your SEO strategy and drive traffic to your website. In this e-book, you’ll get to know how to find backlinks opportunities in “best of” roundups, submit your website to feedback sites, to use moving man, and much more.

link-building-strategieslink-building-strategies

SEO Foundations for Small Business Owners

SEO recommendations in this e-book will come in handy for entrepreneurs and business owners. It includes popular SEO tools, local SEO, and a number of practical tips to try today. If you’re about to start a new business or launch the very first website in your life, this e-book will be extremely useful.

seo-foundationsseo-foundations

E-commerce SEO: The Definitive Guide

This guide is one of the best on e-commerce SEO you can find on the web today. It contains everything you need to know from keywords to technical SEO aspects, and how to turn users into clients. You can read this guide online or download a nice PDF version, read or keep it for later.

seo-for-ecommerceseo-for-ecommerce

The Beginner’s Guide to Link Building

If you’re new not only to SEO but to link building practices as well, this guide will help you understand this both things. You’ll get to know what is link building, why it’s so important for SEO, what links mean for Google, and how link building can benefit your business.

beginners-guide-linkbuildingbeginners-guide-linkbuilding

The Beginner’s Guide to Search Engine Optimization

This e-book has been created to teach you SEO in quite and easy way. It provides a basic knowledge about SEO and its main aspects.

beginners-guide-seobeginners-guide-seo

SEO Tutorial for Beginners in 2017 (Updated)

An e-book to tell you everything you need to know about white hat SEO. Here you’ll get to know what is SEO, how to drive traffic to your site, what is user experience and how to improve it, ranking factors, keyword research and much more. This is 4th modified and updated version of the e-book first published 7 years ago.

seo-tut-for-beginnersseo-tut-for-beginners

DIY SEO: A Beginner’s Guide to E-commerce Website Optimization

If you’re about to open an online store or already have one, you would want your products to be easily found in search engine results, don’t you? This e-book will guide you through keyword research, on-page SEO, blogging, meta tags, networking, social media, digital marketing and more.

diy-seodiy-seo

Inbound Marketing: The Intro to SEO

This 22-pages e-book will teach you what is SEO, how to create a good SEO strategy for your business, understand the structure of on-page SEO, learn best practices of off-page SEO, and use social media effectively. You’ll also get to know how to use Google Adwords, Google Incognito tab, check your ranking and start making right decisions.

inbound-marketinginbound-marketing

Technical SEO for Web Developers

This is a serious 80-pages SEO e-book for software developers working on both small or complex projects. The ebook is accompanied with links to useful SEO tools, real-life example to inspire you and helpful charts. You’ll learn SEO for new websites and existing old websites.

tech-seo-developerstech-seo-developers

The Advanced Guide to SEO

This guide is written by Neil Patel the guru of SEO marketing, and it’s not a usual e-book. The guide is made in a format of infographics with illustrations, charts, images, and graphics. This guide is divided into 9 chapters and is one of the most detailed advanced SEO guides on the web. It tells about SEO basics, site speeds, SEO for WordPress, keyword research and more.

advanced-seo-guideadvanced-seo-guide

SEO in 2015: The GoDaddy Pro eBook

An e-book created by the famous web hosting provider GoDaddy, it’s an in-depth guide for designers, developers, and marketers who want to learn the art of SEO from the inside. The ebook consists 60 of pages of information with tons of references, tips, examples and useful SEO checklists.

godaddy-pro-seogodaddy-pro-seo

Little Blue Link Building Book

This free e-book by Ahrefs is here to help you with white hat link building. It includes 12 parts telling you about creating visuals, spying on competitors, guest blogging, PR, social sharing, broken link building, and much more. Each part is accomplished with recommended tools and links for further reading.

little-blue-ebooklittle-blue-ebook

Link Building: The Definitive Guide

Black hat SEO days are gone, and even if some of these techniques may work today, they are not as effective as they used to be. This guide which can be downloaded in PDF is actually a collection of the best articles on link building starting from fundamentals to content marketing, email marketing, and case studies.

link-builidng-baklinkolink-builidng-baklinko

How to Build High-Quality Backlinks with Infographics

Have you ever known you can build high-quality backlinks with visuals, for example, infographics? This quick free e-book will guide you through the process of creating infographics that can go viral, promoting it using different social media sites and guest blogging.

infographics-for-linkbuildinginfographics-for-linkbuilding

A Complete Guide to SEO for Musicians

Apparently, SEO for different industries and kinds of business is different. This SEO ebook is crafted specifically for musicians. It will tell you about SEO strategy to apply for your brand, share easy-to-follow advice, illustrations and screenshots.

seo-for-musiciansseo-for-musicians

The Ultimate SEO Guide for Tour & Activity Companies

This e-book is written specifically for tour and activity companies who are looking for methods to improve their SEO. Here you’ll find basics of SEO, content marketing, link building and a step-by-step SEO checklist of what to do next.

seo-for-tour-travelseo-for-tour-travel

Understanding SEO techniques

This 25-pages e-book shares some basic knowledge of how to apply SEO to your business and some ideas how to start out. It includes real-life examples, SEO tools, fresh content ideas for your blog and things you can do today to change the way search engines see your site.

understanding-seounderstanding-seo

Everything You Need to Know About Long Tail Keywords

This brief yet powerful e-book features strategies for choosing and using long tail keywords for your website. If you know what queries your potential clients use to find a specific product or service, eventually, you would know how to match your content to them.

long-tail-keywordslong-tail-keywords

Link Building: How to Build Links for SEO, traffic and response

For those of you who want their business to be found online, you need to have content with proper keywords and backlinks. This long in-depth 130-pages e-book will tell you about content, creating an online community around your brand, writing for search engines, online PR, networking, and promotion.

link-building-guide-freelink-building-guide-free

7 Golden Rules of Link Building

Here is one more guide on link building telling about building trust, anchor text, no-follow links, relevant content, spam, and PageRank. A quick guide with lots of interesting information. Use the pop-up window to fill in your email address and get your bonus e-book.

golden-rules-linkbuildinggolden-rules-linkbuilding
20 Free SEO Tools Every Blogger Should Know

.no-js #ref-block-post-19311 .ref-block__thumbnail { background-image: url(“http://media02.hongkiat.com/thumbs/250×160/seo-tools-bloggers.jpg&#8221;); }

20 Free SEO Tools Every Blogger Should Know

Aside from a nice-looking website with interesting and regularly updated content, SEO is essential to bloggers. While it’s…Read more

Source: http://www.hongkiat.com/blog/free-seo-ebooks/

Create Custom Right-Click Context Menus with justContext.js

Every web browser has a default context menu. This appears when the user right-clicks anywhere on a page and it usually has the same options, such as “copy”, “save”, or “inspect element”.

With the justContext library, you can build specialized context menus for any elements on your site. These can be auto-populated with anything you like and you can write custom functions to run whenever the user clicks an option in your custom menu.

justContext pluginjustContext plugin

Any page element can support its own context menu. This means you can target individual items such as slideshows or HTML5 video players, or you can target the entire page body.

You have full control over the theming of the context menu, including fonts, colors, icons, and even separators to divide your menu into sections. This plugin really lets you create a full context menu from scratch with any features you like.

By default, justContext comes with two themes: dark and light. You can choose between them and find whichever one best matches your website.

Each theme can be customized using different Google Web Fonts, not to mention the entire Font Awesome library is packaged by default.

Check out the live demo to see it in action. It works in all browsers except Internet Explorer but this shouldn’t be a problem considering Microsoft’s push to the new Edge browser.

justContext.js demojustContext.js demo

Creating the actual context menu is a little tricky. It requires a few CSS classes and it’s all hard-coded in HTML into your web page.

Here’s a sample from the main repo on GitHub:

<ul class="jctx jctx-id-foo jctx-black jctx-black-shadow">
	<li data-action="cut">Cut</li>
	<li data-action="copy">Copy</li>
	<li data-action="paste">Paste</li>
	<hr>
	<li data-action="new_pkg">New package</li>
 <li data-action="new_cls">New class</li>
	<li data-action="new_intf" class="disabled">New interface
 (a disabled entry)</li>
</ul>

If you’re willing to tinker with settings you can do a lot with this plugin. But, I also admit it’s a niche-specific resource that won’t be valuable to all websites.

Regardless of why or how you’d use it, justContext is the absolute best resource for creating web context menus from scratch. All documentation is available on GitHub and the plugin is 100% free to use on any web project.

Source: http://www.hongkiat.com/blog/custom-context-menu-justcontext/

Using OneDrive ‘Files on Demand’ in Windows 10 Insider

Back at Build 2017, Microsoft previewed a new OneDrive feature called Files on Demand. If you’re a participant of the Windows 10 Insider program, you can now get your hands on the feature as Microsoft has rolled out Files on Demand to those who are part of the Fast Ring of the Windows 10 Insider program.

5 Features in Windows 10 Insider’s Latest Build You Should Know

.no-js #ref-block-post-30243 .ref-block__thumbnail { background-image: url(“http://media02.hongkiat.com/thumbs/250×160/windows-10-insider-new-features.jpg&#8221;); }

5 Features in Windows 10 Insider’s Latest Build You Should Know

The Fall Creators Update for Windows 10 has just gotten a lot more interesting as the latest build…Read more

With Windows 10 Insider Build 16215 installed, users would be prompted by the OneDrive app to enable Files on Demand upon login. Once the feature is enabled, you can begin taking advantage of the feature.

enable files on demandenable files on demand

Using File on Demand

To begin using the feature, you’ll need to open your OneDrive folder. In the folder, you’ll see a new Status tab that comes with various icons that represent the state of the file in OneDrive.

Files that are available on both OneDrive and the device you’re on are given green check marks, files that are currently syncing between the device and OneDrive are given the Sync icon, while files that can only be found on OneDrive are given a Cloud icon.

cloudcloud

How does it work

So how does Files on Demand work? Once the feature is active, OneDrive would stop downloading entire folders to your computer. If user requires a file that is currently unavailable on their computer, all they have to do is double-click on the file in question from their OneDrive folder, and OneDrive would immediately download and open the file.

All the other files in the same folder will not be downloaded until the user decides to open it. As for files that are too important to not have on your device, Microsoft has added an “Always keep on this device” option to OneDrive. Files or folders that are tagged with this option will always be downloaded to the device, making them available whenever you need.

music toolsmusic tools

Useful though the feature may be, do note that the early build nature of Files on Demands means that the experience is still rather rough around the edges.

If you’re thinking of jumping onto the Fast Ring just for this feature, my personal advice is to wait until it gets released into the Slow Ring.

Cloud Storage Face-off: Dropbox vs Google Drive vs SkyDrive

.no-js #ref-block-post-15241 .ref-block__thumbnail { background-image: url(“http://media02.hongkiat.com/thumbs/250×160/dropbox-gdrive-skydrive.jpg&#8221;); }

Cloud Storage Face-off: Dropbox vs Google Drive vs SkyDrive

If you follow hongkiat.com closely, you’ll know that we have mentioned Dropbox, Google Drive and SkyDrive before. In…Read more

Source: http://www.hongkiat.com/blog/one-drive-files-on-demand-windows-10-insider/