Android's keyboard messes with viewport dimension

There is a little quirk on how the android soft-keyboard totally messes with css orientation rules. It’s probably a lesser known gotcha, but it tripped me up longer than I would have liked. Here I will explain it and how to get around it.

I was targeting a very specific set of devices using a media query of (orientation: portait) whenever the user selected the search bar the on screen soft-keyboard would open up on the android tablet and it would then break my styles.

I reached out to my team and another developer noticed that when the height was changed it would also break the layout in the same manner as the keyboard popping up. I did some google fu and came accross two excellent links.

It ultimately has to do with how orientation is calculated as I was using (orientation: portrait). The W3 calculates orientation portrait by checking if the height or width is greater, not the actual device orentation itself. So you could still have the device upright but if the height is less than the width you are in “landscape” mode.

W3.org says
The ‘orientation’ media feature is ‘portrait’ when the value of the ‘height’ media feature is greater than or equal to the value of the ‘width’ media feature. Otherwise ‘orientation’ is ‘landscape’.

So when the keyboard pops up the height is less than the width and it breaks out of the (orientation: portrait) media query. iOS doesn’t have this issue because the keyboard is overlaid over the browser window vs resizing the actual browser.

So the solution is to stuff the styles that you want to still be applied in an (orientation: landscape) media query.

Resources I am using to learn react

Currently I am ramping up on a project very soon that is react based. I have no prior experience writing react code and here are a list of resources that I have found most helpful in my learning.

So good they can't ignore you

I’ve had this book on my to read list for years, and I had a long weekend dog sitting and was able to finish it in one sitting on the back porch on a beautiful Sunny colorado day. I am definitely on the right path, most of the advice that is relevant to me is toward the beginning part of the book. The building of career capital part. In a few years, the next parts will be more relevant as I try and work remotely full-time.

The narratives of this book follow a common thread. THe importance of ability ie be good at what you do. To follow in the words of Steve Martin, Be so good they can’t ignore you.

Rule #1: Don’t follow your passion

Compelling careers often have complex origins that reject the simple idea that all you have to do is follow your passion.

Career passions are rare, passion takes time and passion is a side effect of mastery

Self determination theory is the best understanding science currently has on why some pursuits excite us.

3 basic psychological needs required to feel intrinsically motivated for your work.

  • Autonomy: The feeling that you have control over your day, and that your actions are important.

  • Competence: The feeling that you are good at what you do.

  • Relatednedss: The feeling of connection to other people

Working right, trumps finding the right work.

Passion could be dangerous and has made people leave their jobs with no career capital, yoga example.

Focus on the craftsman mindset. On what value that you’re producing in your job vs the passion mindset on a focus on what value your job offers you.

Jordan Tice, guitar player example. Always tried to focus on the process of practicing.

Think of “How can I be really good?”

Track the hours that you spend each month, learning something new and building something with that knowledge.

Turn the attention to the quality that you produce.

Regardless of how you feel about your job right now, adopting the craftsman mindset will be the foundation on which you’ll build a compelling career.

The power of career capital

If you want a great job, then you need to build up rare and valuable skills to offer in return.

Craftsman mindset…what can I offer the world.

Traits that define great work. Creativity, impact and control. Now how do you get these traits into your own working life?

  • THe traits that define great work are rare and valuable

  • Supply and demand says that if you want these traits you need rare and valuable skills to offer in return. Think of these skills are career capital that you can offer. Ie programming, accessibility niche, automated testing, javascript, speaking at seminars

  • The craftsman mindset, with its relentless focus on becoming “so good they can’t ignore you” is a strategy well suited for acquiring career capital. This is why it trumps passion mindset if your goal is to create work you are proud of.

Three traits that disqualify for applying the craftsman mindset

  1. The job has few opportunities to distinguish yourself by developing relevant skills that are rare and valuable.

  2. The job focuses on something you think is useless or bad for the world.

  3. The job forces you to work with people you really really dislike.

Alex Berger and Mike Jackson example on adopting the craftsman mindset.

Always seeking feedback on his scripts, just like you should always be seeking feedback on your code with a peer review.

Basically be serious about doing your job well. Ensure that your attention is focused on the activities that matter.

Becoming a craftsman..deliberate practice. The difference in strategy that separates average guitar players from stars like jordan tice is not confined to music.

You need to stretch your ability and receive immediate feedback. Which is the key to successfully acquiring career capital in almost any field.

Skill stretching deliberate practice.

10k hour rule made popular by malcolm gladwell.

Emphasizing serious study: Pouring over books and using teachers to help identify and then eliminate weaknesses.

Focus on difficult activities, carefully chosen to stretch our abilities where they most need stretching and that provide immediate feedback.

Deliberate practice to describe a style of serious study, activity designed for the sole purpose of improving specific aspects of an individual’s performance.

Materials can be deliberately chosen or adapted such that the problems to be solved are at a level that is appropriately challenging.

Focusing on difficult activities, carefully chosen to stretch your abilities where they most need stretching and that provide immediate feedback.

If you just show up and work, you will soon hit a performance plateau beyond which you fail to get any better. This is what I think is currently happening with my web development/ programming career.

Deliberate practice then is the key to quickly becoming so good they can’t ignore you.

To successfully adopt the craftsman mindset, therefore, we have to approach our jobs in the same way that Jordan approaches his guitar playing or Kasparov approaches his chess playing

Alex Bergers example of “A never ending quest to get better, it’s like a sport, you have to practice and you have to study.”

  1. Decide what capital market you are in.

    1. WInner take all and auction

    2. Programming, the only ability is to write good code.

  2. Identify your capital type

  3. Define ‘good’

    1. Get clear goals. Deliberate practice requires clear goals.

      1. FInish teamtreehouse fullstack JS course.

      2. Get a freelance web developer position/contract gig.

  4. Stretch and destroy (The current step I am doing).

Doing things we know how to do well is enjoyable, and that is exactly the opposite of what deliberate practice demands. Deliberate practice demands an all effort of focus and concentration. That is what makes it ‘deliberate’ as distinct from the mindless playing of scales or hitting of tennis balls that most people engage in. OR watching beginner programming tutorials over and over again.

Deliberate practice is not enjoyable. It feels like a stretch. It is an uncomfortable sensation in your head that kinda feels like a physical strain, as if neurons are physically reforming into new configurations. That stretching feeling is the precondition to getting better.

THis is what you should experience in your own pursuit of ‘good’. If you’re not uncomfortable, then you’re probably stuck and an ‘acceptable’ level and you should seek out more responsibility.

Now that is only part 1, part 2 is embracing honest and candid feedback. Ie code reviews with senior mentors/teachers.

Sometimes it’s from harsh feedback where you learn where to retrain your focus in order to continue to make progress.

Keep a constant stream of feedback coming. Ask advice from people that will tell you what is working and what is not working in your writing.

Continuous and harsh feedback he received accelerated the growth of his ability.

Step 5: Be patient

I thought, if I stay with it for 20 years and anyone who sticks with something for 20 years will be pretty good at it.

There is an importance of diligence. Without this patient willingness to reject shiny new pursuits, you’ll derail your efforts before you acquire the capital that you need.

You stretch yourself, day after day, month after month and then finally look up and realize…Hey I’m pretty good at this and people are starting to notice.

I’m not going to write up the rule #3 and #4 because they are not super relevant to me yet, but they are definitely worth a read if you are at that stage where you’re career capital is at a good level. 2 more years left for me and then I will focus on the additional rules. Until then, thanks for reading.

Mastery

The five master keys

  • Instruction

  • Practice

  • Surrender

  • Intentionality

  • The Edge

Dealing with change and homeostasis

  • Be aware of the way homeostasis works

  • Be willing to negotiate with your resistance to change

  • Develop a support system

  • Follow a regular practice

  • Dedicate yourself to lifelong learning

Getting energy for mastery

  • Maintain physical fitness

  • Acknowledge the negative and accentuate the positive

  • Try telling the truth

  • Honor but don’t indulge your own dark side

  • Set your priorities

  • Make commitments. Take action

  • Get on the path of mastery and stay on it

Pitfalls along the path

  • Conflicting way of life

  • Obsessive goal orientation

  • Poor instruction

  • Lack of competitiveness

  • Over Competitiveness

  • Laziness

  • Injuries

  • Drugs

  • Prizes and medals

  • Vanity

  • Dead seriousness

  • Inconsistency

  • Perfectionism

Goals and contingencies are important, sure, but they exist in the future and in the past.

Practice, the path of mastery exists only in the present state.

To love the plateau is to love the external learning. Enjoy the accomplishments and accept the plateau that waits just beyond them.

Be in the hands of a master teacher.

  1. Teacher mentor.

  2. Practice staying on the path. The ups/downs barriers of the ego but it will lead to mastery.and staying on the path

  3. Surrender

  4. Intentionality

  5. The edge.

Early stages of learning you should have the spirit of the fool. Learning any kind of skill involves certain indignities. First few dives are sure to be belly flops, and everyone is bound to see them.

If you want to get there, be prepared to take it.

Surrendering to your teacher and to the fundamentals of the art are only the beginning.

Surrender means there are no experts, only learners.

Mental game is 50% visualization

40% setup

10% swing

Every master is a master of vision.

Tools

  1. Why resolutions fail.

    1. Homeostasis wants things to go back to the baseline normal. It is humane nature.

    2. Be aware of how homeostatis works

      1. Social homeostatyis, also is a big impact.

      2. Be prepated to experience falling back to the baseline

    3. Be willing to understand an notice your resistance to change.

  2. Develop a support system.

  3. Follow regular practice.

  4. Habit provides a help against homeostatis.

  5. Dedicate yourself to lifelong learning

To learn is to change….educate, books, behavior, changes the learner

The path of learning never ends…..

Getting energy for master

Best remedy for alertness if aerobic exercise.

  1. Maintain physical fitness.

  2. Acknowledge the negative and accentuate the positive.

Me: I’m not as good of a programmer that I’d like to be. Not much of a social life outside of the college bunch not as good with the ladies yet as I’d like to be, I sleep in late and go to work late.

  1. Try telling the truth

4 .Set your priorities.

A, B, C, D etc. of the day/week.
  1. Make commitments and take action.

  2. Get on the path to mastery and stay on it.

Inconsistency is my biggest pitfall.

Consistency is the practice if the mark of the master.

Continuity of time and place can establish a rhythum that bouys you up and carries you along your path.

Remember, most of life if in-btween time. That is it is waking up, getting, dress, commuting, working until llunch, taking lunch, working to 5,..NONE OF THAT COUNTS..but it should and does!

Naming Things

Naming


Naming things is hard, really hard and if done poorly it can make your code really confusing and hard to follow. Typically you want them to avoid having function named as nouns. Choose to name them as verbs. Because they are usually doing something. Much like the great early 00’s commercials of “Verb: It’s what you do.”


    Some helpful tips I’ve been given
  • Have function names that are unique

  • Go over naming conventions with other developers.

  • Always come back to “What is this function doing?”

  • Be consistent in your naming conventions.

  • Break up the function so its only doing one thing. If it does more than one thing then it’s probably a good idea to extrapolate it.


A common approach is either GetSomethingBySomething(string something) or SetSomething()

Coding Conventions

Naming Conventions


Naming conventions can be tricky and when working on a project with other developers you all need to be on the same page. Most companies adopt some form of coding conventions that developers must follow. There are also some very common industry wide ones as well which I will cover here.



Starting with an Underscore before the property names.



If you see a variable that is preceded with an _. It’s a naming convention to remind the developer that the variable or property is either private or protected can cannot be accessed from outside the class.


If you see a file name or html partial with the naming convention it’s to remind you that this page is not intended to be served directly. It says to people “hey, this is a partial view.”


Single Letter Prefixes aka Hungarian Notation.


Hungarian notation is a naming convention that lets the developer know what the type of variable they are working with. Be it string, int etc.



iMyAge = 26
sMyName = “Frank”
var $container = $(‘#container’);



camelCase



Depending on the company you are working at or the project you are contribuiting to. Some places use camelCase where the first word letter is lowercase and the 2nd word is Uppercase. You have seen this in real day to day life with iPhone, eCommerce


Conclusion


The specific conventions that you use are not paramount, because their are a lot of different ones out there. Even holy wars against using tabs vs spaces. The most important thing is to be consistent with that the group has been using in the project or company. You can read much more about Coding Conventions at the following link. https://en.wikipedia.org/wiki/Coding_conventions

Recap and booleans.

A quick recap


  • You don’t have to capitalize class names for the program to compile, but is a good idea/coding convention to do so.

  • readonly fields can be set only during object construction

  • Constructors cannot return anything, they are void methods.

  • Public fields are directly accessible from outside the class

  • Private fields can only be accessed from within the class they are defined in

Boolean Values


Boolean values are essential to know. We want to create a Method (behavior) of the map that will let us know if a particular point is in bounds or not. an OnMap method is an example. We would have a boolean (True/False) variable where if the width or height are greater than the map values passed in then the OnMap method would return false. Letting you know the point is not on the map.



C# uses a practice called short-circuiting. This means that it will try and do as little work as possible when evaluating a Boolean expression. Some operators include ||, &&, and the !.



More info can be found at the following links about &&, || and

Knowing how these operators work in your sleep will definately help you along in all aspects of development. It also sometimes comed in handy in life when making choices between one thing or another.

Constructors.

Constructors confused me for a while, but once you understand the basics of OOP, fields, objects etc it becomes easier to grasp the concepts of them and why they are necessary in OOP. It deals with object initalization. When we gave the properties of the map to Width and Height we weren’t doing anything with them. This is where a constructor comes in to construct new instances of a class.


Conventions tell us that we need to name the constructor the same name as the class and make sure you put public in front of it or else it will be private by default and useless! A quick tip if you are using visual studio is to type out “ctor” and then hit tab tab. Their are so many more useful snippets at this web address. This constructor is called when the object is created. Make sure to put the parameters in the signature.

1
2
3
4
5
Public Map(int width, int height)
{
Width = width;
height = height;
}


Lowercase letters are convention and are method level variables. That means they only exist in the constructor method and local to the scope of the constructor. The instance variables are accessible thought the class and possible other classes as well. We may need other objects to know about the Map width and height.


When we initalize the objects field with values, sometimes we want to be able to change the values. Should the map values be allowed to change? Probably not. So making the fields readonly will help ensure that the Map size and coordinates doesn’t change. If this were to happen their would be a lot of wierd errors going on down the line.

Fields

When assind fields or properties to a class you need to think about what attributes that a class has. Ideally you want to set the minimal amount of attributes. A super simple example would be a map. It can be divided into X for the width and Y for the height. You start adding fields by listing the protection level, the type and then finally the name.



Every field in a class has an accessibility level, meanind how protected they make the declared properties. Their are private, protected and public.



  • Public: The field can be accessed by any method in any class.

  • Private: The field can be accessed by only the same class they were declared in. This is the default value.

  • Protected: The field can be accessed by only the current class and subclasses



private int Width
private int Height

Next up we will cover how to use these fields with constructors.