1stwebdesigner

---

What Programming Language Should I Learn in 2015? Posted: 26 Feb 2015 06:35 AM PST We live in a peak time of information technology. What Is The Biggest Mistake Web Designers Make The Most Often? We have written and grown a lot with you during these years in this web design industry. As year 2015 has arrived, you must think about where you want to go and what you want to accomplish. It is time to learn from the past years mistakes and with new-found inspiration start trying new things again. For me this 2015 is the chance to be foolish again after being bruised by business failures (lessons). As Steve Jobs says – “Stay Hungry, Stay Foolish.” As you have noticed here at 1stWebDesigner, we don’t go into teaching hardcore programming or anywhere deep in graphic design (but we care a lot about converting and usable websites). We know that if you really want to learn, there are more than enough good resources to learn deeply about programming, web designing, and becoming a high level graphic designer. However, we have noticed the main reason why most web designers don’t succeed is because they fail to see their freelance web design venture as a business. They think that if they learn good skills and the right web programming languages, clients will come magically. But this rarely happens! Consider this – Most people despise salesmen, most especially a used car salesman. A lot of people always cast them in a bad light – opportunists. But why do you think sales people often get paid the most in the company? Your entire company should be considered your branding department Click To Tweet Even the best products need to have a marketing campaign because they need to be sold. The same way goes for your freelance career. For it to become successful, you need to understand that once you start working as a freelancer, you become your own boss – you own the business. Owning a business means, you need to manage the finances, you need to sell your services to clients, and you need to actually do most of the work. Most designers fail in this area – they cannot find clients, they don’t know how to stand out from the crowd, and sell their services. Do you stand a chance versus big agencies? Oh yes, you do! Big Brands Prefer To Work With Smaller Agencies The good news is that, now, once you know what you are doing, you can get contracts from big brands.  That is what we are focusing here at 1stWebDesigner. Giving you the business knowledge you need to land these high level clients and become a true 1st Web Designer – a professional who takes control of his life, is successful, and financially stable. Your biggest strengths that will make you attractive to big brands are SPEED and PERSONAL ATTENTION. You are fast because it is just you or you have a small, agile team. Speed is the soul of every business. Click To Tweet What are your strengths compared to big agencies?: You are fast – you can give all the time you have to the big client and nurture him to provide the best results. Big agencies have a corporate setup. It takes time for them to make decisions and move forward. On the other hand, you are small allowing you to change direction in moments and immediately provide changes after your client asks them. You are flexible – you can work on different times and make adjustments for whatever big client wants. Why wouldn’t you? It’s your opportunity and if you are true professional, you love what you do and you love to do the work you are proud of. You want to deliver great results. You also don’t need to staff a team of designers in-house. You can just ask a friend or a contractor to help out with the things that aren’t your expertise. The key, however, is still the fact that you can move forward fast. You are cheaper –  your expenses likely will be much lower than any big agency. You don’t have excess weight, you are agile, and you can afford to charge less than the big agencies. While this isn’t your best selling point, you have the power to be cheaper while the big agencies don’t. You adjust to technology faster – big agencies likely will have processes and systems in place to ensure a faster working pace within a big team. You, on the other hand, can easily adjust and use new technology where needed. You have no barriers and you love to try new things. You know that it is your competitive edge. You are personal – while big agencies will get a project manager to work on their project, you are the CEO of your own business. You know you are awesome and you will do everything to please the client and willingly take the extra mile to satisfy him. Big agencies usually cannot afford that because they have too many clients and they need to spread their attention. Clients love speed, quick turnover, and they love to see their agencies #deliver. Are you one of these agencies? What technologies, programming languages to use? These are the regular questions often asked by people at 1WD What are the best programming languages I should learn and use? What is the best graphic software to use? How do I learn web design? You always want to find the next great tool or the shiny app of a new programming language that will help you have a competitive edge in the web industry and show that you are true ambassador of new technologies. Ruby on Rails programming language, Ghost, Craft content management system built with PHP and C, Java, C++ for mobile app creation are super trendy right now. Before you decide to learn a new language, however, decide what you truly want to achieve. Do you want to spent countless hours coding and designing, or you want to run a web design business? There is nothing wrong with being a hardcore programmer or true artist, but we are here to educate you about having a bigger impact, scaling, and helping clients to create a CONVERTING website. Programmers will solve technological issues and designers will make everything pretty but a 1st Web Designer will know the basics of programming and designing but will look beyond that by helping clients create an effective, converting website. Make sure you know the basics of design and business. What does creating a converting website means? It means you know about internet marketing. You know about A/B testing. You know what drives sales, how to set up a mailing list, and you how to create a landing page that is beautiful as well as converts visitors to sales. You will not let technology stand in your way. As you learn the business skills, you will understand what the client truly desires when he looks for a designer who will build the website for them. Your client won’t be technologically smart and that’s why he needs you. However, your selling points aren’t – “I will apply the latest web design trends, use Ruby on Rails, and create a responsive great looking website for you!” Your selling point is to understand why the client is hiring you, what results he is looking for and then, deliver him the results with your skills. You might not use the sexiest JavaScript plugin or latest programming language for that, but nobody cares except you. Your client just wants results and he wants them fast. He doesn’t care how they are achieved. We are proposing you a world of delegation and working on solving difficult problems by using your designers and business knowledge. This is the way of a professional. This is the principle we embrace. Can you imagine how this world would look like? We have two great case studies with Lauren Gray and Ouida Mac, who learned how to delegate and serve their clients better. They become smarter and they were making more money. Who wouldn’t want that? By delegating and having a team, you can basically make several copies of yourself and have a much bigger impact and faster results. The Podcast Episode with Lauren Gray Listen To A Success Story From Lauren Gray Only those who have been in the freelancing business long enough have seen its dark side – cheapskate clients who give little value to your talent and work. Such was the case of Lauren Gray, who used to charge just around $300 for a web project but is now charging 10 times the amount of what she used to charge. From being one of the freelance web designers in the sea of the web design industry, Lauren Gray has successfully transitioned herself to become a market leader who found her own niche and go on to establish her own company. Read the original article here. The Podcast Episode with Ouida Mac Listen To A Success Story From Ouida Mac Ouida was able to transform herself from someone else’s contractor to becoming her own manager hiring other designers to do the work while she focuses on the more important aspect of her business. From $15 – $20 an hour, Ouida now charges $75/hour, an amazing 200% increase from what she used to charge. Read the original article here. The best way to grow your business is to learn the business skills, delegate, and get contractors and partners to help you out on a per project basis. But wait, wait, don’t run before you can walk. Have The Foundation of Web Development First In order to hire and delegate people successfully, you still must know the foundation of web development. What’s behind building a responsive website, what’s behind the styling and designing, how to build a functionality in the website your client needs. Don’t become a ninja god at it. Just learn the basics so you can effectively delegate and realize if any of the contractors and your helping hand is messing around with you, taking too long time, etc. To help you do that, we have developed a web design course for you where we teach every aspect of creating a successful website, starting from design, concept, styling, deployment, etc. Get the foundation you need to have as a professional web designer. Get The Ultimate 2015 Web Design Learning Course We recommend that you rely on the proven tools which let you work quickly and effectively. By using proven and tested programming languages for web development, you will save time and will be able to provide fast results to your clients. That is why, we recommend learning these top programming languages and graphics tool: Adobe Photoshop for web design creation Be an expert in HTML + CSS – basic programming languages you need to know to work with anything web related. HTML5 + CSS3 nowadays WordPress – this is the most popular CMS with serious power and functionality which is more than enough to build the functionality clients need. JavaScript to know bits of adding style to the website, but it’s optional to learn All of this is enough, so you can focus on learning how build a website, that leads to results client desires. By delivering high level results, you will be able to charge more much faster. You will become irreplaceable. It is true that clients can find another good designer or programmer much easier but they will have difficulty finding a professional who understands what they need and will create a converting website. Our recent course will allow you to learn the fundamentals you need. We spent a year in 2014 to learn from the previous course feedback; thus, we are able to build even better training course the second time around. Here is the live demo preview of the site, so you can see what you will build from scratch if you join us. We believe we have created The Ultimate 2015 Web Design Learning Course, which will teach you how to build your own WordPress website which is 100% responsive and flat. In 9 hours of video content, you will learn how to build website from scratch in Photoshop and then convert your PSD design to HTML5 and CSS3. Finally, we will also teach you how to use Bootstrap magic where you will learn how to convert website to fully responsive and functional WordPress website. We throw in some business lessons, interviews and many bonuses as well to amplify your learning and help you get some clients as well! To learn more about the course, visit RockingCode.com. What you are waiting for? Take your skills to the next level right now! Make sure 2015 is the year of changes and great achievement for you! What is your opinion about learning new programming languages versus learning business communication skills and delegating?

You are subscribed to email updates from Web Design Professionals - 1stWebDesigner To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 1600 Amphitheatre Parkway, Mountain View, CA 94043, United States

1stwebdesigner

---

The Knowledge That Will Double Your Hourly Rate As A Web Designer Posted: 25 Feb 2015 03:07 AM PST Clients will pay you for the results you deliver. How Can I Possibly Increase My Freelance Design Rates? Let me tell you a story of a $100 nail, which will change your whole perception about how much you can charge as a freelancer or service business owner. If you will get this story and article right, your freelance design rates and happiness levels will skyrocket. If you won’t you will keep competing in the bidding wars never being able to make just enough money to have a proper living. Let’s get to the story.. One man had a gorgeous parquet floor in his house but one day it suddenly started creaking. Every time someone walks around the house would make loud creaking sounds which irritated this man a lot. At first, he tried fixing it himself by rearranging the furniture. Then, he called the guys who made his floor and had them take it apart and put it back. But nothing worked because the creaking continued. Someone told him about the best carpenter in town and so he invited the man to his house. The carpenter walked around the house for a few minutes and listened carefully to the creaking sound that came from the floor. Then, he took a tiny little nail and hammered it between two sections of the parquet. The creaking went away. - “That is amazing! How much do I owe you?” the guy asked. – “A hundred dollars,” replied the carpenter . – “You mean I am going to pay you a $100 for one tiny nail?” – “Of course not. You’re only paying 10 cents for that nail and $99.90 goes for my knowledge where to put it.” Think about how you can deliver better results to your client.  What Are You Getting Paid For? The hours you spend designing a website for someone are the hours of Your Life that you can never get back. So when you sell a part of your life to someone, you want to sell it at the highest price possible. The question, therefore, is: what makes a web designer charge more per hour and how to increase your freelance design rates? It’s the knowledge! The knowledge that makes you solve the problems of your clients. If you understand the goals and the pains of your clients and you have enough knowledge to address them like no one else, you can charge a lot higher rates for your freelance design work. Just like the carpenter from my story. Think how to add more value to your service and your client. You Should Have Your ROI As A Web Designer Why do people launch websites anyways? They launch websites because they want to make money (in most cases). So instead of designing a “good-looking picture,” you should be designing a “profitable online entity” that will help your clients achieve their business goals. You can easily persuade a person to pay you 2x more if you explain him that with your design he will easily return that money in a few days. That’s your ROI. Cheap designers create what the client asks them. Expensive designers create what the client needs. Click To Tweet You have to familiarize yourself with all the ins and outs of the business your client intends to put online and create a perfect website that will give your client the results he needs. If you’re able to create a website that will bring tons of money to your client, he will happily share some of that money with you. Learn To Design For Conversions If you’ve never heard of CRO (Conversion Rate Optimisation) I guess you’re not getting paid a lot for your design work. What’s the point of having a website that does not convert visitors to fans, leads, or sales? Different websites have different goals but, generally, they can be divided into three groups: Designed to make you stick and regularly come back: https://www.youtube.com/ ; http://www.buzzfeed.com/ ; http://www.reddit.com/. Designed to make you opt in for something. This can be a free service, a trial period, or email updates: https://basecamp.com/ ; https://www.dropbox.com/ ; http://www.groupon.com/ Designed to make you buy something: http://www.amazon.com/ ; http://themeforest.net/ ; http://www.ebay.com/ You, as a web designer, should study some psychological principles and conversion optimization best practices to make sure your design is perfect for achieving the business goal that it was built for. A good example would be this eye-tracking study from ThinkEyeTracking: Predict where people will look and ensure design converts. Before (eye looking straight ahead): Only 6% of 200 usability test participants looked at the product. After (eye looking towards the product): 84% of usability test participants now looked at the product! A few pieces of knowledge like that would easily impress your client and persuade him that you’re well worth your money. Where to start to learn about conversion rate optimization? If you’re totally new to this, I suggest you read the book Web Design For ROI. Then, you might want to become a regular reader of ConversionXL blog, because they are one of the best resources on CRO so far. Design for conversions, results. Learn To Design For Usability If you’re still thinking about websites as a bunch of static HTML pages, you’re way too old school my friend. Today a website can be just about anything: a social network, an online community, a blogging platform, a web tool, a crowdfunding platform, etc. New start-ups emerge every single day and there is a learning curve to every one of them. If that curve feels comfortable, people will stick. But if it’s not, you’re out of business. The way you make the learning curve painless is by applying usability principles to your design. A good example would be the navigation menu of the website you’re designing. There’s a good chance that many people will land on some internal page and if you hide the navigation menu from them in a “not-so-obvious” place, they will bounce. That is why the vast majority of websites has the navigation menu at the top of every page. Read more about common navigation menu mistakes at KissMetrics article. Don’t underestimate user friendliness in the website. Another important thing to keep in mind is the device that people will use to access the site. According to Mary Meeker, mobile usage now accounts for 25% of all web traffic in 2014. That is up from 14% a year ago. This means that some knowledge about responsive design will instantly make you a more expensive web designer. Where you can start? There’s an awesome book by Steve Krug called Don’t Make Me Think and once you’re done with it, go read some articles of Jacob Nielsen because he’s considered as one of the pioneers of usability. Learn To Design For Readability It amazes me how many designers don’t pay attention to text content. I’m a huge fan of typography and I believe that a good selection of fonts can breathe some charisma into your website. Just think about it – every major brand has its own unique font but that’s only the tip of the iceberg. Did you know that the optimal width of text content is about 600 pixels (or 100 characters per line)? That number comes from research by Mary C. Dyson called “How Physical Text Layout Affects Reading From the Screen”. To me, this looks like a perfect bit of knowledge to impress your clients and ask more for your design work. And there’s so many other stuff you have to consider, such as typeface, size, spacing, line height, subheadings, paragraphs, etc. All of that makes the website more readable, and people stick longer and convert better. Now, do you know who else used to be a huge fan of typography? “Because I had dropped out and didn’t have to take the normal classes, I decided to take a calligraphy class to learn how to do this. I learned about serif and san serif typefaces, about varying the amount of space between different letter combinations, about what makes great typography great. It was beautiful, historical, artistically subtle in a way that science can’t capture, and I found it fascinating.” - Steve Jobs Where to start? I haven’t heard of any good books on typography and designing content (maybe you can recommend me some?) but I sure know some amazing websites on that topic: http://typedia.com/ http://www.fonts.com/ http://ilovetypography.com/ Time To Become Smarter I hope you resonate my idea that becoming more knowledgeable in your field is a perfect way to earn more money and be able to increase your freelance design rates while cutting your working hours. Shameless self promotion: If you want to spice up your web design skills and learn Bootstrap, building WordPress responsive site, you might want to check out our recent course RockingCode. In fact, if you look at the richest people in the world and their habits, you’re going to discover that they love to self-educate: 63% of them listen to audio books during commute; 88% read 30+ minutes each day; 86% believe in lifelong educational self-improvement. These numbers come from an awesome infographic called “Habits of the World’s Wealthiest People”. So, I guess now you can see the pattern. This article has been written by Tim Soulo, Friend and Premium Content Partner of 1WD. In case you’re looking for some great business / life / productivity advice, I encourage you to download my free ebook called “15 YouTube Channels That Make You Smarter” and let me know your thoughts on this article in the comments below.

You are subscribed to email updates from Digital Professionals - 1stWebDesigner To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 1600 Amphitheatre Parkway, Mountain View, CA 94043, United States

7 CSS Tools You Should Be Using - Six Revisions

---

7 CSS Tools You Should Be Using Posted: 25 Feb 2015 06:00 AM PST CSS is getting more and more complicated to write. Thankfully, there are tools that make the task of authoring CSS a little bit easier. From identifying errors in your stylesheets to presenting useful stats about your code, these online tools will undoubtedly help during CSS development. CSS Lint CSS Lint will point out syntax errors as well as highlight potential problems related to browser compatibility, performance, accessibility, and other areas of concern. The source code of CSS Lint is available on GitHub in case you want to run it offline on your computer or web server. Use for: Identifying issues that aren’t readily obvious through visual testing and CSS validation CSS Stats CSS Stats, just as its name suggests, provides you with a plethora of stats about a site’s CSS such how many style rules the website has, the media queries it uses, all the fonts it employs and more. Another online CSS statistics tool to use is StyleStats. Use for:  Getting insights about a website’s CSS for analysis and for discovering potential improvement points CSS Shrink CSS Shrink is an online tool for reducing the file size of your CSS, which translates to page-load-time improvements. It removes unnecessary stuff like spaces, comments, newlines and tabs — a process called minification. Minifying your source code makes it hard to read, so this should only be done after development, and you should still have non-minified CSS source code for future development and maintenance. Use for: Speeding up your website ProCSSor This online tool will clean, format and organize your CSS. What’s great about this CSS-formatting tool in particular is that it has loads of configuration options so that you can have great control over how your code is formatted. Other CSS code-formatting tools to check out are CSScomb, Code Beautifier and Styleneat. Use for: Instantly formatting and cleaning up your CSS Codrops CSS Reference This useful CSS reference developed by Codrops can be used as a tool for learning about certain CSS properties, pseudo-classes, functions, etc. Use for: Learning and discovering unfamiliar CSS features Can I Use (CSS) This online reference tool will help you see how well-supported a CSS feature is in popular web browsers. Knowing the level of browser support a CSS feature has is important in helping you make informed implementation decisions. Use for: Knowing how well-supported a CSS feature is in web browsers W3C CSS Validation Service This online tool will check your stylesheets to make sure it conforms to W3C CSS specifications. Use for: Validating your CSS for compliance to W3C standards Bonus: Developer Tools That Come with Your Browser Perhaps the most important CSS development tool is the one that you probably already have: Chrome has DevTools, Firefox has a suite of built-in developer tools accessible through the browser’s menu, as well as the Firefox Developer Edition, Safari has Web Inspector and IE has F12 Developer Tools. These developer tools aren’t strictly online tools like the others mentioned in this list because they will work even without an Internet connection, but they are tools that you should definitely be using during CSS development. In-browser dev tools are jam-packed with features for debugging, analyzing and profiling your CSS. Chrome DevTools — my favorite of the bunch — can, for instance, profile your CSS to help you spot performance issues pertaining to slow paint times and rendering times. Use for: Debugging, analyzing and profiling your CSS Related Content A List of CSS Style Guides for Inspiration CSS Development at Large-Scale Websites 12 Common CSS Mistakes Web Developers Make About the Author Jacob Gube is the founder of Six Revisions. He’s a front-end developer. Connect with him on Twitter and Facebook. The post 7 CSS Tools You Should Be Using appeared first on Six Revisions.

You are subscribed to email updates from Six Revisions To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 1600 Amphitheatre Parkway, Mountain View, CA 94043, United States

1stwebdesigner

---

How Much Does It Cost To Build A Professional Website Design in 2015? #EspressoMonday Nr. 8 Posted: 23 Feb 2015 03:28 AM PST #EspressoMonday Episode Nr.8 Clients and Coffee Like the #EspressoMonday episode last week, this episode goes in-depth with one question. It is still about clients. This time, however,we will be talking about long-term and short-term clients as well as the difference between a professional and professionally-looking website. Sounds interesting? Grab your cup of coffee and learn precious nuggets in just a few minutes. How Much Does A Website Design Really Cost? Free website builders are one of the woes a professional web designer or developer faces. These “free” web services have beautiful predesigned templates which allow you to create a beautifully-looking website in a matter of minutes. It can even make a non-web designer look like a professional with hundreds of templates to choose from and easy installation process. Or does it really? So…. What do you do with “free” web services, like WIX or Weebly, which claims that anyone can build a professional website for no cost? Why pay a thousand dollars for a website design when you can have one for free? Why should I pay that much? Isn’t it easy to design a website? These are oftentimes the questions web designers/developers face from clients and critics alike. Questions that seem to mock or belittle the effort and value you put into your website design. The question is reminiscent of the parable of the $100 nail which you will soon read here at one of our future articles. Like the carpenter in the parable, you don’t need to turn tail and run. Instead, you should be able to clearly communicate to your clients the value of what you’re doing because once they understand it, how much they invest won’t be a problem anymore. Never mind the critics. And before we completely digress from the topic, here are some tips and pointers to address our question for this week. Professional and Professionally Looking Website Is there any difference at all or is it just a play on words? Yes. Professional is an adjective while professionally is an adverb :) On a serious note, there is indeed a difference – A professional website design lets you build what YOU want to build, whereas a professionally looking website lets you build what THEY want to build within the confines of their rules and regulations. Now, there is of course nothing wrong with a professionally-looking website since they offer you various tools and blocks to make your website look good. Furthermore, there are also businesses that need these types of websites, specifically self-employed freelancers and small business owners. For example, a freelance photographer who needs a beautiful website where he can add his portfolio and contact number. Or a small business owner who needs a simple shopping cart in his website. However, there is not a lot of interaction going on in these types of websites. A professional website, on the other hand, is something that you can customize and build upon. It is something where you can weave your magic as a designer/developer to make it unique and fit to your clients needs. Furthermore, these websites are open source allowing you to tap into the code source and change it according to your preferences. Long Term VS. Short Term Clients People who usually go for these free website builders can be considered short-term clients who are trying to drive their website design cost as low as possible. As mentioned earlier, they are the self-employed freelancers and small businesses who are looking for a quick fix. They build a website, launch it, and forget about it until they want to change something after a few months. They think that by building a website, they will be able to establish an online presence without too much of an investment. Here at 1stWebDesigner, however, we teach and encourage you to look for long-term clients instead of short-term ones. There is no problem with such clients but focusing on the short-term might be too taxing and time consuming for you as a professional web designer. Your mindset SHOULD be focused on building long-term professional relationships with your clients. Long-term clients are the medium to large-sized business enterprises as well as public figures. Conversely, the self-employed freelance photographer could become a public figure and when he becomes one, he will need a monthly maintenance for his personal brand. Instead of just a personal portfolio, his website becomes bigger and more complex with landing pages, separate pages which features his work by category, videos, case studies, and more. In short, it becomes a marketing website to promote and advertise his personal brand. The same goes true with medium businesses and large enterprises which need daily, weekly, or monthly maintenance and management. Once a business reach these scales, they understand that they have to invest more money in order to generate more profit. In these cases, free website builders which offer a quick fix will not suffice anymore. We actually just released the training course to help you get the skills you are looking for on the way to become a professional web designer. It is The Ultimate 2015 Web Design Learning Course, where in 9 hours we will teach you how to Build Your Own WordPress Site – 100% Responsive & Flat. You will learn how to build website from scratch in Photoshop, then convert PSD to HTML and CSS. Finally using Bootstrap magic, we will convert the website to become a fully responsive and functional WordPress website. We throw in some business lessons, interviews, and many bonuses to amplify your learning and help you get some clients as well! Conclusion To sum it all up, small businesses and self-employed freelancers are those who usually champion free website builders and there’s nothing wrong with that. On the other hand, medium to large  business enterprises and public figures are those who do not hesitate to invest more in a professional website. They understand that value begets value – that in order to gain more, you also need to invest more. The difference, therefore, is the scale. What does it mean to you as a web designer? Well, you don’t have to be a Math wizard to figure the numbers out. But surely, you would want to pursue those who belong to the larger scale. It will definitely save you the effort and time plus, of course, great returns. Remember don’t think about the cost, think about what results you can create to your clients. Good clients know, that website builders will not magically give them a website, that converts and drives sales to their business. You can help clients to solve hard technology-related problems by improving their website and not just make it professionally looking, but to become the website that drives results your client desires.

You are subscribed to email updates from Digital Professionals - 1stWebDesigner To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 1600 Amphitheatre Parkway, Mountain View, CA 94043, United States

The Big Changes to Pay Attention to in AngularJS 1.3 - Six Revisions

---

The Big Changes to Pay Attention to in AngularJS 1.3 Posted: 18 Feb 2015 06:00 AM PST AngularJS has evolved quite rapidly. Its latest release, version 1.3, nicknamed "superluminal-nudge", ushers in plenty of exciting features and improvements. The AngularJS GitHub source code repository contains a changelog that provides a brief, bulleted-list summary of all the changes that have occurred in the AngularJS project. However this article will only discuss the major changes in the newest stable release. We will delve into the new features and improvements in Angular 1.3 that, in my opinion, shouldn’t be ignored. Data Binding Options In previous versions of Angular, ng-model — although one of the most important directives of all — was not very flexible. In Angular 1.3, it’s now possible to control exactly when to update bound variables, how long to wait before processing the update and more. For example, to update a model when the relevant input field loses focus, the updateOn option can be overridden as follows: <input ng-model-options="{updateOn: 'blur'}"> Another data binding option that’s useful is debounce. A couple of design patterns often employed in real-time search UIs is auto-completion and live filter. When using these design patterns, it’s a good idea to wait for the user to pause from typing before suggesting results in order to avoid unnecessary model updates and also to reduce distraction while users are still composing their search queries. Something similar can be implemented by setting the debounce option: <input ng-model-options="{debounce: 500}"> In the above example, there will be a 0.5-second delay before the model is updated again. Use the debounce option with care though. Since the model is not updated unless the specified time is completed, ng-click handlers used in processing form data may not work as you would expect. Instead of using ng-click, use ng-submit. Another workaround is to send an object to ng-model-options to make the update trigger debounce, but update immediately on blur, like below: <input ng-model-options="{debounce: {'default': 300, 'blur': 0}}"> With ng-model-options, it’s also possible to do one-time data binding. This may be an option that can ensure performance gains if used properly. Binding with a Getter/Setter Angular now has the ability to bind to a getter/setter function. Instead of the model being an attribute on an object, it can now be a function. The function takes a single argument, which when defined should make the function behave like a setter. Calling the function without the argument defined will make it behave like a getter. HTML <input ng-model="value" ng-model-options="{getterSetter: true}"> <br /> Bound value: <span ng-bind="value()"> JavaScript var _value; scope.value = function (v) { if(angular.isDefined(v)) { _value = v; } return _value; } Rollback of Input Values It’s often desirable to reset an input field’s value back to its previous value. For example, in many cases, a veteran web-application user’s natural instinct is to press the Esc key on their keyboard to go back to the previous value they entered. In Angular 1.3, you can facilitate this type of interaction using the $rollbackViewValue() method to revert the input field’s value. For example, to bind the described behavior to the Esc key, you can do the following: HTML <input id="inputText" name="inputText" ng-model="inputText" ng-model-options="{updateOn: 'blur'} ng-keyup="cancelEntry(formName.inputText, $event)"/> JavaScript $scope.cancelEntry = function (control, event) { // key code for the Esc key = 27 if (event.keyCode === 27) { control.$rollbackViewValue(); } }; It’s also possible to extend this idea by binding the behavior to a "Reset" button that resets all the input fields in a web form to their previous values: <form ng-submit="ctrl.submitAction()" name="formName" ng-model-options="{updateOn: 'submit'}"> <input type="text" ng-model="ctrl.firstName" name="firstName"> <input type="text" ng-model="ctrl.lastName" name="lastName"> <button class="submit" ng-click="formName.$rollbackViewValue()">Reset</button> </form> Please note that in the above example, ng-model-options at form level is important because the input values are updated with the model while the user is changing their data, and so $rollbackViewValue() will not have any effect otherwise. Submission Detection A new form property has been introduced: $submitted. This new property determines if the user has attempted to submit the form, even if the submission was invalid. With the $submitted property, it’s now possible to show in-line error messages inside a web form in a more "Angular" way. Here’s an example of conditionally displaying a message if the surveyForm web form has already been submitted: <div ng-if="surveyForm.$submitted"> Form Submitted </div> It’s worth mentioning that $submitted becoming true doesn’t mean the data of this form has reached the server. That still has to happen inside the ng-submit handler. Focus Detection The name of the new $touched property might lead you to believe that it’s related to gestures on a touchscreen device. However, similar to $dirty, $touched is a property that determines if the user has already focused on an element and then unfocused it, with or without making any changes. Validating Inputs Validating the standard set of HTML5 input fields is now easier than ever because of improved support within Angular. Angular will populate a special property called $error for each field containing the states of validation. To accept email addresses, for example, you can use HTML5′s email input type like so: Example <form name="form"> <input type="email" id="inputEmail" name="email" placeholder="Your Email" ng-model="email" required> <div class="has-error" ng-if="form.email.$dirty"> <span ng-show="form.email.$error.required">Email is required.</span> <span ng-show="form.email.$error.email">Email address is invalid.</span> </div> </form> For more advanced needs, Angular now provides a much easier way to write custom validators using the $validators pipeline. If, for instance, you want to validate an input such that it can only contain four lowercase alphabets followed by two numbers (e.g. "abcd12") all you will need to do is create a regular expression. The matching regular expression in this case is: /^[a-z]{4}[0-9]{2}$/ We can use the regular expression above in conjunction with $validators to validate the input, like so: HTML <input type="text" placeholder="Example format: abcd12" ng-model="customerId" customer-id-validator /> JavaScript angular.module('myApp').directive('customerIdValidator', function() { return { require: 'ngModel', link: function($scope, element, attrs, ngModel) { ngModel.$validators.customerId = function(modelValue, viewValue) { var value = modelValue || viewValue; return /^[a-z]{4}[0-9]{2}$/.test(value); } } } }); Asynchronous Validation Angular 1.3 introduced asynchronous validation which makes it possible for the validation logic to stay on the backend. Implementation of an asynchronous validator is similar to that of a synchronous validator, with a small difference: Instead of returning a boolean value, an asynchronous validator returns a promise. Asynchronous validators are defined on $asyncValidators. Date and Time Inputs The new HTML5 input types related to date and time have enhanced support in Angular 1.3. These input types are: <input type="date"> <input type=" time"> <input type="datetime-local"> <input type="week"> <input type="month"> Any scope variable bound to these input fields can be assigned JavaScript Date objects. Setting invalid values will cause the error to be logged in the developer console, and the date field to be rendered as they would, ideally when given with invalid values, sometimes just mm/dd/yyyy. Easier Inline Hints and Error Messages Angular 1.3 makes it easier to display inline messages with two new directives, ng-messages and ng-message. To use them, angular-messages.js must be included in your application. With these directives, the markup for displaying inline hints and error messages can be simplified a lot. In the following example, ng-messages, ng-message and ng-messages-multiple is used to conditionally display multiple error messages depending on the results of the form’s validation: <input class="form-control" type="email" id="inputEmail" name="inputEmail" placeholder="Your Email" ng-model="ctrl.obj.instructorEmail" required /> <div class="has-error" ng-if="formName.inputEmail.$dirty" ng-messages="formName.inputEmail.$" ng-messages-multiple> <span ng-message="required"> Email is required. </span> <span ng-message="email"> Valid email address required. </span> </div> One way to make things even easier is to define a template with these messages and reuse them throughout the application where necessary. Change in Controllers AngularJS 1.3 introduced a breaking change: Controllers may no longer be defined from globally declared functions by default. This restriction can be overridden by calling a simple configuration function: angular.module('app').config(function($controllerProvider) { $controllerProvider.allowGlobals(); } Updating URL Parameters It is often necessary to update the URL the user can see in the browser’s address bar in reaction to a user-action. A new method, $route.updateParams(), allows the URL to be updated with a new set of parameters. Canceling Route Change Calling preventDefault() in an event object generated by the $routeChangeStart event will prevent the browser from navigating away from the current route. This is useful in preventing a user from accidentally moving to another view without performing some important task first, often used in apps where the user must discard or save changes before leaving the page. Example $rootScope.$on('$routeChangeStart', function(event, next, current) { if(current.id.indexOf('edit') !== -1 && scope.unsavedChanges) { event.preventDefault(); $scope.msgText = "Please your save changes before leaving the page."; $scope.msgShow = true; } }); Prefetch Your Templates $templateService allows AngularJS applications to prefetch templates from the server before they need to be used. For a seamless user experience it’s often desirable to cache templates before users navigate to the corresponding views. This is especially useful for large templates. Moreover, this service enables the possibility of building an offline-capable web app by fetching all the necessary templates while the user is still connected to the Internet. A template may be requested through a simple function call as follows: $templateRequest('detailsPage.html'); Scroll to an Anchor AngularJS now provides a convenience service, $anchorScroll, that checks the current value of $location.hash() and then scrolls to the appropriate anchor. This is useful since, by default, the browser only scrolls to an anchor when the hash of the URL changes, not when a link is clicked on. This is often an annoyance when the user clicks on a link to scroll to an anchor, then scrolls away from the region and tries to click the link again to return, which, unless handled explicitly, will not work. Preserve Trailing Slashes Resources in previous versions of Angular treated trailing slashes as an optional element of URLs. In Angular 1.3, it’s now possible to keep trailing slashes by setting $resourceProvider.defaults.stripTrailingSlashes to false. Example angular.module('myApp').config(['$resourceProvider', function($resourceProvider) { // Do not strip trailing slashes from calculated URLs $resourceProvider.defaults.stripTrailingSlashes = false; }]); Limit Arrays, Strings and Numbers to a Specified Length A nifty filter was added to Angular 1.3: limitTo. The filter does what the name implies: Given an array, string or number, limitTo: n will create an array containing only the first n or last n elements, depending on whether n is positive or negative, respectively. Watch Variables in a Group To watch for changes on a group of variables and then call a single function when a member of the group has changed, you can use the $watchGroup method. Example $scope.$watchGroup(['someVar', 'someOtherVar'], function () { // Do something }); Changes to Directives Directives in Angular 1.3 has also witnessed major changes. One of the most important change to be aware of is that directives’ restrict property now defaults to EA, instead of just A. Two new directives have been introduced: ng-true-value and ng-false-value, filling a critical gap in building forms that have checkboxes. Now, it’s possible to define what value to set to the model depending on whether checkboxes are checked or unchecked. Example <input type="checkbox" ng-model="chkValue" ng-true-value="'YES'" ng-false-value="'NO'"> Animation Behavior Changes Angular 1.3 will wait until the following digest cycle to apply animations, with the aim of improving performance. This has the advantage of allowing your script to add and remove classes as necessary, and then apply the animation only on the next digest cycle, preventing redundant animation, and acting only on the net change of classes. However, this means that the digest cycle must be invoked manually at times, for example, when animations are applied outside of the digest cycle. Below is an example of how we can create a simple animation of changing the background of a table row slowly when a user clicks on it. CSS .selectable-table { cursor: pointer; } .selectable-table tr.selected { background-color: #ccc; } .selectable-table tr.selected-add, .selectable-table tr.selected-remove { transition: all 0.5s linear; } JavaScript angular.module("myApp").directive("selectable", function ($animate) { return function(scope, element, attrs) { element.on("click", function() { if(element.hasClass("selected")) { $animate.removeClass(element, "selected"); } else { $animate.addClass(element, "selected"); } // The following is needed because // this click event is happening outside // of Angular's digest cycles scope.$digest(); }) } }) Callbacks can do everything that a promise does, but can quickly spin out of hand as the logic gets more complicated. The animation service, hence, has started using promises instead of callbacks to provide a much simpler programming interface. Consider an example where a user clicks to select a table row. In addition to the animation of changing the background of row, we want to make the details section visible. This can be done as such: $animate.addClass(element, "selected") .then(function() { scope.$apply(function() { scope.showDetails = true; }); }) Web Accessibility Improvements Angular 1.3 has introduced a module, ngAria, that makes it easier to make your web applications WAI-ARIA-compliant. WAI-ARIA is a set of web standards and specifications that make sites and apps more accessible for people with disabilities. In most scenarios, the implementation simply involves including ngAria in your app’s list of dependencies. ngAria supports a range of common AngularJS directives that makes HTML elements easier to understand when accessed with screen readers and similar assistive technologies. Supported directives include: ngModel ngShow ngHide ngDisabled ngClick ngDblclick ngMessages Internet Explorer Support Angular 1.3 no longer supports Internet Explorer 8 and below. This decision by the AngularJS team makes sense. Microsoft has discontinued their support for Windows XP, and every officially supported version of Windows now allows its users to run Internet Explorer 9 and above. Moreover, this allows the AngularJS team to enhance the framework in terms of performance. Conclusion AngularJS version 1.3 is a must-have upgrade for your application, not just because you can do more with it, but because it’s three to four times faster with respect to DOM manipulation and digests, which translates to faster and more responsive applications. There are some smaller new features that are not discussed in this article, like the ngTransclude directive and improvements in testability. At the very least, I hope what I have discussed here helps you get a general idea regarding the direction AngularJS is headed towards. Related Content Why I Ditched Angular for React A Roadmap to Learning JavaScript for Free Speed Up Your Web Development Workflow with Grunt About the Author Avinash Kaza is a senior developer at Toptal. He’s an experienced product development expert, having coached teams towards better collaboration while figuring out the best solutions to difficult problems. The post The Big Changes to Pay Attention to in AngularJS 1.3 appeared first on Six Revisions.

You are subscribed to email updates from Six Revisions To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 1600 Amphitheatre Parkway, Mountain View, CA 94043, United States

1stwebdesigner

---

How Do You Really Get Web Design Clients? – #EspressoMonday Nr.7 Posted: 16 Feb 2015 01:58 AM PST #EspressoMonday Episode Nr.7 Clients and Coffee This a special #EspressoMonday Episode because instead of three, we are going in-depth with only one question – how to get more clients – which is often the concern of every freelance designer/developer, who runs his web design business. If you are wondering how to do it and where to look for, all you need to do is a cup of coffee and a few minutes of your time. I have observed that projects, especially on Elance and Freelancer, have become a bidding war where 99% of projects goes to those who bid the lowest. On the other hand, big agencies are getting big projects worth $5,000-$10,000, even $50,000 – $100,000-worth projects. Where do I look for these? What other sources would you suggest? Is Web Design Becoming All About Bidding Wars – Cheap Web Design? It is a fact that job search sites, like Elance, Freelancer, and PeopleperHour, are built for bidding wars and the clients that go there are looking for cheap web design providers because they also want to save as much money as they can. As a freelance web designer, it might be the most logical step to do and the best place to look for clients quickly. However, you should not even be there in the first place. You should never be involved in that kind of race, which is a race for the bottom because YOU are WORTH more than what is offered in these sites. There are alternative quality job search sites appearing like AwesomeWeb (our own creation) and Codeable.io, which focuses on finding quality designers and attracting higher level clients, who look for quality work. For web design agencies that have the power to charge $25,000+ for a certain project are agencies that are full of web design experts, coding professionals with various skills, and years of experience. Clients, on the other hand, are interested how many people will actually work in a project. They want to know the different kinds of skills and expertise that would go into it and they are willing to pay more. As an individual freelancer web designer, however, you should hit the middle ground which is between $5,000 and $10,000 per project. In fact, this should be how much you as a web designer should charge per project. How do you do this or how do you even begin? Here’s a three-step formula how to start looking for more higher paying clients and charging what you are worth for. 1. You have to be READY to be worth the money you are asking for. The keyword is READY. With ready, we are not just talking about your skills but it refers to everything about you. You should know how much you are really worth. However, it does not stop there – the physical things should match the mindset you have. The physical things should also manifest that you are ready to ask your money’s worth. It means that your website should reflect the skills you have and they type of expertise you offer. In short, your website design should already show that. In addition, your website should also include your pricing so that they have an idea how much monetary reward you are expecting for providing your design services. Pricing also reflects that you already know how much you are worth and are confident about it. 2. Find out who makes the decisions and controls the budget.  Projects which range between $50,000 and $100,000 are usually by large companies who have a CMO or Chief Marketing Officer, who is responsible for the overall budget and strategy of the company. They are also in-charge of the advertising strategies and branding initiatives of the company. In short, they are the ones in charge who should be involved in the project as well as how much should be spent in that project. These are the people you should be in touch with. If it is not the CMO, know the person who is responsible for this in a company. Take the time to know them and talk to them. After figuring out the person in-charge, the next step you need to find out is the place where they hang out. Where can you find these people? If you know where they are in the first place, you know who to talk to and all the more you will have higher chances to get noticed. In addition, part of knowing the places where these people hang out is to also know what their interests are – the websites they visit, the books or articles they read, the conferences they attend, and more. 3. Grab their attention – find the way to stand out from the crowd between other web designers. There are thousands of web designers and developers out there – this is the reality that you should always remember. These web designers might have similar skills and talents as you or even much better than you. With this in mind, you simply cannot write a letter to a company saying “I am a web designer and I can build you a website,” because thousands of others can also do that and maybe at a much lower price than you. Therefore, it is very important that you need to find your unique angle – something that will make you stand out among the others. It could be a particular technology you have or a certain expertise/specialization you offer. Standing out can also mean finding your niche and work for it to make things happen. After you figure out your unique angle, you also need to find the right format to deliver this difference. For example, if the person-in-charge of the project you are eyeing visits websites, such as Forbes, INC., or Business Insider, you might want to do a guest post to these sites. You might not get paid for your contribution but they will have a massive return of investment to you because you will be able to showcase your skills and expertise through these blog posts. Another format can be podcast interviews. Find out the kind of podcasts in the industry that would want to feature you. You can also shoot a video, like this #EspressoMonday videos, and address a certain issue that would show what you got. And….a BONUS fourth step that is very important …. 4. Repetitive appearance matters instead of a single effort. Studies have shown that a person does not decide after seeing the product once. Instead, a buying decision is always made after the consumer has been exposed to a repetitive campaign of a certain product. This is the trick big companies use to amass huge sales. That is why companies spend a big amount of their time, money, and effort in marketing campaigns. That is why you get a barrage of advertisements and commercials of products in every media platform  every minute, everywhere you go. These companies are creating a want and a desire in you to actually like a product even though you don’t initially like it. You can use this same trick. Which means doing one guest post is not enough. Instead, you need to widen your exposure by using different formats and platforms to show your expertise. One good example of this is Derek Halpern of Social Triggers. Before he or even his blog became famous, he approached companies and provided solutions for free. All he asked was to record a Screencast of him pointing out the problems and offering solutions. Then, he put up these videos on YouTube until he got noticed. So invest your time to show off your expertise repetitively, even for free. Take your time to expose your skills and the return of investment will be huge.

You are subscribed to email updates from Web Design Professionals - 1stWebDesigner To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 1600 Amphitheatre Parkway, Mountain View, CA 94043, United States