website development scotland


【Editor】This article comes fromA List Apart,It focuses on how developers cope with a wide range of new technologies。Author's suggestion,The developer is accepting the new concept,Pay more attention to the support of the original browser,And enhance the development of user experience。

(website development scotland)WillWebIt is regarded as the concept of the application platform,Popularity is unprecedented。But used to create these so -called“Webapplication”There are still many traps that are often ignored or misunderstood by us。Single PageWebThe application framework has received great attention,We can use these frameworks to create some complex high -performance applications,Compared with traditional websites,These applications are more reliable and interactive。But all these benefits,And the change of thinking mode and development method,It is at the expense of the basic function of sacrifice browser,WebDevelopers sometimes regard it as a matter of course。

JavaScriptIt may be very fragile

(website development scotland)As various manufacturers continue to speculate on this heat wave,We may mistakenly think that when the user’s browser cannot executeJavaScriptTime,There is no need to provide them with a retreat plan。User's browser cannot be executedJavaScriptThere is a cause,They choose to disable manuallyJavaScriptIt's just one of the many reasons。Team to maintain the British government website——Government digital service(GDS)Find:Every500AccessGOV.UKIn the user,Have5No requestJavaScript,Only1People have prohibitedJavaScript,other4People may not have a request may be due to the following reasons:Enterprise proxy server is too high;High delay causedJavaScriptRequest timed out;Even a grammar error that has not been noticed。

also,CSSandHTMLCan be relegated elegantly,andJavaScriptCan't do it。this means,If the developer uses a single oneES6Grammatical characteristics,Even call a standard library function that has not been verified,TheirJavaScriptIt is very likely that it will be broken or not executed at all during the execution process。If you useJavaScriptTo enhance the website,These issues mentioned above are still tolerated,After all, visitors can still access the link,Can submit forms,can useWebThe most original features that can be provided;but ifJavaScriptIt's a part of the website's essential part,No matter who uses a slightly outdated browser, you may get a blank page,Naturally, no one will explain why the page becomes blank。

Semantic structure is still very important

since1993yearTim Berners-LeedesignHTMLsince,HTMLA general structure is defined for the interrelated document network,That is what we knowWeb。The semantic meaning of infiltration in this general structure isWebThe information contained in the page provides a context that the computer can process。From the actual sense,These additional information enhances user useWebExperience during the browser。for example,WebThe browser can realize a use to add and use it to the user's calendartimeMethod of Element Definition;The screen reader can read a list or a paragraph in different ways,For humans,The list and paragraph in the document look obviously different,HTMLThe universal framework provided allows the computer to clearly distinguish the list and paragraph。

HTMLThe implicit semantic meaning enablesWebAsCocoa、WPFas well asQtSuch a native application environment has different development directions。Structured information pairWebIt's very important,Because we need to access in various waysWebinformation。And when I create oneiPhoneApplied time,I can steadily assume that everyone will use it in the same way。mineAppAlways present information in the same way,And I can fully control the final presentation of the information in the application。Even if some people passVoiceOver(AppleAuxiliary technology provided for visually impaired people)MeAppInteract,They can still be the same as users with normal vision:Operation by clicking on the screen。The only difference is that they need to listen to words instead of reading。

And this method is inWebIt's okay。People pass byWebBrowser access website,Also through similarPocket、InstapaperSuch an application to consumer website content,Try to use these applicationsWebStructural information of the page to extract the relevant content of the website。The browser on the smart watch may directly ignore your layout,Then show your information by more suitable one -inch screen。Future equipment may be able to directly transform the information provided by the website into the thinking in the human brain,Who knows this??Look back,VoiceOverThe working principle is to read the text under the order of the user in order,HoweverWebThe screen reader reads all the documents,Ignore layout,PassHTMLStandardized semantics of labels to infer the meaning of documentation。for example,Recently launchedmainelement(Translator's note:refer to to define the main part of the document,WebThe screen reader can read and recognize such labels。For a user with normal vision,passGoogle ChromeWhen visiting your website,Whether you use it<main>or it could be<div id=”main”>Basically no difference。But for using otherWebFor those on the client,For example, using a screen reader orInstapaper,mainThe meaning of the implicit element allows the software to better help them browse documents。

(website development scotland)so,DevelopWebApplication is not as simple as developing for native platforms。Make sure that the application can work normally according to our needs in five mainstream browsers and release them in time,forWebThe platform is still not enough,We need to test our work results in the screen reader,We need to review our tags to ensure that the application can provide as much semantic meta -data as possible as possible——Not only requires coordinationWebClient,Also prepare for all equipment that may appear in the future。

Single PageWebApplication framework

Use similarAngularandEmberSuch“Single PageWebapplication”When,The popular approach is to treat the website as a native application,So,Developers rarely take into considerationWebThe platform is different。The assumptions they make for users can easily completely destroy the real experience of users who are not satisfied with hypothesis。What are the consequences of this thinking mode?Let's see an example,And seriously think about me recentlyPatreonA login button found on the website(There was a change later):

(website development scotland)<span class="patreon-button sub-section navigation-active" data-ng-click="triggerChangeWindow(navigation.login_url)">Log In</span>
website development scotland

(website development scotland)PatreonThat quite standard login button shows like a link,No special hereJavaScript。

This link is in mineSafariIt can run normally,But in other environments except the mainstream browser,This button cannot be used at all。Suppose we have one calledWatchBrowseSmart watch browser,It is likely that it needs to display a series of list links to the user to realize the navigation in the station,Because this special smart watch does not have a cursor to interact with the page。HTMLDefine oneWebThe standard method of creating links on the page(aelement),WatchBrowseIn theory, you can list every one on the pageaTags and ithrefAttributes and content,Unless a similarPatreonWebsite,And the website decides to avoidWebStandard and re -realize the basic functions of the browser。

ifPatreonOneaLabel instead ofspanLabel,WatchBrowseYou can find the link and display it in the list,You can simulate a click event for the link,Jump when the user is selected。But if the browser knows the link in advance, will it be better??A browser extension may be tag on the pagehrefProperties to find links,If you want to find someone quicklyTwitterAccount link,Then provide a traceable sourcehrefThe attribute is very practical。LinkedhrefAttributes are no longer static value,It depends on any ofJavaScriptClick the handle,These useful functions cannot be realized。

PatreonThe website is based onAngularEstablished,AngularThere is nothing wrong in itself,WillHTMLAs a view layer and using these frameworks to achieve it, it is probably caused byPatreonThe main reason for the bad decision。

If we create the same link to create the same link according to the framework developer in their documents?A more standard way to create links may seem like this:

<a ng-href="/login">Log In</a>

When the clientJavaScriptRenderDOMIn the middle,The code above is converted into this:

<a ng-href="/login" class="ng-binding" href="/login">Log In</a>

(website development scotland)EmberTreat this problem in the same way。Link inEmberDefinition in the template like this:

{{#link-to}}Log In{{/link-to}}

When it is renderedDOMIn the middle,It becomes like this:

(website development scotland)<a id="ember-563" class="ember-view" href="/sessions/new">Log In</a>

(website development scotland)EmberandAngularAfter that, the clicks of the link will be intercepted,In this way, new content can be rendered without re -loading page。The most important thing is,If the click event will never be triggered and the browser has been loadedhrefValue,So for users, clicking the link will only bring an additional page overload,It doesn't look different,becauseEmberandAngularUnder the default circumstances, you will not try according toURLDefine their own way to re -manufacture wheels。

However,In the current form,EmberandAngularStill need to be loadedJavaScriptTo render their templates and create those connections as soon as possible。Every500Interview and useAngularorEmberIn the websites built4People will encounter a thorough white screen once。

Is there a solution?

If it is rendered on the serverWebPage content,Then the code of rendering function only needs to support running on the server side。butWebWhen the page is placed on the client for rendering,Related code needs to support each client that may access the website。Developers are now gradually abandoning the server rendering,Because they cannot provide a wealthy application experience brought by client rendering。But I think in the new world of client applications,There is still a place on the server rendering。

Currently,Developer uses a single pageWebThe application framework needs to be loadedJavaScriptMake a balance。But in my opinion,These are exactly the problem that the framework should solve。BeWebDevelopers,We are fortunate to use one of the most common programming languages ever in history.WebWrite application code。If the framework developers can follow the night(It is undeniable that the task is very difficult)The ground enables the application to run as in the browserNodemiddle,The server can complete the task of the initial page rendering,All the subsequent tasks are handled by the browser。certainly,If the server can render the link toaForm of label,Just likeEmberWhat is currently implemented on the client,Then you can be allowed not to receiveJavaScriptUser(No matter what the reason is)Normal browsing website。You can also pass the server(Not on the client)Run all verification and sub -mission logic,Make the form work normally。If the framework maintainer worked in this direction from the beginning,Then every developer who uses the framework can immediately work only one can only work in the latestWebThe application in the browser converts to a gradual enhancement experience,This is almost compatible with any compatibilityWebClient——Past、Current、And future。

Graduate enhancementWebDevelopers are already an important part,It makes us realizeWebExperience is a vital part,Any additional improvement for user experience should not damage any client accessWebThe content contained in the page。The current method of creating a single page application tends to give up this guideline,However, gradual enhancement and single page application can actually be compatible in essence。

In fact,There have been many progress in this field,E.g,oneEmberThe internal team is improving by achieving server renderingEmberCompatibility with search engines。But from a single pageWebThe solution of the problem caused by the application does not rely on the pure technical perspective:People viewWebThe method has become an increasingly serious problem。WillWebThe approach to be seen as another application platform has been commonplace,butWebI can do more than this。Regardless of the visitor passed2000US dollariMacstill is50US dollar Android tablet,Even in the future that we can't imagine,spend5The dollar can be purchasedWebClient to access,WebAlways a general information platform。In fact,The experience of not sacrificing a small number of users is very important for us,In this way, we can slightly improve the rest in this process.WebUniversal experience。

author:Ross PenmanIs a from ScottishwebDevelopers and fanatic technical experts。2014Finals of the New Talent Network Award Finals of the Year。RossFrequent celebration of his work to promote young people in the field of technology。hisTwitterContent andwebDevelopment is related to pocket monster training。(Translator:Liu Zhentao,Review school:Chen Qiuge)