tag:blogger.com,1999:blog-25751495390227384842024-03-13T05:20:10.638-07:00Daily Web NotesWhere knowledge is shown dailyAlla Staroseletskayahttp://www.blogger.com/profile/16478518492263757221noreply@blogger.comBlogger117125tag:blogger.com,1999:blog-2575149539022738484.post-76796475510159917282017-01-04T13:39:00.000-08:002017-01-05T10:20:43.365-08:00The latest and greatest trends in 2017 for software developers<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1LF9kofvk7GpkViVQtVJOZyvklMa0wieyNlBrFuvvtGdpyv7-JJ_FNfjmbVXZglfQjXLtR_InbYa5DwnOHbO2l2Eoirqr0w975PoiF9HsaohgGvyrWBJcUR2evbPf9y8zWxV5SXoPcV8/s1600/2017_new.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1LF9kofvk7GpkViVQtVJOZyvklMa0wieyNlBrFuvvtGdpyv7-JJ_FNfjmbVXZglfQjXLtR_InbYa5DwnOHbO2l2Eoirqr0w975PoiF9HsaohgGvyrWBJcUR2evbPf9y8zWxV5SXoPcV8/s320/2017_new.jpg" width="320" /></a></div>
<br />
<div style="text-align: justify;">
2017 is here and I found that not many of us know about last trends in software development. Being on a short vacation, I researched about the latest and greatest trends in software. Here are some of them.<br /> </div>
<div style="text-align: justify;">
1. Chatbots. The bots are taking over! Chatbots that is. Everywhere you look, it seems like companies are launching its new chatbot-powered apps. Quartz went live with its chatbot powered news app in February. Back in September, American Express threw its hat in the ring and created a chatbot for its card members. Not to be outdone, 1-800-Flowers made it easier to order from their site with its chatbot this year. The new interest in chatbots is due to the ease of actually creating one. Thanks to Facebook’s Messenger Platform, the barrier to creating a chatbot has dropped dramatically. Developers no longer need to create the technology from scratch, but rather just plug into an existing API.<br /> </div>
<div style="text-align: justify;">
2. Agile Will Remain One of the Favorite Methodologies. Agile methodology is being used in the industry for over 10 years. Around 80% of the software development companies are dependent on Agile for the success of their projects, and it’s becoming more popular day-by-day. Even public sectors companies, which are considered to be conservative, are adopting agile. Recommendations for integrating Agile into corporate procedures is also doing rounds. Besides, non-tech management also prefers the methodology.<br /> </div>
<div style="text-align: justify;">
3. Internet of things(IoT). IoT is exploding. Since 2008, the number of devices connected to the Internet has exceeded the world population. These new devices generate a lot of data and they need to communicate with each other, <br /> </div>
<div style="text-align: justify;">
4. More Focus on User Experience. For years, creating a good software has been about providing the best functionalities while keeping the user interface as simple as it can be. Over the past couple of years, however, user experience or UX, has been a big buzzword in the software development industry. In fact, it has been more than just a buzzword. User experience mattered and it will continue to matter even more in 2017. Whether you’re developing an app for smartphones or creating a complete business suite for enterprises, ensuring a high level of user experience should be one of your primary focuses.<br /> </div>
<div style="text-align: justify;">
5. Functional Programming is Gaining Centrestage. The high velocity of change forces IT leaders to innovate. One innovation that has caught on and now become the norm is functional programming. Many enterprises now build several small software components using functional components, and then architecture systems out of many such small software components. With the focus on speed and ease, enterprise apps are now becoming highly focused, including only what is really required, doing away with the frivolous. Instead of a single bloated one-size-fits-all enterprise app or software, enterprises are developing specific apps for specific functions. Tying the different front end apps together is a cloud-based backend and database, to which the apps sync seamlessly. There is a new approach to the nature and structure of coding enterprise software as well. Developers are also abandoning the lengthy process of collecting specs and rather going ahead with a project through a new Minimum Viable Product (MVP) approach. The MVP may be regarded as a “lite” version of a feature concept, requiring just a fraction of the time that it takes to build the full feature. After releasing the MVP product and gathering feedback, developers upgrade it to a full blown version. Time tested procedural programming languages such as C and Java still retain their dominance, but new functional programming languages such as Scala, Erlang and Clojure,noted for the power, are fast gaining ground.<br /> </div>
<div style="text-align: justify;">
6. Hackers and criminals will get smarter. There were around 707 million cyber security breaches in 2015, with 554 million in just the first half of 2016, according to Intel Security, formerly McAfee. This year, hackers are learning to use artificial intelligence to automate their attacks, making it even faster for them to break into targets’ accounts. </div>
Alla Staroseletskayahttp://www.blogger.com/profile/16478518492263757221noreply@blogger.com2tag:blogger.com,1999:blog-2575149539022738484.post-60923733525336789352016-11-02T07:14:00.004-07:002016-11-02T07:14:59.127-07:00Dear Mark Zuckerberg, Grow old along with me!<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7OaF6JZccr8P_meo9oNlOFJRTdI0Dz0z3S6uuFDuBsQIPlQwdXVtCXo6YEFZ5PTJ598qQovoCRMlg1Jo5qFuVJgYJmjaYzLuxfy0Pqc_jbg-YiWRYkZ4r_3H6Y6cMIGknCR4urVVRBnI/s1600/mark1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="265" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7OaF6JZccr8P_meo9oNlOFJRTdI0Dz0z3S6uuFDuBsQIPlQwdXVtCXo6YEFZ5PTJ598qQovoCRMlg1Jo5qFuVJgYJmjaYzLuxfy0Pqc_jbg-YiWRYkZ4r_3H6Y6cMIGknCR4urVVRBnI/s400/mark1.jpg" width="400" /></a></div>
<br />
<br />
<br />
<br />
<div style="text-align: justify;">
All of us face the problem: we're getting older. It's not about passport age or look. It's about our place in a society, where we must work. Our employers become younger and younger, our problems to become employee get bigger and bigger. Couple days ago I found an <a href="http://www.computerworld.com/article/3134016/it-skills-training/how-older-workers-can-thrive-in-it.html" target="_blank">article</a> posted by "Computer World" magazine on Facebook about age in IT industry, where I work. When I started my career adventure, we did not have Facebook, LinkedIn, Twitter or Instagram, and thruthly speaking, I did not think about a day, when I will be comfortable reading about age. Vu'a la, time goes and I'm not just reading, I'm trying to express my opinion about enormously painful problem: aging professionals in IT. Moreover, I hope, my opinion will be influential for many bosses like Mark Zuckerberg, who will change their feelings about us, who have already spent 20 and more years in computer industry. </div>
<div style="text-align: justify;">
Right experience, professional and life wisdom comes with age. Most of people used to think, it's a quite axiomatic, not me. Rephrasing a famous Soviet writer Anatoly Rybakov "In order to write - you should write"(Russian "Чтобы написать — надо писать"), to be on a top you have to start with bottom and work out every day on every position. Moreover, every time moving up, you have to feel engaged in your work and learning. The task takes time, and it's not only time. It takes unbelievable courage and even tenacity to find a right place, sometimes it's a tiny spot, to mature your skills and develop an expertise in enormously fast-moving IT industry. According to Gallup, only 33% of Americans feel being engaged in their jobs, and, I hope, many of them are dedicated IT workers, who spend endless time thinking about their assignments. Every line in resume, every chance to interview, every line of code, every new tutorial, every stand-up meeting is a step toward a maturing wisdom, which never comes too fast, too soon or too easy. Definitely, I'm a great supporter of Albert Einstein, who defined "genius as 1% talent and 99% percent hard work..." In addition, I love to repeat Nigerian proverb: "It takes a village to raise a child". Hiring a mature talents, you engage a capable and in many ways qualified workers, who will raise, lead, educate, and mentor in a good traditions a young generation to become next geniuses. The history shows, there is a teacher behind each smart head, and each head in any age and time are quite expensive, in American terms, uneconomical. </div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEZd1HHbfZmW97vWfJJzd7t_aw00ZBc3hnOWR6XuSb5-bXhxw1Upa_4C6tj86KtE3US-4YC292Nl1w6wIRwKUGL_gQsS80Rh3ZRhNhyMjIkPdnOWQX53HYqFPP-508Zeux0aDUBewhYHc/s1600/kapitsa1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEZd1HHbfZmW97vWfJJzd7t_aw00ZBc3hnOWR6XuSb5-bXhxw1Upa_4C6tj86KtE3US-4YC292Nl1w6wIRwKUGL_gQsS80Rh3ZRhNhyMjIkPdnOWQX53HYqFPP-508Zeux0aDUBewhYHc/s400/kapitsa1.jpg" width="400" /></a></div>
<br />
<br /><br />
<div style="text-align: justify;">
Many years ago Soviet magazine published a quite captivating story about Nobel laureate and great physicist experimenter Pyotr Leonidovich Kapitsa. Also it belongs at the right time when Kapitsa lived and worked in Europe, in laboratory for Rutherford. "The owner of one factory was extremely concerned. The steam generator which was provided with light and energy all its plant strongly vibrated. It is very complex problem which common decision does not exist and now. A great number of experts tried to repair it, but all their attempts were unsuccessful.
</div>
<div style="text-align: justify;">
— Time — money — the owner of factory repeated to himself, counting losses because of the lost products — time — money.
</div>
<div style="text-align: justify;">
At this moment of people in blue overalls glanced to it in office.
— I can repair your boiler, the sir — he told.
The manufacturer was not impressed.
</div>
<div style="text-align: justify;">
— I invited the best of the best specialists that they repaired the boiler, but none of them could help me. Look at yourself, you have only a small bag with tools and tools in it not so much if I am not mistaken.</div>
<div style="text-align: justify;">
— Quite right, sir. I took only those tools which will be useful to me for execution of this work. So you will allow to settle your problem?
</div>
<div style="text-align: justify;">
Kapitsa did not make impression on the manufacturer, but as it had already nothing to lose, he led it to the room where there was a boiler. In the center of the room there was a boiler. From it in all directions the huge number of the pipes which are reported with each premises of plant lasted.
Patronizing tone the manufacturer invited him to start business. </div>
<div style="text-align: justify;">
Quietly and without vanity of people in blue overalls took out one tool, a small rubber hammer from the bag.
Accurately and methodically it began to tap different sections of the machine, attentively listening to sounds which were made by a metal surface. In ten minutes it taped pressure sensors, thermostats, bearings and connections, where as he assumed, there is a damage. </div>
<div style="text-align: justify;">
At last, it returned to the bag with tools, put back a small hammer and selected the big hammer.
It approached one of elbow connectors in one of sections of pipes and struck weak blow with the hammer. The effect was instant. Something moved, and the steam generator ceased to vibrate.
The manufacturer was delighted:
</div>
<div style="text-align: justify;">
— Amazingly! Amazingly! Send me a bill. Double your quotations.
</div>
<div style="text-align: justify;">
— In it there is no need, the sir — Kapitsa answered.
</div>
<div style="text-align: justify;">
When several days later the manufacturer received the account, he was stunned. The sum much more exceeded its expectations. 10000 pounds sterling! Big money for those times. In spite of the fact that he paid much more those experts who tried to correct breakdown, but failed, he knew that they spent several days there. And they were representatives of the companies with excellent reputation! And this strange person spent only ten minutes there.
The manufacturer gave to the secretary assignment that she sent it request with a request in detail to paint the cost of the rendered services.
</div>
<div style="text-align: justify;">
Soon the answer came from mail.
</div>
<div style="text-align: justify;">
In ten minutes of a prostukivaniye (tapping) — 1 pound.
</div>
<div style="text-align: justify;">
For knowledge of where it is necessary to strike — 9999 pounds.
Total: 10000 pounds." </div>
<br />
<br />
<br />
<div style="text-align: justify;">
<span style="color: red;"><strong>
Dear Mark Zuckerberg,
I know, it's not nice to say: "The younger - the cheaper", but it looks to me, it's a vital reason why older professionals have problems to be hired and retained as employees by many companies. You have to admit, we know how, when and where to strike. It has to become a culture to appreciate good workers in many ways. It's quite easy to divide us, but it's difficult to add or multiply. Only together we can accomplish a lot. Please, grow old along with me, and I will do more than you expected!</strong></span> </div>
<br />
<br />
<br />
P.S. In spare time I will try to explore 2 new sites for me <a href="https://www.hackerrank.com/" target="_blank">Hacker Rank</a> and <a href="https://codefights.com/" target="_blank">Code Fights</a> See you there!
Alla Staroseletskayahttp://www.blogger.com/profile/16478518492263757221noreply@blogger.com1tag:blogger.com,1999:blog-2575149539022738484.post-12369744844836544082016-08-25T12:47:00.003-07:002016-11-02T07:18:36.239-07:00To be a customer.<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGeWpTtgzCAhWe_-GkzcC-Ho_zdcuV-sbe5VLbIWnfitMNjVIOSC4AypOfuNCI0UM8AfM5XtkUfJekz37CMwri5JwuMoAgW1lCO943OEYOH01vVi4VHTcGr0ZjHQcdHHZ-JakDbMUuJj8/s1600/SEO.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="310" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGeWpTtgzCAhWe_-GkzcC-Ho_zdcuV-sbe5VLbIWnfitMNjVIOSC4AypOfuNCI0UM8AfM5XtkUfJekz37CMwri5JwuMoAgW1lCO943OEYOH01vVi4VHTcGr0ZjHQcdHHZ-JakDbMUuJj8/s400/SEO.jpg" width="400" /></a></div>
<div style="-ms-text-justify: inter-ideograph; margin: 0in 0in 10pt; mso-layout-grid-align: none; mso-pagination: none; text-align: justify; text-indent: 0.5in;">
<br />
<br />
I used to be the biggest fan of
SEO. Many years ago, when Google just offered their concept to be first in
searches, I decided to learn how it can be possible for anyone, who joins
Internet community to predict Search results. I spent countless number of hours on Internet trying to
find some patterns in Google searches. I have read many articles offered on
Internet by many professionals, who believe they know secrets of Google. In those
days SEO was a mostly search-centered methodology, which sometimes works for
marketing and PR specialists. Even now, if you ask me, how to be first, my answer would be to work on content and find right keywords. The time, when SEO was a search-centered methodology, is gone, now
SEO became a customer-centered industry, which wants to know more about
potential customers than in most cases customers know about themselves. So, SEO
is becoming a one of the most proactive informational channels in our life.</div>
<div style="-ms-text-justify: inter-ideograph; margin: 0in 0in 10pt; mso-layout-grid-align: none; mso-pagination: none; text-align: justify; text-indent: 0.5in;">
The first and somehow very
important tool is Adobe SiteCatalyst,developed by Omniture and acquired by Adobe to become a part of Adobe Digital Marketing Suite. From my personal experience, most of businesses don’t
understand a value of analytics coming from Internet users, and SiteCatalyst makes
easier to do a work around numbers. Being a content fanatic, one of the most
important problems for me was and is content by itself. SiteCatalyst can help to
determine what pieces of online content are being viewed, which is hugely
important for most of businesses. Most of Internet users don’t have interest to
read text from A to Z. They’re looking for the answers of their questions. If
the content can give them the solution, they would consider starting
conversation to a business. Content analysis is the most important part of SEO,
which is sometimes neglected by different companies. Size does not matter, even
product does not matter, but content will bring a right customers. Nowadays most
of the businesses want to sell their products over Internet, and SiteCatalyst
might be helpful to analyze which products are the most popular among users and
how users look for these products. I’m not surprised, that some big companies
brought SiteCatalyst to feel more confident with Internet traffic, visualize their
customers; moreover the tools like SiteCatalyst can produce marketing research
quite faster and more predictable. </div>
<div style="margin: 0in 0in 10pt; mso-layout-grid-align: none; mso-pagination: none;">
Doing some work, I always learn something new. This time
it’s <a href="https://www.ensighten.com/" target="_blank">Ensighten</a>,
tag management system, which allow to analyze and predict customer behavior. Tags are simply little snippets of code that influence
how a website or webpage performs when a visitor visits it. Invisible to the
user, tags can be used for a variety of marketing's most favorite things:
third-party tracking, data collection, remarketing, conversion tracking,
website personalization, attribution, and segmentation. First tags appeared around
2007. Now they are widely accepted and have been used by many businesses to attract
new and retain old customers. Based on data was brought by tags, company make
decisions, find solutions and even forecast events.</div>
<div style="margin: 0in 0in 10pt; mso-layout-grid-align: none; mso-pagination: none;">
These days companies want to be on a top of searches as
well as understand deeply their customers. As you can see, tools are available
to do this important work. Many years ago marketing research used to take
months and months, now you can generate reports on a fly using fresh and
historical data As you can see Internet changes everything and everybody. We’re
moving faster and deeper.</div>
<br />Alla Staroseletskayahttp://www.blogger.com/profile/16478518492263757221noreply@blogger.com1tag:blogger.com,1999:blog-2575149539022738484.post-47516903634172517302016-08-10T11:49:00.002-07:002016-08-10T11:49:48.265-07:00I waited...<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWk_r-gjEwWwVr03v3oO8jUNwzYFqyG8GTNY_xV1kwJ3vnFUfNki4hFMtBGSv6T80fRuVXYlwLS1iy3NBhKqrLVli78X4gkCP9CpRCneYdGOwplgegt68UKq7jOVwRAeTkvX097SFUgvQ/s1600/selfconfidence.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="265" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWk_r-gjEwWwVr03v3oO8jUNwzYFqyG8GTNY_xV1kwJ3vnFUfNki4hFMtBGSv6T80fRuVXYlwLS1iy3NBhKqrLVli78X4gkCP9CpRCneYdGOwplgegt68UKq7jOVwRAeTkvX097SFUgvQ/s400/selfconfidence.jpg" width="400" /></a></div>
<div align="left" class="separator" style="clear: both; text-align: center;">
<br /></div>
<div align="left" class="separator" style="clear: both; text-align: center;">
<br /></div>
<span lang=""></span><div align="JUSTIFY">
<span lang=""> </span><br />
<span lang=""> For all long and successful years I'm working as a Software Developer, I want one thing: become a better programmer. As many of us, I'm trying to figure out, what is the most important skill I should learn to be successful. It's not about money, prestige, titles or companies. It's about a personal feeling to be on a top of the profession I have chosen many years ago. It's about a satisfaction, which comes from my personal self-esteem and self-confidence. Technology changes very quickly, projects start and end, people come and go, but my skills stay with me. </span></div>
<span lang="">
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div align="JUSTIFY">
More than 20 years ago my parents and I immigrated to USA from former Soviet Union, and after I took some classes and evaluated my university diploma, I started a career as a computer professional. I joined a huge army of geeks and geeketts, who work long days to get things done on time and with the best possible quality. To say developers work hard, it just say nothing. We make the impossible possible every time, when we understand how important our service and products. Yes, we serve governments, businesses, universities, armies, and just people, who need to be served and want to be connected to a better, more open world. We're just human as rest of the world, and humanity comes with a price: self-fears and self-doubts. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div align="JUSTIFY">
"Can I do this?" - I ask myself every time, when I'm learning new technology, coding and testing a new procedure, proposing a new trick, fighting for my ideas, researching the best solution, and asking for help. Fearing and doubting, I also was shy to talk about it. Does it make me a better developer, can I talk about it publicly, may I be understood in a right way in male-dominated environment? All of these questions bother me for years of my work. Finally I found an <a href="https://codewithoutrules.com/2016/08/03/self-confidence/" target="_blank">article</a> written by a real developer, who actully came to conclusion, that self-doubts makes him a better developer. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div align="JUSTIFY">
I could not imagine, he has the same feelings and enough brave to go publicly impressing many of doubting ones, that fears and doubts, which are most of the time hidden from our coworkers and bosses, are OK, and overcoming is just an important part of our work. Many people including most bosses think, we have to be perfect to work, to succeed, to be promoted and recognized, and, the most important, to build better software. Actually, it turns out, that people, who are not perfect and don't show their extremely positive build-up self-confidence, are the perfect workers, who reach a better results every time they try. Overcoming self-fears and self-doubts, they learn a better, even more efficient, ways to do a work. I wrote enough code, but even now I ask myself: "Is it good enough?" I always think, having my experience, it's an abnormal to ask this question almost all the time. It looks like, it's a VERY, VERY normal thing. Many years ago I noticed, that my doubts make me not just a better programmer; they help me not to repeat mistakes and learn technology deeper to bring my understanding on a different level. I cannot say that I'm not afraid of mistakes, crashes, and incomplete code, but I use just about every situation to turn my failures into personal professional victories over fears and doubts. Yes, I can fix it. To avoid criticism, many people just do nothing, say nothing and become nothing. One thing, they think they have, is a show-off self-confidence, which they display every time they notice a slight sign of weakness in eyes of others. It's not just about men, it's about many people, who don't believe in doubting ones. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div align="JUSTIFY">
I wish, I were such smart many years ago, when I started to learn computer technology, and Internet was in diapers. I just needed real mentors to be better and achieve more. I met a lot of people from different backgrounds, and almost all of them don't understand how to <span lang="EN">set reachable goals that I can accomplish, how to stop trying to make everyone else happy, and forgive myself. Being surrounded by very self-confident people or, better to say, people, who pretend to be confident all the time, sometimes I spend too much time on guilt and self-criticism. Yes, self-criticism is an important for a healthy self-conversation, but our work requires some moments of trying new things. To feel a purpose and accomplishment in a long-term success, we often must take baby-steps, which are accompanied by painful errors, failures, and crashes. Most of people would quit, but we don't. We're moving forward. </span></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div align="JUSTIFY">
I'm sure, some people are ready to criticize me for my presentation of computer work as a hard and in some ways impossible thing. Yes, it's difficult, adventurous, and very satisfying, but not for everybody. You have to find your way in technology, and, I think, I'm enough lucky because I found something unique to build up a career for many years. Moreover, I'm learning from my mistakes, even fears and doubts. To tell the truth, I don't know any other way to become successful in my industry. Many people try to impress they are victorious, moneymaking, and highly employable developers, who learn any idea for 5 minutes and can work out any problem. I'm sure, it's a quite familiar scenario. Let me tell you, it's just the poor-written scenario for a cheap reality show, not a real life with unexpected downfalls, problems and glorious winnings. These developers try to conceal their own burning fiascos. They are not moving forward, they are taking us back. I always remember wisdom words by Bill Cosby: "I don't know the key to success, but the key to failure is trying to please everybody." Their indestructible self-confidence is a sign of failure and poor knowledge. Moreover, pleasing the bosses, they tend to forget about laws and rules of technology and stop us to find the best solution for the problem we face. The problem is not with us, the major headache with people, who live with masks on their faces. Unfortunately, the masks cost a lot for all of us: software and efficiency is failing, emotions are going down, and work can never be done. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div align="JUSTIFY">
I waited for a quite long time, probably because I could not find people with a similar reaction. Now, I did. I did not just wait; I was a quite nervous, because of an emotional pressure, even stress, from highly "self-confident" people: some of them were my bosses, some - pleasing immigrants. Trying to manage their high self-confidence, which is only based on position and paycheck, they garbage a real professionals. It became a major challenge for me, and I still cannot forget several moments in my career: </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div align="JUSTIFY">
a) Three hours after first layoff in my career from a small company I received a call from Russian-speaking coworker with two, frankly speaking, sour statements. He asked: "Are you going to ask a boss to take you back?" I answered: "No." He continues: "Some American employees did not feel comfortable with you." Thank G-d, I understand very well his intention to bring my self-confidence and self-esteem down, that he likes to do often, and never let him do. My next career step was much better and interesting.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div align="JUSTIFY">
b) Many years ago I worked for relatively big company, where I was one woman-developer. Plus I had a woman-boss with absolutely special opinion, which took her to a high-management position: "We're not going to hire smart experienced developers, because they would not listen to us." Even now I ask myself: "How is it possible to promote such people, especially women?" Thank G-d again, I don't have to work with her anymore. I want to be smart.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div align="JUSTIFY">
c) America is a land of opportunities, and sometimes opportunity is given to a wrong person. Uneducated, jealous about my education and knowledge, narrow-minded woman became my boss. Her statement was sharp and commanding: "Where is respect?" I did not know, that I must respect a person just because of the title in democratic and free country such America. I prefer to keep my self-confidence up and work for another company. . </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div align="JUSTIFY">
Nowadays many people talk about women in technology just because it became evident, that women can be a very good, even accomplished, diligent, and first-rate developers, who really take care of many problems in this industry. Bringing more women to technology, we have to start to take care of their self-confidence and self-esteem. I would like to take this issue to your attention, because it's hugely meaningful now, when many countries experience problem with education of a new workforce for hi-Tec. Typically, most of students need to keep their self-confidence and self-esteem on a certain level to go through courses and lessons, but for future hi-Tec employees it became a determining, even a front-end issue. Hi-Tec is an extremely moving industry, and we need people, who can overcome fears and doubts and develop into smart employees. Their self-confidence has to be built on a right interpretation of fears and doubts, which include teachings of calculated risk and success probability, advanced learning techniques, communication rules, psychological awareness, resume writing, interview questions related to criticism, mistake making, retraining, and senior mentoring. I'm not trying to impress you with my psychological knowledge; it's just a deep deriving from my personal experience. I strive to be the most unidealistic person and bring a real picture to those, who still think, that a simulated self-confidence is better, than a real feelings.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div align="JUSTIFY">
To finish, I ask myself: "How many people would read my essay? How many of them will change their approach to doubting ones? Am I helpful at least for some tribe members, who want to become better? Do I do a right thing exercising my right on freedom of speech?" I'm sure, some of you can continue a list of these questions. Questions remain and will remain just questions, if we are not going to do something realistically good to keep, bring more, raise and lead people with de facto perceptions. What can we do? </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div align="JUSTIFY">
</div>
</span><br />
<div class="separator" style="clear: both; text-align: left;">
</div>
<br />Alla Staroseletskayahttp://www.blogger.com/profile/16478518492263757221noreply@blogger.com0tag:blogger.com,1999:blog-2575149539022738484.post-23886133638595848582016-04-10T14:08:00.003-07:002016-04-10T14:08:46.784-07:00MIT Open CourseWare I'm spreading a word about new MIT <a href="http://ocw.mit.edu/index.htm" target="_blank">site</a>, which features a lot of new free courses. I just checked computer science courses, and think, I might take some of them. Enjoy!Alla Staroseletskayahttp://www.blogger.com/profile/16478518492263757221noreply@blogger.com1tag:blogger.com,1999:blog-2575149539022738484.post-73417865314088459562015-06-25T09:09:00.001-07:002015-06-25T09:09:10.251-07:00Bootstrap:how to collapse navbar earlierI have request to collapse bootstrap's navbar earlier. I use Bootstrape <a href="http://getbootstrap.com/examples/navbar/" target="+blank">template</a> and need some solution for such humble problem. Stackoverflow.com was very helpful. <a href="http://stackoverflow.com/questions/21076922/bootstrap-how-to-collapse-navbar-earlier" target="_blank">Code</a> works very well and it was easy adjusted for my needs. Here's a piece of code I used:<br />
<br />
@media (min-width: 768px) and (max-width: 1300px) {<br />
.navbar-collapse.collapse {<br />
display: none !important;<br />
}<br />
.navbar-collapse.collapse.in {<br />
display: block !important;<br />
}<br />
.navbar-header .collapse, .navbar-toggle {<br />
display:block !important;<br />
}<br />
.navbar-header {<br />
float:none;<br />
}<br />
}<br />
<br />
It collapse at 1300 px point. You can change for any number you want or need.Alla Staroseletskayahttp://www.blogger.com/profile/16478518492263757221noreply@blogger.com1tag:blogger.com,1999:blog-2575149539022738484.post-75075974705774810372015-04-11T06:51:00.001-07:002015-04-11T06:51:25.148-07:00About Scrum<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl1qNXRkZvg9QO15mQtcyTP1HIh5k2J4nuUXVBxD-DBC-0mjWfytcyu63bD_FxYg4wzl554pYXIVel5aTVDqd-AcvkYzE6h11BGjDXS0xDX5FhUY97qLarHeL0esC8cZA-5Z1yxiXAlKI/s1600/jeff1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl1qNXRkZvg9QO15mQtcyTP1HIh5k2J4nuUXVBxD-DBC-0mjWfytcyu63bD_FxYg4wzl554pYXIVel5aTVDqd-AcvkYzE6h11BGjDXS0xDX5FhUY97qLarHeL0esC8cZA-5Z1yxiXAlKI/s1600/jeff1.jpg" height="400" width="260" /></a></div>
<br />
Finally I got a book ("Scrum The Art of doing twice the work in half the time" by Jeff Sutherland) from the library. It's fantastically easy to read and follow, it's really good for all of us, who spend hours, days and months working with software. Moreover, it's the book for bosses, who used take wrong decisions and mismanage projects. It's a book for all people, who wants to work effectively in times, when time and creativity values the most. The book is full of real examples, who can inspire all of us to work better. It's the book for future leaders, who wants to be on a top of companies and society professionally and socially. I really enjoy reading and can suggest to read. Alla Staroseletskayahttp://www.blogger.com/profile/16478518492263757221noreply@blogger.com0tag:blogger.com,1999:blog-2575149539022738484.post-87923244928277290522015-02-25T10:45:00.001-08:002015-02-25T10:45:35.863-08:00Freeware for DevelopersAs a developer. I always search for new and improved tools. Recently I started to receive some notes from one of the best consulting companies such as Intertech. Today they released best freeware tools for developer: <a href="http://www.intertech.com/Blog/16-top-freeware-picks-developers/" target="_blank">16 Top freeware picks for developers</a>. I will go one by one through all of them to learn them better. Alla Staroseletskayahttp://www.blogger.com/profile/16478518492263757221noreply@blogger.com0tag:blogger.com,1999:blog-2575149539022738484.post-89731485790921181962014-11-03T08:42:00.001-08:002014-11-03T08:42:39.940-08:00How to test your page for responsiveness?..My team leader just suggested a very good site to test page for responsiveness. Here it is <a href="http://www.responsive-design.com/" target="_blank">Responsive design</a> . Definitely, will use in a future.Alla Staroseletskayahttp://www.blogger.com/profile/16478518492263757221noreply@blogger.com1tag:blogger.com,1999:blog-2575149539022738484.post-86102166306905608222014-10-02T08:03:00.000-07:002014-10-02T08:03:58.402-07:00CSS3 Shadows Generator (Box-Shadow)Working on my project, I have to create a lot of shadows around boxes. So, I found a nice <a href="http://www.webestools.com/css3-box-shadow-generator-css-property-easy-shadows-div-html5-drop-shadow-moz-webkit-shadow-maker.html" target="_blank">tool</a> to generate different shadows very quickly. I hope to use this tool more often.Alla Staroseletskayahttp://www.blogger.com/profile/16478518492263757221noreply@blogger.com1tag:blogger.com,1999:blog-2575149539022738484.post-6970703926006572302014-09-19T09:19:00.000-07:002014-09-19T09:19:02.241-07:00How to imitate bootstrap's tooltip without bootstrap<div>
<div>
Working with my next project, I had to come up with an idea to imitate tooltip bootstrap style without bootstrap. So, I did some research and found excellent <a href="http://www.cssportal.com/css-tooltip-generator/" target="_blank">resource</a>. This example gave the idea how create fully-customized tooltip for my project. Here's an example how I used the sample:</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGsM5XsiOGncnRpVwsNGdk8I6VHg6cwC-R-fSsjbF71yhONGRmahcZzEH8RpP4iGnKRRTrGqP32rv_rd7fWxSw-s4P-Eypf2ZABlYJUe2Vb9gQfqghvrMt63rzIrpCCdBFqh-upWs30sI/s1600/tooltip.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGsM5XsiOGncnRpVwsNGdk8I6VHg6cwC-R-fSsjbF71yhONGRmahcZzEH8RpP4iGnKRRTrGqP32rv_rd7fWxSw-s4P-Eypf2ZABlYJUe2Vb9gQfqghvrMt63rzIrpCCdBFqh-upWs30sI/s1600/tooltip.jpg" height="93" width="320" /></a></div>
<br />
<div>
<br />
HTML:</div>
<div>
<br />
<div id="top-menu-bar-buttons"></div>
<div>
<div class="button1 icon-location-left"><button class="btn-secondary tooltips" type="button">Cancel<span class="width60">Cancel</span></button></div></div>
<div>
<div class="button2 icon-location-left"><button class="btn-secondary tooltips" type="button">Preview<span class="width60">Preview</span></button></div></div>
<div>
<div class="button3 icon-location-left"><button class="btn-primary tooltips" type="button"><div id="top-menu-bar-button3-text">Review Job</div><i class="fa fa-chevron-right fa-lg"></i><span class="width75">Review Job</span></button></div></div>
<div>
</div></div>
<div>
<br />
CSS:</div>
<div>
<br />
button.tooltips {</div>
<div>
position: relative;</div>
<div>
display: inline;</div>
<div>
}</div>
<div>
button.tooltips span {</div>
<div>
position: absolute;</div>
<div>
color: #FFFFFF;</div>
<div>
background: #000000;</div>
<div>
height: 19px;</div>
<div>
line-height: 18px;</div>
<div>
text-align: center;</div>
<div>
visibility: hidden;</div>
<div>
border-radius: 6px;</div>
<div>
font-size: 12px;</div>
<div>
font-weight: normal;</div>
<div>
}</div>
<div>
<br /></div>
<div>
button.tooltips span:after {</div>
<div>
content: '';</div>
<div>
position: absolute;</div>
<div>
bottom: 100%;</div>
<div>
left: 50%;</div>
<div>
margin-left: -8px;</div>
<div>
width: 0; height: 0;</div>
<div>
border-bottom: 8px solid #000000;</div>
<div>
border-right: 8px solid transparent;</div>
<div>
border-left: 8px solid transparent;</div>
<div>
}</div>
<div>
<br /></div>
<div>
button:hover.tooltips span {</div>
<div>
visibility: visible;</div>
<div>
opacity: 0.8;</div>
<div>
top: 40px;</div>
<div>
bottom: 30px;</div>
<div>
left: 100%;</div>
<div>
margin-left: -76px;</div>
<div>
z-index: 999;</div>
<div>
}</div>
<div>
<br /></div>
<div>
.width60 {</div>
<div>
width: 60px;</div>
<div>
}</div>
<div>
<br /></div>
<div>
.width75 {</div>
<div>
width: 75px;</div>
<div>
}</div>
</div>
Alla Staroseletskayahttp://www.blogger.com/profile/16478518492263757221noreply@blogger.com0tag:blogger.com,1999:blog-2575149539022738484.post-91289434110446898102014-06-11T11:13:00.001-07:002014-06-11T11:13:26.767-07:00CSS: Default valuesEvery CSS style has a natural default value. It's just not always <code>none</code>.<br />
<br />
Some may be <code>0</code> (as in zero).<br />
<br />
Some may be <code>auto</code>.<br />
<br />
Sometimes <code>inherit</code> is the best option.<br />
<br />
Colours can be set to <code>transparent</code>.<br />
<br />
If you're unsure what the default is, try creating a dummy page with just a plain unstyled element, and use the browser dev tools to see what the styles are set to.Alla Staroseletskayahttp://www.blogger.com/profile/16478518492263757221noreply@blogger.com1tag:blogger.com,1999:blog-2575149539022738484.post-47305991596619679952014-05-22T09:34:00.001-07:002014-05-22T09:34:27.827-07:00Starting with LESS in .NET environment.Researching the topic above I did not find anything useful for my project. Therefore my team lead and I found out pretty good way to implement LESS in out Bootstrap-Knockout environment.<br />
<br />
1. Download less-1.7.0.min.js from <a href="http://www.lesscss.org/" target="_blank">LESS</a> site and add to your scripts folder.<br />
<br />
2. Open HTML file and add the line.<br />
<script src="Scripts/less-1.7.0.min.js"></script><br />
<br />
3. Using Visual studio, create .less file and add line to HTML file before js-files.<br />
<link rel="stylesheet/less" type="text/css" href="Content/custom/css/hello1.less"><br />
<br />
4. Open web.config file and after(underneath) <system.web> add<br />
<system.webServer><br />
<staticContent><br />
<mimeMap fileExtension=".less" mimeType="text/css" /><br />
</staticContent><br />
</system.webServer><br />
<br />
Now you can play with .less files in .NET environment.<br />
<div>
<br /></div>
Alla Staroseletskayahttp://www.blogger.com/profile/16478518492263757221noreply@blogger.com1tag:blogger.com,1999:blog-2575149539022738484.post-74386318480643978482014-04-18T09:55:00.004-07:002014-04-18T09:55:52.595-07:00Border around inputsWorking on my project, I had problems with Chrome presentation of some elements. It creates border automatically around many elements. I had to find a cure for the problem. The answer is in such a good <a href="http://www.faridesign.net/2012/02/remove-border-around-input-chrome-safari/" target="_blank">article</a>. It works and removes border around elements in Chrome and Safari.Alla Staroseletskayahttp://www.blogger.com/profile/16478518492263757221noreply@blogger.com0tag:blogger.com,1999:blog-2575149539022738484.post-88682609654734080062014-04-15T09:38:00.003-07:002014-04-15T09:38:31.738-07:00Disabled TooltipMy last project runs on Bootstrap-Knockout platform. I'm learning a lot about presenting elements in this environment. One of the major problem is to hide tooltip for Mobile views.<br />
I searched the Internet and did not find a lot of information about such problem. <a href="http://jsfiddle.net/Ynzqt/6/" target="_blank">One</a> of the articles was particularly good, but I still have to find my original solution. My code disables the tooltip for Mobile users and save button functionality.<br />
Here's what I did.<br />
<br />
HTML:<br />
<button class="btn btn-default btn-primary" type="button" data-bind="text: RequiresConfig == true ? 'Create' : 'Add to Cart',tooltip: { title: RequiresConfig == true ? 'Create' : 'Add to Cart', placement: 'bottom', disable: false }"></button><br />
<br />
Javascript/jQuery (accompanies HTML).<br />
<script type='text/javascript'><br />
jQuery(function ($) {<br />
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {<br />
ko.bindingHandlers.tooltip = {<br />
options: {<br />
disable: true<br />
}<br />
};<br />
ko.applyBindings({});<br />
}<br />
});<br />
</script><br />
<br />Alla Staroseletskayahttp://www.blogger.com/profile/16478518492263757221noreply@blogger.com0tag:blogger.com,1999:blog-2575149539022738484.post-57808985430763456462014-04-11T11:00:00.003-07:002014-04-11T11:00:57.305-07:00It's not a bug!This time QA was right. They discovered some differences in landscape and portrait views in iPhone. It's only Safari and only iPhone does this. It re-sizes the font and images going from portrait to landscape. It's not a bug, it's a iPhone feature. To fix the issue, I found an <a href="http://www.valarie.info/blog-view/responsive-design-maintain-body-text-size-iphone-landscape-and-portrait-views" target="_blank">article</a> and patched my code. Very simple line of code fixes the feature.<br />
<br />
html {-webkit-text-size-adjust: auto;}<br />
<br />
It was a very good learning experience for me. Alla Staroseletskayahttp://www.blogger.com/profile/16478518492263757221noreply@blogger.com0tag:blogger.com,1999:blog-2575149539022738484.post-54998075024982189352014-03-28T12:28:00.001-07:002014-03-28T12:28:13.796-07:00How create gradient color without images...Working on a new assignment, I had to find a way to generate gradient color. I decided to educate myself and learn online gradient generator. First of all, I found a good <a href="http://www.css3factory.com/linear-gradients/" target="_blank">one</a>, for a second, using online tool, I generated a nice piece of code for my project.Alla Staroseletskayahttp://www.blogger.com/profile/16478518492263757221noreply@blogger.com0tag:blogger.com,1999:blog-2575149539022738484.post-85009066885171949462014-02-26T08:43:00.004-08:002014-02-26T08:43:34.715-08:00Turn the arrow<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmKGKD9XnITHtw7WKZR9-KViK9zmcEwtp8vlANAo6oZEPwkwJ3JrOSLucAY2JjJpgW4m1iSMpl5jQ3rNHvtSmTBDmCYV7b4zItftRbjf8KWbIExl3qa2DWtXFOEktXiwsTb7itkCJUaHY/s1600/menu1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmKGKD9XnITHtw7WKZR9-KViK9zmcEwtp8vlANAo6oZEPwkwJ3JrOSLucAY2JjJpgW4m1iSMpl5jQ3rNHvtSmTBDmCYV7b4zItftRbjf8KWbIExl3qa2DWtXFOEktXiwsTb7itkCJUaHY/s1600/menu1.jpg" height="80" width="400" /></a></div>
<br />
Working in Bootstrap-Knockout environment, I had to find the way to implement movable arrow for mobile menu.
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrEl7dbXNJEQRyJIjcxzZr6xPiqvx6iHl1aCXNBsYtRDV_30sZObul16bTZxJR9BRGXDGOI5sVxi7EmZZml1WHpdELOJLQ9l4bzo2YFPtvv7AKJXqKnx829H6DeS9JYikgNdhn_BDwVRU/s1600/menu2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrEl7dbXNJEQRyJIjcxzZr6xPiqvx6iHl1aCXNBsYtRDV_30sZObul16bTZxJR9BRGXDGOI5sVxi7EmZZml1WHpdELOJLQ9l4bzo2YFPtvv7AKJXqKnx829H6DeS9JYikgNdhn_BDwVRU/s1600/menu2.jpg" height="245" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
It's quite easy and interesting task, which I would like to document.
<br />
<br />
<b>HTML:</b><br />
<nav><br />
<div class="navbar navbar-inverse" role="navigation"><br />
<div class="container"><br />
<div class="navbar-header"><br />
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" id="caret-mobile"><br />
<span class="sr-only">Toggle navigation</span><br />
<span id="caret-mobile" class="caret-down"></span><br />
</button><br />
<a class="navbar-brand" href="#">Menu</a><br />
</div><br />
<div class="collapse navbar-collapse"><br />
<ul class="nav navbar-nav"><br />
<li><a href='#'>About</a></li><br />
<li><a href='#'>Contact Us</a></li><br />
<li><a href='#'>FAQ</a></li><br />
<li><a href='#'>View Cart</a></li><br />
</ul><br />
</div><br />
</div><br />
</div><br />
</nav><br />
<b>CSS:</b><br />
.caret-down {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>display: inline-block;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>width: 0px;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>height: 0px;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>margin-left: 2px;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>vertical-align: middle;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>border-bottom: none;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>border-top: 10px solid #FFFFFF;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>border-right: 10px solid transparent;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>border-left: 10px solid transparent;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>content: "";<br />
}<br />
<br />
.caret-up {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>display: inline-block;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>width: 0px;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>height: 0px;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>margin-left: 2px;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>vertical-align: middle;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>border-top: none;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>border-bottom: 10px solid #FFFFFF;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>border-right: 10px solid transparent;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>border-left: 10px solid transparent;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>border-top-width: 0px;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>border-top-style: dotted;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>content: "";<br />
}<br />
<b>Javascript:</b><br />
<script src="jquery-2.0.3.js"></script><br />
<script src="bootstrap.min.js"></script><br />
<script type='text/javascript'><br />
jQuery(document).ready(function () {<br />
jQuery('#caret-mobile').click(function () {<br />
$(".caret-down").toggleClass('caret-up');<br />
});<br />
<br />
});<br />
</script>Alla Staroseletskayahttp://www.blogger.com/profile/16478518492263757221noreply@blogger.com0tag:blogger.com,1999:blog-2575149539022738484.post-58250839770370878572014-01-30T08:49:00.004-08:002014-01-30T08:49:45.004-08:00Web Page RulerOn this project I work a lot with QA counting every pixel in my css-file. To finish my project I had to add new Chrome <a href="https://chrome.google.com/webstore/detail/page-ruler/jlpkojjdgbllmedoapgfodplfhcbnbpn?hl=en" target="_blank">extension</a>. It's a quite good and practical tool for Front-End Development. I hope, everybody will use this extension.<br />
<br />
In addition I found a very good tool to compress HTML online. He it is: http://www.textfixer.com/html/compress-html-compression.php
This site features more useful tools and tricks, which I will use in a future. Alla Staroseletskayahttp://www.blogger.com/profile/16478518492263757221noreply@blogger.com0tag:blogger.com,1999:blog-2575149539022738484.post-66784107282111927932014-01-14T12:52:00.001-08:002014-01-14T12:52:21.252-08:00Horizontal and Vertical MenuOne HTML code, which will serve desktop, tablet and mobile views.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIKZvvFU6-KyTHShBGxhyphenhyphenaCFhl7FX3eFOKZf4Ht12sW8g_iCtRRYZM_tCRaOz_4sYBB2MrYMriwDiONn5FwRDX1X5-iy6nYvX_btnrzXGZvWl_32hpF89diMGwtV_L_efFWaH-K33mXg0/s1600/horizontal_nav.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="91" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIKZvvFU6-KyTHShBGxhyphenhyphenaCFhl7FX3eFOKZf4Ht12sW8g_iCtRRYZM_tCRaOz_4sYBB2MrYMriwDiONn5FwRDX1X5-iy6nYvX_btnrzXGZvWl_32hpF89diMGwtV_L_efFWaH-K33mXg0/s320/horizontal_nav.jpg" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl4jNMhopcbyXCZzT7bXoV1zvVVS45J5Aaui502e6scGnMiou0fTzuljhOCvpU9j-zrj5cJB-v0SrWmeQq4jxGCgvi-LUV1NMU1nGX-XfkP7ysYOxsvptsZ9hkLBNdwMKCRrMHOTN3luI/s1600/vertical_nav.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="159" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl4jNMhopcbyXCZzT7bXoV1zvVVS45J5Aaui502e6scGnMiou0fTzuljhOCvpU9j-zrj5cJB-v0SrWmeQq4jxGCgvi-LUV1NMU1nGX-XfkP7ysYOxsvptsZ9hkLBNdwMKCRrMHOTN3luI/s320/vertical_nav.jpg" width="320" /></a></div>
<br />
HTML:<br />
<nav><br />
<div class="col-xs-12 col-sm-12 col-md-12" id="navigation"><br />
<ul><br />
<li><a href="#">Home</a></li><br />
<li><a href="#">About Us</a></li><br />
<li><a href="#">FAQ</a></li><br />
</ul><br />
</div><!-- navigation --><br />
</nav><br />
CSS:<br />
header, nav {<br />
width: 976px;<br />
margin-left: auto;<br />
margin-right: auto;<br />
}<br />
<br />
nav {<br />
height: 130px;<br />
}<br />
<br />
#navigation ul<br />
{<br />
margin: 0;<br />
padding-top: 15px;<br />
display: block;<br />
padding-bottom: 15px;<br />
height: 40px;<br />
}<br />
<br />
#navigation ul li<br />
{<br />
list-style-type: none;<br />
display: inline;<br />
}<br />
<br />
#navigation li:before {<br />
content: " | ";<br />
padding-left: 30px;<br />
padding-right: 30px;<br />
color: white;<br />
}<br />
<br />
#navigation li:first-child:before {<br />
content: none;<br />
}<br />
<div>
<br /></div>
<div>
<div>
#navigation ul {</div>
<div>
background-color: #6FB4D3;</div>
<div>
}</div>
<div>
<br /></div>
<div>
#navigation li a {</div>
<div>
color: white;</div>
<div>
}</div>
<div>
<br /></div>
<div>
#navigation li a:hover {</div>
<div>
color: #000066;</div>
<div>
text-decoration: none;</div>
<div>
}</div>
</div>
<div>
<br /></div>
<div>
Media -query:</div>
<div>
<br /></div>
<div>
<div>
@media screen and (max-width : 480px)</div>
<div>
{</div>
</div>
<div>
<div>
#navigation ul li</div>
<div>
{</div>
<div>
display: block;</div>
<div>
list-style-type: none;</div>
<div>
height: 40px;</div>
<div>
width: 300px;</div>
<div>
padding-top: 15px;</div>
<div>
padding-bottom: 15px;</div>
<div>
margin: 0;</div>
<div>
text-align: center;</div>
<div>
border: solid 2px #FFFFFF; </div>
<div>
}</div>
<div>
<br /></div>
<div>
#navigation li:before { content: none;}</div>
<div>
#navigation li:first-child:before { content: none; }</div>
</div>
<div>
<div>
</div>
<div>
#navigation ul {</div>
<div>
background-color: #FFFFFF;</div>
<div>
}</div>
<div>
<br /></div>
<div>
#navigation ul li {</div>
<div>
background-color: #6FB4D3;</div>
<div>
}</div>
<div>
</div>
<div>
#navigation ul li</div>
<div>
{</div>
<div>
background-color: #6FB4D3; </div>
<div>
} </div>
<div>
<br /></div>
<div>
#navigation li a {</div>
<div>
color: white;</div>
<div>
}</div>
<div>
<br /></div>
<div>
#navigation li a:hover {</div>
<div>
color: #000066;</div>
<div>
text-decoration: none;</div>
<div>
}</div>
</div>
<div>
}</div>
<br />Alla Staroseletskayahttp://www.blogger.com/profile/16478518492263757221noreply@blogger.com0tag:blogger.com,1999:blog-2575149539022738484.post-47016604334308996682013-12-20T11:40:00.000-08:002013-12-20T11:40:01.976-08:00Customized Bootstrap popover for search-boxI searched, searched, and searched and did not find anything even close to fulfill my assignment. Now I'm ready to post my code.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRbL_b2zO1Rvl3_-2-1VlEtJwsjbALjIlbrJCkiumGGfzGrnCsA5w9j43EKqECphiT4OBF1VTPOPUsBkL_2K4ZnnoSBCTzysoqsS8JlPDoF31BgjBmAhwq34qlP9_H9fiFZwysorpm19E/s1600/search3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="108" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRbL_b2zO1Rvl3_-2-1VlEtJwsjbALjIlbrJCkiumGGfzGrnCsA5w9j43EKqECphiT4OBF1VTPOPUsBkL_2K4ZnnoSBCTzysoqsS8JlPDoF31BgjBmAhwq34qlP9_H9fiFZwysorpm19E/s320/search3.jpg" width="320" /></a></div>
<br />
<b><span style="color: red;">HTML:</span></b><br />
<div class="btn searchcontainer" id="searchcontainer" style="margin-top: 50px; margin-right: 25px; border: 1px solid #D7D7D7";"><br />
<input type="search" class="productsearch select" value="@(string.IsNullOrEmpty(ViewBag.SearchWord) ?"Search Catalog... ":ViewBag.SearchWord)" onclick="if(this.value=='Search Catalog... '){this.value=''; this.style.color = '#000000';}" onblur="if(this.value==''){this.value='Search Catalog... '; this.style.color = '#D7D7D7';}" style="@(string.IsNullOrEmpty(ViewBag.SearchWord) ?"width:15em; border: 0px; color:#D7D7D7;": "width:15em; border: 0px; color:#000000;")" rel="popover" data-placement="bottom" data-content="<div class='popover-error'>You must enter search criteria</div>" data-color="pink" name="searchKeyword" id="searchKeyword"/><i class="fa fa-times-circle fa-lg" id="clear-search"></i> <a id="btn-search">Go &gt;</a><br />
</div><br />
<br />
<span style="color: red;"><b>Javascript:</b></span><br />
<script type='text/javascript'><br />
$('#btn-search').click(function(){<br />
var $search = $('#searchKeyword');<br />
if (!($search.val().length > 0 && $search.val().indexOf("Search") < 0)) {<br />
$("#searchKeyword").popover({ html: true, placement: 'bottom'});<br />
$("#searchKeyword").popover('show');<br />
$('.popover').css('top',parseInt($('.popover').css('top')) + 10 + 'px')<br />
} <br />
return false;<br />
});<br />
</script><br />
<br />
<b><span style="color: red;">CSS:</span></b><br />
<br />
.popover {<br />
border-radius: 6px;<br />
}<br />
<br />
[rel=popover][data-color=pink] + .popover {<br />
background: #F2DEDE;<br />
border: 1px solid #F2DEDE;<br />
}<br />
<br />
[rel=popover][data-color=pink] + .popover.bottom .arrow {<br />
top: -17px;<br />
left: 50%;<br />
/*margin-left: -5px;*/<br />
border-left: 9px solid transparent;<br />
border-right: 9px solid transparent;<br />
border-bottom: 19px solid #F2DEDE;<br />
}<br />
<br />
[rel=popover][data-color=pink] + .popover .arrow, [rel=popover][data-color=pink] + .popover .arrow:after {<br />
border-left: 9px solid transparent;<br />
border-right: 9px solid transparent;<br />
border-bottom: 19px solid #F2DEDE;<br />
}<br />
/*-----------------------------*/<br />
<br />
.popover-error {<br />
color: #B94A48;<br />
font-size: 12px;<br />
font-weight: bold;<br />
}<br />
<div>
<br /></div>
<br />
<br />Alla Staroseletskayahttp://www.blogger.com/profile/16478518492263757221noreply@blogger.com0tag:blogger.com,1999:blog-2575149539022738484.post-1488297847966185072013-12-19T09:27:00.002-08:002013-12-20T11:40:42.961-08:00Dynamic Bootstrap Popover on empty search Searching the Internet for something suitable for my assignment I did not find anything interesting. Some sites are closed, some - not. I came out with my own code, which works in MVC/Bootstrap/Knockout environment.<br />
<br />
HTML:<br />
<br />
<div class="btn searchcontainer" id="searchcontainer" style="margin-top: 50px; margin-right: 25px; border: 1px solid @(string.IsNullOrEmpty(ViewBag.productListJSON) ? "red" : "#D7D7D7");"><br />
<input type="search" value="@(string.IsNullOrEmpty(ViewBag.SearchWord) ?"Search Catalog... ":ViewBag.SearchWord)" onclick="if(this.value=='Search Catalog... '){this.value=''; this.style.color = '#000000';}" onblur="if(this.value==''){this.value='Search Catalog... '; this.style.color = '#D7D7D7';}" style="@(string.IsNullOrEmpty(ViewBag.SearchWord) ?"width:15em; border: 0px; color:#D7D7D7;": "width:15em; border: 0px; color:#000000;")" rel="popover" data-placement="left" data-content="No Records Found" data-original-title="Alert" name="searchKeyword" id="searchKeyword" required/><a id="btn-search">Go &gt;</a><br />
</div><br />
<br />
Javascript:<br />
<script type='text/javascript'><br />
var productList = @Html.Raw(Json.Encode(@ViewBag.productListJSON))<br />
$(window).load(function() {<br />
if (productList == "") {<br />
$("#searchKeyword").popover('show');<br />
}<br />
});<br />
</script><br />
<br />
What it does: it displays a popover only when search return empty set:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi6S6RZe8UcterqsCELSWZmfZAtrFmxoiEyg5LsvcE5ttFZoeAIu8t45KfIV7rlPkEo6VMwH4rByKQkWUujocJEmoEWKOjyrlhkCXjGqiSp04wizHTwxx3JvROKxYeNbKEfD4isTZaQgQ/s1600/search2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="99" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi6S6RZe8UcterqsCELSWZmfZAtrFmxoiEyg5LsvcE5ttFZoeAIu8t45KfIV7rlPkEo6VMwH4rByKQkWUujocJEmoEWKOjyrlhkCXjGqiSp04wizHTwxx3JvROKxYeNbKEfD4isTZaQgQ/s320/search2.jpg" width="320" /></a></div>
<br />Alla Staroseletskayahttp://www.blogger.com/profile/16478518492263757221noreply@blogger.com0tag:blogger.com,1999:blog-2575149539022738484.post-964489529950180902013-12-13T11:08:00.002-08:002013-12-18T11:43:07.788-08:00Search box with a link insideDoing a project, I had to implement a search-box with link inside in knockout-bootstrap environment. Before doing something like this, I Googled the Internet and found out that there is no solution on popular sites. So, I decided to write by myself. It a very easy and very elegant piece of code.<br />
<br />
Here it is:<br />
<div class="row"><br />
<div class="btn searchcontainer" id="searchcontainer"><input type="search" placeholder="Search Catalog..." style="width:15em; border: 0px;" name="searchKeyword" id="searchKeyword" required/><a id="btn-search">Go &gt;</a></div><br />
</div><br />
<br />
Couple days later... Placeholder does not work in IE9. I had to come up with some different code and I did:<br />
<br />
<div class="btn searchcontainer" id="searchcontainer" style="margin-top: 50px; margin-right: 25px;"><br />
<input type="search" value="@(string.IsNullOrEmpty(ViewBag.SearchWord) ?"Search Catalog... ":ViewBag.SearchWord)" onclick="if(this.value=='Search Catalog... '){this.value=''; this.style.color = '#000000';}" onblur="if(this.value==''){this.value='Search Catalog... '; this.style.color = '#D7D7D7';}" style="@(string.IsNullOrEmpty(ViewBag.SearchWord) ?"width:15em; border: 0px; color:#D7D7D7;": "width:15em; border: 0px; color:#000000;")" name="searchKeyword" id="searchKeyword" required/><a id="btn-search">Go &gt;</a><br />
</div><br />
<br />
I think, it will work for IE 9 and IE 10 (cross the fingers)<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ7NAc-aas1KuKhjnAm3RDUnvEc-JeDMKPST78Kaxxp5Yl5j-OC9R_SPjbenUatG9r7R_fGMLQukf-Xx73p29-npFTX9BGksruHclpAvqU92DprIY9jQacFArpSISZ_Dwiwq55zzPxwZc/s1600/search1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ7NAc-aas1KuKhjnAm3RDUnvEc-JeDMKPST78Kaxxp5Yl5j-OC9R_SPjbenUatG9r7R_fGMLQukf-Xx73p29-npFTX9BGksruHclpAvqU92DprIY9jQacFArpSISZ_Dwiwq55zzPxwZc/s1600/search1.jpg" /></a></div>
Alla Staroseletskayahttp://www.blogger.com/profile/16478518492263757221noreply@blogger.com0tag:blogger.com,1999:blog-2575149539022738484.post-22790577204613529552013-12-12T10:45:00.000-08:002013-12-12T10:45:07.246-08:00Knockout-BootstrapWorking in Bootstrap-Knockout environment, I have to create some elements to enhance the application. I found it's not easy to work in this environment because Knockout dominates all the time. Therefore, I found a very good <a href="http://billpull.github.io/knockout-bootstrap/" target="_new">piece</a> of software which work for me.<br />
The code is in http://billpull.github.io/knockout-bootstrap/js/knockout-bootstrap.min.js<br />
<br />
It's much easier to work with this library than raw bootstrap and knockout. Alla Staroseletskayahttp://www.blogger.com/profile/16478518492263757221noreply@blogger.com0tag:blogger.com,1999:blog-2575149539022738484.post-4047172116915401762013-12-04T11:53:00.001-08:002013-12-04T11:53:05.456-08:00Changing appearance of Bootstrap ToolTipToday I worked on Bootstrap tooltips. I needed to set up several different tooltips on one page. The problem was with width of the Tooltips. I can not have the same width for all of them and had to set up different width for different tooltips. Thanks <a href="http://www.a2zwebhelp.com/bootstrap-tooltips" target="_blank">article</a>, I found the way to set up the different width.<br />
<br />
Each division has an unique class name (business_name and business_description) and I changed tooltip set up only this class (css)<br />
<br />
/*specially for this template I changed Bootstrap tooltip width to handle a Product name*/<br />
.business_name + .tooltip > .tooltip-inner {<br />
width: 350px;<br />
}<br />
/*specially for this template I changed Bootstrap tooltip width to handle a Product description*/<br />
.business_description + .tooltip > .tooltip-inner {<br />
width: 350px;<br />
}<br />
<br />
These definitions overwrite Bootstrap tooltip and create a new setup.<br />
<br />Alla Staroseletskayahttp://www.blogger.com/profile/16478518492263757221noreply@blogger.com0