tag:blogger.com,1999:blog-65014470870151715932024-03-19T01:47:02.060-07:00Developers developers developersmighty-whityhttp://www.blogger.com/profile/08022031113243464793noreply@blogger.comBlogger34125tag:blogger.com,1999:blog-6501447087015171593.post-24781889005423844872017-07-02T16:28:00.001-07:002017-07-02T16:31:57.206-07:00[Theory] Software craftsmanship Part 3 - Deployment pipeline<div style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.4px; font-stretch: normal; line-height: normal; margin: 0.75em 0px 0px; position: relative;">
<a href="http://developersdev.blogspot.ru/2017/07/theory-software-craftsmanship-part-1.html" style="color: #3d85c6; text-decoration-line: none;" target="_blank">Part 1 - Parallel vs united sequential vision</a><br />
<a href="http://developersdev.blogspot.ru/2017/07/theory-software-craftsmanship-part-2.html" style="color: #3d85c6; font-size: 15.4px;" target="_blank">Part 2 - Microservices</a><br />
<span style="font-size: 15.4px;">Part 3 - Deployment pipeline</span><br />
<span style="font-size: 15.4px;">----------------------------</span></div>
<div style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.4px; font-stretch: normal; line-height: normal; margin: 0.75em 0px 0px; position: relative;">
<span style="font-size: 15.4px;">In this post I am going to describe common techniques for the deployment process.</span></div>
<div style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.4px; font-stretch: normal; line-height: normal; margin: 0.75em 0px 0px; position: relative;">
<span style="font-size: 15.4px;"><br /></span></div>
<div style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.4px; font-stretch: normal; line-height: normal; margin: 0.75em 0px 0px; position: relative;">
<span style="font-size: 15.4px;">Multi-user development leads to a problem of individual errors. Some developers say the phrase "But it works on my machine", although it does not work on another computer.</span><br />
<span style="font-size: 15.4px;">To overcome this problem we can create a <i>mythical</i> independent developer, that will build the project and run unit tests. This mythical developer usually presented as Continuous Integration server, i.e. a robot that runs build and tests on every update of a common code base. In case the build is failed or unit test runner shoes the red flag CI server notifies the team about the problem.</span></div>
<iframe frameborder="0" src="https://www.draw.io/?lightbox=1&highlight=0000ff&edit=_blank&layers=1&nav=1&title=CI-ArtefactRepo.html#Uhttps%3A%2F%2Fdrive.google.com%2Fuc%3Fid%3D0ByMX8VFW2gxHRDFRUFZ1aGdxSXc%26export%3Ddownload" style="height: 403px; width: 100%;"></iframe>
<br />
<div style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.4px; font-stretch: normal; line-height: normal; margin: 0.75em 0px 0px; position: relative;">
<h3>
Difference between environments </h3>
Any difference between applications leads to a bunch of subtle bugs. <span style="font-size: 15.4px;">There is a need to have one version of the application for the development environment, at the same time we need a small modification of the application for production environment. Let us write this as the contradiction:</span><br />
<span style="color: #0b5394; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 15.4px;"><b>Contradiction (1)</b></span><br />
<span style="color: #0b5394; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 15.4px;"><i>Application should be the same and application should be different.</i></span><br />
<br />
<span style="font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 15.4px;"><span style="color: #38761d;"><b>Solution (1)</b></span></span><br />
<span style="font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 15.4px;"><span style="color: #38761d;"><i>Divide application on two blocks: one part is immutable and the other is mutable.</i></span></span><br />
<span style="font-size: 15.4px;"><br />The application can be divided in two parts: immutable code binaries and mutable configuration. Multiple combinations can produce different versions of the same application: <i>[immutable app binaries] + [development config] = dev app; while the same </i></span><span style="font-size: 15.4px;"><i>[immutable app binaries] + [production config] = prod app</i>. This approach allows us to eliminate the bugs that can occur between different binaries for different environments, for example hard coded strings (#ifdef DEBUG). The only difference exists in a configuration file (database connections, log level and so on).</span><br />
<span style="font-size: 15.4px;"><br /></span>
Thus we can archive our application binaries into some immutable package called <i><span style="color: #e69138;">artefact</span></i>, e.g. <i>projectA.v.1.zip</i> or <i>serviceB.v3.zip</i>. These artefacts can be placed to a common repository for a later usage.<br />
<span style="font-size: 15.4px;"><br /></span>
<br />
<h3>
Testing</h3>
<span style="font-size: 15.4px;">There are two main rules for testing:<br />1) <span style="color: #e69138;"><i>Automate tasks as much as possible</i></span> and to reduce the manual human work. Leave interesting bugs to testers and leave boring job to computers.<br />2) <i style="color: #e69138;">Fail fast. </i><br />If there is a bug in the application it is better to know about it as earlier as possible. Unit tests are the fastest tests, so we should run them at first. Then go module testing and integrations testing, and lastly the slowest UI tests and end-to-end tests.</span><br />
<span style="font-size: 15.4px;">Unit tests does not require application installation and are very fast, so these tests can be run by CI tool right after the build process.<br /><br />Integration and UI tests require a distinctive environment, often with its own database. Before showing the work to QA engineers we can run all these tests in a special environment for each commit to our service.</span><br />
<span style="font-size: 15.4px;"><br /></span>
<br />
<h2>
<iframe frameborder="0" src="https://www.draw.io/?lightbox=1&highlight=0000ff&edit=_blank&layers=1&nav=1&title=CI-ArtefactRepo-BuildEnv.html#Uhttps%3A%2F%2Fdrive.google.com%2Fuc%3Fid%3D0ByMX8VFW2gxHczdMUUZ2Wml3ZEU%26export%3Ddownload" style="height: 603px; width: 100%;"></iframe> </h2>
<h3>
Creating environments</h3>
Any person (developer, tester, manager, stakeholder) should be able to pick the exact version of the services (artefacts), apply configuration and add the service to a standalone environment. By default the system should propose the latest artefacts for the new environment.<br />
<iframe frameborder="0" src="https://www.draw.io/?lightbox=1&highlight=0000ff&edit=_blank&layers=1&nav=1&title=StandaloneEnviroment.html#Uhttps%3A%2F%2Fdrive.google.com%2Fuc%3Fid%3D0ByMX8VFW2gxHSlNkUEktaFctcms%26export%3Ddownload" style="height: 533px; width: 100%;"></iframe>
Each environment should be autonomous and be <i><span style="color: #e69138;">almost identical to production</span></i>. This principal can be achieved by usage of Virtual Private Cloud (<a href="https://aws.amazon.com/vpc/" target="_blank">AWS VPS</a>) or local <a href="https://www.docker.com/" target="_blank">Docker</a> runner with multiple images. The deployments should be saved the same as production is not destroyed between deployments with its database. If there is a need in a new database, maybe even seeded with tests data, a person can create a new environment. The rest mimics production environment:<iframe frameborder="0" src="https://www.draw.io/?lightbox=1&highlight=0000ff&edit=_blank&layers=1&nav=1&title=StandaloneEnviroment-BeforeSwitch.html#Uhttps%3A%2F%2Fdrive.google.com%2Fuc%3Fid%3D0ByMX8VFW2gxHUDNZRWUzaFgyRzQ%26export%3Ddownload" style="height: 306px; width: 100%;"></iframe>
<br />
The same as <a href="https://martinfowler.com/bliki/BlueGreenDeployment.html" target="_blank">blue-green</a> deployment is done in production we can do it in the test environment. After switching to the newly deployed service we will get the next picture:
<iframe frameborder="0" src="https://www.draw.io/?lightbox=1&highlight=0000ff&edit=_blank&layers=1&nav=1&title=StandaloneEnviroment-AfterSwitch.html#Uhttps%3A%2F%2Fdrive.google.com%2Fuc%3Fid%3D0ByMX8VFW2gxHUE1tYm9DRVl2WkE%26export%3Ddownload" style="height: 306px; width: 100%;"></iframe>
<br />
The switch can be done manually or automatically via some registry service, where every service registers its new address after the deployment.<br />
<br />
<h3>
Configuration</h3>
Let me shed light on the configuration and its relationship to the application. For proper versioning and history all configuration files should be placed inside version control system near the service code. Continuous Delivery tool can apply updates to config files with secret codes. <iframe frameborder="0" src="https://www.draw.io/?lightbox=1&highlight=0000ff&edit=_blank&layers=1&nav=1&title=DeploymentConfiguration.html#Uhttps%3A%2F%2Fdrive.google.com%2Fuc%3Fid%3D0ByMX8VFW2gxHUVdEQkI2VkVQUjQ%26export%3Ddownload" style="height: 263px; width: 100%;"></iframe>
Configuration file might have different properties for external interfaces like payment settings, SMS sending setting, which are not part of the application. Another settings might be specific to the environment, for example, exact email settings for developer or tester.<br />
<br />
During deployment a Continuous Delivery tool might remember previous settings and ask about confirmation for applied configuration patching.<br />
<iframe frameborder="0" src="https://www.draw.io/?lightbox=1&highlight=0000ff&edit=_blank&layers=1&nav=1&title=ConfirmConfiguration.html#Uhttps%3A%2F%2Fdrive.google.com%2Fuc%3Fid%3D0ByMX8VFW2gxHV0xyc3hidnVaUkk%26export%3Ddownload" style="height: 473px; width: 100%;"></iframe> The overall deployment pipeline is presented on the next scheme:<br />
<iframe frameborder="0" src="https://www.draw.io/?lightbox=1&highlight=0000ff&edit=_blank&layers=1&nav=1&title=DeploymentOverallPipeline.html#Uhttps%3A%2F%2Fdrive.google.com%2Fuc%3Fid%3D0ByMX8VFW2gxHMXExbEtVanRXTEk%26export%3Ddownload" style="height: 733px; width: 100%;"></iframe> <i style="font-size: 15.4px;">Happy coding! </i><span style="font-family: "apple color emoji" , "segoe ui emoji" , "notocoloremoji" , "segoe ui symbol" , "android emoji" , "emojisymbols"; font-size: 16px;">😊</span></div>
Anonymoushttp://www.blogger.com/profile/06210096552313954236noreply@blogger.com56tag:blogger.com,1999:blog-6501447087015171593.post-70416830582562105062017-07-01T11:37:00.001-07:002017-07-02T16:29:57.509-07:00[Theory] Software craftsmanship Part 2 - Microservices<div style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-stretch: normal; font-weight: normal; line-height: normal; margin: 0.75em 0px 0px; position: relative;">
<a href="http://developersdev.blogspot.ru/2017/07/theory-software-craftsmanship-part-1.html" target="_blank">Part 1 - Parallel vs united sequential vision</a><br />
Part 2 - Microservices<br />
<a href="https://developersdev.blogspot.ru/2017/07/theory-software-craftsmanship-part-3.html" style="font-size: 15.4px;" target="_blank">Part 3 - Deployment pipeline</a><br />----------------------------</div>
<div style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-stretch: normal; font-weight: normal; line-height: normal; margin: 0.75em 0px 0px; position: relative;">
In the previous post I wrote about the importance of small independent projects. </div>
<div style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-stretch: normal; font-weight: normal; line-height: normal; margin: 0.75em 0px 0px; position: relative;">
The most important rules for building micro or nano services are:<br />
<br />
1)<span style="color: #e69138;"><i> The service should be autonomous.</i></span><br />
The service and the small team should follow the idea of <a href="https://books.google.ru/books/about/Domain_driven_Design.html?id=xColAAPGubgC&printsec=frontcover&source=kp_read_button&redir_esc=y#v=onepage&q&f=false" target="_blank">Bounded Context</a>. Some examples: Email sending, SMS sending, Logging, Order service, Best buy suggestion, Products review, Search, Login and registration.</div>
<div style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-stretch: normal; font-weight: normal; line-height: normal; margin: 0.75em 0px 0px; position: relative;">
2) <span style="color: #e69138;"><i>The service should be independently deployable</i></span>.</div>
<div style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-stretch: normal; font-weight: normal; line-height: normal; margin: 0.75em 0px 0px; position: relative;">
The team should be able to deploy its service whenever it is desired.The compatibility can be supported with the ideas that were discussed in the previous part. </div>
<div style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-stretch: normal; font-weight: normal; line-height: normal; margin: 0.75em 0px 0px; position: relative;">
If, for example, email sending team decides to work with some logging library version 1.2.5, while others use fancy v.1.6.0, then they must go with their choice (v.1.2.5), even if it is a product of their own company. The team is responsible for fixing bugs and makes reasonable decisions, logging package v.1.6.0 might not be properly tested or has undesirable behaviour. </div>
<div style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-stretch: normal; font-weight: normal; line-height: normal; margin: 0.75em 0px 0px; position: relative;">
Creating a microservice with some HTTP RPC API usually does not rise many questions. The different picture is with GUI.</div>
<div style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-stretch: normal; font-weight: normal; line-height: normal; margin: 0.75em 0px 0px; position: relative;">
UI monolith that calls some HTTP API endpoints breaks the second law. The idea about a team being able to deploy its service independently from others means that the service should contain everything it needs for properly functionality, including UI controls if it is required:</div>
<iframe frameborder="0" src="https://www.draw.io/?lightbox=1&highlight=0000ff&edit=_blank&layers=1&nav=1&title=Microservices%20UI.html#Uhttps%3A%2F%2Fdrive.google.com%2Fuc%3Fid%3D0ByMX8VFW2gxHSlRsYXJkVk9YVkU%26export%3Ddownload" style="height: 400px; width: 100%;"></iframe>
<br />
<div style="background-color: white; font-stretch: normal; line-height: normal; margin: 0.75em 0px 0px; position: relative;">
<div style="font-family: arial, tahoma, helvetica, freesans, sans-serif; font-weight: normal;">
The website shell should be able to collect independent services from some registry. Notice that autonomy also means that each team should be able to apply different technologies for their services, even different UI technologies (React, Angular, Vue.js, pure HTML, bootstrap, jquery, pure js). Of course it is likely that UI will be done in one technology stack, nevertheless such possibility should exist. The same is true for other technologies (data storage type, runtime and programming language).</div>
<div style="font-family: arial, tahoma, helvetica, freesans, sans-serif; font-weight: normal;">
<br /></div>
<div style="font-family: arial, tahoma, helvetica, freesans, sans-serif; font-weight: normal;">
A new question appears: how is it possible to control such a mess of technologies? Plus companies need consistent design.</div>
<div style="font-family: arial, tahoma, helvetica, freesans, sans-serif; font-weight: normal;">
<br /></div>
<div style="font-family: arial, tahoma, helvetica, freesans, sans-serif; font-weight: normal;">
<span style="color: #0b5394; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.4px;"><b>Contradiction</b></span><br />
<span style="color: #0b5394; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.4px;"><i>As a team we want to have consistent design across the website.</i></span></div>
<div style="font-family: arial, tahoma, helvetica, freesans, sans-serif; font-weight: normal;">
<span style="color: #0b5394; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.4px;"><i>As a team we want freely modify different parts of the website.</i></span></div>
<div style="font-family: arial, tahoma, helvetica, freesans, sans-serif; font-weight: normal;">
One solution is to separate service and not combine them at all.</div>
<span style="font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.4px; font-weight: normal;"><span style="color: #38761d;"><b>Solution (1)</b></span></span><br />
<div style="font-weight: normal;">
<span style="color: #38761d; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif;"><span style="font-size: 14.4px;"><i>Give each service its own microsite.</i></span></span></div>
<div style="font-weight: normal;">
<span style="font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif;">Take a look at <a href="http://bbc.co.uk/">bbc.co.uk</a>, in addition to the main "news" site there are many sub sites: weather, education, radio, TV and others. Each sub site has its own design, purpose and can be implemented with its own technology stack and its own team.</span></div>
<div style="font-weight: normal;">
<br /></div>
<div style="font-weight: normal;">
<b style="color: #38761d; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;">Solution (2)</b></div>
<div style="font-weight: normal;">
<i style="color: #38761d; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;">Create the UI shell service that will dynamically collect different UI parts from the services.</i></div>
<div style="font-weight: normal;">
<i style="color: #38761d; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"><br /></i></div>
<span style="font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif;">Today this is scarcely done, however there are some attempts:</span><br />
<span style="font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif;">1) <a href="http://techblog.scout24.com/2016/01/solution-microservices-ui-composition/" target="_blank">Scout 24 and Thoughtworks </a>blog post and video</span><br />
<span style="font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif;">2) <a href="https://jobs.zalando.com/tech/blog/goto-2016-from-monolith-to-microservices/?gh_src=4n3gxh1" target="_blank">Zalando</a> blog post and video</span><br />
<span style="font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif;">3) </span><a href="https://www.amazon.com/" style="font-family: arial, tahoma, helvetica, freesans, sans-serif;" target="_blank">Amazon website</a><span style="font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif;"> itself</span><br />
<br />
And what is about design?<br />
<span style="color: #38761d; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif;"><span style="font-size: 14.4px;"><i>Follow strict guide rules for design, share common styles.</i></span></span><br />
<span style="font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif;"><br />An excellent example of such implementation is <a href="https://airbnb.design/building-a-visual-language/" target="_blank">Building a Visual Language</a> at Aribnb.</span><br />
<span style="font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif;">Designers specified common guides for sizes, colours and forms. Besides, their teams reuse common blocks across different types of applications. Headers, subheaders and rows have a consistent style in the </span><span style="font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif;">website, </span><span style="font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif;">mobile applications and emails.</span></div>
Anonymoushttp://www.blogger.com/profile/06210096552313954236noreply@blogger.com23tag:blogger.com,1999:blog-6501447087015171593.post-23420704170380609682017-07-01T04:52:00.000-07:002017-07-02T16:29:21.371-07:00[Theory] Software craftsmanship Part 1 - Parallel vs united sequential vision<i>In the series of posts I am going to show important conceptual points for software development.</i><br />
Part 1 - Parallel vs united sequential vision<br />
<span style="background-color: white; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif;"><a href="http://developersdev.blogspot.ru/2017/07/theory-software-craftsmanship-part-2.html" target="_blank">Part 2 - Microservices</a></span><br />
<span style="background-color: white; font-family: arial, tahoma, helvetica, freesans, sans-serif; font-size: 15.4px;"><a href="https://developersdev.blogspot.ru/2017/07/theory-software-craftsmanship-part-3.html" target="_blank">Part 3 - Deployment pipeline</a></span><br />
---------------------------<br />
<br />
The whole purpose of a software application is to <i><span style="color: #e69138;">provide valuable services to its consumers</span></i>. These valuable services can be constructed from <i><span style="color: #e69138;">features</span></i>.<br />
<br />
In such a way every backwards-compatible change to the application can be one of the next points:<br />
1) adding a new feature (technical or business request)<br />
2) fixing a bug for the previously added feature<br />
<br />
If the modification is <i>not</i> done in a backwards-compatible manner then we can think about the software as a new application. This idea is supported by <a href="http://semver.org/" target="_blank">semantic versioning</a>: <span style="font-family: "helvetica" , "arial" , sans-serif; font-size: 14.4px; text-align: center;">MAJOR.MINOR.PATCH</span><br />
<br />
The software from a consumer point of view is seen as a presentation of <i><span style="color: #e69138;">parallel and independent feature blocks</span></i>:
<iframe frameborder="0" src="https://www.draw.io/?lightbox=1&highlight=0000ff&edit=_blank&layers=1&nav=1&title=Parallel%20features.html#Uhttps%3A%2F%2Fdrive.google.com%2Fuc%3Fid%3D0ByMX8VFW2gxHbG1MTDBPYnRxN00%26export%3Ddownload" style="height: 270px; width: 100%;"></iframe><br />
On the other side coding corresponds to text, and text updating is a sequential operation: some symbols are replaced, some are added, removed or just moved across the text. In addition to this the code from the small "Feature a" often intersects with the small "Feature b" without having strong separation. Thus coding leads to the <i><span style="color: #e69138;">united and </span></i><span style="color: #e69138;"><span style="color: #e69138; font-style: italic;">sequential picture of a software</span>, where every bit is appended to the end of a common block</span>:
<iframe frameborder="0" src="https://www.draw.io/?lightbox=1&highlight=0000ff&edit=_blank&layers=1&nav=1&title=Sequential%20features.html#Uhttps%3A%2F%2Fdrive.google.com%2Fuc%3Fid%3D0ByMX8VFW2gxHYzdNTEZMbjBka0k%26export%3Ddownload" style="height: 173px; width: 100%;"></iframe>We can think of it as a process of book writing, with all the chapters and the references between its different parts. The idea of a simultaneous text editing by several authors is a source of lots of problems. Let us specify our first problem<br />
<br />
<span style="color: #0b5394;"><b>Contradiction (1)</b></span><br />
<span style="color: #0b5394;"><i>As a writer I would like to change a piece of a text without affecting other editors of the same text.</i></span><br />
<br />
<span style="color: #0b5394;"><b>Contradiction (1 strengthen)</b></span><br />
<span style="color: #0b5394;"><i>As a writer I need to apply changes to a text that is no longer exist (moved, changed or removed).</i></span><br />
<span style="color: #0b5394;"><i><b>A text should be changed and should not be changed.</b></i></span><br />
<span style="color: #0b5394;"><i><br /></i></span>
The simple solution is to apply golden <span style="color: #444444;"><span style="background-color: yellow;">Divide and Conquer</span><span style="background-color: white;"> method and totally eliminate simultaneous editing problem.</span></span><br />
<span style="color: #444444;"><span style="background-color: white;"><br /></span></span>
<span style="background-color: white;"><span style="color: #38761d;"><b>Solution (1)</b></span></span><br />
<span style="background-color: white;"><span style="color: #38761d;"><i>Divide text blocks in such a manner that every writer has its own independent part. </i></span></span><br />
Books are often divided by chapters where there is no more than one author per chapter.<br />
Applications can be divided in the same manner with a developer being assigned to support a specific software library. Removing the multi-user editing mode can be also done by usage of small services, for example, when one developer is responsible for a bunch of related cloud functions.<br />
<br />
<br />
<br />
Files renaming, moving files across the project, spacious code refactoring, all these steps lead to later painful code merging. If <i>Solution 1</i> is not accessible then there are some <i><span style="color: #e69138;">weak solutions</span></i>, which do not solve the problem but minimize its pain. <br />
<br />
<b style="background-color: white; color: #38761d;">Weak solution (1a)</b><br />
<i><span style="color: #38761d;">Divide people in small groups, so the teams can provide autonomous and independent deployable services</span></i>. This approach is called usage of <i>Microservices. </i>We can minimize the impact of a huge sharable code base by presenting small groups of people, which manage small independent micro projects with small code bases. Also the team becomes primarily responsible for the service business logic and will have deeper understanding of the processes than large teams do.<br />
<br />
As long as a code merging is inevitable we also can reduce the pain of conflicts resolving by minimizing applied changes.<br />
<b style="background-color: white; color: #38761d;">Weak solution (1b)</b><br />
The team can <i><span style="color: #38761d;">make a rule: to commit only small changes to sharable code base and do it often, at least every day</span></i>. Thus the developers will have only small merge conflicts, which must be simple to resolve.<br />
<br />
This weak solution actually leads us to a new contradiction<br />
<span style="color: #0b5394;"><b>Contradiction (2)</b></span><br />
<span style="color: #0b5394;"><i>As a developer sometimes I work on a large task during several days. </i></span><br />
<span style="color: #0b5394;"><i>As a developer I have to make small commits to the common code base at least every day, so the other developers can simply merge my changes.</i></span><br />
<span style="color: #0b5394;"><i>In other words: <b>changes should be large and be applied rarely, changes should be small and be applied often</b>.</i></span><br />
<div>
<span style="color: #0b5394;"><i><br /></i></span></div>
<span style="background-color: white;"><span style="color: #38761d;"><b>Solution (2)</b></span></span><br />
<span style="background-color: white;"><span style="color: #38761d;"><i>Wrap large changes in a switchable toggle. Make this toggle 'off' by default. Commit small changes to the common code base for </i></span></span><i style="background-color: white; color: #38761d;">the disabled feature</i><i style="background-color: white; color: #38761d;">. Simply enable the feature when it is ready.</i><br />
This is a very common principle in software building, which is called <a href="https://martinfowler.com/bliki/FeatureToggle.html" target="_blank">Feature Toggle</a>. Now a developer is able to do small and often changes to a common code base.<br />
<br />
<br />
<br />
Sometimes there is a need to do a breaking change that affects a large group of people. For example, a change in the logging library that is used across the whole application; or take, for instance, a field renaming in a live database. If we check the problem carefully then the contradiction is the same as the contradiction (1):<br />
<span style="color: #0b5394;"><b>Contradiction (3)</b></span><br />
<span style="color: #0b5394;"><i><b>A part of something should be changed and at the same time should not be changed.</b></i></span><br />
<br />
One of the solution is to make long-lasting switch to a new breakable change. I call this principle <i><span style="color: #e69138;">3-phase switching:</span></i><br />
<span style="background-color: white;"><span style="color: #38761d;"><b>Solution (3)</b></span></span><br />
<span style="background-color: white;"><span style="color: #38761d;"><i>1) Create the enhanced version of the block. If there is a sharable state (database, cache, external API) then the new version should also support the old state presentation. </i></span></span><span style="background-color: white;"><span style="color: #38761d;"><i><br />2) Allow or force clients to switch to the new version of the block during some time.</i></span></span><br />
<i style="background-color: white; color: #38761d;">3) Stay with the new version and remove the old block; or stay with the old solution (rollback).</i><br />
For example, if a developer makes a breakable change in the logging library like method renaming or drastically change method parameters, then he or she can create a new class (a new library) based on the old one. So there will be two blocks: the old one and the new one. The consumers can slowly switch to the new library.<br />
<br />
The concept of <i><span style="color: #e69138;">3-phase switching </span></i>is very powerful and is used widely in different aspects:<br />
<ul>
<li><i><span style="color: #e69138;">Canary release</span></i>, which is a process of rolling up a new software to a small group of users and checking whether it works as expected, thus not affecting all customers by a big bang of failure. Rolling up is slowly moving: <i>[10% of customers redirected to the new software, 90% to the old], [20% to new, 80% to the old], ..., [100% to the new software].</i></li>
<li><i><span style="color: #e69138;">Beta release</span></i> or a release for private groups, beta testers. </li>
<li><span style="color: #e69138;"><i>A-B testing</i></span></li>
<li><span style="color: #e69138;"><i>Green/Blue deployment</i></span></li>
<li><i><span style="color: #e69138;">Feature toggle</span> (related)</i></li>
<li><span style="color: #e69138;"><i>Software package lifecycle</i>:</span> npm, pypi, nuget, ruby gems, php composer and others.</li>
</ul>
<i><i></i></i><br />
<div style="display: inline !important; font-style: normal;">
<i><i>Let's take another example with a table field renaming in a relational database. The process might look as:</i></i></div>
<i><i>
</i></i>
<i></i><br />
<div style="display: inline !important; font-style: normal;">
<i>1) Add the new field with a proper name to the table.</i><br />
<i>2) Create a new endpoint for clients (API) in such a manner that data is written to both: the new and the old field. Wait for clients being switched to the new version.</i><br />
<i>Due the fact that the new API writes data in compatible way to the old field, clients that are using the old field are not affected at all.</i></div>
<i>
</i>
<br />
<div style="font-style: normal;">
<i>3) When there are no more clients using the old API then simply remove it with the old field. Finally there will be only new renamed field.</i></div>
<i>
</i>Anonymoushttp://www.blogger.com/profile/06210096552313954236noreply@blogger.com9tag:blogger.com,1999:blog-6501447087015171593.post-78695175661927858972017-02-26T04:13:00.000-08:002017-02-26T04:17:40.339-08:00Octopus meets Magento on Windows and Linux<div>
One project that I am working with consists of two parts: </div>
<div>
* Backend job runners, written in C#.NET Full Windows Framework and </div>
<div>
* Frontend web site based on Magento CMS, which is written in PHP</div>
<div>
<br /></div>
<div>
In our team there was already the Windows VPS machine for .NET applications. Also we use Continuous Deployment tool <a href="https://octopus.com/" target="_blank">Octopus Deploy</a>, which requires Octopus Server to be installed on Windows OS. </div>
<div>
Magento is working by default with LAMP (Linux Apache MySql PHP) infrastructure and nothing is said about Windows. Some guys use WAMP (Windows Apache MySql PHP) infrastructure, but mixing Apache and IIS is not a good idea. Thus we decided to give a try and run Magento in Windows + PHP + IIS alongside existed .NET applications.</div>
<div>
<br />
The first thing was to convert many Magento .htaccess files (Apache) to web.config (IIS). This task itself is pretty hard and manual. IIS has auto converting feature for .htaccess => IIS rules web.config, but most of the time IIS failed to do it properly.<br />
<br />
The next thing is to make a package containing the whole website for Octopus. We use TeamCity for CI and decided to pack, as usual for .NET, everything in a NuGet package. The trick is that NuPack tool works excellent with .NET dlls, but we finally found how to pack even PHP and .htaccess files.<br />
<br />
To do so create .nuspec file in the root of the project:<br />
<pre style="color: #333333; line-height: 16.25px;"><span style="color: #557799;"><?xml version="1.0"?></span>
<span style="color: #007700;"><package</span> <span style="color: #0000cc;">xmlns=</span><span style="background-color: #fff0f0;">"http://schemas.microsoft.com/packaging/2010/07/nuspec.xsd"</span><span style="color: #007700;">></span>
<span style="color: #888888;"><!-- Commands: https://github.com/NuGet/NuGet.Client/blob/dev/src/NuGet.Clients/NuGet.CommandLine/Commands/PackCommand.cs --></span>
<span style="color: #888888;"><!-- Schema: https://docs.microsoft.com/en-gb/nuget/schema/nuspec --></span>
<span style="color: #007700;"><metadata></span>
<span style="color: #007700;"><id></span>MyProject<span style="color: #007700;"></id></span>
<span style="color: #007700;"><title></span>Project Title<span style="color: #007700;"></title></span>
<span style="color: #007700;"><version></span>1.0.0<span style="color: #007700;"></version></span>
<span style="color: #007700;"><description></span>This is a Magento project<span style="color: #007700;"></description></span>
<span style="color: #007700;"><authors></span>Your team<span style="color: #007700;"></authores></span>
<span style="color: #007700;"></metadata></span>
<span style="color: #007700;"><files></span>
<span style="color: #007700;"><file</span> <span style="color: #0000cc;">src=</span><span style="background-color: #fff0f0;">"**"</span> <span style="color: #0000cc;">exclude=</span><span style="background-color: #fff0f0;">".git\**"</span> <span style="color: #007700;">/></span>
<span style="color: #007700;"></files></span> </pre>
<span style="color: #007700;"></package></span> </div>
<div>
<br />
The most import thing here is to make the files filter <span style="color: #0000cc;">src=</span><span style="background-color: #fff0f0; color: #333333;">"**"</span>, which includes all kind of types and extensions. The fields "id, version, description, authors" are <a href="https://docs.microsoft.com/en-gb/nuget/schema/nuspec" target="_blank">required</a>.<br />
<br />
Then run nuget pack command pointing to our .nuspec file.<br />
<pre style="color: #333333; line-height: 16.25px;">nuget pack .nuspec -NoPackageAnalysis -NoDefaultExcludes</pre>
<br />
<span style="color: #333333;">NoPackageAnalysis speeds up the packing, </span><span style="color: #333333;">NoDefaultExcludes protects from nuget throwing out special non .NET world files. This can be simply configured in TeamCity NuPack Runner. <br />The process of packaging takes about 3 minutes as Nuget provides only one level of compression and the project is big (about 40 000 files).</span><br />
<span style="color: #333333;">After that you will have your MyProject.nuget file that can be pushed to Octopus (I will skip the details). </span><span style="color: #333333;">Another solution is use <a href="https://octopus.com/docs/guides/node-on-nix-deployments/create-&-push-node.js-project" target="_blank">custom NodeJS package</a> instead of NuGet package.</span><br />
<br />
<span style="color: #333333;">The next problem was figured out with the help of Octopus. Linux terminal usually swallows the errors from magento setup tool when you run </span><br />
<pre style="color: #333333; line-height: 16.25px;">php -dmemory_limit=2G bin/magento setup:static-content:deploy</pre>
<br />
Better to run verbose output '-v' for showing the errors<br />
<pre style="color: #333333; line-height: 16.25px;">php -dmemory_limit=2G bin/magento setup:static-content:deploy <b>-v</b>
</pre>
<span style="color: #333333;">Gladly Octopus understood the presence of errors even without "-v" argument and refused to continue the deployment. The problem was in the popular Magento theme that we use </span><a href="https://themeforest.net/item/market-premium-responsive-magento-2-19-store-theme/8945695" target="_blank">Sm Market</a><span style="color: #333333;">. Bootstrap source code contained import .less rules with wrong file names in </span>Magento/app/design/frontend/Sm/market/web/css/source/bootstrap/_theme.less,<br />
fix it by pointing to the proper file names:<br />
<pre style="color: #333333; line-height: 16.25px;"><span style="color: #008800; font-weight: bold;">@import</span> <span style="background-color: #fff0f0;">"_variables"</span>;
<span style="color: #008800; font-weight: bold;">@import</span> <span style="background-color: #fff0f0;">"_mixins.less"</span>;</pre>
<pre style="color: #333333; line-height: 16.25px;"></pre>
<pre style="color: #333333; line-height: 16.25px;"></pre>
<br />
<span style="color: #333333;">After a lot of fighting and trying to run Magento in IIS, eventually it was working with (still) a lot of errors and problems due the url rewriting rules and user rights. The time spent on this became too big, so the decision was to move Magento to its Alma mater: Linux machine and Apache. </span><br />
<span style="color: #333333;">However we would like to continue working with awesome Octopus tool. Recently their team added support for Linux OS as tentacles (the server still requires Windows). This was an excellent case for us to give it a try.</span><br />
<h3>
Linux</h3>
The first step is to follow the guidance <a href="https://octopus.com/docs/deployment-targets/ssh-targets" target="_blank">Octopus SSH Taget</a> and install mono. Plus mysql, apache, php, etc for Magento.<br />
<br />
Then create user "octopus":<br />
<span style="background-color: #f8f8f8; color: #333333; font-family: "menlo" , "monaco" , "consolas" , "courier new" , monospace; font-size: 13px; white-space: pre-wrap;">sudo useradd -m octopus
</span><span class="hljs-built_in" style="box-sizing: border-box; color: #0086b3; font-family: "menlo" , "monaco" , "consolas" , "courier new" , monospace; font-size: 13px; white-space: pre-wrap;">echo</span><span style="background-color: #f8f8f8; color: #333333; font-family: "menlo" , "monaco" , "consolas" , "courier new" , monospace; font-size: 13px; white-space: pre-wrap;"> octopus:<the-password-you-want> | sudo chpasswd</span><br />
<br />
We decided not to create a user per app in UAT machine and to run web sites by the octopus user. To do so just add the <i>octopus</i> user to the <i>apache</i> group:<br />
<pre style="background-color: #eff0f1; border: 0px; color: #242729; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-size: 13px; margin-bottom: 1em; max-height: 600px; overflow: auto; padding: 5px; width: auto; word-wrap: normal;"><code style="border: 0px; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; margin: 0px; padding: 0px; white-space: inherit;">sudo usermod -g apache octopus</code></pre>
<br />
The next point is to give octopus the ability to work with <span style="color: #454545; font-family: "helvetica neue"; font-size: 12px;">apachectl</span> command (CentOS) without entering password. Create octopus section in sudoers:<br />
<span style="background-color: #eff0f1; color: #111111; font-family: "consolas" , "menlo" , "monaco" , "lucida console" , "liberation mono" , "dejavu sans mono" , "bitstream vera sans mono" , "courier new" , monospace , sans-serif; font-size: 13px; white-space: inherit;">sudo visudo -f /etc/sudoers.d/octopus </span><br />
<br />
<style type="text/css">
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px 'Helvetica Neue'; color: #454545}
</style>
<br />
and put data:<br />
<div class="p1">
<pre style="color: #333333; line-height: 16.25px;"><span style="color: #888888;">#Allow octopus to control apache </span>
octopus <span style="color: #996633;">ALL</span>=(ALL) NOPASSWD:/usr/sbin/apachectl
Defaults!/usr/sbin/apachectl !requiretty</pre>
</div>
<br />
Thus octopus will be able to run <span style="color: #454545; font-family: "helvetica neue"; font-size: 12px;">sudo apachectl restart </span>without entering the password.<br />
<h3>
<br />Apache</h3>
Now the time to set up Apache.<br />
Open /etc/httpd/conf/httpd.conf and comment all Directory settings except the global one restrictions.<br />
<br />
If you have <span style="color: #454545; font-family: "helvetica neue"; font-size: 12px;">Include conf.d/*.conf </span>row then you can create <span style="color: #454545; font-family: "helvetica neue"; font-size: 12px;">/etc/httpd/conf.d/magento.conf,</span><br />
otherwise just put the next lines to etc/httpd/conf/httpd.conf<br />
<pre style="color: #333333; line-height: 16.25px;">Include /home/octopus/.octopus/Applications/OctopusServer/Development/YourProjectName/*.conf
Include /home/octopus/.octopus/Applications/OctopusServer/UAT/YourProjectName/*.conf</pre>
<style type="text/css">
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px 'Helvetica Neue'; color: #454545}
</style>
<br />
It means that config files from the above folders will be used by Apache. If you have Apache 2.4+ then it is better to use IncludeOptional directive, which does not throw error if the path does not exist.<br />
<br />
The configuration files will be created one per project and will update Apache bindings in the next way:<br />
<pre style="color: #333333; line-height: 16.25px;"><VirtualHost *:<span style="color: #005588; font-weight: bold;">80</span>>
ServerName www.sitename.com
DocumentRoot /home/octopus/.octopus/Applications/OctopusServer/Development/YourProjectName/1.0.20/
<Directory /home/octopus/.octopus/Applications/OctopusServer/Development/YourProjectName/1.0.20/> </pre>
<pre style="color: #333333; line-height: 16.25px;"> Options Indexes FollowSymLinks MultiViews
AllowOverride All
Order allow,deny
Allow from all
</Directory>
</VirtualHost></pre>
<br />
If you do not like this approach you can use <a href="https://octopus.com/docs/guides/node-on-nix-deployments/configure-octopus-deploy-project" target="_blank">pm2 tool</a> for starting and stoping processes.<br />
<br />
<h3>
Octopus</h3>
Set up Octopus steps<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkZknyIDFNZgP3XRhlP8b9X1l4rV1l-9rhBo9PxaY3DjpHMcGezSspnv7zDtpdx1aCEP-NHT-v3gjv0bRfR_ddezIfMgVigLFc0oVa5NbUCknYDqwtvdbTLdYjChsjj-qWwqbEbK9EzVg/s1600/Screen+Shot+2017-02-26+at+2.44.02+pm.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="337" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkZknyIDFNZgP3XRhlP8b9X1l4rV1l-9rhBo9PxaY3DjpHMcGezSspnv7zDtpdx1aCEP-NHT-v3gjv0bRfR_ddezIfMgVigLFc0oVa5NbUCknYDqwtvdbTLdYjChsjj-qWwqbEbK9EzVg/s640/Screen+Shot+2017-02-26+at+2.44.02+pm.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="text-align: start;">We only need some scripts to run in bash. <br />(Magento installation scripts with Apache config update are placed at the end of this article)</span></div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<span style="text-align: start;">Install and Upgrade Magento step:</span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrj5SNrFvgbocQ1GUWTEYSDRuM3FwCtzwkArP9D4eO-5m2u2CM3qse3-OIJDf5pJcp7Tva9paoXMSNp8aEFaJFdvzPkm6rQwLQc6wYwjICOYpGtTLlLSnK6STpUVfAujpriO48rOe9lCQ/s1600/Screen+Shot+2017-02-26+at+2.43.55+pm.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="238" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrj5SNrFvgbocQ1GUWTEYSDRuM3FwCtzwkArP9D4eO-5m2u2CM3qse3-OIJDf5pJcp7Tva9paoXMSNp8aEFaJFdvzPkm6rQwLQc6wYwjICOYpGtTLlLSnK6STpUVfAujpriO48rOe9lCQ/s640/Screen+Shot+2017-02-26+at+2.43.55+pm.png" width="640" /></a></div>
<br />
<br />
parameters are taken from Octopus Variables:<br />
<pre style="color: #333333; line-height: 16.25px;">--magento-directory=<span style="background-color: #fff0f0;">"#{Octopus.Action[Deploy to Apache].Output.Package.InstallationDirectoryPath}"</span>
--admin-firstname=<span style="background-color: #fff0f0;">"#{AdminFirstname}"</span> --admin-lastname=<span style="background-color: #fff0f0;">"#{AdminLastname}"</span>
--admin-email=<span style="background-color: #fff0f0;">"#{AdminEmail}"</span> --admin-user=<span style="background-color: #fff0f0;">"#{AdminUser}"</span>
--admin-password=<span style="background-color: #fff0f0;">"#{AdminPassword}"</span> --base-url=<span style="background-color: #fff0f0;">"#{BaseUrl}"</span>
--backend-frontname=<span style="background-color: #fff0f0;">"#{BackendFrontname}"</span> --db-name=<span style="background-color: #fff0f0;">"#{DbName}"</span>
--db-user=<span style="background-color: #fff0f0;">"#{DbUser}"</span> --db-password=<span style="background-color: #fff0f0;">"#{DbPassword}"</span></pre>
<br />
Update Apache Bindings step:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEaZ1cLjTps8Ch5xqQjJ9wTWylEjkkcXLW1nQ2rlCbyoLY70wm8sYnvsrOrX_6Vvw1B1z43AIzRkfXHt58rDIHkNk8Jnk22F9kbpH1zQcAIo-P5arcCRLX1n7604NTfxQgMKJbaU4btow/s1600/Screen+Shot+2017-02-26+at+2.44.26+pm.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEaZ1cLjTps8Ch5xqQjJ9wTWylEjkkcXLW1nQ2rlCbyoLY70wm8sYnvsrOrX_6Vvw1B1z43AIzRkfXHt58rDIHkNk8Jnk22F9kbpH1zQcAIo-P5arcCRLX1n7604NTfxQgMKJbaU4btow/s640/Screen+Shot+2017-02-26+at+2.44.26+pm.png" width="640" /></a></div>
<br />
parameters are also taken from Octopus Variables:<br />
<pre style="color: #333333; line-height: 16.25px;">--magento-directory=<span style="background-color: #fff0f0;">"#{Octopus.Action[Deploy to Apache].Output.Package.InstallationDirectoryPath}"</span>
--server-name=<span style="background-color: #fff0f0;">"#{WebsiteName}"</span></pre>
<br />
<br />
And that is it. <br />
The deploy process works like a charm.<br />
<br />
<br />
MagentoDeploy.sh<br />
<br />
<script src="https://gist.github.com/Artur-A/04ff0fd9d299a1684412c4ade9f96026.js"></script>
<br />
MagentoUpdateApacheBindings.sh
<br />
<script src="https://gist.github.com/Artur-A/04ff0fd9d299a1684412c4ade9f96026.js"></script>
<br />
<br />
<br />
<br /></div>
Anonymoushttp://www.blogger.com/profile/06210096552313954236noreply@blogger.com0tag:blogger.com,1999:blog-6501447087015171593.post-22133690092732214002017-02-11T08:54:00.001-08:002017-02-11T09:41:13.673-08:00Can we stop date formatting mess?What does the next date exactly present?<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA4HuaOehGvZFGscgguP8MCQ0XJ8Lx426pzXiwO-3YHwmHHXDoewF1s3CCuH6Dh5EfP3R86qJTkJw0IVc-NjhICtEf1O4MIHxzADHF4XJ-fK5IEJIXr47eM1nvvaVOpjaVCB1yxNXqpRs/s1600/Screen+Shot+2017-02-11+at+4.30.07+pm.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="85" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA4HuaOehGvZFGscgguP8MCQ0XJ8Lx426pzXiwO-3YHwmHHXDoewF1s3CCuH6Dh5EfP3R86qJTkJw0IVc-NjhICtEf1O4MIHxzADHF4XJ-fK5IEJIXr47eM1nvvaVOpjaVCB1yxNXqpRs/s200/Screen+Shot+2017-02-11+at+4.30.07+pm.png" width="200" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
Most people from over the world will say that it is the 2nd of November 2017. But it is not true for American and Albanian people.<br />
<br />
Airbnb for US culture will show the popup with the 11th of February 2017. <br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7yDDaP44GYkvPJgSEj9lmgDr5uNU7S6ygVbtCYuoutJj5TB3vXdmynmXohm_Z8p-gkZYKgPzwkXkL61kju5YRgg4ehIV51MHNSwK5YKeBCOSK35HD9y4WxLCVlRKOxWaDjFWxcVNpnvs/s1600/Screen+Shot+2017-02-11+at+4.29.57+pm.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7yDDaP44GYkvPJgSEj9lmgDr5uNU7S6ygVbtCYuoutJj5TB3vXdmynmXohm_Z8p-gkZYKgPzwkXkL61kju5YRgg4ehIV51MHNSwK5YKeBCOSK35HD9y4WxLCVlRKOxWaDjFWxcVNpnvs/s320/Screen+Shot+2017-02-11+at+4.29.57+pm.png" width="277" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
This becomes more entangled when we get Russian, Ukrainian and Kazakstan format DD.MM.YYYY, which is often shortened to DD.MM.YY. For example, the 11th of February 2017 is usually written as 11.02.17.<br />
<br />
To make internationalisation more complex some countries (Chine, Lithuania, South Africa) use YYYY-MM-DD or YYYY.MM.DD, which sometimes people like to shorten to YY.MM.DD, and our previous example becomes 17.02.11.<br />
<br />
If you think that nothing can be worth, there are <a href="http://calendars.wikia.com/wiki/Date_format_by_country" target="_blank">countries</a> (Germany, Canada, Sweden, Philippines), which apply different date formats depending on a context.<br />
<br />
<h3>
Requirements</h3>
<div>
Taking into the account all previous points and preventing likelihood problems the solution of the problem should be:</div>
<div>
1) Visible immediately as a static text without any data manipulation (no need to open a popup date editor)</div>
<div>
2) A day, a month and a year should be distinguishable from each other</div>
<div>
3) The distinguish signs should have the colour of the text and be readable after a monochrome print, e.g. in books and newspapers.</div>
<div>
4) The distinguish signs should be simple and built from UTF symbols.</div>
<div>
<br /></div>
<h3>
Proposal of a solution</h3>
<div>
Let us start our visual identification from the shortest amount of time - a day, to the most lasting - a year. The simplest visual effect, that is also very convenient to program or use in draw editors, is underlining. Underlining also works good with all popular charset encodings.</div>
<div>
<br /></div>
<div>
A day gets full width underline = <u>DD;</u></div>
<div>
A month gets a half width underline if the year part is short (YY) = M<u>M;</u> otherwise month has no underline = MM;</div>
<div>
A year has no underline = YYYY or YY;</div>
<div>
<br /></div>
<h3>
Examples</h3>
<div>
Our initial confusing date presentation now becomes absolutely clear:</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0WoFc2GJer3jFWT1YWI3ryIvA7Y7g8b8A3IF_qD8lxSUxE4Utp6PbD6IvRv5pF65d0GMfT-g-L4DuWnpBtuSRLlwiuBEb63Wo7xdW27o9FbA0izU6HcwwGLplzpSystycyu8yW8pzjqE/s1600/date_mark_idea.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="85" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0WoFc2GJer3jFWT1YWI3ryIvA7Y7g8b8A3IF_qD8lxSUxE4Utp6PbD6IvRv5pF65d0GMfT-g-L4DuWnpBtuSRLlwiuBEb63Wo7xdW27o9FbA0izU6HcwwGLplzpSystycyu8yW8pzjqE/s200/date_mark_idea.png" width="200" /></a></div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div>
Some people like to trim zeros and write, for example, 7.9.2017. Even this date can be transformed to an obvious presentation: <u>7</u>.9.2017.</div>
<div>
<br /></div>
<div>
More complex 11.10.12 YY.MM.DD can be transformed to 11.1<u>0</u>.<u>12</u> or to <u>12</u>.1<u>0</u>.11, which is actually the same as <u>12</u>.10.2012 and 10/<u>12</u>/2012.</div>
<div>
<br /></div>
<div>
And now the bonus for developers and almost anybody who process much data. A common SQL result nowadays says nothing about a date format:</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV1jV_4S97RO0zLEXaYJrwC-uwnyEnq0X4dBfsnV6yvHmQxgqKFlU2XjycbKEJdaw65LvdCvg5G3IJbsqEkmKdMOCCD0Xfu43o6BZjuU-qMeEjj6jTVvkg3figMlyoy0WsZP0CaB9h58U/s1600/Screen+Shot+2017-02-11+at+7.21.41+pm.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="172" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV1jV_4S97RO0zLEXaYJrwC-uwnyEnq0X4dBfsnV6yvHmQxgqKFlU2XjycbKEJdaw65LvdCvg5G3IJbsqEkmKdMOCCD0Xfu43o6BZjuU-qMeEjj6jTVvkg3figMlyoy0WsZP0CaB9h58U/s200/Screen+Shot+2017-02-11+at+7.21.41+pm.png" width="200" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="text-align: start;">while after our small fix the data is a pleasure to read:</span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSz1AYaV8ylW1YDILq8cEW5Crm5FVS0arpoR51hBPLnu7C0kFFOE8MxXu59kgV88tIl5xCVENI00kifNOBT7sMLbhyEat_pOkI-265L0iFwAdGzIiSPOgi8RNvr7mDuk4y1MRPqaTC2hU/s1600/date_mark_idea_2.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: center;"><img border="0" height="172" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSz1AYaV8ylW1YDILq8cEW5Crm5FVS0arpoR51hBPLnu7C0kFFOE8MxXu59kgV88tIl5xCVENI00kifNOBT7sMLbhyEat_pOkI-265L0iFwAdGzIiSPOgi8RNvr7mDuk4y1MRPqaTC2hU/s200/date_mark_idea_2.png" width="200" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h3>
Table of different date formats </h3>
<table 0="" border="1" bordercolor="#2bea38" cellpadding="10" cellspacing="0" margin:="" padding:="" style="border-collapse: collapse; border-color: #34f90d;">
<tbody>
<tr>
<th>Date</th>
<th>Meaning</th>
</tr>
<tr>
<td>2/<u>11</u>/2017</td>
<td>The 11th of February 2017</td>
</tr>
<tr>
<td><u>2</u>/11/2017</td>
<td>The 2nd of November 2017</td>
</tr>
<tr>
<td><u>10</u>/3 or <u>10</u>/03</td>
<td>The 10th of March</td>
</tr>
<tr>
<td>0<u>1</u>/17</td>
<td>January 2017</td>
</tr>
<tr>
<td>2017-12-<u>10</u></td>
<td>The 10th of December 2017</td>
</tr>
<tr>
<td><u>05</u>/0<u>4</u>/03</td>
<td>The 5th of March 2003</td>
</tr>
<tr>
<td>05/0<u>4</u>/<u>03</u></td>
<td>The 3rd of March 2005</td>
</tr>
<tr>
<td>2/<u>3</u>/2020</td>
<td>The 3rd of February 2020</td>
</tr>
</tbody></table>
<i><br /></i>
<br />
<i>Happy coding!</i>
<br />
<i><br /></i>Anonymoushttp://www.blogger.com/profile/06210096552313954236noreply@blogger.com2tag:blogger.com,1999:blog-6501447087015171593.post-2422566119536157772016-10-19T01:03:00.001-07:002016-10-23T12:49:03.606-07:00The evolution of web development<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<h3>
Custom HTML Attributes Are Evil</h3>
<br />
HTML is itself a <i>static</i> content, and many developers have used the specification <span style="background-color: #f9f9f9; font-family: monospace , "courier"; font-size: 14px; white-space: pre-wrap;"><!DOCTYPE ></span>, which points out that it is merely a <i>document</i>.<br />
The <i>dynamic</i> part is represented by JavaScript language. And here arose the problem.<br />
<br />
Looking how various programming languages are used to build UI reveals that the language itself is a part of UI blocks. For example, Windows Presentation Framework uses XAML with C# controls:<br />
<pre style="font-family: Consolas, Courier, monospace !important; font-size: 14px; overflow: auto; padding: 5px; white-space: pre-wrap; word-break: break-word; word-wrap: break-word;"><span style="color: blue;"><</span><span style="color: #a31515;">Grid</span> <span style="color: red;">Background</span><span style="color: blue;">=</span>"<span style="color: blue;">#555555</span>" <span style="color: red;">Width</span><span style="color: blue;">=</span>"<span style="color: blue;">400</span>" <span style="color: red;">Height</span><span style="color: blue;">=</span>"<span style="color: blue;">300</span>"<span style="color: blue;">>
</span><span style="color: blue; font-size: 13px;"><</span><span style="color: #a31515; font-size: 13px;">Button</span><span style="font-size: 13px;"> </span><span style="color: red; font-size: 13px;">Click</span><span style="color: blue; font-size: 13px;">=</span><span style="font-size: 13px;">"</span><span style="color: blue; font-size: 13px;">OnButtonClick</span><span style="font-size: 13px;">"</span><span style="color: blue; font-size: 13px;">></span><span style="font-size: 13px;">Press me</span><span style="color: blue; font-size: 13px;"></</span><span style="color: #a31515; font-size: 13px;">Button</span><span style="color: blue; font-size: 13px;">></span></pre>
<span style="color: blue; font-family: "consolas" , "courier" , monospace; font-size: 14px; white-space: pre-wrap;"></</span><span style="color: #a31515; font-family: "consolas" , "courier" , monospace; font-size: 14px; white-space: pre-wrap;">Grid</span><span style="color: blue; font-family: "consolas" , "courier" , monospace; font-size: 14px; white-space: pre-wrap;">></span><br />
<br />
Here will be created an instance of <span style="color: #a31515; font-family: "consolas" , "courier" , monospace; font-size: 14px; white-space: pre-wrap;">Grid</span> class and an instance of <span style="color: #a31515; font-family: "consolas" , "courier" , monospace; font-size: 13px; white-space: pre-wrap;">Button</span> class. Also it is possible to write logic whatever we like inside custom controls as they are just usual classes:<br />
<pre class="prettyprint"><code><span style="color: #38761d; font-family: "courier new" , "courier" , monospace;">class Grid {
public Color Background {get; set;}
// methods and other UI logic
}</span></code></pre>
The same is true for Java with Android layouts, and many other languages and platforms.<br />
<br />
HTML initially does not provide such idea, it does not link <html-element> to a JavaScript instance. To enhance it we can simply declare HTML elements as objects of JavaScript types:<br />
<span style="font-family: "courier new" , "courier" , monospace; font-size: normal;"> <span style="color: #38761d;">class div {</span></span><br />
<span style="color: #38761d; font-family: "courier new" , "courier" , monospace; font-size: normal;"> public string style {get;set;}<br /> // methods and other UI logic</span><br />
<span style="color: #38761d;"><br /></span>
<span style="color: #38761d; font-family: "courier new" , "courier" , monospace; font-size: normal;"> render: function(){</span><br />
<span style="color: #38761d; font-family: "courier new" , "courier" , monospace; font-size: normal;"> // return real html '<div>'+content+'</div>'</span><br />
<span style="color: #38761d; font-family: "courier new" , "courier" , monospace; font-size: normal;"> }</span><br />
<span style="color: #38761d; font-family: "courier new" , "courier" , monospace; font-size: normal;"> }</span><br />
<span style="color: #38761d; font-family: "courier new" , "courier" , monospace; font-size: normal;"> class MyWindowPopup {</span><br />
<span style="color: #38761d; font-family: "courier new" , "courier" , monospace; font-size: normal;"> public boolean fullScreen {get;set;}</span><br />
<span style="color: #38761d;"><span style="font-family: "courier new" , "courier" , monospace; font-size: normal;"> public boolean visible {get;set;}</span><span style="font-family: "courier new" , "courier" , monospace; font-size: normal;"><br /> // methods and other UI logic</span></span><br />
<span style="color: #38761d; font-family: "courier new" , "courier" , monospace; font-size: normal;"> }</span><br />
<span style="font-family: "courier new" , "courier" , monospace; font-size: normal;"><br /></span>
Then it becomes possible to build pages and components in a common way:<br />
<span style="font-family: "courier new" , "courier" , monospace; font-size: normal;"> <span style="color: #38761d;"><MyWindowPopup </span></span><span style="color: #38761d;"><span style="font-family: "courier new" , "courier" , monospace; font-size: normal;">visible="true" fullScreen="false"</span><span style="font-family: "courier new" , "courier" , monospace; font-size: normal;">></span></span><br />
<span style="color: #38761d; font-family: "courier new" , "courier" , monospace; font-size: normal;"> <div>Popup text</div></span><br />
<span style="color: #38761d; font-family: "courier new" , "courier" , monospace; font-size: normal;"> </MyWindowPopup></span><br />
Moreover we can advance some property types, e.g. use <span style="font-family: "courier new" , "courier" , monospace; font-size: normal;">string[]</span> array instead of <span style="font-family: "courier new" , "courier" , monospace; font-size: normal;">string</span> for class property <span style="font-family: "courier new" , "courier" , monospace; font-size: normal;"><div class="typeof string[]"></span>.<br />
<br />
Then a browser or a server (NodeJS) is simply converts JavaScript to HTML and shows layout to a user. This approach took Facebook team with React and its <a href="https://facebook.github.io/react/docs/jsx-in-depth.html" target="_blank">JSX</a> style.<br />
---------------------------------------<br />
<br />
Many other teams try to overcome HTML static nature by putting custom attributes, which seems very strange and inconvenient for me. Angular, Vue.js, Aurelia.js and many other JS frameworks use logic with custom marks (*ngIf, v-if, bind.click):<br />
<pre class="prettyprint lang-html ng-scope prettyprinted" style="background: rgb(255, 255, 255); color: #455a64; font-family: Monaco, "Lucida Console", monospace; font-size: 14px; line-height: 24px; overflow: auto; padding: 16px 32px; position: relative; white-space: pre-wrap; width: auto;"><code ng-non-bindable="" style="background: none; border-radius: 2px; color: #00796b; font-family: Monaco, "Lucida Console", monospace; font-size: 13px; padding: 0px;"><span class="tag" style="color: #d81b60;"><div</span><span class="pln" style="color: #455a64;"> *</span><span class="atn">ngIf</span><span class="pun" style="color: #455a64;">=</span><span class="atv">"currentHero"</span><span class="tag" style="color: #d81b60;">></span><span class="pln" style="color: #455a64;">Hello, {{currentHero.firstName}}</span><span class="tag" style="color: #d81b60;"></div>
</span></code><span class="tag" style="color: #d81b60; font-size: 13px;"><div</span><span class="pln" style="background-color: initial; font-size: 13px;"> *</span><span class="atn" style="color: #00796b; font-size: 13px;">ngFor</span><span class="pun" style="background-color: initial; font-size: 13px;">=</span><span class="atv" style="color: #00796b; font-size: 13px;">"let hero of heroes"</span><span class="tag" style="color: #d81b60; font-size: 13px;">></span><span class="pln" style="background-color: initial; font-size: 13px;">{{hero.fullName}}</span><span class="tag" style="color: #d81b60; font-size: 13px;"></div>
</span></pre>
<h3>
</h3>
<h3>
JavaScript Monopoly</h3>
<div>
<br /></div>
Nowadays JavaScript is the king of UI and there is no alternative.<br />
I think every team that works with Web tried to create a converter from their languages to JavaScript. However this approach produces massive bunch of problems due the nature of languages.<br />
<br />
Google created <a href="http://www.gwtproject.org/" target="_blank">GWT</a> where Java is converter to JavaScript and developers can write kind of UI logic in Java. Also Google tried to apply usage of Dart language in modern browsers and again created conversion to JavaScript.<br />
Microsoft uses aspx controls that can be written in .NET compatible language, Razor views, and <a href="https://docs.asp.net/en/latest/mvc/views/tag-helpers/intro.html" target="_blank">TagHelpers</a> in Asp Core, which all finally are converted to JavaScript and HTML. You can find same idea for <a href="http://elm-lang.org/" target="_blank">Elm</a>, <a href="http://pyjs.org/" target="_blank">Python</a>, <a href="https://github.com/Danack/PHP-to-Javascript" target="_blank">PHP</a> and other languages.<br />
<br />
The problem is that JavaScript and C#, JavaScript and Java, JavaScript and [your favourite language] are <i>very different beasts</i>.<br />
<br />
Javascript is a prototype-based language with first-class functions. There is no even idea of an object instance of a class (<a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes" target="_blank">class</a> declaration leads again to a function). There are just six types in JavaScript: Object, Number, String, Boolean, Null, and Undefined, plus some object helpers like RegEx. There is no even notion of Integer or Decimal type because JavaScript Number only holds double-precision 64-bit format value. Run in a JS console "0.1 + 0.3" and see what you get, while with Decimal types in C# the result will be "0.4".<br />
<br />
Thus, developers restrict their language of choice too much and loose the power of JavaScript. In addition to these points most of the time they loose highlighting and intellisense while producing JavaScript and HTML as a string, e.g. in Asp Core TagHelpers:<br />
<br />
<span style="color: #38761d; font-family: "courier new" , "courier" , monospace; font-size: normal;">public class IconTextTagHelper : TagHelper</span><br />
<span style="color: #38761d; font-family: "courier new" , "courier" , monospace; font-size: normal;"> {</span><br />
<span style="color: #38761d; font-family: "courier new" , "courier" , monospace; font-size: normal;"> public string Glyph { get; set; }</span><br />
<span style="color: #38761d; font-family: "courier new" , "courier" , monospace; font-size: normal;"> [HtmlAttributeName("class")]</span><br />
<span style="color: #38761d; font-family: "courier new" , "courier" , monospace; font-size: normal;"> public string ClassName { get; set; }</span><br />
<span style="color: #38761d;"><span style="font-family: "courier new" , "courier" , monospace; font-size: normal;"><br /></span>
<span style="font-family: "courier new" , "courier" , monospace; font-size: normal;"> public override void Process(TagHelperContext context, TagHelperOutput output)</span></span><br />
<span style="color: #38761d; font-family: "courier new" , "courier" , monospace; font-size: normal;"> {</span><br />
<span style="color: #38761d; font-family: "courier new" , "courier" , monospace; font-size: normal;"> string classnames = String.IsNullOrWhiteSpace(ClassName) ? "icontext" : "icontext " + ClassName;</span><br />
<span style="color: #38761d; font-family: "courier new" , "courier" , monospace; font-size: normal;"> output.TagName = "a";</span><br />
<span style="color: #38761d; font-family: "courier new" , "courier" , monospace; font-size: normal;"> output.TagMode = TagMode.StartTagAndEndTag;</span><br />
<span style="color: #38761d; font-family: "courier new" , "courier" , monospace; font-size: normal;"> output.Attributes.Add("class", classnames);</span><br />
<span style="color: #38761d; font-family: "courier new" , "courier" , monospace; font-size: normal;"> </span><br />
<span style="color: #38761d; font-family: "courier new" , "courier" , monospace; font-size: normal;"> output.Content.SetHtmlContent(<br /> <b>// String, string, string</b></span><br />
<span style="color: #38761d; font-family: "courier new" , "courier" , monospace; font-size: normal;"> $@"<span></span><br />
<span style="color: #38761d; font-family: "courier new" , "courier" , monospace; font-size: normal;"> <i class=""icon fa fa-{Glyph ?? ""} icontext__icon""></i></span><br />
<span style="color: #38761d; font-family: "courier new" , "courier" , monospace; font-size: normal;"> <span class=""icontext__text"">{this.Text}</span></span><br />
<span style="color: #38761d; font-family: "courier new" , "courier" , monospace; font-size: normal;"> </span>"); </span><br />
<span style="color: #38761d; font-family: "courier new" , "courier" , monospace; font-size: normal;"> }</span><br />
<span style="color: #38761d; font-family: "courier new" , "courier" , monospace; font-size: normal;"> }</span><br />
A way better solution is to work with JavaScript itself, or even better with <a href="https://www.typescriptlang.org/" target="_blank">TypeScript</a>, which provides static type checking.<br />
<br />
<h3>
</h3>
<h3>
</h3>
<h3>
Breaking JavaScript Monopoly</h3>
<div>
<br /></div>
To overcome the monopoly of JavaScript the IT community are making an attempt to specify <a href="http://webassembly.org/" target="_blank">WebAssembly</a>, which later can be supported by browsers vendors.<br />
The idea is very simple:<br />
Browsers will support <i>agnostic</i> language (through ASTs) that will include many features from modern languages. It will be some kind of <i>Intermediate Language</i> that is used in Java and .NET virtual machines nowadays. It will be faster to parse, faster to transfer, faster to run, it will be in binary format instead of text format of current JavaScript.<br />
<br />
Sadly web development progress is very slow.<br />
The web community still tries to build some kind of <a href="https://msdn.microsoft.com/en-us/library/ms752059(v=vs.110).aspx" target="_blank">XAML</a> with its custom components, inline styles, namespaces and modules.<br />
It is 2016 and only now we have <a href="http://caniuse.com/#feat=flexbox" target="_blank">Flexbox</a>, which is analogue of <a href="https://msdn.microsoft.com/en-us/library/system.windows.controls.stackpanel(v=vs.110).aspx" target="_blank">StackPanel</a> in WPF for arranging elements horizontally or vertically in a <i>single line. </i>And what about <a href="https://msdn.microsoft.com/en-us/library/system.windows.controls.grid(v=vs.110).aspx" target="_blank">Grid</a>, without a hack and whistles there is no way to do it in modern CSS, only recently W3C <a href="https://www.w3.org/TR/2016/CR-css-grid-1-20160929/" target="_blank">CSS Grid</a> specification has passed from a <i>Draft</i> type to a <i>Candidate Recommendation</i> type.<br />
<br />
There are so many bright minds in our realm but the overall picture is appalling.<br />
<br />
P.S. JavaScript word is used for convenience, while ECMAScript is the proper notion in some places.
</div>
</div>
Anonymoushttp://www.blogger.com/profile/06210096552313954236noreply@blogger.com54tag:blogger.com,1999:blog-6501447087015171593.post-25556439315409346632016-10-15T02:03:00.002-07:002016-10-22T12:23:43.556-07:00SPA<div dir="ltr" style="text-align: left;" trbidi="on">
It is common nowadays to have the acronym for SPA as a Single Page Application.<br />
<br />
Nevertheless the actual meaning is quite different, the page is not <b>s<strike>ingle</strike></b>, the page is actually <b>shelled</b>.<br />
<br />
SPA approach has the same idea as in a mobile application or a thin desktop client. A user downloads a <b>thin shell</b> for the app: a header, a footer, a body placeholder and possibly sidebars. Then asynchronously this app updates the content for the placeholders, while footer and header is not reloaded.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://developers.google.com/web/updates/images/2015/11/appshell/appshell-1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="295" src="https://developers.google.com/web/updates/images/2015/11/appshell/appshell-1.jpg" width="400" /></a></div>
From a user experience the app is working with several navigation links and many pages. So calling such shelled app layout as a one page sounds misleading.<br />
<div style="text-align: center;">
<br /></div>
<span style="color: #741b47;"></span><br />
<div style="text-align: center;">
<span style="color: #741b47;">SPA = Shelled Page Application</span></div>
<span style="color: #741b47;">
</span>
<br />
<br /></div>
Anonymoushttp://www.blogger.com/profile/06210096552313954236noreply@blogger.com58tag:blogger.com,1999:blog-6501447087015171593.post-26108635900728045482016-10-12T03:43:00.000-07:002016-10-12T03:43:19.565-07:00Application workflow strategy and Staging verbosityOne of the famous app flow strategies is DTAP, which is acronym for <b>Development Testing Acceptance Production</b>.<br /><br />
Let us consider each step in detail, but before this let us make step back and add a source control and a continuous integration step for the full picture.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhotjJZE329HV_edhUdHshBOQu3xkaLZc6oio8aH_kSuJ6ORYICjLlPKcUT5Qu8VSv0Xl5hJs3d6bgnSZalwAlhYzNgLQ8VxpUEDh_umsKam0ny2k6Ahyphenhyphen6eTMaJCs3gMdQ3X1OKumDy60M/s1600/Screen+Shot+2016-10-12+at+12.04.28+PM.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="268" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhotjJZE329HV_edhUdHshBOQu3xkaLZc6oio8aH_kSuJ6ORYICjLlPKcUT5Qu8VSv0Xl5hJs3d6bgnSZalwAlhYzNgLQ8VxpUEDh_umsKam0ny2k6Ahyphenhyphen6eTMaJCs3gMdQ3X1OKumDy60M/s640/Screen+Shot+2016-10-12+at+12.04.28+PM.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-size: small; text-align: start;">The scheme represent a de-facto standard in current development process.</span></td></tr>
</tbody></table>
<br /><b>Source control</b><br />
<ul>
<li>holds project source files and likely provides history changes, as project branches and users control management.</li>
</ul>
<br />
<b>Continous integration </b><br />
<br />
<ul>
<li>a continuous integration tool checks for the source control changes, grabs source files from the source control and <i>builds the projects</i>;</li>
<li> runs<i> unit tests</i>;</li>
<li> produces artifacts (<i>application packages</i>) that are ready for publishing;</li>
<li> <i>publishes the app</i> to Dev server;</li>
<li> for the published app runs <i>smoke tests</i>, which check basic and the most important functionality, e.g. products are displaying and a user can log in and pay for a product;</li>
<li>for the published app runs <i>functional tests</i>, which makes in-depth testing of the whole application pretending to be a human tester, e.g. opening Internet Explore browser, opening page with the contact form, filling contact data and submitting it, checking that email is received or was added to a fake queue. <br />(<i>Note: most of the time CI tool cannot itself run Smoke or Functional tests as there is a need to have visual APIs in the operating system, which provides ability <i>for example browsers to be installed or other GUI apps. For these purposes</i> special test apps are built with tools like <a href="http://www.seleniumhq.org/" target="_blank">SelenuimHQ</a> and are placed on a Dev server (or other suitable place with support of reach GUI), while CI tool can be installed in the cloud or a small linux server without rich GUI support. Then CI tool requests from the Smoke/Functional test app to run these tests.</i></li>
<li>finally we can guaranty that the app is almost fully functional on the dev server, otherwise if any of the previous steps are failed the responsible person will be notified about the problem.</li>
</ul>
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Then we have the following steps for the application:</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3sI0aJ41pkinlTEZHoY5sqsJMCSCPriqbn7rub9FlNFm6BLYJ12-nuIoQTZfjyzzObJzV2YfD86PD7el4f38HyaVu6ZkLqdVbhXJwaO96qSGKEReLyOSgaUrhJI0oaEjyNsSkBYa0QhE/s1600/Screen+Shot+2016-10-12+at+1.04.15+PM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="146" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3sI0aJ41pkinlTEZHoY5sqsJMCSCPriqbn7rub9FlNFm6BLYJ12-nuIoQTZfjyzzObJzV2YfD86PD7el4f38HyaVu6ZkLqdVbhXJwaO96qSGKEReLyOSgaUrhJI0oaEjyNsSkBYa0QhE/s640/Screen+Shot+2016-10-12+at+1.04.15+PM.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<b>Dev environment</b><br />
<br />
<ul>
<li>holds automatically tested application;</li>
</ul>
<br />
<b>Test </b><b>environment</b><br />
<br />
<ul>
<li>if you have testers in your team this place is for them;<br />the app is tested by testers in isolation from other steps</li>
<li>tester makes subtle tests as the app is already tested automatically;<br />if there is a bug, then one of the functional test is missing, which should be added by developer in the fix process</li>
<li>a CI manager can manually request CI tool to propagate the app to Test server(s) after Dev phase</li>
<li>another approach is to automatically propagate the app from Dev phase to Test phase by CI tool when you have versioned app running simultaneously or several Test servers, so that testers will <i>not</i> be interrupted while they are providing tests</li>
</ul>
<br />
<b>Acceptance (also known as UAT/User Acceptance Test) </b><b>environment</b><br />
<ul>
<li>holds application that waits for a testing from a stakeholder/ a customer;</li>
<li>if there is no tester in your team you can propagate (manually or automatically) the app from Dev to UAT phase with CI tool</li>
<li>A stakeholder makes tests and whether accepts or rejects the changes</li>
</ul>
<i>Note: environment can be presented by different amount of servers and machines. For example Dev, Test and UAT environment can be hold on a one server, or in other case Test environment can be hold on N-servers.</i><br />
<br />
<br />
<br />
<div style="text-align: center;">
<b>STAGING</b></div>
<b><br /></b>
Although DTAP model is obviously clear there is another step called <b>Staging.</b> I've phased a lot of confusion with Staging step among developers as there is no single definition for it.<br />Some people argue that <i>Staging</i> is another name for <i>UAT</i> step. Other people go further and combine Test step with UAT step and call this combination as Staging. Any of this is definitely valid while you have one concept across your whole team.<br />
Nevertheless personally I prefer to have the notion of <b>Staging</b> as <i>a pre-production step</i>. What does it mean? Let us look at the image from Steve's blog post about <a href="http://www.loudsteve.com/2010/10/10/windows-azure-staging-model/" target="_blank">staging in Azure</a>.<br /><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl-7R8h2Oh5NBS9vplKYGk1ejH0VFAc7ZvWXLDq8zswidKXy3nXVtEEA_a378lsZFJ9c8_-uaGGvWCw58Dn3D6ULIhVg7Hwq7B0zSARVfG_VWQYW_JFgwEi-3vwu-M9TF5v_-FITGpc5g/s1600/Azure-Stage-Step1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="440" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl-7R8h2Oh5NBS9vplKYGk1ejH0VFAc7ZvWXLDq8zswidKXy3nXVtEEA_a378lsZFJ9c8_-uaGGvWCw58Dn3D6ULIhVg7Hwq7B0zSARVfG_VWQYW_JFgwEi-3vwu-M9TF5v_-FITGpc5g/s640/Azure-Stage-Step1.png" width="640" /></a></div>
<br />
<br />
Staging is an additional step before publishing an app to a production environment.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFNpO54B05iP6HZUCTKDJJWzolDCsHP_HT_Rl5ckkZtIKr2rJN7A9RVXgL5xDtLQygCJ-xK0amYJywOjZKCnmABmO1JKii71la5EHC1JJzExUmEaGoHDTYyNgiVSXNv97qpo4NB8RJNd4/s1600/Screen+Shot+2016-10-12+at+1.24.57+PM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="168" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFNpO54B05iP6HZUCTKDJJWzolDCsHP_HT_Rl5ckkZtIKr2rJN7A9RVXgL5xDtLQygCJ-xK0amYJywOjZKCnmABmO1JKii71la5EHC1JJzExUmEaGoHDTYyNgiVSXNv97qpo4NB8RJNd4/s640/Screen+Shot+2016-10-12+at+1.24.57+PM.png" width="640" /></a></div>
<br />
<b>Staging</b><br />
<br />
<ul>
<li>is propagated from UAT phase after a stakeholder approval</li>
<li>holds the app ready to go live in production;</li>
<li>has connection settings (database, email server, and so on) the same as in production </li>
<li>CI tool runs Smoke tests to verify critical functionality</li>
<li>if needed a stakeholder or a developer can manually verify some special points</li>
</ul>
<div>
After all theses steps are done Staging can be simply swapped with a Production environment, for example for a website by changing routes in a hosting tool (IIS, Nginx, Apache). Thus staging becomes production, while production becomes stale staging, which can be removed or used as a backup. This approach is known as <a href="https://docs.cloudfoundry.org/devguide/deploy-apps/blue-green.html" target="_blank">Blue Green deployment</a>.</div>
Anonymoushttp://www.blogger.com/profile/06210096552313954236noreply@blogger.com0tag:blogger.com,1999:blog-6501447087015171593.post-51236412062545150652016-09-03T06:42:00.000-07:002016-09-03T09:37:04.203-07:00Custom unstructured data types and types' reuse<span id="docs-internal-guid-26b89794-efd4-ce04-8a97-ea3e79462cf6"></span><br />
<div dir="ltr" style="margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: #444444; font-family: "arial";"><span style="font-size: 14.6667px; line-height: 20.24px; white-space: pre-wrap;">In 1972 three well-known computer scientists wrote a book Structured Programming, where they mentioned about custom unstructured types:</span></span><br />
<blockquote class="tr_bq">
<span style="color: #0b5394;">All structured data must in the last analysis be built up from unstructured components, belonging to a primitive or unstructured types. Some of these unstructured types (for example, reals and integers) may be taken as given by programming language or the hardware of the computer. Although these primitive types are theoretically adequate for all purposes, here are strong practical reasons for encouraging a programmer to define his own unstructured types, both to clarify his intentions about the potential range of values of a variable, and the interpretation of each such value; and to permit subsequent design of an efficient representation.</span></blockquote>
<blockquote class="tr_bq">
<span style="color: #0b5394;">(...) Such a type is said to be an <i>enumeration,</i> and we suggest a standard notation for the name of the type and associating a name with each of its alternative values.</span></blockquote>
<blockquote class="tr_bq">
<span style="color: #0b5394;"><b>type</b> suit = (club, diamond, heart, spade);</span></blockquote>
<span style="color: #0b5394;"> (...)</span><br />
<blockquote class="tr_bq">
<span style="color: #0b5394;"><b>type</b> year = 1900 .. 1960; </span></blockquote>
<blockquote class="tr_bq">
<span style="color: #0b5394;"><b>type</b> coordinate = 0 .. 1023;</span></blockquote>
<blockquote class="tr_bq">
<span style="color: #0b5394;">(...) We therefore introduce the convention that <i>a .. b </i>stands for the inline range of values between a and b inclusive. This is known as subrange of the type to which a and b belong, (...)</span></blockquote>
<blockquote class="tr_bq" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: "arial"; font-style: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="color: #444444; font-size: x-small;">Ole-Johan Dahl, Edsger W. Dijkstra, C.A.R. Hoare, Structured Programming, A.P.I.C. Studies in Data Processing, No. 8, 1972, p.97</span></span></blockquote>
<br />
<span style="color: #444444; font-family: "arial"; font-size: 14.6667px; line-height: 20.24px; white-space: pre-wrap;">Some of the languages indeed support subrange types, e.g. <a href="https://en.wikipedia.org/wiki/Ada_%28programming_language%29#Data_types" target="_blank">Ada</a> and <a href="http://www.delphibasics.co.uk/Article.asp?Name=Sets" target="_blank">Dephi</a>. Nevertheless, m</span><span style="color: #444444; font-family: "arial"; font-size: 14.6667px; line-height: 20.24px; white-space: pre-wrap;">odern popular languages like Java and C# do not support unstructured custom subrange types. </span><br />
<br />
<span style="color: #444444; font-family: "arial";"><span style="font-size: 14.6667px; line-height: 20.24px; white-space: pre-wrap;">In addition to this there is a huge misconception about a type declaration and its actual meaning. For instance, an <i>Array</i> accepts an <i>Integer</i> as index argument with a range [-2^31, 2^31], so we declare support for -1,-2, ... index values. At the same time only non-negative integers are accepted, i.e. [0, 2^31]. For an honest and clear code it should be an <i>Array[NonnegativeInteger].</i></span></span><br />
<span style="color: #444444; font-family: "arial";"><span style="font-size: 14.6667px; line-height: 20.24px; white-space: pre-wrap;"><br /></span></span>
<span style="color: #444444; font-family: "arial";"><span style="font-size: 14.6667px; line-height: 20.24px; white-space: pre-wrap;">Moreover, commonly used </span></span><span style="color: #444444; font-family: "arial"; font-size: 14.6667px; line-height: 20.24px; white-space: pre-wrap;">structured and </span><span style="color: #444444; font-family: "arial"; font-size: 14.6667px; line-height: 20.24px; white-space: pre-wrap;">unstructured types does not limit to numbers. Nowadays an email is always presented as </span><i style="color: #444444; font-family: arial; font-size: 14.6667px; line-height: 20.24px; white-space: pre-wrap;">String:</i><br />
<span style="color: #444444; font-family: "arial";"><span style="font-size: 14.6667px; line-height: 20.24px; white-space: pre-wrap;"><i>
function SendEmail(String email, String emailBody){ ... }</i></span></span><br />
<span style="color: #444444; font-family: "arial";"><span style="font-size: 14.6667px; line-height: 20.24px; white-space: pre-wrap;"><br /></span></span><span style="color: #444444; font-family: "arial";"><span style="font-size: 14.6667px; line-height: 20.24px; white-space: pre-wrap;">but we actually mean</span></span><br />
<span style="color: #444444; font-family: "arial";"><span style="font-size: 14.6667px; line-height: 20.24px; white-space: pre-wrap;"><i>function SendEmail(EmailAddress email, </i></span></span><i style="color: #444444; font-family: arial; font-size: 14.6667px; line-height: 20.24px; white-space: pre-wrap;">String</i><span style="color: #444444; font-family: "arial";"><span style="font-size: 14.6667px; line-height: 20.24px; white-space: pre-wrap;"><i> emailBody){ ... }</i></span></span><br />
<span style="color: #444444; font-family: "arial";"><span style="font-size: 14.6667px; line-height: 20.24px; white-space: pre-wrap;"><br /></span></span>
<span style="color: #444444; font-family: "arial";"><span style="font-size: 14.6667px; line-height: 20.24px; white-space: pre-wrap;">Making an assertion that an instance of the class/structure </span><i style="font-size: 14.6667px; line-height: 20.24px; white-space: pre-wrap;">EmailAddress</i><span style="font-size: 14.6667px; line-height: 20.24px; white-space: pre-wrap;"> is always valid we do not need to check the string every time with </span><i style="font-size: 14.6667px; line-height: 20.24px; white-space: pre-wrap;">IsEmail()</i><span style="font-size: 14.6667px; line-height: 20.24px; white-space: pre-wrap;"> helper or an attribute of </span><a href="https://msdn.microsoft.com/en-us/library/system.componentmodel.dataannotations.emailaddressattribute(v=vs.110).aspx" style="font-size: 14.6667px; line-height: 20.24px; white-space: pre-wrap;" target="_blank">DataAnnotations</a><span style="font-size: 14.6667px; line-height: 20.24px; white-space: pre-wrap;">. It can have a <i>function </i></span></span><i style="color: #444444; font-family: arial; font-size: 14.6667px; line-height: 20.24px; white-space: pre-wrap;">EmailAddress </i><i style="color: #444444; font-family: arial; font-size: 14.6667px; line-height: 20.24px; white-space: pre-wrap;">TryConvert(String email)</i><span style="color: #444444; font-family: "arial";"><span style="font-size: 14.6667px; line-height: 20.24px; white-space: pre-wrap;"> for convenient conversion from string.</span></span><br />
<span style="color: #444444; font-family: "arial";"><span style="font-size: 14.6667px; line-height: 20.24px; white-space: pre-wrap;"><br /></span></span>
<span style="color: #444444; font-family: "arial";"><span style="font-size: 14.6667px; line-height: 20.24px; white-space: pre-wrap;">Other common places for apparent improvements:</span></span><br />
<br />
<ul>
<li><span style="color: #444444; font-family: "arial";"><span style="font-size: 14.6667px; line-height: 20.24px; white-space: pre-wrap;">Name checking of a <i>String</i> for a Firstname and a Lastname across whole solution with the same restrictions, probably with no more than 256 special </span></span><span style="color: #444444; font-family: "arial"; font-size: 14.6667px; line-height: 20.24px; white-space: pre-wrap;">characters</span><span style="color: #444444; font-family: "arial";"><span style="font-size: 14.6667px; line-height: 20.24px; white-space: pre-wrap;"> and at least 1 character, can be changed to what a programmer really means: <i>class/structure Name</i>.</span></span></li>
<li><span style="color: #444444; font-family: "arial";"><span style="font-size: 14.6667px; line-height: 20.24px; white-space: pre-wrap;"><i>class Description</i> with common rules for contact messages, order's comments, feedback messages, etc.</span></span></li>
<li><span style="color: #444444; font-family: "arial";"><span style="font-size: 14.6667px; line-height: 20.24px; white-space: pre-wrap;">Measures: degrees, coordinates, weight, etc.</span></span></li>
<li><span style="color: #444444; font-family: "arial";"><span style="font-size: 14.6667px; line-height: 20.24px; white-space: pre-wrap;">Date and time</span>
<span style="font-size: 14.6667px; line-height: 20.24px; white-space: pre-wrap;"><i>Integers</i> up to 2147483648 (2^31) for a year, a month, a day, an hour and a minute look inconvenient for real use and most of the systems after all will throw an exception by taking large numbers for these types.</span>
</span></li>
<li><span style="color: #444444; font-family: "arial";"><span style="font-size: 14.6667px; line-height: 20.24px; white-space: pre-wrap;">Money
There is no a banknote with<i> minus $100</i> value, but there can be a notion of <span style="font-size: 14.6667px; line-height: 20.24px;">100$ </span>debt.</span></span></li>
</ul>
<br />
<span style="color: #444444; font-family: "arial";"><span style="font-size: 14.6667px; line-height: 20.24px; white-space: pre-wrap;">With the help of Design by Contracts most of the checks can be done during compilation time.</span></span><br />
<span style="color: #444444; font-family: "arial";"><span style="font-size: 14.6667px; line-height: 20.24px; white-space: pre-wrap;">For interoperability with other systems custom types should be built up from primitive and simple types, like integers and strings, and be convertible from these types. </span></span></div>
Anonymoushttp://www.blogger.com/profile/06210096552313954236noreply@blogger.com1tag:blogger.com,1999:blog-6501447087015171593.post-31301876582224575542016-05-28T01:19:00.002-07:002016-05-28T01:49:04.958-07:00Computers in USSR | KazanComputer science and development evolved in parallel in England, USA and USSR. There are several cities that took major role in the first Soviet computer era: Kiev and Kharkiv in Ukraine, Minsk in Belarus, Moscow, Penza and Kazan in Russia. Due the World War II all vital factories and universities were moved from the west (Kiev, Minsk, Saint-Petersburg, Moscow) to the east, including Kazan city. Therefore, Kazan became one of the major technical and scientific centre in the Soviet Union, and the city was chosen for building the first serial computers in USSR.<br />
<br />
In 1953 the Communist Party approved a request to build a computer factory in Kazan to produce electronic devices for the military agency. The factory was ready for large manufacturing in 1959 and the government asked to build two M-20 computers. The architect was S.A. Lebedev, who already had experience in designing and building computers in Kiev and Moscow, however, they were mere specimens and the newborn task aimed to build the series of computers.<br />
<br />
<h3>
M-20</h3>
M-20 is the first serial computer in USSR. It was built from vacuum tubes (valves) and the first two machines occupied the whole level of the factory. The vacuum tubes require colossal energy and emit a lot of heat. You can find the parts of this excellent machine only in the Kazan computer museum, which is based and supported by Margarita Badrutdinova. She has been working with computers in the factory from its first days.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx3hiZnsLWwpEXA0UZfKIA7uKfmmbTZGOSjL_24NNTn_LqrN8xuEOLh6Je6mkzz2mflXzx8OriDaZDbr34_87sGP1jcAxxq2-jqwdZfTzkbm-KyGylLeQb_mteAbOq47YGLGuJ5unGWXo/s1600/%25D0%259F%25D0%25B0%25D1%2582%25D1%2582%25D0%25BE%25D1%2581%25D0%25B8%25D0%25BD.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="465" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx3hiZnsLWwpEXA0UZfKIA7uKfmmbTZGOSjL_24NNTn_LqrN8xuEOLh6Je6mkzz2mflXzx8OriDaZDbr34_87sGP1jcAxxq2-jqwdZfTzkbm-KyGylLeQb_mteAbOq47YGLGuJ5unGWXo/s640/%25D0%259F%25D0%25B0%25D1%2582%25D1%2582%25D0%25BE%25D1%2581%25D0%25B8%25D0%25BD.jpg" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
View of M-20 computer, 1962 </div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgykKeaXc-Cbj1793YjNcQuayC0JfY7qOfXoNDF3XIp6JJ9JoyQEg2fj6ZZTi6L7zdPmNDfxkxWIK7NINqgGv-E2mwcF14q_1JMmi3puTCrE58MI9NPrQk2AjAlmrlox1oK2ho7P5zIZ2M/s1600/20160519_103833.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgykKeaXc-Cbj1793YjNcQuayC0JfY7qOfXoNDF3XIp6JJ9JoyQEg2fj6ZZTi6L7zdPmNDfxkxWIK7NINqgGv-E2mwcF14q_1JMmi3puTCrE58MI9NPrQk2AjAlmrlox1oK2ho7P5zIZ2M/s640/20160519_103833.jpg" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Parts of M-20 computer,</div>
<div class="separator" style="clear: both; text-align: center;">
top - keyboard, bottom - 2 bit triggers from vacuum tubes</div>
<br />
In the end of 1960 the computers were ready, successfully tested and moved to the customer, which was the military agency. The engineers did not know what kind of calculations and tests they were successfully performed. As history showed the second M-20 machine was used to calculate the path for the space rocket and this same computer was used to launch the first human space journey with Gagarin in the 12th of April, 1961!<br />
M-20 is named after the 20 000 operations per second, during the five years there were built 63 sets of the machine.<br />
<br />
<h3>
Setun</h3>
The next machine "Setun" was developed in Moscow by Nikolay Brusentsov and build in Kazan in 1961. The machine got its name by the river "Setun" near Moscow State University. It had three-state logic, which was quite novel at that time and still is a unique serial implementation in the world. Instead of two-state logic "true-false" and bits "1 and 0" Setun had operations with trinary states "true-false-maybe" and stored trits "1 0 -1" in the memory. Some of the benefits of three-state logic are: the program size and data is 1.6 times smaller than two-bits representation, there is no need to take special bit for the number sign, additional branch for the if-else switch.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsoO7d9oBWhBMF1X-VQk-YDQp2Zods6v8EWJ8EVW7CJfFkh8D6kD0U0gF8alE4ajTFF2-OGQqG7VM8qZpXyK5YtyoI9lYIZbVmsV8ORFrBfxMsSV7Njs94q5LAkomHVceCAqHOpxaJ_NQ/s1600/%25D0%25A1%25D0%25BD%25D0%25B8%25D0%25BC%25D0%25BE%25D0%25BA_%25D0%25A1%25D0%25B5%25D1%2582%25D1%2583%25D0%25BD%25D1%258C.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="443" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsoO7d9oBWhBMF1X-VQk-YDQp2Zods6v8EWJ8EVW7CJfFkh8D6kD0U0gF8alE4ajTFF2-OGQqG7VM8qZpXyK5YtyoI9lYIZbVmsV8ORFrBfxMsSV7Njs94q5LAkomHVceCAqHOpxaJ_NQ/s640/%25D0%25A1%25D0%25BD%25D0%25B8%25D0%25BC%25D0%25BE%25D0%25BA_%25D0%25A1%25D0%25B5%25D1%2582%25D1%2583%25D0%25BD%25D1%258C.JPG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Setun computer</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipNpaGO_Y5BEKpItY6Y8nYHKUwk-CgsZXSXcrSY2pfuTYwNOkFeQaCxzulX3v5Z03FhinyQ5-5qI-iBx8QeNlU4VFIgDnUwN71fDTbIVyliKj2MiWPLlayca4VZEfOktmap0ASbb6E1IE/s1600/20160519_110519.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipNpaGO_Y5BEKpItY6Y8nYHKUwk-CgsZXSXcrSY2pfuTYwNOkFeQaCxzulX3v5Z03FhinyQ5-5qI-iBx8QeNlU4VFIgDnUwN71fDTbIVyliKj2MiWPLlayca4VZEfOktmap0ASbb6E1IE/s640/20160519_110519.jpg" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Parts of Setun computer,</div>
<div class="separator" style="clear: both; text-align: center;">
at the bottom in the left side is a small core item - ferret-diode cell,</div>
<div class="separator" style="clear: both; text-align: center;">
on the right side is a magnet drum for external memory. </div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
Almost every part of products was built by the manufacture and often required novelty and tackling difficult tasks. Overall there were produced 47 sets of these trinary machines during 1961-1965 in the Kazan computer factory.<br />
<br />
<h3>
Nairi</h3>
Another computer was designed in Yerevan by G. Ovsepyan in 1964. He had a big fight for this machine with the heads of Soviet departments and finally made excellent and robust computer. It was produced in the Kazan factory during 1965-1970. Nairi was very successful product and very popular in the Soviet Union, the factory engineers made improvements and built overall 500 machines closely working with Ovsepyan's team. Ironically, many Yerevan scientists and the Comunnist party heads stole Ovsepyan's achievements and got awards. He had not been mentioned for decades and some of the cheaters still have political power and are afraid to mention his name.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ1qEwI-CpKheYsWF9BG-ljJ4gwvOESasZhj_gJzdcqzU3_OZfeo6ebpgPplTBtM17UsCkAM0F5UIytNRKX64MxG0aHSFliontLcf-cg6CVwQmofy5s_Ss-En4vOP3OnIQYxiwdUp0eXY/s1600/371.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="275" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ1qEwI-CpKheYsWF9BG-ljJ4gwvOESasZhj_gJzdcqzU3_OZfeo6ebpgPplTBtM17UsCkAM0F5UIytNRKX64MxG0aHSFliontLcf-cg6CVwQmofy5s_Ss-En4vOP3OnIQYxiwdUp0eXY/s400/371.jpg" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Nairi computer</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghfoGNGbN4E-3qnjT1bIY8AF-ku3WSTLVMdPb2644df3IOEuolY-lgExl8gq5853KgaS4JfFOSPul8-4aGrBUvJSyFLxLbBIbJUEPv9zw8MVXuxbAtWfYTOIbatPqFLu1l6JkOl4V6xa0/s1600/20160519_110525.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghfoGNGbN4E-3qnjT1bIY8AF-ku3WSTLVMdPb2644df3IOEuolY-lgExl8gq5853KgaS4JfFOSPul8-4aGrBUvJSyFLxLbBIbJUEPv9zw8MVXuxbAtWfYTOIbatPqFLu1l6JkOl4V6xa0/s640/20160519_110525.jpg" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Parts of Nairi computer,</div>
<div class="separator" style="clear: both; text-align: center;">
in the middle is permanent data storage, </div>
<div class="separator" style="clear: both; text-align: center;">
in the top-right corner is in-line storage</div>
<br />
<h4>
ES-10XX</h4>
In 1960s IBM made enormous improvement in computer design by spending 5 billion dollars for one project and created IBM 360. The project was twice as expensive as the first nuclear bomb project "Manhattan". The Soviet Union heads wanted to have a copy of this "toy". And, after the contract between USA and USSR, IBM 360 was licensed to the Soviet Union. The government obliged to create very similar machine, so across the country appeared the series of IBM clones ES-1010, ES-1020, ES-1030, ES-10XX computers.<br />
While giving the lecture in museum Badrutdinova remembered Korolev's words, the father of Soviet rocket program, who liked to quote his tutor Bartini: "Can left behind system overtake advanced system? - No, if it tries to catch up moving behind, but what if it takes a short cut?". The Soviet ministers did not want to see local and new computer versions, they just wanted to have american clones. This was the fatal error in the strategy and the death of true novelty! The engineers struggled and liked to build improved and new competitive versions, but their power was voiceless. The command to produce ES-1030 computers came to the Kazan computer factory. After some years the engineers with V.F. Gusev finally managed to create advanced and more robust version, model ES-1033. The leaders and consumers were impressed and this computer was successfully exported to other countries. In 1970s and 1980s the manufacture produced overall 2600 of ES-1033 machines.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieq6UIFv1KfcWHOE2bDe_ankmehOd0Stw4W-0uPyU5CC_DonBSHRZv7grDdsQPNKPBrER_fLIeKoftWwl-SQUS7tlH00pD4kzFk0zaxvGrKjZxglxKcdc77qXhhiM9OUq8uyJ1LwhaMYc/s1600/image046.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="456" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieq6UIFv1KfcWHOE2bDe_ankmehOd0Stw4W-0uPyU5CC_DonBSHRZv7grDdsQPNKPBrER_fLIeKoftWwl-SQUS7tlH00pD4kzFk0zaxvGrKjZxglxKcdc77qXhhiM9OUq8uyJ1LwhaMYc/s640/image046.jpg" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
ES-1033 computer</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiyFN9etpWy06WysGUVgj5Vp5CGsrsoFoIY28QAwsJaOCsKEonoZhZ48tWmYLDrB7JDOA9Fk22jCBOk-fKsz8lRl0zna-Bd5VOZ_nEiBdzD5Dbp5PJEGTqjLcNq7_S7Ldm-F6skhgShkc/s1600/20160519_110330.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiyFN9etpWy06WysGUVgj5Vp5CGsrsoFoIY28QAwsJaOCsKEonoZhZ48tWmYLDrB7JDOA9Fk22jCBOk-fKsz8lRl0zna-Bd5VOZ_nEiBdzD5Dbp5PJEGTqjLcNq7_S7Ldm-F6skhgShkc/s640/20160519_110330.jpg" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
ES-1045.01 computer </div>
<div class="separator" style="clear: both; text-align: center;">
(input model of the improved version of ES-1045)</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCsLS0jzLJBZ9_vufyLQdxDWC5PpDbPqYmqOdd7XxxUC73Wjtl40CBeNVCSNc_v0rgKfKFSwy8Qd0h8J87QL7Y_eLHcT2orTpq61gYuKxmpZlnf2FV2uG9mGM7HMSKjbfsKOVda5T7enU/s1600/Bundesarchiv_B_145_Bild-F038812-0014%252C_Wolfsburg%252C_VW_Autowerk.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="401" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCsLS0jzLJBZ9_vufyLQdxDWC5PpDbPqYmqOdd7XxxUC73Wjtl40CBeNVCSNc_v0rgKfKFSwy8Qd0h8J87QL7Y_eLHcT2orTpq61gYuKxmpZlnf2FV2uG9mGM7HMSKjbfsKOVda5T7enU/s640/Bundesarchiv_B_145_Bild-F038812-0014%252C_Wolfsburg%252C_VW_Autowerk.jpg" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
IBM-360</div>
<br />
For the purity I do not cover all computers and electronic devices that were produced by the Kazan computer factory. It is clear that engineers did very good job and made very good and competitive computers, often patching and extending existed models. The factory holds lots of top Soviet awards for its production. It seems unbelievable, but the quality of computers was so good, that some of them still are in use in Russian military agency. The products was used in all Soviet space centres and exported to India, Check Republic, Poland, Bulgaria, Hungary, Mongolia. Thus, even now it is quite possible to meet one of these old workers in real life applications.<br />
<br />
Later the factory was merged with the famous UK company ICL. Now it is part of Fujitsu companies.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNsfBuXJeJMh0YPqvaodGyF5zGAVqlRVIDjbM1pQRfwVH3hLXdJ2Dhm4Wk80pA5OUCyVaOfWMh7Xg0UPL0IroxjMW_lE6txvy3KZkc9FlSUc3IY08A4VctjhjWl7QBspaLWFoR1L6qZP8/s1600/20160519_110344.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNsfBuXJeJMh0YPqvaodGyF5zGAVqlRVIDjbM1pQRfwVH3hLXdJ2Dhm4Wk80pA5OUCyVaOfWMh7Xg0UPL0IroxjMW_lE6txvy3KZkc9FlSUc3IY08A4VctjhjWl7QBspaLWFoR1L6qZP8/s400/20160519_110344.jpg" width="225" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Modern awards from Russian government.</div>
<div class="separator" style="clear: both; text-align: center;">
On the left side the knight is the present from Kaspersky Antivirus for its partnership.</div>
<br />
<br />
P.S. I am very thankful to Margarita Badrutdinova for the personal lecture and the book about Kazan computer history. You can reach this small but valuable museum at Sibirskiy trakt Street, 34, Kazan city, Russia.<br />
<br />
<br />
Sources (in Russian and English):<br />
<br />
M. Badrutdinova, The Kazan computer factory, 2004, ISBN5-9222-0091-7<br />
<br />
Kazan computer museum <a href="http://kazan-computer-museum.blogspot.ru/">http://kazan-computer-museum.blogspot.ru/</a><br />
<br />
M. Badrutdinova and <a href="http://www.retrotexnika.ru/">retrotexnika.ru</a>, "Our answer to Steve Jobs and Bill Gates. The development of electronic engineering in USSR" <a href="https://www.youtube.com/watch?v=_9cr4dQPoa8">https://www.youtube.com/watch?v=_9cr4dQPoa8</a><br />
<br />
Setun emulator <a href="http://trinary.ru/projects/setunws/">http://trinary.ru/projects/setunws/</a><br />
<br />
Nairi: triumph and drama <a href="http://lebed.com/2003/art3598.htm">http://lebed.com/2003/art3598.htm</a><br />
<br />
Universal systems ES-series <a href="https://www.youtube.com/watch?v=Yy2unObU8x8">https://www.youtube.com/watch?v=Yy2unObU8x8</a><br />
<br />
Virtual Russian computer museum <a href="http://www.computer-museum.ru/">http://www.computer-museum.ru/</a><br />
<br />
Virtual Ukrainian computer museum <a href="http://www.icfcst.kiev.ua/MUSEUM/museum-map_r.html">http://www.icfcst.kiev.ua/MUSEUM/museum-map_r.html</a><br />
<br />
ICL <a href="http://www.icl.ru/">http://www.icl.ru/</a><br />
<br />Anonymoushttp://www.blogger.com/profile/06210096552313954236noreply@blogger.com0tag:blogger.com,1999:blog-6501447087015171593.post-38766989483423203702016-04-29T05:06:00.000-07:002016-08-21T02:57:18.398-07:00The lifespan of a career as a programmerIn an IT area I often meet a common belief that a programmer should after all become a manger or at least a leading consultant without touching code. This opinion does not give any chance to a hans-on old person and a 50 years old programmer can be regarded as a shame.<br />
<br />
The good example against such received thoughts is <a href="http://news.microsoft.com/features/the-engineers-engineer-computer-industry-luminaries-salute-dave-cutlers-five-decade-long-quest-for-quality/#sm.0000063j8aef2eocsll1okvl2ttt0" target="_blank">Dave Cutler</a>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/J2GV_bCfnCw/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/J2GV_bCfnCw?feature=player_embedded" width="320"></iframe></div>
Anonymoushttp://www.blogger.com/profile/06210096552313954236noreply@blogger.com2tag:blogger.com,1999:blog-6501447087015171593.post-781190582025780832015-08-16T04:40:00.000-07:002018-02-23T13:54:58.444-08:00Async await ideaIn simple words .NET <b>async</b> <b>await</b> syntactic sugar helps to reduce limited resources usage.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5fUq4INMuKDD-C8aKr7rxmHZvLPDJFFEbemWhgtvzne5I1d59xVs9N04GBSVO7BCYTAO5l1OX15nmBbdvvUrBkaGCn9s7PLL8SKxrSWY_319yVvShjB7cvgzK4hGp7aGaiio3kJG2wSc/s1600/AsyncAwait.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="562" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5fUq4INMuKDD-C8aKr7rxmHZvLPDJFFEbemWhgtvzne5I1d59xVs9N04GBSVO7BCYTAO5l1OX15nmBbdvvUrBkaGCn9s7PLL8SKxrSWY_319yVvShjB7cvgzK4hGp7aGaiio3kJG2wSc/s640/AsyncAwait.png" width="640" /></a></div>
<br />
Usually, UI thread in WPF and WinForms is the only one thread that can modify UI objects. If we use UI thread for a long-running task, the user will see <b>freezing</b> window. Same is relevant to ASP.NET ThreadPool, which has the limited number of threads to process requests. <b>Async</b> <b>Await</b> syntax helps to minimise usage of these resources.<br />
<br />
If there is no need to switch back to initial context, you can continue operations on newly created thread (AsyncOperation) by using<br />
<i>ConfigureAwait(false)</i><br />
<br />
<br />
Recommend to watch Microsoft videos <a href="https://channel9.msdn.com/Series/Three-Essential-Tips-for-Async" target="_blank">Essential Tips for Async</a><br />
<br />Anonymoushttp://www.blogger.com/profile/06210096552313954236noreply@blogger.com0tag:blogger.com,1999:blog-6501447087015171593.post-77942135454746116002015-07-13T04:31:00.003-07:002015-07-13T05:23:06.852-07:00Public and private life keyIn the dream there was an answer on private and public behaviours that I understood long time ago, but could not explain in a simple form. Accidentally the explanation appeared in amusing form.<br />
<br />
Cryptography has the concept of Public/Private keys. And we are holding them in our life:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhnM5ZGSdXNlSZBFl0WnaQ21t_65rI-JM6mdeCaCSoOornkRojyEvS8iIGgLt6hJ5GOUVxm1nY1iwlX81NfENuhMFmCAqkRqgHuGbx-IHVTG0lpSHZnx6RZnvrDBlxm850IUIU6rCusJc/s1600/public_private_key_life.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="195" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhnM5ZGSdXNlSZBFl0WnaQ21t_65rI-JM6mdeCaCSoOornkRojyEvS8iIGgLt6hJ5GOUVxm1nY1iwlX81NfENuhMFmCAqkRqgHuGbx-IHVTG0lpSHZnx6RZnvrDBlxm850IUIU6rCusJc/s640/public_private_key_life.png" width="640" /></a></div>
<br />
<b>Rule 1</b><br />
<i><span style="color: #674ea7;">One cannot know private life key when taking a public key.</span></i><br />
<i><span style="color: #674ea7;"><br /></span></i>
One of the nature part that people are hiding from society is a sexual (animal) behaviour, the problem is that it goes in thousands of years in the human history and so takes wide range of private key.<br />
Possibly you dated partner, who is humble in public, but is crazy and hot in private life.<br />
Go to another side.<br />
Chaplin is still a famous comedian, most people think about him as a good and handsome man, but in real life he had relationship mostly with girls and young ladies, and changed them like <a href="http://www.dailymail.co.uk/news/article-2597412/2-000-lovers-comedy-genius-didnt-like-women-New-book-reveals-Charlie-Chaplins-obsession-young-girls-cruelly-treated-them.html" target="_blank">gloves</a>. His last wife were only 18 and he was 54 when they were married. Or Einstein who married his <a href="http://www.indiatimes.com/science-and-environment/einsteins-weird-sex-life-21200.html" target="_blank">own cousin</a>. People usually shocked when their lovely and polite neighbour becomes a maniac, these stories appear periodically in the news (<a href="http://www.telegraph.co.uk/news/worldnews/europe/austria/4903442/Josef-Fritzl-was-ignored-by-neighbours.html" target="_blank">Fritzl</a>, <a href="https://en.wikipedia.org/wiki/Gary_Ridgway" target="_blank">Ridgway</a>, <a href="https://en.wikipedia.org/wiki/Harold_Shipman" target="_blank">Dr Harold Shipman</a>). Or just look at <a href="https://en.wikipedia.org/wiki/Stanford_prison_experiment" target="_blank">Standard prison experiment</a>, the base for Das Experiment movie.<br />
<br />
Take another example, Walt Disney was scared of mice and he is the creator of Micky Mouse.<br />
<br />
I believe you have good examples of quiet and ordinary colleagues who are amazing fathers and mothers in their private life.<br />
<br />
<b>Rule 2</b><br />
<i><span style="color: #674ea7;">Life keys are too wide and some cannot guess value with extrapolation.</span></i><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz3PTTn0RPHqNQQn8xRiYarLp8cvrsEL5RwknuWxh5QFCuQia7nTXyU4vmedxnwtDzx3VHjIo-SWV0kg4kMv92D6ZnTUe_KH_S1AErloLRd9gvrwUUpc9oPU8tPIbBhuSDxnh8XzA1HoM/s1600/pattern_key.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="186" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz3PTTn0RPHqNQQn8xRiYarLp8cvrsEL5RwknuWxh5QFCuQia7nTXyU4vmedxnwtDzx3VHjIo-SWV0kg4kMv92D6ZnTUe_KH_S1AErloLRd9gvrwUUpc9oPU8tPIbBhuSDxnh8XzA1HoM/s200/pattern_key.png" width="200" /></a></div>
<i><span style="color: #674ea7;"><br /></span></i>
<i><span style="color: #674ea7;"><br /></span></i>
You meet a girl in a party and she recognises pattern of your public key "he knows computer science", and next question is what? Right, "can you hack Google/Yahoo/Favourite site", or "can you repair my laptop/phone".<br />
Or those surprised faces in work parties when people become to know each other a bit closer: "She is boxing and having professional skiing, wow, but she is so small and kind of quiet mice in the office, impossible", or "our brutal Mark is taking drawing lessons after work, girls, can you believe?".<br />
Expectation of repeating same pattern in other parts of the key does not work and often reveals a surprise.<br />
<br />
<br />
Guess the authors of the pantings:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfNxRS6Y1PILjsPnBPBy1Gc5Xivhm9xS53AKoQ3i5YM-itA013nR8sjt2Ni8euTpEKNxxmPoKe-3hg9Me0SmuWput6kKAmUDFWcEnd4Q6kVtBSiGjahfzbX39JS6wi5srJyc0a93PiFrs/s1600/building4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="464" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfNxRS6Y1PILjsPnBPBy1Gc5Xivhm9xS53AKoQ3i5YM-itA013nR8sjt2Ni8euTpEKNxxmPoKe-3hg9Me0SmuWput6kKAmUDFWcEnd4Q6kVtBSiGjahfzbX39JS6wi5srJyc0a93PiFrs/s640/building4.jpg" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3TqrPx1z0yDR2_Ln6IP_D74iez7hzV7xaXm30Gfx8wze1J6ozgQXF59LoxyZkSBc2mmRKZSOKAfzaC5lru_bgxRUKjsfNGwMGxmC3UWI271M0sAGvjFIemKTp1w5EbqBf8QsF9fImY8I/s1600/dog2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3TqrPx1z0yDR2_Ln6IP_D74iez7hzV7xaXm30Gfx8wze1J6ozgQXF59LoxyZkSBc2mmRKZSOKAfzaC5lru_bgxRUKjsfNGwMGxmC3UWI271M0sAGvjFIemKTp1w5EbqBf8QsF9fImY8I/s400/dog2.jpg" width="365" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC9zLMsRdraH2_MB0uFeVc6z72M70pjyKdPQC6JOk4VZRHutBEIQgAPSLdZbxvE2KuSOxpa8UXldXSLwdfPlzNjoFYwtBqSJSYjqCCURlwtPTystrddLhluaoIjr5a9ZDLwHV80RfXlBM/s1600/painting_3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="544" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC9zLMsRdraH2_MB0uFeVc6z72M70pjyKdPQC6JOk4VZRHutBEIQgAPSLdZbxvE2KuSOxpa8UXldXSLwdfPlzNjoFYwtBqSJSYjqCCURlwtPTystrddLhluaoIjr5a9ZDLwHV80RfXlBM/s640/painting_3.jpg" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
The first and the second are painted by [<span style="color: white;">Hitler</span>], and the third is done by [<span style="color: white;">Churchill</span>].<br />
<span style="color: #999999;">Hint: to see the answer select the white part in [].</span><br />
<span style="color: #999999;"><br /></span>
<span style="color: #999999;">---</span><br />
Good to see your positive stories of the rules in comments.Anonymoushttp://www.blogger.com/profile/06210096552313954236noreply@blogger.com1tag:blogger.com,1999:blog-6501447087015171593.post-79588423107263345522015-06-29T01:24:00.002-07:002015-06-29T01:24:59.412-07:00ADO.NET Dataset MS SQL procedure: Invalid object name #TempTable<div dir="ltr" style="text-align: left;" trbidi="on">
This is commonly known error, but if you try to google it then hardly you will find immediately result. Hope this page will have better index in search engine.<br /><br />So you create procedure in MS SQL with temporary table, e.g.:<br /><br />
<br />
<div class="p1">
CREATE<span class="s1"> </span>PROCEDURE<span class="s1"> my_proc</span></div>
<div class="p1">
AS</div>
<div class="p1">
BEGIN</div>
<div class="p2">
<span class="s2">create</span> <span class="s2">table</span> #TempTable<span class="s3">(</span>ID <span class="s2">int</span><span class="s3">)</span></div>
<div class="p3">
</div>
<div class="p4">
<span class="s1"> </span>-- insert, select data, etc</div>
<div class="p3">
<br /></div>
<div class="p2">
<span class="s2">return</span> <span class="s2">select</span> <span class="s3">*</span> <span class="s2">from</span> #TempTable </div>
<br />
<div class="p1">
END</div>
<br />An attempt to add tableAdapter in DataSet will show error:
<!--StartFragment--><span style="background-color: #fcfcff; color: #141414; font-family: 'open sans', sans-serif, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 19.6000003814697px;">Invalid object name '#MyTempTable'.</span><!--EndFragment--> <br /><br />The solution is to come around ADO.NET with <a href="https://msdn.microsoft.com/en-us/library/ms173839.aspx" target="_blank">FMTONLY</a> statement, it does not allow to run procedure. Adding IF 1= 0 will not run inside MS SQL, but will run on ADO.NET request.<br /><br />
<br />
<div class="p1">
CREATE<span class="s1"> </span>PROCEDURE<span class="s1"> my_proc</span></div>
<div class="p1">
AS</div>
<div class="p1">
BEGIN</div>
<span class="s1" style="color: #38761d;">IF</span><span class="s2" style="color: #38761d;"> 1</span><span class="s3" style="color: #38761d;">=</span><span class="s2"><span style="color: #38761d;">0 </span><span style="color: orange;"> </span></span><span style="color: orange;">-- hint for ADO.NET</span><br />
<div class="p2">
<span style="color: #38761d;"><span class="s2"> </span>BEGIN</span></div>
<div class="p2">
<span style="color: #38761d;"><span class="s2"> </span>SET<span class="s2"> </span>FMTONLY<span class="s2"> </span>OFF</span></div>
<div class="p2">
<span style="color: #38761d;"><span class="s2"> </span>END</span></div>
<div class="p2">
<span class="s2">create</span> <span class="s2">table</span> #TempTable<span class="s3">(</span>ID <span class="s2">int</span><span class="s3">)</span></div>
<div class="p3">
</div>
<div class="p4">
<span class="s1"> </span>-- insert, select data, etc</div>
<div class="p3">
<br /></div>
<div class="p2">
<span class="s2">return</span> <span class="s2">select</span> <span class="s3">*</span> <span class="s2">from</span> #TempTable </div>
<br />
<div class="p1">
END<br /></div>
<br /></div>
Anonymoushttp://www.blogger.com/profile/06210096552313954236noreply@blogger.com0tag:blogger.com,1999:blog-6501447087015171593.post-74002824769478169452015-06-27T21:07:00.002-07:002016-08-21T02:36:40.145-07:00Universal web code | Part 1<div dir="ltr" style="text-align: left;" trbidi="on">
This article illuminates modern tendencies in creation of universal web assembly code. Java-Script seems to be a winner in a Web rivalry with values of popularity, simplicity and universality nowadays. <br />
<br />
<span style="color: #0b5394;"><b>HOW IS JAVA-SCRIPT GOOD</b></span><br />
<br />
Douglas Crockford, famous Java-Script community contributor, in <a href="http://yuiblog.com/blog/2010/02/03/video-crockonjs-1/" target="_blank">one</a> of his presentations takes fun on the history of staging Java-Script, it is worth to see. The language itself has its own style, known as "Sex & Drugs & Rock & Roll": do some magic as you want, but be very, very cautious (more at <a href="http://blog.mgechev.com/2013/02/22/javascript-the-weird-parts/" target="_blank">weird syntax</a> and <a href="http://www.crockford.com/javascript/inheritance.html" target="_blank">dynamic nature</a>)<br />
<br />
<pre class="default prettyprint prettyprinted" style="background-color: #eeeeee; border: 0px; font-family: Consolas, Menlo, Monaco, 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace, sans-serif; font-size: 13px; margin-bottom: 1em; max-height: 600px; overflow: auto; padding: 5px; width: auto; word-wrap: normal;"><code style="border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border: 0px; font-family: Consolas, Menlo, Monaco, 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace, sans-serif; margin: 0px; padding: 0px; white-space: inherit;"><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;">alert</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">(</span><span class="str" style="border: 0px; color: maroon; margin: 0px; padding: 0px;">''</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;"> </span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">==</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;"> </span><span class="str" style="border: 0px; color: maroon; margin: 0px; padding: 0px;">'0'</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">);</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;"> </span><span class="com" style="border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border: 0px; color: grey; margin: 0px; padding: 0px;">//false</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;">
alert</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">(</span><span class="lit" style="border: 0px; color: maroon; margin: 0px; padding: 0px;">0</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;"> </span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">==</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;"> </span><span class="str" style="border: 0px; color: maroon; margin: 0px; padding: 0px;">''</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">);</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;"> </span><span class="com" style="border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border: 0px; color: grey; margin: 0px; padding: 0px;">// true</span><span class="pln" style="border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border: 0px; margin: 0px; padding: 0px;">
</span></code><span class="pln" style="border: 0px; color: #393318; margin: 0px; padding: 0px; white-space: inherit;">alert</span><span class="pun" style="border: 0px; color: #393318; margin: 0px; padding: 0px; white-space: inherit;">(</span><span class="lit" style="border: 0px; color: maroon; margin: 0px; padding: 0px; white-space: inherit;">0</span><span class="pln" style="border: 0px; color: #393318; margin: 0px; padding: 0px; white-space: inherit;"> </span><span class="pun" style="border: 0px; color: #393318; margin: 0px; padding: 0px; white-space: inherit;">==</span><span class="str" style="border: 0px; color: maroon; margin: 0px; padding: 0px; white-space: inherit;">'0'</span><span class="pun" style="border: 0px; color: #393318; margin: 0px; padding: 0px; white-space: inherit;">);</span><span class="pln" style="border: 0px; color: #393318; margin: 0px; padding: 0px; white-space: inherit;"> </span><span class="com" style="border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border: 0px; color: grey; margin: 0px; padding: 0px; white-space: inherit;">// true</span><span style="background-color: transparent; color: #393318;"> </span></pre>
Browsers (written C++) parse Java-Script code and try their best to emit machine commands. Their best were not so good for a decade, and Java-Script has a reputation as very, very slow language (though the problem is not only in the language itself).<br />
<br />
<div class="separator" style="clear: both; text-align: justify;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXuxkeoo0J1Z7La7a2P-uvS9p0vRwPcP_u9h0vRx0CCBBOSh4oCIuoQ1razU4W3a_m6RnlqCdAjUlprATvxhX0RcoG0rDzphFgWZirvyed8qVWRF2tpn6F_6OhAspWoHjKG2LLSBHqaK4/s1600/Chrome-V81.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXuxkeoo0J1Z7La7a2P-uvS9p0vRwPcP_u9h0vRx0CCBBOSh4oCIuoQ1razU4W3a_m6RnlqCdAjUlprATvxhX0RcoG0rDzphFgWZirvyed8qVWRF2tpn6F_6OhAspWoHjKG2LLSBHqaK4/s1600/Chrome-V81.jpg" /></a></div>
Lars Bak made a revolution in 2012 for Google Chrome V8 engine. He applied an idea of JIT compilation to the browser. This is very similar to Java and to .NET engines workflow, or in simplified form:<br />
Parse java-script -> Abstract Syntax Tree -> ByteCode [Compile time] -> JIT [Execution time]-> Machine Code.<br />
Optimisation in byte code step and machine code step drastically increased performance.<br />
The same approach were taken by other browser vendors: Firefox with TraceMonkey, Safari with Nitro engine and Microsoft with JScript engine (now Chakra).<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirytfiOhujHa4R_ME033YQM7o1bBeHtHXqxQITorj2MsNRXeN5dc1e3rgAT2evYG85hAyIstJOJOtsMmjduLMSLAoZy0qErwI1-pBym9G5c4OYpwIc4HjzsdZW1QBczAtqfVt8n2iuuLo/s1600/V8_scheme.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="265" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirytfiOhujHa4R_ME033YQM7o1bBeHtHXqxQITorj2MsNRXeN5dc1e3rgAT2evYG85hAyIstJOJOtsMmjduLMSLAoZy0qErwI1-pBym9G5c4OYpwIc4HjzsdZW1QBczAtqfVt8n2iuuLo/s640/V8_scheme.png" width="640" /></a></div>
<br />
Alright, now we have the universal programming language with a good performance, hooray. Hold your horses, there is another problem with performance, it is much better now but still 10x's times slower in comparison to a native client code.<br />
<br />
<b><span style="color: #0b5394;">BAILOUT</span></b><br />
Web browser engines have a problem in optimisation of Java-Script due to its dynamism.<br />
Engine prepares batch of instruction for a processor at byte code compilation. Then at execution time (running JIT) it checks how good was prediction, if there is a change then engine should invalidate command tree and start process again. The invalidation problem is called "bailout". For example engines do not optimise part that has <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/with" target="_blank">with()</a> statement.<br />
<br />
<pre style="background-color: #f7f7f7; border-radius: 3px; box-sizing: border-box; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 13.6000003814697px; font-stretch: normal; line-height: 1.45; overflow: auto; padding: 16px; word-break: normal; word-wrap: normal;"><span style="color: #333333;"><span class="pl-k" style="box-sizing: border-box; color: #a71d5d;">function</span> <span class="pl-en" style="box-sizing: border-box; color: #795da3;">containsWith</span>() {
<span class="pl-k" style="box-sizing: border-box; color: #a71d5d;">return</span> </span><span style="color: #0086b3;">0</span><span style="color: #333333;">;
</span><span class="pl-k" style="box-sizing: border-box; color: #a71d5d;">with</span><span style="color: #333333;">({}) {}
}</span></pre>
<br />
<br />
<span style="color: #0b5394;"><b>ASM.JS</b></span><br />
<br />
David Herman (Senior Researcher at Mozilla Research) has been contributing to <a href="https://github.com/dherman/asm.js/" target="_blank">asm.js</a> project. Firefox team had an <a href="http://asmjs.org/spec/latest/" target="_blank">idea</a> to make a restricted subset of Java-Script that provides only strictly-typed integers, floats, arithmetic, function calls, and heap accesses. This approach is closer to C/C++ programming and when browser meets ams.js hint the engine can better optimise code and finally get less bailouts.<br />
The idea of transferring "favourite" language to Java-Script is not new itself, Microsoft started conversion of .NET code to JS in ASP.NET classic with ViewStates and Google developer has <a href="https://github.com/nikhilk/scriptsharp" target="_blank">ScriptSharp</a> project, Google converts Java to JS with <a href="http://www.gwtproject.org/" target="_blank">GWT</a> , Python has <a href="http://pyjs.org/" target="_blank">PyJs project</a>. The difference in universality, asm.js is purposed to be universal assembly alike language.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPbt8swnts2Kf6wjIab1vD33hzzVe-UQdLZQt8jqCifXkQJBRjdks1yNyC5gEiUeWU_Cysze2sUL5HG5lIFYjBsOqHOHn8nrMHN6cNg2rGibkwsljG3lA3jNLarY5bAkyNUrGQGhrzGUE/s1600/asm.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="424" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPbt8swnts2Kf6wjIab1vD33hzzVe-UQdLZQt8jqCifXkQJBRjdks1yNyC5gEiUeWU_Cysze2sUL5HG5lIFYjBsOqHOHn8nrMHN6cNg2rGibkwsljG3lA3jNLarY5bAkyNUrGQGhrzGUE/s640/asm.PNG" width="640" /></a></div>
<br />
At first step you can write code in statically-typed variant (C/C++/Objective C/Java/C#, ...), then transmit it to optimised byte code with <a href="http://llvm.org/" target="_blank">LLVM</a>, and finally to asm.js with Emscripten.<br />
Where is a gain? LLVM is a project since 2000 that does excellent job in the optimisation of statically-typed languages into a low-level byte code. For example we can get C++ code, transfer it to the mentioned pipeline and at the end get Java-Script code in a kind of optimised assembler style. <br />
Of course there are limitations and you cannot call special OS functions in an optimised way. Currently only value-type manipulations (integer, float, etc) with standard Math library are supported, external function calls and heap access.<br />
<br />
<b>Example</b><br />
As a hint to an engine about optimised function there be a "use asm;" line, the hint itself is a <a href="http://ecma-international.org/ecma-262/5.1/#sec-14.1" target="_blank">prologue directive</a>.<br />
<br />
<pre class="language-javascript hljs " style="background: rgb(248, 248, 248); font-family: monospace, 'Droid Sans Fallback', sans-serif; line-height: 21.6000003814697px; margin-left: 2em; overflow-x: auto; padding: 0.5em; white-space: pre-wrap;"><span class="hljs-function" style="color: #333333;"><span class="hljs-keyword" style="font-weight: bold;">function</span> <span class="hljs-title" style="color: #990000; font-weight: bold;">Module</span><span class="hljs-params">(stdlib, foreign, heap)</span> </span><span style="color: #333333;">{
</span><span class="hljs-string" style="color: #dd1144;">"use asm"</span><span style="color: #333333;">;
</span><span class="hljs-comment"><span style="color: #999988;"><i>// module body
</i></span><pre class="language-javascript hljs " style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-family: monospace, 'Droid Sans Fallback', sans-serif; line-height: 21.6000003814697px; margin-left: 2em; overflow-x: auto; padding: 0.5em; white-space: pre-wrap;"><span class="hljs-function" style="color: #333333; font-style: normal;"><span class="hljs-keyword" style="font-weight: bold;">function</span> <span class="hljs-title" style="color: #990000; font-weight: bold;">NativelyFastCalculation</span></span><span style="line-height: 21.6000003814697px;"><i>(habraHugs)
{
</i></span><span style="line-height: 21.6000003814697px;"><i> </i></span><span style="color: #333333; font-style: normal; line-height: 21.6000003814697px;">return stdlib.Math.sqrt(habraHugs);
}</span></pre>
</span></pre>
<pre class="language-javascript hljs " style="background: rgb(248, 248, 248); font-family: monospace, 'Droid Sans Fallback', sans-serif; line-height: 21.6000003814697px; margin-left: 2em; overflow-x: auto; padding: 0.5em; white-space: pre-wrap;"> return { module: <span style="line-height: 21.6000003814697px;">module</span><span style="line-height: 21.6000003814697px;"> };</span></pre>
<pre class="language-javascript hljs " style="background: rgb(248, 248, 248); font-family: monospace, 'Droid Sans Fallback', sans-serif; line-height: 21.6000003814697px; margin-left: 2em; overflow-x: auto; padding: 0.5em; white-space: pre-wrap;">}</pre>
<br />
Then we can call our optimised function from any part of a usual non-optimised Java-Script code.<br />
<br />
One of the areas with enormous structure manipulations is 3d calculation. Epic games and Mozilla converted 1 million lines of Unreal engine to Java-Script with asm.js and were able to get good performance:<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/XsyogXtyU9o/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/XsyogXtyU9o?feature=player_embedded" width="320"></iframe></div>
<br />
Bananabread (<a href="https://developer.mozilla.org/en-US/demos/detail/bananabread" target="_blank">demo</a>) is another example of conversion Cube 2 engine, written in C++ and OpenGL, to Java-Script. <br />
<br />
Current asm.js has draft version and is a subset of ECMAScript 6. So only browser supporting ES6 has full support of asm.js. In general vendors started experimenting with the subset a while ago. Mozilla was the first with Firefox 22, Chrome added special support in version 28, and recently Microsoft lined up with Chakra/Spartan. Within each version vendors provide better optimisation, e.g. usage of <a href="https://en.wikipedia.org/wiki/Ahead-of-time_compilation" target="_blank">ahead-of-time compilation</a>.<br />
<br />
<b><span style="color: #0b5394;">ASM.JS RESUME</span></b><br />
Firefox presented asm.js with<br />
<br />
<ul style="text-align: left;">
<li>Cross platform<br /><i>Already supported by all modern browsers, which is rare in the history. Architecture independent (ARM, x86, x64).</i></li>
<li>Performance<br /><i>The data differs from vendor to vendor and the reports show 75% to 10% of native client performance.</i></li>
<li>Partial backward compatibility<br /><i>If you do not use new features from EcmaScript6 (e.g. Typed arrays) then old browsers automatically support asm.js </i></li>
<li>Minimised (non readable) code<br /><i>Users care about speed and do not care about page source code. Dear readers with a doubt, just view the source in Google and Facebook site.<br />Now debugging is a problem, but can be solved in future with debugger symbol mapping.</i></li>
<li>Conversion from other languages through LLVM (C/C++/Java/C#/...)</li>
<li>Limited types <br /><i>Now only value types and operations on typed arrays.</i> <i>And you cannot manipulate DOM. However t</i><i>here are <a href="http://calculist.org/" target="_blank">plans</a> for extension.</i> </li>
</ul>
<div>
At present project has a very good start, the future will show us result.<br />
<br />
It is worth to mention <a href="http://mbebenita.github.io/LLJS/" target="_blank">Low Level Java-Script</a> project, which seems ideal for integration into asm.js, and possibly Mozilla team will do it.<br />
<br />
In further parts we will see Google idea with Dart project, and then new web byte code library by popular browser vendors.</div>
</div>
Anonymoushttp://www.blogger.com/profile/06210096552313954236noreply@blogger.com0tag:blogger.com,1999:blog-6501447087015171593.post-23326490169078942332015-01-24T13:15:00.000-08:002015-01-24T13:15:04.884-08:00Covariance Contravariance C# simple example<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: left;">
In .NET 4.0 Microsoft presented covariance (<b>out</b>) and contravarince (<b>in</b>). Next image shows simple class hierarchy:</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRcySgTpWaQdq4Wtr07HwPWWx1C6OxBDTBbMpOe8QhSjnIzA5MZ4KSdJZfP0reFgCk8cp5NFMA061EYeLs0rMFW93BskXwPVczbA-Y2RBlKfmoUhBvao3FKo5yMiGYXHylKhMyjRYua54/s1600/animals_diagram.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRcySgTpWaQdq4Wtr07HwPWWx1C6OxBDTBbMpOe8QhSjnIzA5MZ4KSdJZfP0reFgCk8cp5NFMA061EYeLs0rMFW93BskXwPVczbA-Y2RBlKfmoUhBvao3FKo5yMiGYXHylKhMyjRYua54/s1600/animals_diagram.PNG" height="320" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
Imagine there is a need of animal container class that can only return data<br />
<pre class="prettyprint">interface IAnimalHub<T>
where T: Animal
{
T GetAnimal();
}
</pre>
We can declare and work with animal hub type as<br />
<pre class="prettyprint"> IAnimalHub<<b>Animal</b>> hub1 = new AnimalHub<<b>Animal</b>>();
</pre>
<br />
Can we generalise left part or, in other word, <b>downgrade type</b><br />
<pre class="prettyprint"> IAnimalHub<<b>Animal</b>> hub2 = new AnimalHub<<b>Lion</b>>();
IAnimalHub<<b>Animal</b>> hub3 = new AnimalHub<<b>Cat</b>>();
</pre>
<br />
Definitely it is possible, because we are going only to take out data and work with it, whether it is Lion or Cat. This idea is called <i>covariance </i>and can be done with <i>out</i> keyword in C#:<br />
<pre class="prettyprint">interface IAnimalHub<<b>out T</b>>
where T: Animal
{
T GetAnimal();
}
</pre>
<br />
Now what if we have Add method with some animal argument in addition to our Get method<br />
<pre class="prettyprint">interface IAnimalHub<<b>out T</b>>
where T: Animal
{
T GetAnimal();
void Add(T animal);
}
</pre>
</div>
<br />
Should it work?<br />
No! And the reason is that otherwise it would be possible to do<br />
<pre class="prettyprint">IAnimalHub<Lion> hub = new AnimalHub<Lion>();
var dog = new Dog();
hub.Add(dog);
</pre>
<br />
So one cannot expect possibility to Add dog while waiting Lion object. It means covariance works only with returning data (out).<br />
<br />
<h3 style="text-align: left;">
<span style="font-weight: normal;">What about <i>contrvarience</i>?</span></h3>
As the word says this works in the opposite to covariance. Contrvariance expects only methods where one can put/write/insert data. In C# this is presented with <b>in</b> keyword. Consider only Add method in our interface:<br />
<pre class="prettyprint"> interface IAnimalHub<<b>in T</b>>
where T: Animal
{
void Add(T animal);
}
</pre>
<br />
Now we can do the opposite<br />
<pre class="prettyprint">
IAnimalHub<Animal> hub1 = new AnimalHub<Animal>();
IAnimalHub<<b>Lion</b>> hub2 = new AnimalHub<<b>Animal</b>>();
IAnimalHub<<b>Cat</b>> hub3 = new AnimalHub<<b>Animal</b>>();
IAnimalHub<<b>Dog</b>> hub4 = new AnimalHub<<b>Animal</b>>();
</pre>
<br />
In other words we can put Lion, Cat or Dog object where we expect Animal.<br />
<br />
<h3 style="text-align: left;">
<span style="font-weight: normal;">Limitations</span></h3>
Covariance and contrvariance can be declared only in the interface or delegate, not class. Generic parameter can be only reference type, not value type.<br />
<h3 style="text-align: left;">
<span style="font-weight: normal;">Examples</span> </h3>
In .NET IEnumerable<T> only returns data, so it is created as covariant IEnumerable<out T> in version 4 of the framework. And we simply can do <br />
<pre class="prettyprint"><b>Animal</b>[] animals = new <b>Lion</b>[0];
<b>Animal</b>[] animals = new <b>Cat</b>[0];
IEnumerable<b><Animal></b> animals = new <b>Lion</b>[0];
IEnumerable<b><Animal></b> animals = new <b>Cat</b>[0];
</pre>
<br />
<br />
<br /></div>
mighty-whityhttp://www.blogger.com/profile/08022031113243464793noreply@blogger.com17tag:blogger.com,1999:blog-6501447087015171593.post-48825569445424071972014-11-25T10:08:00.001-08:002015-06-26T17:23:28.172-07:00Have a check list before being catch up <div dir="ltr" style="text-align: left;" trbidi="on">
Here is a small history of subtle points with hosting from my experience.<br />
<br />
<div class="separator" style="clear: both; text-align: left;">
<a href="http://cloudproxy.sucuri.net/images/wordpress.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://cloudproxy.sucuri.net/images/wordpress.jpg" height="106" width="320" /></a></div>
<br />
One of our clients asked us at HighRobotics to redesign Wordpress site. We designed it and then started the creation of a theme. It is done with mix of PHP, javascript and CSS. Everything was going good till once I made an error in PHP code, while moving the code and updating the live site!<br />
Whole site was crashed, so there was no possibility even to login in WP administration panel.<br />
It can be simply fixed with changing code in corrupted PHP file.<br />
The customer was not remember where the site was hosted and thought that Wordpress.com was used for hosting. <br />
What was my surprise when I found that Wordpress.com does not support file access. At all!<br />
<br />
It means that any small error on PHP and <a href="http://en.support.wordpress.com/com-vs-org/" target="_blank">bye-bye to site</a>!<br />
<br />
Gladly customer uses Wordpress on another hosting and error was immediately fixed.<br />
<br />
<div class="separator" style="clear: both; text-align: left;">
<a href="http://faisal.comoj.com/images/bloguseimages/mochahost.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://faisal.comoj.com/images/bloguseimages/mochahost.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
Mochahost is a cheap hosting company that we are using for our site. It costs for us only 250$ a year. However sometimes technical people can just stop the site for a day without any informing. Other point is that it is written on 50s page of there help that they do not responsible for site backup. There were some technical issues and they just deleted all files for the site (not with us)! You can find hundreds of this stories in the internet. So if you do not making DB and files backup you can say bye-bye to your business site.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Check important points before making agreement with company, even if it has good reviews.</div>
<br /></div>
mighty-whityhttp://www.blogger.com/profile/08022031113243464793noreply@blogger.com47tag:blogger.com,1999:blog-6501447087015171593.post-58729587305791350172014-10-26T12:56:00.002-07:002014-11-08T01:01:03.735-08:00SVG fallback pure CSS: Can I use Part 5<div dir="ltr" style="text-align: left;" trbidi="on">
Previous: <a href="http://developersdev.blogspot.ru/2014/10/external-svg-can-i-use-part-4.html" target="_blank">External SVG: Can I use Part 4</a><br />
<br />
<br />
SVG is old technology, but there are even older browsers in use that do not support SVG.<br />
The idea of supporting such pure browsers is to provide PNG (JPG or GIF) image in background.<br />
<br />
After making big research the <a href="http://www.kaizou.org/2009/03/inline-svg-fallback/" target="_blank">best solution</a> without using java-script is found with SVG trick:<br />
<ul style="text-align: left;">
<li>switch tag, which takes first supported element</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject" target="_blank">foreignObject</a> tag, that gives ability to insert object from alien namespace</li>
</ul>
<div>
For inline SVG this works as:</div>
<pre class="prettyprint"><svg xmlns="http://www.w3.org/2000/svg" width="40" height="40">
<switch>
<circle cx="20" cy="20" r="18" stroke="grey" stroke-width="2" fill="#99FF66" />
<foreignObject>
<div class="nicolas_cage fallback"></div>
</foreignObject>
</switch>
</svg></pre>
<div>
If browser supports SVG it will take <circle> as first child, otherwise <div class="nicolas_cage fallback"> is shown.<br />
<br />
For external SVG we can use standard object fallback:</div>
<pre class="prettyprint"> <object type="image/svg+xml" data="circle_orange.svg">
<div class="nicolas_cage fallback"></div>
</object></pre>
<br />
And inside <HEAD> just add a class with background image for fallback:<br />
<pre class="prettyprint"> <head>
<style type="text/css">
.nicolas_cage {
background: url('nicolas_cage.jpg');
width: 20px;
height: 15px;
}
.fallback {
}
</style>
</head></pre>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://static2.businessinsider.com/image/509802cb69bedd6209000009/nicolas-cage-will-be-in-the-expendables-3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://static2.businessinsider.com/image/509802cb69bedd6209000009/nicolas-cage-will-be-in-the-expendables-3.jpg" height="240" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="text-align: left;">For "No SVG" Nicolas Cage will show up</span></div>
<br />
The <div> is chosen instead of <img> because <b>image is mostly always downloaded by browsers</b>, though {display: none} is set for <img>.<br />
<br />
However test also showed that <b>IE and Firefox still download background images for <div></b>, while Chrome and Safari works great with it. The twice download problem only occurs with<br />
<pre class="prettyprint"><foreignObject>
<div class="nicolas_cage fallback"></div>
</foreignObject></pre>
and is not a trouble for <object> fallback. At first I tried to set {display: none;} for <fallback> element in <head> style, but Android 2.x and Mobile Safari 4.0.4 parses it as object and hides hole object.<br />
<br />
The solution is to set {display: none; background: none; } for <div>, then IE and Firefox stops download <div> background images. Finally the question appears:<br />
<br />
<i>How can we update <div> for SVG supporting browsers and hide it while leave it unchanged for those browsers that do not support SVG?</i><br />
<br />
One solution is found, though it can not feet for all.<br />
The trick is with ability of SVG to take a style from another SVG object.<br />
<pre class="prettyprint"> <svg id="SVG_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="20" height="20">
<style>
<![CDATA[
.orange {
fill: #FF9900;
}
]]>
</style>
</svg>
<svg id="SVG_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="20" height="20">
<circle cx="10" cy="10" r="8" class="orange" />
</svg></pre>
<br />
SVG_2 takes .orange style from SVG_1 even though they are different objects in one HTML file.<br />
<br />
The solution is to paste special SVG inside <body> element with clear image style:<br />
<pre class="prettyprint">.fallback { background: none; background-image: none; display: none; }</pre>
<br />
And the <a href="http://highrobotics.com/media/context/article/svg_compatability/svg_fallback_test.html" target="_blank">result test page</a>:<br />
<pre class="prettyprint"><!DOCTYPE html>
<html>
<head>
<title>HTML5 SVG demo</title>
<style type="text/css">
.nicolas_cage {
background: url('nicolas_cage.jpg');
width: 20px;
height: 15px;
}
.fallback {
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" style="width:0; height:0; display:0">
<style>
<![CDATA[
.fallback { background: none; background-image: none; display: none; }
]]>
</style>
</svg>
<!-- inline svg -->
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40">
<switch>
<circle cx="20" cy="20" r="18" stroke="grey" stroke-width="2" fill="#99FF66" />
<foreignObject>
<div class="nicolas_cage fallback"></div>
</foreignObject>
</switch>
</svg>
<hr/>
<!-- external svg -->
<object type="image/svg+xml" data="circle_orange.svg">
<div class="nicolas_cage fallback"></div>
</object>
</body>
</html>
</pre>
<br />
Starting tests in different browsers:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWRriS2JHI1o3FKYDOCBq4cZrP2v3m077aQjW3VKPy59dH08V-KINcFHL5023xSb9gvGraMmUNvORlICgpgxLyX1DhTsA-gymO1YbnStf2KROpcF7qGb6zRI8njNjp82PKFl938Xa4XKo/s1600/Screen+Shot+2014-10-26+at+21.09.43.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWRriS2JHI1o3FKYDOCBq4cZrP2v3m077aQjW3VKPy59dH08V-KINcFHL5023xSb9gvGraMmUNvORlICgpgxLyX1DhTsA-gymO1YbnStf2KROpcF7qGb6zRI8njNjp82PKFl938Xa4XKo/s1600/Screen+Shot+2014-10-26+at+21.09.43.png" height="380" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTvk7i_Zq-pPkawkKTOrObknqKGBY8sbQ06iWTGHoCdbE5qUgpt3ZPvRahO_LT7zdcM3ZCAgs8uVro9baMVEJJ7CpS8WtPyc0OrRCjHv2HLfLZ9Dp63ylVMGoRWAmX9vB9Z8MMlRRdDgY/s1600/Screen+Shot+2014-10-26+at+21.09.59.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTvk7i_Zq-pPkawkKTOrObknqKGBY8sbQ06iWTGHoCdbE5qUgpt3ZPvRahO_LT7zdcM3ZCAgs8uVro9baMVEJJ7CpS8WtPyc0OrRCjHv2HLfLZ9Dp63ylVMGoRWAmX9vB9Z8MMlRRdDgY/s1600/Screen+Shot+2014-10-26+at+21.09.59.png" height="220" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
All renders great: small Cage for "No SVG" browsers and circles for those that support SVG.<br />
<br />
<i>What about fallback image downloading for SVG supporting browsers? </i><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7WeUGC02xCXvNb7cg9vc55NdjD61QJqP6Rj7apGS9K89B9eYEoomeOwzcG_18KEMNHaug4zFUeTgp6K-LWJWd-NYpcT4eArfvi88ahyNobIbTAECqFQiB_pKkZYUhyphenhyphen1PGU4zxHbVW9Ds/s1600/Screen+Shot+2014-10-26+at+22.48.31.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7WeUGC02xCXvNb7cg9vc55NdjD61QJqP6Rj7apGS9K89B9eYEoomeOwzcG_18KEMNHaug4zFUeTgp6K-LWJWd-NYpcT4eArfvi88ahyNobIbTAECqFQiB_pKkZYUhyphenhyphen1PGU4zxHbVW9Ds/s1600/Screen+Shot+2014-10-26+at+22.48.31.png" height="308" width="640" /></a></div>
Gladly double downloading does not occur with latest versions of browsers (IE 11, Chrome 38, Safari 8, Firefox 33).<br />
As a plus this solution pushes strong hint to avoid downloading fallback images with <br />
<pre class="prettyprint">.fallback { background: none; background-image: none; display: none; }, </pre>
and it with a high degree will work for new SVG browsers that are hard to test (Kindle, Noble, etc).<br /><br /><br />UPD: eliminated error in CDATA closing tag ]]>, added <i>style="width:0; height:0; display:0" </i>to SVG fallback.</div>
mighty-whityhttp://www.blogger.com/profile/08022031113243464793noreply@blogger.com407tag:blogger.com,1999:blog-6501447087015171593.post-70089657674976032562014-10-25T07:51:00.000-07:002014-10-26T13:03:41.519-07:00External SVG: Can I use Part 4<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
Previous: <a href="http://developersdev.blogspot.ru/2014/10/internal-svg-css-and-can-i-use-part-3.html" target="_blank">Inline SVG, CSS and defs: Can I use Part 3</a><br />
<br />
External SVG file can be included inside HTML with one of the next methods:<br />
<ul style="text-align: left;">
<li><pre class="prettyprint"><object type="image/svg+xml" data="circle_orange.svg" class="blockSize" />
</pre>
</li>
<li><pre class="prettyprint"><img src="circle_orange.svg" class="blockSize" /></pre>
</li>
<li><pre class="prettyprint"><iframe src="circle_orange.svg" class="blockSize" />
</pre>
</li>
<li><pre class="prettyprint"><embed type="image/svg+xml" src="circle_orange.svg" class="blockSize" /></pre>
</li>
<li>CSS background with svg file</li>
</ul>
Each method, except CSS background, is tested for browser support. In addition we investigated CSS support in <head> section of HTML page and style inlining in external SVG file.<br />
<br />
All browsers (except that do not support SVG) showed good results and support external svg referencing.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk_rBCiPA4IOM6BOaOuvgQH2YU07XRSrzUS-nQK_PY5RyVkJ-jYPDr9Y68wpU1V0Zwqn3bUTsuBjVjb_LehpLNdO1kNakVBQ9zucGIoShKzMTWiYpJOkK90eXrhENsClfvpKnZih-ndK8/s1600/Screen+Shot+2014-10-25+at+18.13.41.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk_rBCiPA4IOM6BOaOuvgQH2YU07XRSrzUS-nQK_PY5RyVkJ-jYPDr9Y68wpU1V0Zwqn3bUTsuBjVjb_LehpLNdO1kNakVBQ9zucGIoShKzMTWiYpJOkK90eXrhENsClfvpKnZih-ndK8/s1600/Screen+Shot+2014-10-25+at+18.13.41.png" height="396" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
While investigating render with browsers that do not support SVG, at first all went as expected. Here is the result for IE 7:</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj98kDteLIEUNdkEhaz8AjYm98FmXtwotKtReQ4uDHGfUZmzQK5AMNg9LdkoBybx9tjA5LqnlBH1gDZcC8CjTXuf3gvYX9LsG3Fd1zd12_20Y5q6sMI_hua8aaJgyhBoDoLdsyzHtff5J0/s1600/Screen+Shot+2014-10-25+at+14.53.08.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj98kDteLIEUNdkEhaz8AjYm98FmXtwotKtReQ4uDHGfUZmzQK5AMNg9LdkoBybx9tjA5LqnlBH1gDZcC8CjTXuf3gvYX9LsG3Fd1zd12_20Y5q6sMI_hua8aaJgyhBoDoLdsyzHtff5J0/s1600/Screen+Shot+2014-10-25+at+14.53.08.png" height="384" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
But then Android Mobile Browser 2.2 showed this: </div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi07NT9A1T3Cs2g7Pl4G4QOJT_RU93jGP2g_Zxu2Yj_zRODfg8xtYUrgs8YsqDzQ31ILx8RX2z_0FlwiO0M8Sdg0BoatdPQNrOKAAM-3ChE-Ah6g_qN2zdeKPCR2tUiKDAWd7gpJXi7KdA/s1600/Screen+Shot+2014-10-25+at+15.04.26.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi07NT9A1T3Cs2g7Pl4G4QOJT_RU93jGP2g_Zxu2Yj_zRODfg8xtYUrgs8YsqDzQ31ILx8RX2z_0FlwiO0M8Sdg0BoatdPQNrOKAAM-3ChE-Ah6g_qN2zdeKPCR2tUiKDAWd7gpJXi7KdA/s1600/Screen+Shot+2014-10-25+at+15.04.26.png" height="640" width="616" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
You can see the CSS code, which should not be shown. It is inlined in external SVG.</div>
<div class="separator" style="clear: both; text-align: left;">
The suggestion falls in 3d section with iframe in both cases. To confirm the suggestion the <a href="http://highrobotics.com/media/context/article/svg_compatability/svg_iframe_test.html" target="_blank">page</a> with iframe reference is created:</div>
<pre class="prettyprint"><!DOCTYPE html>
<html>
<head>
<title>HTML5 SVG demo</title>
</head>
<body>
<iframe src="circle_orange_defs.svg" class="blockSize"></iframe>
</body>
</html>
</pre>
<br />
File circle_orange_defs.svg:<br />
<pre class="prettyprint"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="20" height="20">
<style>
<![CDATA[
.orange_internal {
fill: #FF9900;
}
>
</style>
<defs>
<circle id="circle_orange" cx="10" cy="10" r="8" stroke="grey" stroke-width="2" class="orange_internal" />
</defs>
<use xlink:href="#circle_orange" width="20" height="20" />
</svg>
</pre>
And Android 2.2 renders it as<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhGOWqRQ7fm4ycFaQob8BU-0zFtSSs24yaYkRnzxVsxgB3GnMBo_iR7XDkjRunVY8y1NEGvLFyaaNF1lfH4c53hFnz8WelMytXPSr38yyFW94O01KF39RqOQt2YaT-8fA7Tu2yWnbrzSw/s1600/Screen+Shot+2014-10-25+at+18.32.24.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhGOWqRQ7fm4ycFaQob8BU-0zFtSSs24yaYkRnzxVsxgB3GnMBo_iR7XDkjRunVY8y1NEGvLFyaaNF1lfH4c53hFnz8WelMytXPSr38yyFW94O01KF39RqOQt2YaT-8fA7Tu2yWnbrzSw/s1600/Screen+Shot+2014-10-25+at+18.32.24.png" height="353" width="400" /></a></div>
<br />
As suggested old Android cannot clearly render iframe with external SVG, that contains inlined style.</div>
We can use some tricks to fix it, but simple solution is not to use iframe for SVG at all, there are at least 4 alternatives to reference SVG file.<br />
<br />
<h3 style="text-align: left;">
CSS support</h3>
All browsers that can render SVG support style in external files if they are inlined in SVG.<br />
There is no possibility to apply HTML CSS from <head> section to external SVG file, because browser does not consider it as part of the DOM. This is the reason why one of the line with circles is black (lack of style).<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCTPxIhxpBnMdwBtxM1pCsOMnArBPY9TxXq5U-5xdJfrDK5NSSohp3nDytoaDRwSXRaFgR-rjMQZpySkLwuZ-1yN_EvIRoYDlRCEAJSywK0WkbfP2mF_3alNAD4n0PNeEWGQyDgdcdaQM/s1600/Screen+Shot+2014-10-25+at+18.44.04.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCTPxIhxpBnMdwBtxM1pCsOMnArBPY9TxXq5U-5xdJfrDK5NSSohp3nDytoaDRwSXRaFgR-rjMQZpySkLwuZ-1yN_EvIRoYDlRCEAJSywK0WkbfP2mF_3alNAD4n0PNeEWGQyDgdcdaQM/s1600/Screen+Shot+2014-10-25+at+18.44.04.png" height="235" width="400" /></a></div>
<br />
<h3>
Test results</h3>
Browsers that support SVG process external files without a problem. Android Mobile browser 2.2 has bad behaviour with <iframe>.<br />
<br />
The results for desktop:<br />
<div class="p1">
<span class="s1"><span style="color: #0b5394;">Chrome: </span><span style="color: #38761d;">38, ..., 16 </span>*</span></div>
<div class="p1">
<span class="s1"></span></div>
<div class="p1">
<span class="s1"><span style="color: #0b5394;">Internet Explorer: </span><span style="color: #38761d;">11, 10, 9, </span> <span style="color: #cc0000;">8, 7, 6</span></span></div>
<div class="p1">
<span class="s1"><span style="color: #0b5394;">Firefox:</span><span style="color: #cc0000;"> </span><span style="color: #38761d;">31, ..., 4,</span><span style="color: #cc0000;"> 3.6, 3.5</span></span></div>
<div class="p1">
<span class="s1"></span></div>
<div class="p1">
<span class="s1"><span style="color: #0b5394;">Safari: </span><span style="color: #38761d;">8, 7, 6.1, 5.1</span></span></div>
<div class="p1">
<span class="s1"><span style="color: #38761d;"><br /></span></span></div>
<div class="p1">
<span class="s1">* -<span style="color: #38761d;"> green </span>- works as expected, <span style="color: #cc0000;">red</span><span style="color: #38761d;"> </span>- does not support SVG </span></div>
<div class="p1">
<br /></div>
<div class="p1">
The result for mobile devices:</div>
<div class="p1">
<span class="s1"><span style="color: #0b5394;">Chrome Mobile: </span><span style="color: #38761d;">37, ..., 31</span></span></div>
<div class="p1">
<span class="s1"><span style="color: #0b5394;">Android Browser:</span><span style="color: #cc0000;"> </span><span style="color: #38761d;">4.0,<b> </b></span><span style="color: #cc0000;"><b>2.2</b></span></span></div>
<div class="p1">
<span class="s1"></span></div>
<div class="p1">
<span class="s1"><span style="color: #0b5394;">Mobile Safari:</span><span style="color: #38761d;"> 5.1, 5.02, 4.0.5, 4.0.4</span></span><br />
<div>
<span class="s1"><span style="color: #38761d;"><br /></span></span>
<i><span class="s1">In this test external reference with hash tag is not tested and will be done in future. There are some known problems with partial referencing (#) </span><img src="circle_orange.svg#circle" />. </i><br />
<i><br /></i>
Next: <a href="http://developersdev.blogspot.ru/2014/10/svg-fallback-pure-css-can-i-use-part-5.html" target="_blank">SVG fallback image without java-script</a>.</div>
</div>
</div>
mighty-whityhttp://www.blogger.com/profile/08022031113243464793noreply@blogger.com2tag:blogger.com,1999:blog-6501447087015171593.post-25089893695042593392014-10-25T06:50:00.001-07:002014-10-25T07:54:18.684-07:00Inline SVG, CSS and defs: Can I use Part 3<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
Previous: <a href="http://developersdev.blogspot.ru/2014/10/inline-svg-can-i-use-part-2.html" target="_blank">Inline SVG: Can I use Part 2</a><br />
<br />
One of the great feature of SVG is <defs> or definitions, that allows graphic reusing.<br />
Take a star with path<br />
<pre class="prettyprint"><path d="M46.19 9.21l1.96 7.76 7.98-.54-6.77 4.26 2.97 7.43-6.14-5.12-6.14 5.12 2.97-7.43-6.77-4.26 7.98.54z" id="star">
</pre>
</div>
<br />
We can reuse the code of star and make some transformation (move, scale, rotate) for basic figure.<br />
<pre class="prettyprint"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="160" height="152">
<defs>
<path id="star" d="M46.19 9.21l1.96 7.76 7.98-.54-6.77 4.26 2.97 7.43-6.14-5.12-6.14 5.12 2.97-7.43-6.77-4.26 7.98.54z"/>
</defs>
<use xlink:href="#star"/>
<use xlink:href="#star" x="90" y="20" />
<use xlink:href="#star" x="14" y="80" />
</svg>
</pre>
<svg height="152" width="160" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
<defs>
<path d="M46.19 9.21l1.96 7.76 7.98-.54-6.77 4.26 2.97 7.43-6.14-5.12-6.14 5.12 2.97-7.43-6.77-4.26 7.98.54z" id="star">
</path></defs>
<use xlink:href="#star"></use>
<use x="90" xlink:href="#star" y="20"></use>
<use x="14" xlink:href="#star" y="80"></use>
</svg>
<br />
What about browser support?<br />
<br />
For test we use <a href="http://highrobotics.com/media/context/article/svg_compatability/svg_test.html" target="_blank">same page</a> and the results are gladly equals to previous test.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF-v0-0tFSOP02IV8Ro2-Bjne7WMJll7xCtI6xrv5-YagHde1yG0JNhHcakWFe8od29ldmwUrnKu7QfuFlwa4n3k8ClCyLATXcUSpljzYqz_Fc81jLIYGTncGwaG4xelpawgo_kYhAUDQ/s1600/Screen+Shot+2014-10-25+at+15.13.53.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF-v0-0tFSOP02IV8Ro2-Bjne7WMJll7xCtI6xrv5-YagHde1yG0JNhHcakWFe8od29ldmwUrnKu7QfuFlwa4n3k8ClCyLATXcUSpljzYqz_Fc81jLIYGTncGwaG4xelpawgo_kYhAUDQ/s1600/Screen+Shot+2014-10-25+at+15.13.53.png" height="280" width="320" /></a></div>
<br />
Test are taken with inlined SVG (inside HTML as in previous tests).<br />
<br />
The results for desktop:<br />
<div class="p1">
<span class="s1"><span style="color: #0b5394;">Chrome: </span><span style="color: #38761d;">38, ..., 16 </span>*</span></div>
<div class="p1">
<span class="s1"></span></div>
<div class="p1">
<span class="s1"><span style="color: #0b5394;">Internet Explorer: </span><span style="color: #38761d;">11, 10, 9, </span> <span style="color: #cc0000;">8, 7, 6</span></span></div>
<div class="p1">
<span class="s1"><span style="color: #0b5394;">Firefox:</span><span style="color: #cc0000;"> </span><span style="color: #38761d;">31, ..., 4,</span><span style="color: #cc0000;"> 3.6, 3.5</span></span></div>
<div class="p1">
<span class="s1"></span></div>
<div class="p1">
<span class="s1"><span style="color: #0b5394;">Safari: </span><span style="color: #38761d;">8, 7, 6.1, 5.1</span></span></div>
<div class="p1">
<span class="s1"><span style="color: #38761d;"><br /></span></span></div>
<div class="p1">
<span class="s1">* -<span style="color: #38761d;"> green </span>- works as expected, <span style="color: #cc0000;">red</span><span style="color: #38761d;"> </span>- does not support SVG</span></div>
<div class="p1">
<br /></div>
<div class="p1">
The result for mobile devices:</div>
<div class="p1">
<span class="s1"><span style="color: #0b5394;">Chrome Mobile: </span><span style="color: #38761d;">37, ..., 31</span></span></div>
<div class="p1">
<span class="s1"><span style="color: #0b5394;">Android Browser:</span><span style="color: #cc0000;"> </span><span style="color: #38761d;">4.0, </span><span style="color: #cc0000;">2.2</span></span></div>
<div class="p1">
<span class="s1"></span></div>
<div class="p1">
<span class="s1"><span style="color: #0b5394;">Mobile Safari:</span><span style="color: #38761d;"> 5.1, 5.02, 4.0.5, 4.0.4</span></span></div>
<br />
Combining it with previous test we can make a rule:<br />
If browsers supports SVG then it supports <defs> definitions.<br />
<br />
There is convenient diagram for browser support: <a href="http://caniuse.com/#feat=svg" target="_blank">Can I use SVG</a>. And our tests confirm there topicality.<br />
<br />
<br />
Next section: <a href="http://developersdev.blogspot.ru/2014/10/external-svg-can-i-use-part-4.html" target="_blank">External SVG using Part 4</a></div>
mighty-whityhttp://www.blogger.com/profile/08022031113243464793noreply@blogger.com1tag:blogger.com,1999:blog-6501447087015171593.post-4750767670598398452014-10-24T11:33:00.003-07:002014-10-25T06:51:56.866-07:00Inline SVG: Can I use Part 2<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
Let's draw simple circle in svg file.<br />
<pre class="prettyprint"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="200" height="200">
<circle cx="100" cy="100" r="80" stroke="grey" stroke-width="3" fill="#3f85e5" />
</svg>
</pre>
<br />
<svg height="200" width="200" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" fill="#3f85e5" r="80" stroke-width="3" stroke="grey">
</circle></svg>
<br />
<br />
We can inline svg inside HTML page, svg becomes an element in any part inside <body> tag:
<br />
<pre class="prettyprint"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Inline SVG Demo</title>
</head>
<body>
</body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="200" height="200">
<circle cx="100" cy="100" r="80" stroke="grey" stroke-width="3" fill="#3f85e5" />
</svg>
</html></pre>
<br />
The test window for cross browser testing:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHfrNxE1nR148KaFrQ26roVzNQTQmtsKT7WRGjiY6q7Z_JhO151wob-Aqq0OL0mwBH2isQq21dRIBuHubJyl3WnfzpCU5PeebYsPwhcs-SoGoh0IeL2R42uU0L7qJDGxJgcLM8S02f5FQ/s1600/Screen+Shot+2014-10-24+at+23.24.54.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHfrNxE1nR148KaFrQ26roVzNQTQmtsKT7WRGjiY6q7Z_JhO151wob-Aqq0OL0mwBH2isQq21dRIBuHubJyl3WnfzpCU5PeebYsPwhcs-SoGoh0IeL2R42uU0L7qJDGxJgcLM8S02f5FQ/s1600/Screen+Shot+2014-10-24+at+23.24.54.png" height="540" width="640" /></a></div>
<br />
<br />
The test results are shown in small windows and can be opened in own virtual machine.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3JMkKvMZmJEauWgQlsumBxPnJ-VWrJDzHjH-uFeWDqU1C6O-KC3dio3kt7wrCEzlCagaCLnWDQW9OmGobtI0_ExRPaoDBtYvmTr-kX3ggsD3v8tcIwR9SgHf8hWVVEEDy212xANCWqpY/s1600/Screen+Shot+2014-10-24+at+23.35.47.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3JMkKvMZmJEauWgQlsumBxPnJ-VWrJDzHjH-uFeWDqU1C6O-KC3dio3kt7wrCEzlCagaCLnWDQW9OmGobtI0_ExRPaoDBtYvmTr-kX3ggsD3v8tcIwR9SgHf8hWVVEEDy212xANCWqpY/s1600/Screen+Shot+2014-10-24+at+23.35.47.png" height="470" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7T5HTAJ7MnyssxG1-x87fhWTMF86GuQdaqpy_dSReMgkiMXbHlMj4R4OZq5ferpvGUV0ThEZThrhPNNR808rDH3188Qt6QhTqyUBdMFiLynEHmfsTMivO0Qc4k7T3EdGHU2kYbKqCmZE/s1600/Screen+Shot+2014-10-24+at+22.45.29.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7T5HTAJ7MnyssxG1-x87fhWTMF86GuQdaqpy_dSReMgkiMXbHlMj4R4OZq5ferpvGUV0ThEZThrhPNNR808rDH3188Qt6QhTqyUBdMFiLynEHmfsTMivO0Qc4k7T3EdGHU2kYbKqCmZE/s1600/Screen+Shot+2014-10-24+at+22.45.29.png" height="194" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Next point is to test CSS styling. It can be added in two ways with SVG inlined. </div>
<div class="separator" style="clear: both; text-align: left;">
First approach is usual CSS styling in HTML <head> section:</div>
<pre class="prettyprint"><!DOCTYPE html>
<html>
<head>
<title>CSS and SVG test</title>
<style type="text/CSS">
.redness {
fill: #FF0066;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="20" height="20">
<circle cx="10" cy="10" r="8" stroke="grey" stroke-width="2" class="redness" />
</svg>
</body>
</html>
</pre>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Second approach is to inline CSS within SVG itself. To ignore special symbols, like less or grater sign use <![CDATA[ ... ]]> for CSS:</div>
<pre class="prettyprint"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="20" height="20">
<style>
<![CDATA[
.orange {
fill: #FF9900;
}
>
</style>
<circle cx="10" cy="10" r="8" stroke="grey" stroke-width="2" class="orange" />
</svg>
</pre>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
For SVG support testing special page is created at <a href="http://highrobotics.com/media/context/article/svg_compatability/svg_test.html">http://highrobotics.com/media/context/article/svg_compatability/svg_test.html</a> </div>
<h3 style="text-align: left;">
Test results</h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU_5jZkJy-bmylgOmR1qsfV04eiH7lcXH96nbiC_HjHU95FZhy8mPeHfXF6ExZnrOjSSmxYrvX6De3lkayWWuTtPH41um2SbgOVQAL5P8C9HOtmgbShLTwCOSOCCQ-cSIi4Ykhv6BN8ow/s1600/Screen+Shot+2014-10-25+at+16.35.01.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU_5jZkJy-bmylgOmR1qsfV04eiH7lcXH96nbiC_HjHU95FZhy8mPeHfXF6ExZnrOjSSmxYrvX6De3lkayWWuTtPH41um2SbgOVQAL5P8C9HOtmgbShLTwCOSOCCQ-cSIi4Ykhv6BN8ow/s1600/Screen+Shot+2014-10-25+at+16.35.01.png" height="400" width="271" /></a></div>
Next desktop operating systems were in use: Mac OSX 10.9 and 10.6, Windows 7 x64, Windows XP SP2 x32, Ubuntu 11.10 (only Chrome v. 16).<br />
<br />
Mobile and tablet devices are shown on the left with their browsers. Only Windows Phone is missing.<br />
<br />
The results for desktop:<br />
<br />
<div class="p1">
<span class="s1"><span style="color: #0b5394;">Chrome: </span><span style="color: #38761d;">38, ..., 16 </span>*</span></div>
<div class="p1">
<span class="s1">
</span></div>
<div class="p1">
<span class="s1"><span style="color: #0b5394;">Internet Explorer: </span><span style="color: #38761d;">11, 10, 9, </span> <span style="color: #cc0000;">8, 7, 6</span></span></div>
<div class="p1">
<span class="s1"><span style="color: #0b5394;">Firefox:</span><span style="color: #cc0000;"> </span><span style="color: #38761d;">31, ..., 4,</span><span style="color: #cc0000;"> 3.6, 3.5</span></span></div>
<div class="p1">
<span class="s1">
</span></div>
<div class="p1">
<span class="s1"><span style="color: #0b5394;">Safari: </span><span style="color: #38761d;">8, 7, 6.1, 5.1</span></span></div>
<div class="p1">
<span class="s1"><span style="color: #38761d;"><br /></span></span></div>
<div class="p1">
<span class="s1">* -<span style="color: #38761d;"> green </span>- works as expected, <span style="color: #cc0000;">red</span><span style="color: #38761d;"> </span>- does not support SVG</span></div>
<div class="p1">
<br /></div>
<div class="p1">
The result for mobile devices are very good for developers. Every tested browser, except Android Browser v. 2.2, supports basic SVG:</div>
<div class="p1">
<span class="s1"><span style="color: #0b5394;">Chrome Mobile: </span><span style="color: #38761d;">37, ..., 31</span></span></div>
<div class="p1">
<span class="s1"><span style="color: #0b5394;">Android Browser:</span><span style="color: #cc0000;"> </span><span style="color: #38761d;">4.0, </span><span style="color: #cc0000;">2.2</span></span></div>
<div class="p1">
<span class="s1"></span></div>
<div class="p1">
<span class="s1"><span style="color: #0b5394;">Mobile Safari:</span><span style="color: #38761d;"> 5.1, 5.02, 4.0.5, 4.0.4</span></span></div>
<div class="p1">
<span class="s1"><span style="color: #38761d;"><br /></span></span></div>
<div class="p1">
<span class="s1"><span style="color: #38761d;"><br /></span></span></div>
<div class="p1">
Mostly all popular browsers have support for basic inlined SVG:</div>
<div class="p1">
</div>
<ul style="text-align: left;">
<li>simple graphics</li>
<li>SVG CSS from HTML <head> section</li>
<li>CSS inside SVG</li>
</ul>
<br />
<div class="p1">
<br /></div>
<div class="p1">
Problematic browsers are Internet Explorer 6, 7, 8 and Android Mobile Browser 2.2, they are still popular, but do not support vector graphics at all.</div>
<div class="p1">
Here is how Andoroid 2.2 renders <a href="http://highrobotics.com/media/context/article/svg_compatability/svg_inline_css_test.html" target="_blank">simple SVG test page</a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4FRoRID6Uvi6tRoWn0X5uDUCMV99rhUlUHzBfQIWMxuSD2ppoo_q8rF-UdzaxH-Dirr-fVW2uu4zK7LGpC3BX2LYrP35H8GmkRXnSjN6OyxteQJpCi_L5TXHGOeD6UVHLReZhZlW2b38/s1600/Screen+Shot+2014-10-25+at+17.08.20.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4FRoRID6Uvi6tRoWn0X5uDUCMV99rhUlUHzBfQIWMxuSD2ppoo_q8rF-UdzaxH-Dirr-fVW2uu4zK7LGpC3BX2LYrP35H8GmkRXnSjN6OyxteQJpCi_L5TXHGOeD6UVHLReZhZlW2b38/s1600/Screen+Shot+2014-10-25+at+17.08.20.png" height="320" width="274" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
Similar works IE version 8 or earlier and shows empty place.</div>
<div class="p1">
<br /></div>
<div class="p1">
Our next part is to test <a href="http://developersdev.blogspot.ru/2014/10/internal-svg-css-and-can-i-use-part-3.html" target="_blank">SVG browser support for graphic reusing with <defs> keyword</a>.</div>
</div>
</div>
mighty-whityhttp://www.blogger.com/profile/08022031113243464793noreply@blogger.com1tag:blogger.com,1999:blog-6501447087015171593.post-6981848152136113232014-10-24T11:08:00.001-07:002014-10-25T06:21:37.184-07:00SVG: Can I use Part 1<div dir="ltr" style="text-align: left;" trbidi="on">
For one of our client we decided to add delight vector images in motion. <a href="http://css-tricks.com/using-svg/" target="_blank">SVG</a> feet best in this case: it is scalable and takes small file size.<br />
<br />
One of the image is a pencil with form:<br />
<br />
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="200" height="150" viewBox="0 0 40 30">
<style type="text/css">
<![CDATA[
#form,
#pencil {
fill: #3f85e5;
}
#pencil {
-webkit-animation: pencil-keyframes 2.5s linear infinite;
animation: pencil-keyframes 2.5s linear infinite;
}
#line_3,
#line_4 {
-webkit-transform-origin: left center;
-ms-transform-origin: left center;
transform-origin: left center;
}
#line_3 {
-webkit-animation: line_3-keyframes 2.5s linear infinite;
animation: line_3-keyframes 2.5s linear infinite;
}
#line_4 {
-webkit-animation: line_4-keyframes 2.5s linear infinite;
animation: line_4-keyframes 2.5s linear infinite;
}
@-webkit-keyframes pencil-keyframes {
0% {
-webkit-transform: translate(0px, -4px);
transform: translate(0px, -4px);
}
30% {
-webkit-transform: translate(13px, -4px);
transform: translate(13px, -4px);
}
60% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
90% {
-webkit-transform: translate(13px, 0px);
transform: translate(13px, 0px);
}
100% {
-webkit-transform: translate(13px, 0px);
transform: translate(13px, 0px);
}
}
@keyframes pencil-keyframes {
0% {
-webkit-transform: translate(0px, -4px);
transform: translate(0px, -4px);
}
30% {
-webkit-transform: translate(13px, -4px);
transform: translate(13px, -4px);
}
60% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
90% {
-webkit-transform: translate(13px, 0px);
transform: translate(13px, 0px);
}
100% {
-webkit-transform: translate(13px, 0px);
transform: translate(13px, 0px);
}
}
@-webkit-keyframes line_3-keyframes {
0% {
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
30% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
100% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
}
@keyframes line_3-keyframes {
0% {
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
30% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
100% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
}
@-webkit-keyframes line_4-keyframes {
0% {
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
60% {
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
90% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
100% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
}
@keyframes line_4-keyframes {
0% {
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
60% {
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
90% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
100% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
}
]]>
</style>
<g id="form">
<path d="M13.281.974c-1.15 0-2.114.826-2.344 1.906h-2.187c-.71 0-1.313.571-1.313 1.281v.719h-3.438v23h19c0-8-.223-15.32 0-23h-3.938v-.719c0-.71-.571-1.281-1.281-1.281h-2.125c-.23-1.09-1.225-1.906-2.375-1.906zm.031 1c.77 0 1.406.636 1.406 1.406v.5h3.063c.16 0 .313.121.313.281v.719h-9.625v-.719c0-.16.121-.281.281-.281h3.156v-.5c0-.77.636-1.406 1.406-1.406zm-8.312 3.906h17v21h-17z"/>
<rect x="6.5" y="9" width="13" height="1"/>
<rect x="6.5" y="13" width="13" height="1"/>
<rect x="6.5" y="17" width="13" height="1" id="line_3"/>
<rect x="6.5" y="21" width="13" height="1" id="line_4"/>
</g>
<g id="pencil">
<path d="M23.086 7.443l-2.83-2.82s-.57-.57-1.13 0l-11.58 11.58-.3.29-.01-.01-.83 4.81 4.8-.84 10.18-10.18 1.7-1.69c.57-.57 0-1.14 0-1.14z" fill="#fff"/>
<path d="M23.133 7.428l-2.83-2.82s-.57-.57-1.13 0l-11.58 11.58-.3.29-.01-.01-.83 4.81 4.8-.84 10.18-10.18 1.7-1.69c.57-.57 0-1.14 0-1.14zm-5.65.01l1.14 1.14-9.05 9.05-1.13-1.13 9.04-9.06zm-9.93 12.75l.6-2.86 2.38 2.38-2.98.48zm3.7-.88l-1.12-1.12.13-.07-.03-.03 8.95-8.95 1.12 1.12-9.05 9.05zm9.62-9.61l-2.82-2.83 1.7-1.69 2.82 2.82-1.7 1.7z"/>
</g>
</svg>
<br />
It would be brilliant to have a working solution and show this image to every user. However not all browsers support different technologies produced by W3C. There is a rumor on the internet whether SVG will work or not in one or another case. We decided to make our own investigation on this field and clear the dirty spots.<br />
<br />
<a href="http://crossbrowsertesting.com/" target="_blank">CrossBrowserTesting</a> is chosen to help in inspection in variety of browsers.<br />
<br />
First test is simple: <a href="http://developersdev.blogspot.ru/2014/10/inline-svg-can-i-use-part-2.html" target="_blank">browser compatibility for svg image inlined in HTML</a>.<br />
<br />
<br />
<br />
<br />
<br /></div>mighty-whityhttp://www.blogger.com/profile/08022031113243464793noreply@blogger.com0tag:blogger.com,1999:blog-6501447087015171593.post-29273625169529988472014-09-09T09:44:00.002-07:002014-09-09T09:48:20.098-07:00Chrome favicon corrupted<div dir="ltr" style="text-align: left;" trbidi="on">
One strange bug is found in Google Chrome. It corrupts favicon icon.<br />
<br />
Here is screenshot of Chrome tabs:<br />
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl7p6CkvnlhxBIykgtGVIGZ0aqzPTDG3OXpE_A2EemeoI1sWKiB_ggh4Sh-WRMGvepWZMm07tBGk7JxtlQMD7OL8_GQMxQacikbHcY-5bkRW3yuCXn9vcN1n97eQaxqcy8mO5FFVVBIJI/s1600/Screen+Shot+2014-09-09+at+20.34.40.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl7p6CkvnlhxBIykgtGVIGZ0aqzPTDG3OXpE_A2EemeoI1sWKiB_ggh4Sh-WRMGvepWZMm07tBGk7JxtlQMD7OL8_GQMxQacikbHcY-5bkRW3yuCXn9vcN1n97eQaxqcy8mO5FFVVBIJI/s1600/Screen+Shot+2014-09-09+at+20.34.40.png" height="109" width="320" /></a></div>
<br />
At the same time Firefox and Internet Explorer shows good icon representation.<br />
<br />
One solution is to use PNG or GIF favicon instead of ICO. But this new formats are supported <a href="http://en.wikipedia.org/wiki/Favicon" target="_blank">only in modern browsers</a>.<br />
<br />
Another solution is to resave icon in an icon editor program. For me <a href="http://icofx.ro/" target="_blank">IcoFX</a> solved the problem. Just open corrupted icon, make small changes and save it under favicon.ico.<br />
<br />
Then check linking on html page:<br />
<pre class="prettyprint"><link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
</pre>
</div>
mighty-whityhttp://www.blogger.com/profile/08022031113243464793noreply@blogger.com0tag:blogger.com,1999:blog-6501447087015171593.post-71565829873829507602014-04-20T03:49:00.001-07:002014-04-20T03:49:11.827-07:00C# ref parameter<div dir="ltr" style="text-align: left;" trbidi="on">
One of the most vague point in C.#NET is passing argument by reference, or shortly <i>by ref</i>.<br />
Though it is very simple idea in passing arguments to function:<br />
<br />
<br />
<ul style="text-align: left;">
<li>If argument is passed by reference then it represents link to the source data (Pointer in C).<br />This is true for structures and classes.<br /></li>
<li>Otherwise for a class copy of link is passed. And for a struct copy of whole struct is passed (except class property objects).</li>
</ul>
<br />
Take an example <i>without ref</i>:
<br />
<br />
<pre class="prettyprint"> class Cat
{
public string Name {get;set;}
}
class Program
{
static void Main(string[] args)
{
var catOscar = new Cat { Name = "Oscar" };
ChangeCatToSimba(catOscar);
Console.WriteLine("Cat name: " + catOscar.Name);
Console.ReadKey();
}
// By default copy of reference is passed (without ref keyword)
// Same as copy of Pointer can be passed in C language
private static void ChangeCatToSimba(Cat cat)
{
// reassign source will do nothing with Oscar
cat = new Cat { Name = "Simba" };
}
}
</pre>
<br />
And here is example <i>with ref</i>:
<br />
<pre class="prettyprint">class Program
{
static void Main(string[] args)
{
var catOscar = new Cat { Name = "Oscar" };
ChangeCatToSimba(ref catOscar);
Console.WriteLine("Cat name: " + catOscar.Name);
Console.ReadKey();
}
// Ref takes memory address reference to cat object
private static void ChangeCatToSimba(ref Cat cat)
{
// reassign source
cat = new Cat { Name = "Simba" };
}
}
</pre>
<pre class="prettyprint">
</pre>
<pre></pre>
In the first example (without ref) result is "Oscar". In the second example reassigning occurs and result is "Simba".</div>
mighty-whityhttp://www.blogger.com/profile/08022031113243464793noreply@blogger.com1tag:blogger.com,1999:blog-6501447087015171593.post-35240585743080783972014-04-13T04:27:00.000-07:002014-04-13T04:27:17.459-07:00HTML 5 Data-* Attribute<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<i><a href="http://www.w3schools.com/tags/att_global_data.asp" target="_blank">Data-*</a></i> attribute is special novelty in HTML 5 that can be used for own purposes.<br />
<br />
For example, we can use our own <i>data-author, data-title, data-text, data-car-model</i> attributes (anything starting with <i>data-</i>) and it will be valid HTML. Custom data attribute can be used on any element:<br />
<pre><code>
<span data-author>Miguel de Cervantes Saavedra</span>
<span data-title>Don Quixote</span>
</code></pre>
</div>
</div>
<br />
One of the big architecture flaw appears: <i>there is no namespace!</i><br />
And I predict there will be lots of conflicts, especially when one famous javascript framework will use same <i>data-</i> designation as another framework, or it will conflict with you own clear attribute names. <br />
Microsoft already uses data-* attributes in ASP.NET MVC for validation.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYc3aA9aghiKOrYsFl507U_qh5fwXnWbj8f1S_AGCfAoosFZreSxanquucHRibLqFPXu5UQTfQIusfK_6VGlmFyEZFvz-gHbHIQP_zmvzgax9FJD_MVn_yEBp8Ir6jrxBGKN3TglT_Ikg/s1600/Don_Quixote.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYc3aA9aghiKOrYsFl507U_qh5fwXnWbj8f1S_AGCfAoosFZreSxanquucHRibLqFPXu5UQTfQIusfK_6VGlmFyEZFvz-gHbHIQP_zmvzgax9FJD_MVn_yEBp8Ir6jrxBGKN3TglT_Ikg/s1600/Don_Quixote.gif" height="320" width="253" /></a></div>
</div>
mighty-whityhttp://www.blogger.com/profile/08022031113243464793noreply@blogger.com1