Sign Up Now!

Sign up and get personalized intelligence briefing delivered daily.


Sign Up

Articles related to "html"


How To Put Arrows at the Bottom of a Div

  • Inside of the selector, you need to set a value for the content property.
  • Next you'll want to use the margin property to center the arrow on the div.
  • After that, go ahead and set the height and width properties to zero.
  • The reason you want to do this is because if you give the arrow a width, it won't look like an arrow unless you do some crazy CSS magic.
  • The height doesn't necessarily have to be set to zero as long as the width is, but doing so will help you to avoid those nice layout surprises later.
  • You'll need to set the border-top property.
  • Next you need to set the border-left and border-right properties.
  • An interesting tidbit here is that you don't give the border-left and border-right properties a color.
  • They need to be set to transparent because they are responsible for creating the arrow.

save | comments | report | share on


Lets Build Web Components! Part 1: The Standards

  • I put together a silly little benchmark that builds a simple table three ways: by cloning a template element, by directly using DOM APIs, and by setting innerHTML.
  • For example, the controls in a video element are actually a separate DOM tree which lives, batman-like, in the shadows of your page.
  • With these three standards: Template, Custom Elements, and Shadow DOM, we have everything we need to write rich component UIs that run directly in the browser without needing any special tooling or build steps.
  • The fourth standard, JavaScript Modules, enables us to factor complex apps composed of custom elements and publish our components for others to use.
  • Web components standards let us factor self-contained, reusable UI that runs directly in the browser without cumbersome build steps.
  • These components can then be used anywhere you use regular elements: in plain HTML, or within your app's framework-driven templates.

save | comments | report | share on


Software Complexity and Strategy

  • As we added new support for server-side scripting and especially more and more support for editing SharePoint-based webs, we continually ran into questions about how Preview should work and then additional programming effort to implement that behavior.
  • When I moved to lead the Word development team for the Office 2007 product cycle, we were working with PowerPoint on enhancing visual support for tables.
  • This view that costs scale with feature depth because of growth in essential complexity leads to a great emphasis in continuously improving and refactoring the code base.
  • What I found is that advocates for these new technologies tended to confuse the productivity benefits of working on a small code base (small N essential complexity due to fewer feature interactions and small N cost for features that scale with size of codebase) with the benefits of the new technology itself — efforts using a new technology inherently start small so the benefits get conflated.

save | comments | report | share on


Sure you want to leave?—browser beforeunload event

  • Just like playing audio on the web, browsers can ignore your request if a user hasn't interacted with your page.
  • So, let's build an abstraction layer around the Promise object, which represents the future result of work- like a response from a network fetch().
  • By calling addToPendingWork with a Promise—for example, one returned from fetch()—we'll control whether to warn the user that they're going to unload your page.
  • This works well for network operations and such- they naturally return a Promise because you're blocked on something outside the webpage's control.
  • If the network request you're waiting on actually has no result- you're just sending it to a server, and ignoring the result- you can use the modern browser call navigator.sendBeacon().
  • And you might also save your users' data—if a network request is still pending while a page is being closed, beforeunload can be useful to ensure that it does complete successfully.

save | comments | report | share on


Sure you want to leave?—browser beforeunload event

  • Just like playing audio on the web, browsers can ignore your request if a user hasn't interacted with your page.
  • By calling addToPendingWork with a Promise—for example, one returned from fetch()—we'll control whether to warn the user that they're going to unload your page.
  • This works well for network operations and such- they naturally return a Promise because you're blocked on something outside the webpage's control.
  • If the user has typed into the form, we can block the page from unloading, using the same pending work idiom as before.
  • If the network request you're waiting on actually has no result- you're just sending it to a server, and ignoring the result- you can use the modern browser call navigator.sendBeacon().
  • And you might also save your users' data—if a network request is still pending while a page is being closed, beforeunload can be useful to ensure that it does complete successfully.

save | comments | report | share on