Nikola Brežnjak blog - Tackling software development with a dose of humor
  • Home
  • Daily Thoughts
  • Ionic
  • Stack Overflow
  • Books
  • About me
Home
Daily Thoughts
Ionic
Stack Overflow
Books
About me
  • Home
  • Daily Thoughts
  • Ionic
  • Stack Overflow
  • Books
  • About me
Nikola Brežnjak blog - Tackling software development with a dose of humor
Books, Programming

The passionate programmer by Chad Fowler

I rated the book The passionate programmer by Chad Fowler as favorite on my Shelfari account and shortly reviewed it as:

Trully a classic in our field!

Those of you who have been following my Books category know that I like to mark the passages that I find valuable from books that I read (and somewhere also add my own piece of wisdom 1415131129_smiley-evil), like for example:

ppHardWork

All in all, below are my notes from this book (yes, I know – there are quite a lot of them), and I’m sure a lot of them will resonate with you and I’m sure you’ll want to get a physical copy for yourself  too (if for nothing else, then for doodling on it ;)). Best of all, the book is currently 43% off on Amazon for only $13.58.

I believe that everyone has remarkable in them but that it takes finding something they truly care about to draw it out. You can’t be remarkable if you don’t love your environment, your tools, and your domain.

To become remarkable, you have to believe that you’re making a significant dent in the universe.

Most people spend far more of their waking adulthood working than doing anything else.

If your life is primarily consumed by your work, then loving your work is one of the most important keys to loving your life. Challeng-ing, motivating, rewarding work is more likely to make you want to get up in the morning than dull, average tasks. Doing your job well means that the activity you do for 50 percent of your available time is something you’re good at. Conversely, if you don’t do your job well, a large amount of your time will be spent feeling inadequate or guilty over not performing at your best.

You don’t win a race by trying not to lose.

Kent Beck Extreme programming explained

A person who wants to become great is far more likely to become great than someone who just wants to do their job.

Most people follow everyone else’s plan but their own. To start differentiating yourself, all you have to do is stop and take a good look at your career. You need to be following your plan for you – not theirs.

Businesses don’t exist so we can have a place to go every day. The purpose of a business is to make money.

In The Pragmatic Programmer: From Journeyman to Master, Dave Thomas and Andy Hunt talk about programming by coincidence. Most programmers can relate to the idea: you start working on something, add a little code here, and add a little more there. Maybe you start with an example program that you copy and paste from a website. It seems to work, so you change it a little to be more like the program you really need. You don’t really understand what you’re doing, but you keep nudging the program around until it almost completely meets your needs. The trouble is, you don’t understand how it works, and like a house of cards, each new feature you add increases the likelihood your program will fall apart.

Which technologies should we invest in? Which domain should we develop expertise in? Should we go broad or deep with our knowledge? These are questions we really should be asking ourselves.

Imagine you’ve started a company and you’re developing what is destined to be the company’s flagship product. Without a “hit” with this product, your company is going to go bankrupt. How much attention do you pay to who your target customers are? Before actually manufacturing the product, how much thought do you put into what the product actually is? None of us would let decisions like these be made for us. We’d be completely attentive to every detail of the decision-making process.

So, why is it that most of us don’t pay this kind of attention to the choices we make in our careers? If you think of your career as a business (which it is), your “product” is made up of the services you have to offer. Is demand for your services going to grow or decline over the coming years?

15 years ago COBOL would be a low-rise choice. Low risk low reward. At the time if you invested in Java it would be high risk high reward. BeOS was high risk no reward at the time.

Picking a stable technology that has already wedged itself into the production systems of businesses worldwide is a safer, but potentially less rewarding, choice then picking a flashy new technology that nobody has deployed yet.

Make a list of early, middle, and late adoption technologies based on today’s market. Map them out on paper from left to right; the left is bleeding edge, and the right is filled by technologies that are in their sunsets. Push yourself to find as many technologies in each part of the spectrum as possible. Be as granular as possible about where in the curve they fall in relation to one another. When you have as many technologies mapped out as you can think of, mark the ones that you consider yourself strong in. Then, perhaps, in a different color, mark the ones that you have some experiehce with but aren’t authoritative on. Where are most of your marks on the adoption curve? Do they clump? Are they spread evenly across? Are there any technologies around the far edges that you have some special interest in?

As a .NET programmer, you may find yourself competing with tens of thousands of more people in the job market than you would if you were, for example, a Python programmer. This would result in the average cost of a .NET programmer decreasing significantly, possibly driving demand higher (in other words, creating more .NET jobs). So, you’d be likely to find jobs available, but the jobs wouldn’t pay all that well. If the Python job market were to support noticeably higher prices per programmer, additional people might be attracted to supply their services at this higher price range, resulting in competition that would drive the price back down.

India caters to the already balanced IT services markets. You don’t find mainstream Indian offshoring companies jumping on unconventional technologies. They aren’t first-movers. They generally don’t take chances.

You can’t compete on price, but you can compete on ability.

Research current technical skill demand. Use job posting and career websites to find out which skills are in high demand and in low demand. Find the websites of some offshore outsourcing companies (or talk to employees of those companies if you work with them). Compare the skills available via these companies with the high—demand list you compiled. Make note of which skills appear to be in high demand domestically with little penetration offshore. Do a similar comparison between bleading—edge technologies and the skills available via offshore outsourcing firms. Keep your eyes on both sets of technical skills that are underserved by the offshore companies. How long does it take for them to fill the holes (if ever)? This time gap is the window during which a market imbalance exists.

If you want to stay relevant,you’re going to have to dive into the domain of business you’re in.

Look for industry websites that you can monitor on a regular basis. In both the websites and the magazines, pay special attention to what the big news items and the feature articles are about. What is your industry struggling with? What’s the hot new issue right now? Whatever it is, bring it up with your business clients. Ask them to explain it and to give you their opinions. Think about how these current trends affect your company, your division, your team, and eventually your work.

Be the worst guy in every band you’re in. Being the worst guy in the band means always playing with people who are better than you.

So I learned from this that people can significantly improve its regress in skill, purely based on who they are performing with.

Pick an open source project that you admire and whose developers appear to be at that “next level” you’re looking to reach.

At the time I’d writing, the most popular language is Java, followed by C.

My explanation is that either good people seek out diversity, because they love to learn new things, or being forced into alien experiences and environments created more mature, well-rounded software developers.

For me, as a hiring manager, the first reason is that it shows that you’re interested. If I know you learned something for the sake for the sake of self-development and (better) pure fun, I know you are excited and motivated about your profession.

Learn a new language that makes you think in a new way.

Thinking about not losing is not the way to win! Winners take risks. They think about where do you want to go – not where the rest of the pack is.

But if your job isn’t fun, as we’ve come to realize, you don’t do a fantastic job at it.

More of us understand action leads to excellence. And without fun, there’s unlikely to be any passion in a software job.

Staying in the single company, working your way up the ranks, easily would think environment in which to grow as a developer. Gone are the days of the life for who would join a big company and settle in for a full career. This sort of behavior used to be assigned of the dictation. No it’s a liability. If you work in only one place and seen one set of systems, many [smart] managers would see that as a strike against you when making hiring decisions. I personally rather hire someone who has seen the variety of successes and failures in different environments than someone who has known only one way of doing things.

Programmer geeks can’t lead, and leaders can’t hack. It’s rare to find someone who’s even decent both.

Unfortunately, the software industry has turned out a whole lot of these shallow specialists who use the term specialist as an excuse for knowing only one thing.

This guy wanted to build his career around a specific technology created by a specific company of which he was not an employee. What if the company goes out of business? What if it let its now-sexy technology become obsolete? Why would you want to trust a technology company with your career?

The professional services barrier is the artificial barrier that a company erects between you and the solution to a problem you may have so that it can profit from selling you support services. Sometimes this barrier is intentionally erected, and sometimes it’s erected as a side effect of the attempt the company makes to protect its intellectual property (by not sharing its source code).

Try the small project, twice. Try it once in your home-based technology and then once, as idiomatically as possible, in the competing technology.

You have to be passionate about your work if you want to be great at your work. If you don’t care, it will show.

It turns out that, coupled with my natural talent, a few hours of investment have made these ”always wanted to be able to do it” abilities attainable. And as I’ve started to put in the investment, it builds on itself. One technique leads to the next, and one barrie-breaking practice session motivates the next. The structured me who invests in his abilities (even as a hobby) completely wipes the floor with the me who bets it all on natural talent and ability.

Lao Tzu said, ”Give a man a fish; feed him for a day. Teach a man to fish; feed him for a lifetime.” That’s all well and good. But Lao Tzu left out the part where the man doesn’t want to learn how to fish and he asks you for another fish tomorrow. Education requires both a teacher and a student.

Don’t ask to be taught, learn for yourself!

You can creatively help a business until you know how it works.

Depending on others is often seen as a sign of weakness.

It’s better to be moving in one direction than to be sitting still.

Important thing is that he narrowed down the long list of skills I could be learning to the short list of skills I learned.

If you want to really learn something, try teaching it to someone.

You don’t have to set up a formal mentoring relationship to get these benefits. Just start helping people, and the rest will come naturally.

If you always sound good during practice sessions, it means you’re not stretching your limits.

Important thing is to find your practice needs and to make sure you’re not practicing during your performances [on the job]. You have to make time for practice. It’s your responsibility.

codekata.com

Even with the abundance of prescriptive methodologies to choose from, it’s not likely you will ever work for a company that fully implement any of them. That’s OK. The best process to follow is the one that makes your team most productive and results in the best products.

Studying the work of masters is in the central part of becoming a master.

If you can hear the music or see the piece of art, you can learn from it. Thankfully, as a soft for developers we have access to practically infinite array of existing software in the form of open source software.

Sir Isaac Newton said, “If I have seen further, it’s by standing on the shoulders of giants.”

The standard IT management answer is that you add programmers to go faster. It’s wrong, but that’s what people believe.

Unless you’re really lucky, you’re probably not getting paid to be smart.

We are being paid to create value.

To be successful, wrong ability will get you only so far. The final stretch is populated by closures – people who finish things. This means getting up out of our reading chairs and getting things done.

Work expands so to fill time available for its competition.

Sense of urgency, even if manufactured, is enough to easily double or triple your productivity.

Always be the one to ask, “But, what can we do right now?”

It seems backward, but keeping your mind focused on the present will get you further toward your goals than keeping your mind focused on the goal itself.

Why is that, without facing great pressure, we are often able to work ourselves into this kind of altruistic, ultra productive frenzy.

How much more fun with your job be if you could treat the most interesting and annoying tasks with the same feverish desire to do them right?

It’s easy to get into the mode of just wanting more. It unfortunately seems to be a basic human tendency, in fact. You get the salary increase, and it feels good for a little while, but then you’re thinking about the next one.

Ask, “Was I worth it today?”

A dollar today is worth more than a dollar next year, because a dollar today can be used to generate more dollars.

You should never get too comfortable.

The less replaceable you think you are, the more replaceable you are.

Everyone likes creating. That’s when we feel we are given the opportunity to really put our stamp on a piece of work. To feel like we own it.

If l give you $1,000 and ask you to go get me a cup of coffee, I’m going to be very unhappy if you return with 1,000 less dollars and no cup of coffee. I’m even going to be unhappy if you bring me plenty of really nice coffee but it takes you two hours. If I give you $0 and ask you to go get me a cup of coffee, I’ll be extremely appreciative if you actually return with the coffee, and I’ll be understanding if you don’t. Project work is like the first scenario. Maintenance is like the second.

Martin renamed 40 hour work week to 8 hour burn.

When it comes to work less really can be more. The primary reason cited by the extreme programmers is that when we are tired we can’t think as effectively as when we are rested. When we are burned out, we aren’t as creative, and the quality of our work reduce his dramatically. We start making stupid mistakes that end up costing us time and money.

Projects are marathons not sprints.

Though your short-term productivity will significantly increase as you start putting in the hours, in the long term you’re going to crash so hard that the recovery time will be larger than the productivity gains you enjoy during your 80 hour weeks.

Apparently, when money was scarce, I found ways to be more efficient with my cash. And, the end result was essentially the same.

Bob Martin’s eight hour burn places the constraint on you and gives you a strategy for dealing with that constraint. You get to work and think, I’ve only got eight hours!

As thought workers, even if we’re not in front of a computer or in the office, we can be working. You might be working while you’re driving to dinner with your spouse or while you’re watching a movie. Your work is always around nagging you.

Make sure you sleep well tonight. Tomorrow, eat breakfast and then start work at an exact time [preferably a little earlier than usual]. Work on it for four hours. Take an hour lunch. Then work for four more hours so intensely that you’re absolutely exhausted and can’t do anymore work. Go home, relax, and have fun.

A problem needs resolution. Lingering on who’s fault it is only prolongs the issue.

The quickest path to missing your commitment is to make commitments that you know you can’t meet. I know that sounds patently obvious, but we do it every day. We are put on the spot and we don’t want to disappoint our leaders, so we agreed to impossible work being done in impossible timelines.

Heroes never panic.

We panic because we lose perspective. When something is going wrong, it’s hard not to focus all attention on the problem. To some extent, that’s a good way to solve problems. Unfortunately, it also makes the problem, no matter how small, see more important than it is. And with the problem inflated and stress level running high, our brains turn themselves off.

So, here’s how I’m learning to not panic. When something bad happens and I start to feel that sinking, stressed-out feeling that leads to panic, I compare myself to the frustrated computer-illiterate, and I laugh at myself. I analyze the situation from the third—person perspective, as if I’m helping that frustrated family member with their word processing disaster. Seemingly hard problems are suddenly easier. Seemingly bad situations are suddenly not so bad. And, I often find that the solution simple and staring me in the face in the same way that an error dialog often tells you exactly what to do next. If you’d just have the presence of mind to read the error message, the problem might be solved.

Like families, successful projects are alike, but they become successful project fails in its own way.

In short, you may have the best product in history, but if you don’t do some kind of advertising, nobody’s going to buy it.

These managers and customers we are talking about have a dirty little secret: they are afraid of you. And for a good reason. You’re smart. We speak a cryptic language they don’t understand. You make them feel stupid with your sometimes sarcastic comments [which you might not have even intended to be sarcastic]. And, your work often is the last and most important toll gate between the projects conception and it’s birth.

Wouldn’t you want to hire the person who wrote the book and technology or methodology you’re attempting to deploy?

You will never feel 100% ready, so might as well start now.

Anyone can use Rails. Few can say Rails contributor.

Don’t just mastered the subject – write the book on it. Write code generators that take what used to be a one week process took a five minute process. Instead of being respected among your coworkers, become your cities most recognizable authority on whatever technologies you’re focusing on by doing seminars and workshops. Do something previously unthinkable on your next project.

Carve out weekly time to investigate the bleeding edge. Make room for at least two hours each week in order to research and get the colleges and to start develop skills in them.

The next time you have to wash the dishes, don’t wash them to get them done. Try to enjoy the experience of washing the dishes. Don’t focus on finishing them. Focus on the act of washing them itself.

Watch the alpha geeks.

If you’re constantly exposed to something, it’s hard to see it changing unless change happens rapidly.

Developer, review thyself.

Start keeping a journal. It could be a blog or a personal diary. Write about what you’re working on, what you’re learning, and your opinions about the industry. After you’ve been keeping the journal for sometime, reread old entries. Do you still agree? Do they sound knees? How much have you changed?

Make your improvements small and incremental but daily.

I highly recommend that you check out the book Soft Skills by John Sonmez if you liked this post, as you’ll find even more great content about how to become the best software developer version of yourself.

Quick tips

How to open current folder in Explorer from Command prompt on Windows

To open current folder in Explorer from Command prompt on Windows use the following command:

explorer .

The dot (.) represents the current directory.

This is usually useful for when you’re using Command prompt (or any other you prefer, like Console2 for example) to navigate through your folders but then you need to open the current one for some reason in the Explorer.

You also may want to check out How to open current folder in Finder from Terminal on Mac OS X.

Ionic, Stack Overflow

Android/iOS app with Django as backend

profile for Nikola at Stack Overflow, Q&A for professional and enthusiast programmers
I’m a big fan of Stack Overflow and I tend to contribute regularly (am currently in the top 0.X%). In this category (stackoverflow) of posts, I will be posting my top rated questions and answers. This, btw, is allowed as explained in the meta thread here.

As you may know, I’m really into Ionic framework lately and am helping out on StackOverflow with the knowledge I gained so far with the framework. I’m in the top 5 All time answerers.

I answered this question by user cold_coder:

I have a website project built in Django and want to build a mobile app for it. I did a lot of research but was confused between native and hybrid app. My project is basically a Quora clone and just a college project. I also saw PhoneGap, Ionic and Sencha but I am really confused about how they all fit. Do I have to use Ionic with PhoneGap or Apache Cordova or just Ionic? What is the structure and where should I start?

My answer was:

TL;DR: Start with Ionic. Ionic uses Cordova “under the hood”. No need for PhoneGap or Sencha, so don’t be confused by that.

Disclaimer: This will sound like advertisement, so I have to say I’m in no way affiliated with Ionic, I just happen to like it so much that I’m sharing the love for it.

Let’s take this one step by step:

What is Ionic?

Ionic is a framework for building hybrid mobile apps, and it’s built on an ecosystem that includes Angular as the web application framework and uses Cordova for the building and packaging of the native app. Ionic creates a native mobile app that can be installed via the app stores, and contains what is called a WebView (essentially an isolated browser window) with a JavaScript API inside which the web application will run.

What is hybrid mobile app?

If you’re a web developer, you have a decent knowledge of HTML, CSS and JavaScript. Also, you’re most likely using one of the ever so slightly popular frameworks these days like AngularJS. Up until fairly recently if you wanted to make an app for (currently) two most popular mobile operating systems iOS and Android your only bet was to make the so-called native applications using the SDKs of the intended platform itself. This, of course, meant that you needed to make two versions of your application – both for iOS and Android. If you are a solo developer chances that you’re proficient in both are not so high.

Nowadays, luckily, with the Ionic Framework you can create one application by using the skills you already have as a web developer and then deploy this one codebase as an app to both iOS and Android stores. How cool is that, right? So, hybrid because it’s a “simple” web app wrapped inside the native app with a so-called WebView.

Why is Ionic cool?

Ionic is awesome because it’s not “just” a framework. Instead, it has a whole ecosystem built around it. For example, Ionic allows you to:

  • generate icons and splash screens for all devices and device sizes with a single command: ionic resources. This alone saves you at least a day of image preparing for various sizes.
  • instantly update your apps with code changes, even when running directly on your device with ionic run --livereload
  • build and test iOS and Android versions side-by-side and see changes instantly with ionic serve --lab
  • share your Ionic apps with clients, customers, and testers all around the world without ever going through the App Store with ionic share
  • easily accessing the full native functionality of the device using ngCordova (here you get to use any Cordova plugin – so Ionic is indeed much more than Cordova per se)
  • Also, they’re (Ionic team) building a full-stack backend services and tools for your Ionic app likeDeploy (for deploying a new version without going through Apple review process!), Analytics,Push notifications.
  • Ionic CLI (command line interface) uses Cordova in the backend and allows you to build (directly using Ionic CLI) apps for iOS and Android (you by doing ionic build ios or ionic build android and woila)
  • Ionic uses Angular as a frontend framework so if you’re familiar with it it will come as a bonus. They’re working closely with the Angular 2.0 team too.

How to start your project?

If you take a look at my answer to this question you’ll see that if you already have an API defined in your Django backend, then you can start using it quite quickly by leveraging the existing API and consuming it with Angular $resource.

Hope this helps and that you find using Ionic a pleasure.

Quick tips

How to open current folder in Finder from Terminal on Mac OS X

To open current folder in Finder from Terminal on Mac OS X use the following command:

open .

The dot (.) represents the current directory.

This is usually useful for when you’re using Terminal (or any other you prefer, like iTerm2 for example) to navigate through your folders but then you need to open the current one for some reason in the Finder application.

You also may want to check out how to open current folder in Explorer from Command prompt on Windows.

Ionic, Stack Overflow

Where to get .xap file in Windows using ionic build?

profile for Nikola at Stack Overflow, Q&A for professional and enthusiast programmers
I’m a big fan of Stack Overflow and I tend to contribute regularly (am currently in the top 0.X%). In this category (stackoverflow) of posts, I will be posting my top rated questions and answers. This, btw, is allowed as explained in the meta thread here.

As you may know, I’m really into Ionic framework lately and am helping out on StackOverflow with the knowledge I gained so far with the framework. I’m currently #5 All time answerer.

I answered this question by user user_4337270:

I am using Ionic framework for my project. As per ionic build I have used the build command for windows:

ionic build windows

After the build I get the file structure as below:

enter image description here

The issue is I’m not able to figure out were do I get the .XAP file inside the platform/windows folder and I’m completely new on Windows build.

My answer was:

I’m just posting this as an answer, to which we came in the comments under the OP’s question:

Add the windows phone platform: ionic platform add wp8.

Build for wp8: ionic build wp8.

The file CordovaAppProj_Debug_AnyCPU.xap is the one you’re looking for.

However, I would like to turn your attention to these few posts:

  • http://blog.vjrantal.net/2015/01/08/experiences-with-ionic-on-windows-phone-8-1/
  • http://blogs.msdn.com/b/msdn_answers/archive/2015/02/10/running-cordova-apps-on-windows-and-windows-phone-8-1-using-ionic-angularjs-and-other-frameworks.aspx
  • http://appfoundry.be/blog/2014/10/16/ionic-windows-phone

which basically confirm what the official Ionic team says that the platforms wp8 and windows in general are not yet fully supported; but they hope they soon will be.

Where to get .xap file in #Windows using #ionic build? http://t.co/PtsGU7AP8d

— Nikola Brežnjak (@HitmanHR) September 8, 2015

Books

Spell or high water – Scott Meyer

My notes from a book Spell or high water by Scott Meyer, which I rated 4/5 on my Shelfari account and which I think every programmer will enjoy. Bash scripts, hidden files, root access, you’ll love it 🙂

Martin leaned forward and asked what did you do next? I thought about getting myself a bunch of money, but I thought that was probably the fastest way to get caught. Martin decided to never tell Roy how he had gotten caught.

He made an effort to listen more than he talked, which doesn’t come naturally when you seem older than everyone around you by at least 20 years.

Did that sentence made sense when you planned it in your head, or do you just open your mouth and let the words fall out however they like?!

Is killability even the word? If I use it and you know what it means, it’s a word.

Imagine if you could introduced an atheist to God. Will the atheist find religion, or would he find the reasons to disbelieve the evidence of his own eyes?

You make more mistakes because you try more things than they do.

For a smart person to argue with the dumb person they have to dumb down their logic on the fly, while the dumb person thinks in dumb logic naturally, giving them an advantage.

There’s nothing showoff hates more then a competing showoff.

The audience expects us to fool them. They don’t think the magician can really do magic. They come to be entertained by a lie.

My notes from a #book every #programmer will love: Spell or high water by Scott Meyer http://t.co/5Bifx7WjVE

— Nikola Brežnjak (@HitmanHR) September 7, 2015

Wordpress

How to add Logout link to WordPress WooCommerce

First, find the text that says something like Login or register. A tool like AstroGrep, if you’re on Windows, may be of great help if you don’t know in which file you have to look (like I didn’t).

Then you will most probably see something like this:

<div class="account_links">
	<?php if ( is_user_logged_in() ) : ?>
		<a href="<?php echo get_permalink( get_option('woocommerce_myaccount_page_id') ); ?>" title="<?php _e('My Account','wpdance'); ?>">Mein Konto</a>
	<?php else : ?>
		<a href="<?php echo get_permalink( get_option('woocommerce_myaccount_page_id') ); ?>" title="<?php _e('Login','wpdance'); ?>">Anmelden</a>
		<span>oder</span>
		<a href="<?php echo get_permalink( get_option('woocommerce_myaccount_page_id') ); ?>" title="<?php _e('Create An Account','wpdance'); ?>">registrieren</a>
	<?php endif; ?>
</div>

In the is_user_logged_in() part of the if add the following statement:

<a href="<?php echo wp_logout_url( get_permalink( woocommerce_get_page_id( 'myaccount' ) ) );?>">Logout</a>

so that the final code then looks like this:

<div class="account_links">
	<?php if ( is_user_logged_in() ) : ?>
		<a href="<?php echo get_permalink( get_option('woocommerce_myaccount_page_id') ); ?>" title="<?php _e('My Account','wpdance'); ?>">Mein Konto</a>
		<span> | </span>
		<a href="<?php echo wp_logout_url( get_permalink( woocommerce_get_page_id( 'myaccount' ) ) );?>">Logout</a>
	<?php else : ?>
		<a href="<?php echo get_permalink( get_option('woocommerce_myaccount_page_id') ); ?>" title="<?php _e('Login','wpdance'); ?>">Anmelden</a>
		<span>oder</span>
		<a href="<?php echo get_permalink( get_option('woocommerce_myaccount_page_id') ); ?>" title="<?php _e('Create An Account','wpdance'); ?>">registrieren</a>
	<?php endif; ?>
</div>

This is it for this quick tip, hope it helps someone. I’ll keep it for reference for when I can’t remember it straight away…

Ionic, Stack Overflow

How to populate select in Ionic Creator

profile for Nikola at Stack Overflow, Q&A for professional and enthusiast programmers
I’m a big fan of Stack Overflow and I tend to contribute regularly (am currently in the top 0.X%). In this category (stackoverflow) of posts, I will be posting my top rated questions and answers. This, btw, is allowed as explained in the meta thread here.

As you may know, I’m really into Ionic framework lately and am helping out on StackOverflow with the knowledge I gained so far with the framework. I’m currently #5 All time answerer.

I answered this question by user Umer Khalid:

I am using Ionic Creator for developing an application. While trying to add select (dropdown) I could not see any way to enter options for the dropdown?

My answer was:

 

Simple, but not liked, answer: you can’t do it by drag&drop.

If you take a look at the source you get when you download from Ionic Creator, you will see it creates “just” the select element:

<select></select>

So, you could “kind of fake it”, by drag&dropping the HTML element inside the form element and putting the following code inside:

<label class="item item-select" name="myselect">
    <span class="input-label">Input</span>
    <select>

        <option value="1">1</option>
        <option value="2">2</option>
    </select>
</label>

I don’t know if in future guys from Ionic will add this. It would be probably worth it if you request it as a feature over at their (very active) forum: http://forum.ionicframework.com/

CodeProject

How to Manage Front-End JavaScript and CSS Dependencies with Bower on Ubuntu 14.04

I recently wrote a tutorial for DigitalOcean titled How to Manage Front-End JavaScript and CSS Dependencies with Bower on Ubuntu 14.04. You can view the tutorial published on their site, but since their rules allow it, I am posting it in full here also.

Introduction

Long gone are the days when we had to manually search for, download, unpack, and figure out installation directories for our front-end frameworks, libraries, and assets.

Bower is a package manager for front-end modules that are usually comprised of JavaScript and/or CSS. It lets us easily search for, install, update, or remove these front-end dependencies.

The advantage to using Bower is that you do not have to bundle external dependencies with your project when you distribute it. Bower will take care of the third-party code when you run bower install and get those dependencies to the right locations. It also makes the final project package smaller for distribution.

Bower logo

In this tutorial you’ll learn how to install and use Bower on an Ubuntu 14.04 server. We’ll use to Bower to install Bootstrap and AngularJS and illustrate them running a simple application on an Nginx web server.

Prerequisites

Before we begin, there are some important steps that you need to complete:

  • Droplet with a clean Ubuntu 14.04 installation. For this purpose the size of the Droplet really doesn’t matter, so you can safely go with the smallest version. If you haven’t yet created your Droplet, you can do so by following the steps in the How To Create Your First DigitalOcean Droplet Virtual Server tutorial
  • Connect to your server with SSH
  • Create a user with sudo privileges by following our Ubuntu 14.04 Initial Server Setup tutorial. In our example, this user is called sammy
  • For the web server, we will use Nginx, a powerful and efficient web server that has seen wide adoption due to its performance capabilities. Follow the How To Install Nginx on Ubuntu 14.04 LTS tutorial to install Nginx

Also, Bower needs Git, Node.js and npm.

  • Install Git on your server with the following command:
sudo apt-get install git

If you want a more in-depth tutorial about setting up Git, you can take a look at How To Install Git on Ubuntu 14.04.

  • Install Node.js on your server with the following command:
sudo apt-get install nodejs

If you want a more in-depth tutorial about setting up Node.js, you can take a look at How To Install Node.js on an Ubuntu 14.04 server.

  • Install npm on your server with the following command:
sudo apt-get install npm

If you want a more in-depth tutorial about setting up npm, you can take a look at How To Use npm to Manage Node.js Packages on a Linux Server.

  • Since we installed Node.js from a package manager your binary may be called nodejs instead of node. Since Git relies on the fact that your Node.js binary will be called node, you just need to symlink it like so:
sudo ln -s /usr/bin/nodejs /usr/bin/node

You can read more about this issue on Github, and you can learn more about the symlinking from this StackExchange question.

When you are finished with these steps, you can continue with this guide.

Step 1 — Installing Bower

Install Bower using npm:

sudo npm install bower -g

The -g switch is used to install Bower globally on your system.

Now that we have Bower installed we will continue with a practical example. In the next steps, we’ll

  • Make a new Bower project
  • Install Bootstrap with Bower
  • Install AngularJS with Bower
  • Serve the website via Nginx

At the end of this tutorial, in the Bower Reference section, you can read more about each of the Bower options.

Step 2 — Preparing Project Directory

We’ll create our Bower project in the /usr/share/nginx/html directory so we can easily access our application as a website. This is Nginx’s default document root directory.

So, we need to change to this directory with the cd command:

cd /usr/share/nginx/html

By default, Nginx on Ubuntu 14.04 has one server block enabled by default. It is configured to serve documents out of the aforementioned /usr/share/nginx/html directory.

In our quick example we’ll use the default site.

For a production application, though, you should probably set up a server block for your specific domain.

Before we can do any work in the /usr/share/nginx/html directory, we have to give our sudo user rights to it.

Change the ownership of the directory with the following command:

sudo chown -R sammy:sammy /usr/share/nginx/html/

Instead of sammy you would use your own sudo user which you created in the prerequisite Ubuntu 14.04 Initial Server Setup tutorial.

Step 3 — Initializing Bower Project

Now, inside the directory /usr/share/nginx/html, execute the following command to make a new Bower project:

bower init

You will be asked a series of questions. For this quick example project you can just press ENTER to select all the defaults.

See a detailed breakdown of the answers below, marked in red:

? May bower anonymously report usage statistics to improve the tool over time? Yes
? name: BowerTest
? version: 0.0.0
? description: Testing Bower
? main file: index.html
? what types of modules does this package expose? Just press ENTER
? keywords: bower angular bootstrap
? authors: Nikola Brežnjak
? license: MIT
? homepage: http://bower.example.com
? set currently installed components as dependencies? Yes
? add commonly ignored files to ignore list? Yes
? would you like to mark this package as private which prevents it from being accidentally published to the registry? No

{
  name: 'BowerTest',
  version: '0.0.0',
  description: 'Testing Bower',
  main: 'index.html',
  keywords: [
    'bower',
    'angular',
    'bootstrap'
  ],
  authors: [
    'Nikola Brežnjak'
  ],
  license: 'MIT',
  homepage: 'http://bower.example.com',
  ignore: [
    '**/.*',
    'node_modules',
    'bower_components',
    'test',
    'tests'
  ]
}

? Looks good? Yes

A few notes about these options:

  • Just to revisit the note from before, you don’t need to enter any of the options when running the bower init command for this example project
  • In the What types of modules does this package expose? question, you can select or deselect the options by pressing SPACEBAR. Pressing ENTER confirms the selection. By default none are selected, and for this simple example we don’t need any of them. You can read more about them from the official GitHub issue
  • For a production project, you would want to fill out the authors field and other settings so that other people know more about the project
  • The homepage setting is used only to show your own website, and has nothing to do with the settings of the actual server where you’re running this application

Now you should have a bower.json file in your working directory (/usr/share/nginx/html/) with the JSON content shown in the output above.

Step 4 — Installing AngularJS

AngularJS is a JavaScript framework for web applications. To install AngularJS with Bower, run the following command:

bower install angularjs --save

You can see the output of the command below:

bower angularjs#*               cached git://github.com/angular/bower-angular.git#1.3.14
bower angularjs#*             validate 1.3.14 against git://github.com/angular/bower-angular.git#*
bower angularjs#*                  new version for git://github.com/angular/bower-angular.git#*
bower angularjs#*              resolve git://github.com/angular/bower-angular.git#*
bower angularjs#*             download https://github.com/angular/bower-angular/archive/v1.4.3.tar.gz
bower angularjs#*             progress received 0.1MB of 0.5MB downloaded, 20%
bower angularjs#*             progress received 0.1MB of 0.5MB downloaded, 24%
bower angularjs#*             progress received 0.5MB of 0.5MB downloaded, 98%
bower angularjs#*              extract archive.tar.gz
bower angularjs#*             resolved git://github.com/angular/bower-angular.git#1.4.3
bower angularjs#~1.4.3         install angularjs#1.4.3

angularjs#1.4.3 bower_components/angularjs

If you get slightly different output than the one shown above, that can be due to the fact that Bower caches packages for faster download and your package was installed from cache.

We now have AngularJS installed in the bower_components/angular directory (or possibly the bower_components/angularjs) directory, with the path to the minified version (which we will be using) being: bower_components/angular/angular.min.js.

Step 5 — Installing Bootstrap

Bootstrap is a CSS framework. To install Bootstrap with Bower, run the following command:

bower install bootstrap --save

You can see the output of the command below:

bower angularjs#~1.4.3          cached git://github.com/angular/bower-angular.git#1.4.3
bower angularjs#~1.4.3        validate 1.4.3 against git://github.com/angular/bower-angular.git#~1.4.3
bower bootstrap#*               cached git://github.com/twbs/bootstrap.git#3.3.5
bower bootstrap#*             validate 3.3.5 against git://github.com/twbs/bootstrap.git#*
bower jquery#>= 1.9.1           cached git://github.com/jquery/jquery.git#2.1.4
bower jquery#>= 1.9.1         validate 2.1.4 against git://github.com/jquery/jquery.git#>= 1.9.1
bower angularjs#~1.4.3         install angularjs#1.4.3
bower bootstrap#~3.3.5         install bootstrap#3.3.5
bower jquery#>= 1.9.1          install jquery#2.1.4

angularjs#1.4.3 js/angularjs

bootstrap#3.3.5 js/bootstrap
└── jquery#2.1.4

jquery#2.1.4 js/jquery

We now have Bootstrap installed in the bower_components/bootstrap directory with the path to the minified version (which we will be using) being: bower_components/bootstrap/dist/js/bootstrap.min.js for the JavaScript file and bower_components/bootstrap/dist/css/bootstrap.min.css for the CSS file.

Notice how jQuery was installed too, as it’s a dependency required by Bootstrap.

Step 6 — Creating a Hello World Application

Inside the /usr/share/nginx/html/ folder edit, let’s replace the default index.html file with our own content:

mv /usr/share/nginx/html/index.html /usr/share/nginx/html/index.html.orig

Open the file for editing:

vim /usr/share/nginx/html/index.html

You can enter this content exactly:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container" ng-app>
        <form class="form-signin">
            <h2 class="form-signin-heading">What you type here:</h2>

            <input ng-model="data.input" type="text" class="form-control" autofocus>

            <h2 class="form-signin-heading">It will also be shown below:</h2>
            <input type="text" class="sr-only">{{data.input}}</label>
        </form>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

    <script src="bower_components/angular/angular.min.js"></script>
</body>
</html>

Depending on how Bower installs AngularJS on your system, the path to the script might be bower_components/angularjs/angular.min.js rather than bower_components/angular/angular.min.js.

Now we have a simple Hello World type example application using Boostrap with AngularJS, running on Nginx.

(This is basically the example Signin Template from Bootstrap where the content inside the <body> tag has a simple form with two input fields.)

To view this example app, you should navigate in your browser to the IP of your Droplet; something like http://your_server_ip/. You should see something like the image below:

Imgur

If you type something in the text box field, the exact same content will appear below, using the AngularJS two-way data binding.

If you don’t get any output, try restarting Nginx with the following command:

sudo service nginx restart

If you want to learn more about AngularJS, visit the official documentation at https://docs.angularjs.org/tutorial. If you wish to learn more about Bootstrap, visit the official documentation at http://getbootstrap.com/getting-started/.

If you want to be able to access your web server via a domain name, instead of its public IP address, purchase a domain name then follow these tutorials:

  • How To Set Up a Host Name with DigitalOcean
  • How to Point to DigitalOcean Nameservers From Common Domain Registrars

Bower Reference

Now that we’ve gone through a practical example with Bower, let’s look at some of its general capabilities.

Installing Packages

To install a package (for example, AngularJS or Bootstrap) we would need to run the following command:

bower install package

Instead of package, enter the exact name of the package you want to install. The package can be a GitHub shorthand, a Git endpoint, a URL, and a lot more.

You can also install a specific version of a certain package.

Find out more about all the available options for installing via Bower’s official documentation on installing.

Searching Packages

You can search for packages via this online tool or by using the Bower CLI. To search for packages using the Bower CLI, use the following command:

bower search package

For example, if we would like to install AngularJS, but we’re unsure about the correct package name, or we would like to see all the available packages for AngularJS, we can execute the following command:

bower search angularjs

We would get an output similar to this:

Search results:
    angularjs-nvd3-directives git://github.com/cmaurer/angularjs-nvd3-directives.git
    AngularJS-Toaster git://github.com/jirikavi/AngularJS-Toaster.git
    angularjs git://github.com/angular/bower-angular.git
    angular-facebook git://github.com/Ciul/Angularjs-Facebook.git
    angularjs-file-upload git://github.com/danialfarid/angular-file-upload-bower.git
    angularjs-rails-resource git://github.com/FineLinePrototyping/dist-angularjs-rails-resource
    angularjs-geolocation git://github.com/arunisrael/angularjs-geolocation.git

In order to install AngularJS you would then simply execute the following command:

bower install angularjs

Saving Packages

When starting a project with Bower, it’s standard to start with running the init command:

bower init

This will guide you through creating a bower.json file, which Bower uses for project configuration. The process might look like this:

? name: howto-bower
? version: 0.0.0
? description:
? main file:
? what types of modules does this package expose?
? keywords:
? authors: Nikola Breznjak <[email protected]>
? license: MIT
? homepage: https://github.com/Hitman666/jsRockstar
? set currently installed components as dependencies? Yes
? add commonly ignored files to ignore list? Yes
? would you like to mark this package as private which prevents it from being accidentally published to the registry? No

{
  name: 'howto-bower',
  version: '0.0.0',
  homepage: 'https://github.com/Hitman666/jsRockstar',
  authors: [
    'Nikola Breznjak <[email protected]>'
  ],
  license: 'MIT',
  ignore: [
    '**/.*',
    'node_modules',
    'bower_components',
    'test',
    'tests'
  ]
}

? Looks good? Yes

Now, if you install any of the packages using the --save switch, they will be saved to the bower.json file, in the dependencies object. For example, if we installed AngularJS with the following command:

bower install angularjs --save

Then our bower.json file would look something like this (note the dependencies object):

{
  "name": "howto-bower",
  "version": "0.0.0",
  "homepage": "https://github.com/Hitman666/jsRockstar",
  "authors": [
    "Nikola Breznjak <[email protected]>"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "angularjs": "~1.4.3"
  }
}

Uninstalling Packages

To uninstall a Bower package, simply run the following command:

bower uninstall package

This will uninstall a package from your bower_component directory (or any other directory you’ve defined in the .bowerrc file (more about configuration in the next section).

Configuring Bower with .bowerrc

To configure Bower, you have to create a file called .bowerrc. (Notice the dot – it means it’s a hidden file in a Linux environment.)

Create the .bowerrc file in the root directory of your project (alongside the bower.json file). You can have one .bowerrc file per project, with different settings.

Bower lets you configure many options using this file, which you can read more about in the configuration options from the official documentation.

One useful option is the directory option, which lets you to customize the folder in which Bower saves all its packages.

To set this simple option, create a .bowerrc file that looks like this:

{
  "directory": "js/"  
}

Conclusion

After completing this tutorial, you should know how to use Bower to install the dependencies for a simple AngularJS application.

You should also have an idea of how to use Bower for your own custom applications.

If you have any questions or you ran into problems with following the steps in this tutorial, please share them in the comments, I’ll make sure I reply promptly to them.

How to Manage Front-End #JavaScript and #CSS #Dependencies with #Bower on Ubuntu 14.04 http://t.co/x1FVUEVenD

— Nikola Brežnjak (@HitmanHR) August 27, 2015

Books

Father Forgets – W. Livingston Larned

I stumbled across this rather touching poem Father Forgets by W. Livingston Larned when I was reading the book How to win friends and influence people by Dale Carnegie (you can see my favorite quotes from that book here), and indeed it’s something one should sit down and think about from time to time, if one has kids of his own…

Here’s the full poem Father Forgets by W. Livingston Larned:

Listen, son; I am saying this as you lie asleep, one little paw crumpled under your cheek and the blond curls stickily wet on your damp forehead. I have stolen into your room alone. Just a few minutes ago, as I sat reading my paper in the library, a stifling wave of remorse swept over me. Guiltily I came to your bedside.
There are things I was thinking, son: I had been cross to you. I scolded you as you were dressing for school because you gave your face merely a dab with a twoel. I took you to task for not cleaning your shoes. I called out angrily when you threw some of your things on the floor.
At breakfast I found fault, too. You spilled things. You gulped down your food. You put your elbows on the table. You spread butter too thick on your bread. And as you started off to play and I made for my train, you turned and waved a hand and called, “Goodbye, Daddy!” and I frowned, and said in reply, “Hold your shoulders back!”
Then it began all over again in the late afternoon. As I came up the road, I spied you, down on your knees, playing marbles. There were holes in your stockings. I humiliated you before you boyfriends by marching you ahead of me to the house. Stockings were expensive – and if you had to buy them you would be more careful! Imagine that, son, form a father!
Do you remember, later, when I was reading in the library, how you came in timidly, with a sort of hurt look in your eyes? When I glanced up over my paper, impatient at the interruption, you hesitated at the door. “What is it you want?” I snapped.
You said nothing, but ran across in one tempestuous plunge, and threw your arms around my neck and kissed me, and your small arms tightened with an affection that God had set blooming in your heart and which even neglect could not wither. And then you were gone, pattering up the stairs.
Well, son, it was shortly afterwards that my paper slipped from my hands and a terrible sickening fear came over me. What has habit been doing to me? The habit of finding fault, of reprimanding – this was my reward to your for being a boy. It was not that I did not love you; it was that I expected too much of youth. I was measuring you by the yardstick of my own years.
And there was so much that was good and fine and true in your character. The little heart of you was as big as the dawn itself over the wide hills. This was shown by your spontaneous impulse to rush in and kiss me good night. Nothing else matters tonight, son. I have come to your bedside in the darkness, and I have knelt there, ashamed!
It is a feeble atonement; I know you would not understand these things if I told them to you during your waking hours. But tomorrow I will be a real daddy! I will chum with you, and suffer when you suffer, and laugh when you laugh. I will bite my tongue when impatient words come. I will keep saying as if it were a ritual: “He is nothing buy a boy – a little boy!”
I am afraid I have visualized you as a man. Yet as I see you now, son, crumpled and weary in your cot, I see that you are still a baby. Yesterday you were in your mother’s arms, your head on her shoulder. I have asked too much, too much.
There’s also a video on YouTube:
https://www.youtube.com/watch?v=Gig8KkpsWvI
Page 31 of 52« First...1020«30313233»4050...Last »

Recent posts

  • Vibe Coding a Pokémon Search App with Replit
  • SendGrid Phishing Scam Attempts
  • Retrospective Questions
  • When espanso Breaks on Long Replacement Strings (and How to Fix It)
  • 2024 Top Author on dev.to

Categories

  • Android (3)
  • Books (114)
    • Programming (22)
  • CodeProject (36)
  • Daily Thoughts (78)
  • Go (3)
  • iOS (5)
  • JavaScript (128)
    • Angular (4)
    • Angular 2 (3)
    • Ionic (61)
    • Ionic2 (2)
    • Ionic3 (8)
    • MEAN (3)
    • NodeJS (27)
    • Phaser (1)
    • React (1)
    • Three.js (1)
    • Vue.js (3)
  • Leadership (1)
  • Meetups (8)
  • Miscellaneou$ (80)
    • Breaking News (8)
    • CodeSchool (2)
    • Hacker Games (3)
    • Pluralsight (7)
    • Projects (2)
    • Sublime Text (2)
  • PHP (6)
  • Quick tips (41)
  • Servers (8)
    • Heroku (1)
    • Linux (3)
  • Stack Overflow (81)
  • Unity3D (9)
  • VibeCoding (1)
  • Windows (8)
    • C# (2)
    • WPF (3)
  • Wordpress (2)

"There's no short-term solution for a long-term result." ~ Greg Plitt

"Everything around you that you call life was made up by people that were no smarter than you." ~ S. Jobs

"Hard work beats talent when talent doesn't work hard." ~ Tim Notke

© since 2016 - Nikola Brežnjak