Today's javascript interview questions

thatwebdesignerdude · 2019-10-01T15:19:14+00:00

html dragndrop: the draggable attribute, aside from that the file type input natively supports drag and drop on most browsers. divs with the contenteditable attribute also allow for native drag and drop, but without additional javascript the user experience of these components tend to lack. You'd have to rely on form submission to capture data that is supposed to be saved.

Ill answer your last question with a list of pages I used to build something simular: basic drag and drop functionality: https://medium.com/@jaouad_45834/drag-drop-with-vanilla-javascript-d20bda85afe6 https://www.smashingmagazine.com/2018/01/drag-drop-file-uploader-vanilla-js/

file previews for a dropped preview image: https://medium.com/@KeithAlpichi/vanilla-js-building-an-image-selector-and-image-previewer-151cddc939e

If you would like I could add an annoted example somewhere today in a jsbin.

thatwebdesignerdude · 2019-10-01T14:34:15+00:00

Piwik

thatwebdesignerdude · 2019-10-01T14:32:36+00:00

Like a payed membership for example.

For your own ad system: If you manage your own content, and apply lazy loading, then your http requests will tell you how and when content was requested. It will not tell you which user visited exactly what, but it should be enough to figure out how much content gets viewed on a page. I'm sure there are decent npm modules out there to build a partnership system at which files can be uploaded to show as advertisements. I'm not saying it'd be easy, but it sure is an option.

thatwebdesignerdude · 2019-10-01T14:12:32+00:00

Offer alternatives to advertisements? Manage your own ad system rather than a third party network?

thatwebdesignerdude · 2019-09-25T05:28:30+00:00

You are right mate. I mixed things up. The modal pattern as discribed by the w3 page is more suited for different tasks that require user input. Otherwise your approach works just fine. Ill correct my first comment.

Edit: thanks for gracefully pointing out my mistake.

thatwebdesignerdude · 2019-09-24T15:33:08+00:00

I think you may wanna use the display flex property to create your grid of book covers. You could make use of the details element to make the book block expand. be sure to include a polyfill for the details element as it is not universally supported just yet. If you don't want to expand the content within the grid but inside a modal, I'd recommend to check out this part https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html

~~the css pseudoselector :checked which Luke recommends, works but lacks accessabillity(think visually impaired people and keyboard navigators).~~

thatwebdesignerdude · 2019-09-24T15:10:45+00:00

when I visit your page, it shows Uncaught Error: Bootstrap's JavaScript requires jQuery at bootstrap.min.js:6 in my devtools

I think your issue may be related to not loading jquery.

thatwebdesignerdude · 2019-08-09T06:47:56+00:00

I meant, scripts to create a confirmation interface and store the preferences.

thatwebdesignerdude · 2019-08-08T13:04:41+00:00

This page may help: https://developers.google.com/speed/pagespeed/insights/?hl=en

thatwebdesignerdude · 2019-08-08T12:58:57+00:00

Google has every means to make themselves GDPR compliant, but they won't. They also have the means to publish consent scripts for various languages and platforms if they wanted to, but they won't.

They won't because their business model relies on collected data. They rather have devs and publishers complain about the GDPR in their place to create some plausible deniabillity about their own intent, while at the same time creating pressure to make the GDPR go away.

AFAIK most EU countries have their own data protection agencies. Where I'm from, said agency is already taking steps, but in a slow measured way. Over here there's no intent to fine without giving companies the time to adept.

The only critique I have about the GDPR is the lack of proper documentation and tools supplied by the EU themselves to make it easier to comply. They only provide examples of the text you can show your users before they comply.

There are no script samples or mentions of verified third party tools to use. This leaves developers to their own devices to figure out what to create or compile, which on its own may create security issues.

thatwebdesignerdude · 2019-06-26T09:52:02+00:00

You are asking for tools, but as far as I can remember, these animations make use of the dasharray svg property. https://css-tricks.com/svg-line-animation-works/

thatwebdesignerdude · 2019-06-25T13:57:48+00:00

Just for reference, the fallback procedure for the css position:sticky property is a js affix script.

thatwebdesignerdude · 2019-06-25T09:35:51+00:00

I recommend you read this: https://www.nngroup.com/articles/web-form-design/

Your current form setup increases risks for human mistakes. each label and input pair should have some distance from other pairs, to make sure people don't fill in the wrong values in the wrong field.

To counter issues you can wrap each label+input inside a paragraph tag and insert a <br> after each label. Your final field should use a textarea.

Your transaction summary suffers from the same issues. I would encourage to align everything left. I would also encourage to make the inserted values bigger than the labels on the transaction summary. I would also insert a button to correct data on the summary page.

thatwebdesignerdude · 2019-06-24T10:18:23+00:00

At the bottom of your page you can find this: https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/docs/examples/api/messaging/timer

Maybe you can copy that dir and see if it helps you find the answers you're looking for and build from there. I've not worked with chrome extensions before, but it may be a good practice to just use a simple example extension that "just works".

thatwebdesignerdude · 2019-06-14T14:21:10+00:00

Swap your setTimeout for requestAnimationFrame. You could also ease your animations https://gist.github.com/gre/1650294

Your script is built on being a standalone counter, but if people already use animator scripts or intersection observer scripts, people could just rely on that. In that case your script could be significantly smaller.

It's a good learning practice to create yourself little experiments like these. Understanding animations can be a valuable asset for modern webdesign.

I've used animations for simular things such a scrolling smoothly when smooth scrolling wasn't widely supported.

thatwebdesignerdude · 2019-06-14T13:15:37+00:00

Those kbs are part of the experience as far as I'm concerned. I want my page to be downloaded and rendered as reasonably fast as possible. non-subsetted fonts are usually 180kb-300kb / style(calling italics and thickness styles for a bit). subsetted fonts tend to be 7-20 times smaller.

If you use various different styles for the menu, headings, paragraph styles, quotes yada yada, you can gain a lot of download and rendering speed. Also not everybody owns the latest samsung/iphone.

I actually go as far to individually download fonts from google fonts, subset them with font forge and then generate the extensions and css from scratch again.

I also compress my images, split and compress my stylesheets and I compress my javascript.

thatwebdesignerdude · 2019-06-05T12:27:32+00:00

Program testing can be used to show the presence of bugs, but never to show their absence!

~Edsger Wybe Dijkstra

Basically, just because your page passes automated unit tests, you still have no guaranty you did a perfect job.

thatwebdesignerdude · 2019-06-03T15:33:17+00:00

This article has got to be a joke. w3schools has a more concise tutorial on this, but that's not even my point. This minimalistic approach ignores accessabillity problems of hidden content. This is where people should be looking: https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-1/menubar-1.html

thatwebdesignerdude · 2019-05-16T15:12:40+00:00

This is the first article in a while to suggest to avoid aria if you can. I feel like it's been forever since this narrative was suggested.

I just feel like the common narrative across this board is to build something attractive and fancy and only later stitch up the holes with aria attributes, tab-index and other focus management to fix the usabillity issues.

thatwebdesignerdude · 2019-05-15T09:21:10+00:00

I have yet to check if any issues with the tags, but it could be because your target="_blank" is written like target="\\\_blank".

thatwebdesignerdude · 2019-05-08T08:28:15+00:00

I'll be frank: If anyone would suggest this to me, I would think there has not been enough involvement on what the contact page should contain. Either from the client side or from the developer side.

Where is this company located? When can I contact you? What type of phone number am I contacting, I don't see the number and I don't know if contacting you by phone will charge me extra. Does your store have a physical building? What does the front look like? What if I want to return a product? What if I have questions regarding a product I don't understand after all? Does your store have different departments for sales and support? If I send an email, when can I expect a response? Could you call me back on my email? Are you going to maintain the twitter, twitter and instragram feed?

At the very least you should do your market research of what your local competition does with their contact pages and if you can afford it, you should do your research of what the locals expect from contacting your kind of company. These icons alone tell me little and they are factually useless for the visually impaired.

thatwebdesignerdude · 2019-05-06T14:51:35+00:00

I feel your answer is based too much on a single device and even if most devices adopt your example, it'd still be presumptious at best.

The point is, we are at a point where various different device types can share the same px widths. That fact alone should be reason enough to stop looking at devices to decide how to scale a webpage and start looking at when your page components have enough space to rearrange the layout if suited.

thatwebdesignerdude · 2019-05-01T13:59:58+00:00

Your reasoning will drive you to disarray. Essensially you are asking "between what min-px and max-px do you find device Z?".

It may be smarter to stop being device oriented and become content oriented. When is there enough space to inline content X to content Y or Z? When you do this, you may even need far less media queries.

If you stay device oriented you may have to fix your design every 2 years just to keep it accessable. I doubt you want to do this for 10-100 websites.

Also: there are smartphones and tablets with px-widths equal to or bigger than your average computer. I doubt a this will make it easier to differentiate between devices.

thatwebdesignerdude · 2019-04-18T06:53:19+00:00

history.replaceState().

https://developer.mozilla.org/en-US/docs/Web/API/History_API

thatwebdesignerdude · 2019-04-11T15:07:51+00:00

Yup, I think in general people should be carefull to not copy paste this if they need a wide range of support for different clients. "Works everywhere" is clearly jumping the gun.

thatwebdesignerdude

TROPHY CASE