Weld Action Blocks: Drag and drop app builder

---

Weld Action Blocks is a drag and drop web app builder. Build infographics, games, and more without coding.

Thanks to: CodeVisually Permanent link

7 tips to instantly make better webforms

---

Keep it short

However cool you think your form is, the fact is your users don’t like to fill them. As an avid Internet user myself, I have to battle through dozens of forms every week, getting in touch with people, registering new accounts, and so on.

And let me tell you: at least once or twice a week, I don’t submit a form I initially intended to, just because the form is too long and/or asking for info I don’t want to submit. So if you want people to submit your form, keep it short and simple.

Here’s my recommendations on the matter:

• Just ask what you really need to know
• Use default choices (if you own a business in the US, most people who’ll get in touch will be from the US as well, so if you’re asking for their country, make sure that “USA” is the default!)
• Don’t overuse mandatory fields. If someone tries to reach you by email, there’s really no point in requesting a phone number!
• On registration forms, offer the possibility to register with Facebook and Twitter.

Use Ajax validation

There’s nothing more annoying than filling a long form, submitting it and… have to correct it and submit it over and over again, just because for example the username you’ve chosen has already been taken. I personally remember giving up registering on a few websites because of this.

I already talked on CatsWhoCode about a very useful jQuery plugin named jQuery Form. It makes Ajax validation very easy, so make use of it to provide a better experience to your users.

Further reading: Super useful tools to simplify forms development

Make sure it’s mobile friendly

Nowadays, most people are accessing the Internet with a mobile device such as a smartphone or a tablet. This is why you must always make sure that your forms are responsive and mobile-friendly. It’s really annoying when a form isn’t adapted to mobile browsing, and it might prevent many people from actually using your form.

Further reading: Making a website responsive in 3 easy steps

Give people other ways to reach you

Are you on Twitter? Do you have a Facebook page for your site? Then, make use of social networks and provide links to your social media profiles and pages. Emails are great for in-depth, private conversation, but for a first contact, many people nowadays will prefer to use Twitter or Facebook.

Take it easy with captchas

Spam is a nuisance, we all know that. The favorite way of website owners to protect themselves from receiving countless spam emails a day is to use a CAPTCHA. CAPTCHAs aren’t bad by nature, but if you don’t want your users to give up sending your form, please, don’t use those unreadable, brown on black CAPTCHAs. Spam is your problem, not that of your users!

Use the correct HTML5 input types

All modern browsers support HTML5 and its numerous additions to forms input types. Regardless, an incredibly huge amount of websites still use forms that were coded ten years ago.

HTML5 makes it easier for your users to complete forms and is widely supported, so there’s absolutely no reason not to use it. Check the article below for a reminder of the input types introduced by the HTML5 spec.

Further reading: Enhance your web forms with HTML5 features

Answer!

That may sound simple, but actually all of the above tips are meaningless if you fail to answer on time to your visitors’ requests. Things are fast on the internet, and the competition is tough. So if somebody contacts you through your website and hasn’t heard back from you in 24 hours, you can be sure that this person is going to contact your competitor. Take pride in providing top-notch service!

Thanks to: CatsWhoCode.com Permanent link

SpriteKit From Scratch: Visual and Audio Effects

How to Set Up a Hosted WordPress Site

---

WordPress is the most highly ranked and most popular publishing and blogging platform available and about a quarter of all websites on the internet are now powered by WordPress.

This guide covers the steps on how to set up a hosted WordPress website/blog, including the steps on how to register a domain name, finding the best and most reliable host, and preventing your blog from hackers.

Registering a Domain Name

The first things that you need to purchase is a domain name and a web hosting from a reliable provider. Before registering a domain name, here are some of the things you should consider.

A domain name is vital as it gives a person or a brand identity online. The domain name should, therefore, be easy to spell, be a representative of your brand, easy to remember and pronounce, and short and unique.

Reasons to Register a Domain Name

• A domain name helps in building credibility and trust with customers and profoundly influences how customers respond to what is being offered to them.
• A domain name provides an excellent platform for marketing opportunities. This is because it helps to build and improve online presence, therefore making it easier for the customer to find you.
• A domain name gives a person or business a professional image, and this adds credibility and trust to the customers.
• A domain name can improve search engine rankings as it provides an opportunity to include keywords and even use your domain as your keywords.

Finding a Reliable Web Host

After choosing and registering the domain name, the second step is to find a reliable web hosting provider. There are thousands of web hosts to choose from, but it’s important to ensure that the host you choose meets the WordPress minimum requirements.

HostMarks is a great website which provides a list of the best web hosting providers along with detailed reviews which are best rated and voted by real customers allowing you to make an informed decision before choosing a hosting provider.

Things to Consider When Choosing a Hosting Provider

1. The hosting providers’ services should be fast and reliable. The hosting provider should also provide a guarantee for its uptime; the minimum uptime should be 99%, and a partial refund should be provided when the uptime falls below this figure (you will usually need to ask to be compensated).
2. The cost of your hosting account should be reasonable, (the sign-up and the renewal prices). Some of the host providers have a sign-up fee that is relatively cheap but has high renewal prices. It is therefore important to ensure that you check with the renewal prices before selecting host provider.
3. The technical support for the host provider should also be a consideration. It’s important to choose a hosting provider that provides prompt technical assistance round the clock, even during weekends and public holidays in order to avoid any inconveniences.
4. Nowadays, most hosting providers provide users with an automatic installer to install WordPress with just one click. This means that as a blogger you do not have to waste time with the old-fashioned manual installations, which is tiresome, cumbersome and somewhat confusing to beginners.

Protecting Your Blog from Hackers

Having your WordPress blog or website hacked can be a nightmare and potentially damaging for your business.

If your blog is ever compromised, your web host might be able to help you recover access to it and remove any threats or malicious files. You can also use a service like the WordPress Hacked service from FixMyWP in order to recover it.

There are also several ways to prevent unauthorized access to your blog. Here are some things you can do to drastically reduce the chances of being hacked.

Secure Password Usage

Strong passwords are essential for protecting your administrator accounts from getting hacked. Without strong passwords, your blog account will be highly vulnerable to attacks since most of the hackers will easily guess your password through brute forcing. With strong passwords, the chances of brute force attacks are significantly lowered.

A strong password should include the use of at least 1-2 numbers and use of uppercase and lowercase characters. Special characters should also be used (&*$#@ etc.).

Scan the Downloaded Plugins for Viruses

Nowadays it’s easy to download and install plugins within seconds to your blog. Some plugins contain codes with viruses intended to compromise your blog. As a result, it’s highly recommended that you scan plugins that have been downloaded from sites other than WordPress before installation.

Delete the Default Admin Account

By default, WordPress set the username for admin account as “admin”, without changing this username, malicious users/hackers are already halfway in hacking your blog account. To do this you have to follow these simple guides:

1. Create a new admin account that has a username hard to guess
2. Then log out
3. Login with the new admin account and password
4. Delete the old “admin” account
5. Ensure you delete the inactive users

Apart from being annoying, inactive users also pose a security threat to your blog. Some of the users create weak passwords when signing up for your blog. Inactive accounts can be a pathway to hackers to access your blog. To do this without breaking anything, go to WordPress dashboard, click users and this leads you to a page with all users listed, then delete the inactive users.

Install a WordPress Firewall

Shield WordPress Security is a plug-in that protects your blog from hackers. The plug-in alerts you when someone tries to hack your account and also blocks the hackers attempt to hack your account. It’s advisable that you disable the plug-in while making changes to your blog since it will also prevent any changes to the blog regardless of whether you’re the admin or not.

Use HTTPS Instead of HTTP

HTTPS is a more secure version of the HTTP and is more secure. It ensures that information sent is encrypted rather than sent in clear text. Encryption makes it harder for hackers to intercept any information that you send over the internet and limits their ability to decode this information. To achieve this, you will need to install an SSL certificate at your web host.

Hide the Login-in Errors

Ever noticed that upon login with an existing username but a different password that you get a message that says “ERROR, INCORRECT PASSWORD”, but when you log in with a non-existent username and password that you get a message different from the first one that says “ERROR: INVALID USERNAME.” This is a common way that hackers use to access your blog, and it’s highly recommended that you hide such error messages from appearing on your blog.

About the author: Tom Sharp is a professional web designer and the founder of Web Designer Central – a web design blog featuring the latest web design trends, tutorials and much more. Follow WDC updates on Twitter.

Thanks to: Multy Shades Permanent link

Regular Expressions in Python

---

Have you ever wondered what the key is to finding some text in a document, or making sure that a text conforms to some format, like an email address for instance, and other similar operations?

The key to such operations is regular expressions (regex). Let's see some definitions for regular expressions. In Wikipedia, regex is defined as follows:

A sequence of characters that define a search pattern, mainly for use in pattern matching with strings, or string matching, i.e. "find and replace"-like operations. The concept arose in the 1950s, when the American mathematician Stephen Kleene formalized the description of a regular language, and came into common use with the Unix text processing utilities ed, an editor, and grep, a filter.

Another nice definition from regular-expressions.info is:

A regular expression (regex or regexp for short) is a special text string for describing a search pattern. You can think of regular expressions as wildcards on steroids. You are probably familiar with wildcard notations such as *.txt to find all text files in a file manager. The regex equivalent is .*\.txt$

I know that the concept of regular expressions may still sound a bit vague. So, let's look at some examples of regex to understand the concept better.

Examples of Regular Expressions

In this section, I will show you some examples of regex to help you understand the concept further.

Say that you had this regex:

/abder/

This is simply telling us to match the word abder only.

What about this regex?

/a[nr]t/

You can read this regex as follows: find a text pattern such that the first letter is a and the last letter is t, and between those letters comes either n or r. So the matching words are ant and art.

Let me give you a small quiz at this point. How would you write a regular expression that starts with ca, and ends with one or all of the following characters tbr? Yes, this regex can be written as follows:

/ca[tbr]/

If you see a regex that starts with a circumflex accent ^, this means match the string that starts with the string mentioned after ^. So, if you had the regex below, it is matching the string that begins with This.

/^This/

Thus, in the following string:

My name is Abder
This is Abder
This is Tom

Based on the regex /^This/, the following strings will be matched:

This is Abder
This is Tom

What if we wanted to match a string that ends with some string? In this case, we use the dollar sign $. Here is an example:

Abder$

Thus, in the above string (the three lines), the following patterns would be matched using this regex:

My name is Abder
This is Abder

Well, what do you think about this regex?

^[A-Z][a-z]

I know it might seem complex at first glance, but let's go through it piece by piece.

We already saw what a circumflex accent ^ is. It means match a string which starts with some string. [A-Z] refers to the upper case letters. So, if we read this part of the regex: ^[A-Z], it is telling us to match the string which begins with an uppercase letter. The last part, [a-z], means that after finding a string that starts with an uppercase letter, it would be followed by lowercase letters from the alphabet.

So, which of the following strings will be matched using this regex? If you are not sure, you can use Python as we will see in the next section to test your answer.

abder
Abder
ABDER
ABder

Regular expressions are a very broad topic, and those examples are just to give you a feel for what they are and why we use them. 

A nice reference to learn more about regular expressions and see more examples is RexEgg.

Regular Expressions in Python

Let's now come to the fun part. We want to see how to work with some of the above regular expressions in Python. The module we will be using to work with regular expressions in Python is the re module.

The first example was about finding the word abder. In Python, we would do this as follows:

import re
text = 'My name is Abder'
match_pattern = re.match(r'Abder', text)
print match_pattern

If you run the above Python script, you will get the output: None!

The script works just fine, but the issue is with how the function match() works. If we return to the re module documentation, this is what the function match() does:

If zero or more characters at the beginning of string match the regular expression pattern, return a corresponding match object. Return None if the string does not match the pattern; note that this is different from a zero-length match.

Aha, from this we can see that match() will return a result only if it found a match at the beginning of the string.

We can instead use the function search(), which is, based on the documentation:

Scan through string looking for the first location where the regular expression pattern produces a match, and return a corresponding match object. Return None if no position in the string matches the pattern; note that this is different from finding a zero-length match at some point in the string.

So, if we write the above script, but with search() instead of match(), we get the following output:

<_sre.SRE_Match object at 0x101cfc988>

That is, a match object has been returned.

If we want to return the result (string match), we use the group() function. If we want to see the entire match, we use group(0). Thus:

print match_pattern.group(0)

will return the output: Abder.

If we take the second regex in the previous section, that is /a[nr]t/, it can be written in Python as follows:

import re
text = 'This is a black ant'
match_pattern = re.search(r'a[nr]t', text)
print match_pattern.group(0)

The output for this script is: ant.

Conclusion

The article is getting longer, and the topic of regular expressions in Python surely takes more than one article, if not a book by itself. 

This article, however, is to give you a quick start and confidence to enter the world of regular expressions in Python. You can refer to the re documentation to learn more about this module and how to go deeper in the topic.

Thanks to: Envato Tuts+ Code Permanent link

Tutorials and resources to learn and master SVG

---

The Practical Beginner’s Guide to SVG

Are you new to SVG? If yes, this article is a great starting point. It discusses the practical applications, pros and cons, browser support, and also provides a few resources for you to get started in no time.
Read: The Practical Beginner’s Guide to SVG

How to work with SVG icons

One of the most interesting use of the SVG format is definitely for making icons. This article explains in depth how to prepare your icons, make SVG sprites, adding icons to your pages, and styling icons using CSS. A must-read for every serious web designer or front-end developer.
Read: How to work with SVG icons

Optimizing SVGs for Web Use

You probably know that loading speed is a very important factor of the quality of a website. Every element of a web page – images, scripts, stylesheets, and so on – have to be optimized in order to save bandwidth and provide your users the best experience possible.

This article will show you how to optimize your SVG for the web.
Read: Optimising SVGs for Web Use

Inline SVG vs Icon Fonts

I’ve recently showcased some awesome icon fonts that you can use to replace .gif or .png images for icons. But as you’re in the process of mastering the art of SVG, what about a complete comparison of both SVG icons and icon fonts?
Read: Inline SVG vs Icon Fonts

Pure SVG progress circles

Enough theory for now, it’s time to get practical. What about pure SVG progress circles? Here’s a complete, well-written and explained tutorial on how to do it.
Read: Pure SVG progress circles

Distorted Button Effects with SVG Filters

Applying SVG filters on HTML elements gives you some great opportunity to get creative with click interactions. Adrien from Codrops shows us a still kind of experimental, but definitely promising technique to add a distortion effect on buttons using SVG filters.
Read: Distorted Button Effects with SVG Filters

Masking in the Browser with CSS and SVG

Masking is a technique that lets you display selected portions of an element or an image on the screen while hiding the rest. Web developers can use this technique in the browser via the mask property and the SVG mask element. This tutorial will show you how you can use various masking techniques with SVG and CSS.
Read: Masking in the Browser with CSS and SVG

Creative Typography with SVG

SVG allows incredible text manipulation for a top-notch typography. Here’s an article which will show you by the example how your website typography can benefit from SVG.
Read: Creative Typography with SVG

Pro tips for using scalable vector graphics

Let’s finish this round-up with a little guide full of useful tips to embed SVGs, structure your code, use effects, and more. A great addition to your new SVG skills!
Read: Pro tips for using scalable vector graphics

Thanks to: CatsWhoCode.com Permanent link

Bedrock: WordPress boilerplate

---

Bedrock is a WordPress boilerplate that has an improved folder structure and easy configuration. It includes modern development tools like dependency management with Composer.

Thanks to: CodeVisually Permanent link