Web users leave privacy worries behind

first_imgBetween Facebook and MySpace ? and an onslaught of confessional TV talk shows, you have to wonder if the concept of personal privacy is an anachronism. A Silicon Valley startup is betting that it is. Pudding Media is testing a free Internet phone service. The catch is that the company’s software eavesdrops on the conversation and, in response to certain keywords, posts related ads on the caller’s computer screen. The example generally given is that a conversation about going out to dinner and a movie will cause ads for restaurants and films to pop up on the screen. The advertisers pay based on the number of clicks on their ads. To more tightly focus the ads, Pudding Media asks for the subscriber’s sex, age and ZIP code, among other details. ? Google already monitors its Gmail for information of interest to advertisers without a great deal of outcry. Pudding Media CEO Ariel Maislos told The New York Times that young people are less concerned with privacy than older people and that “the trade-off of getting personalized content versus privacy is a concept that is accepted in the world.” 160Want local news?Sign up for the Localist and stay informed Something went wrong. Please try again.subscribeCongratulations! You’re all set! Sadly, he’s probably right. – Dale McFeatters Scripps Howard News Service last_img read more

In Case You Missed It: News and Rumors – Week of September 7, 2018

first_imgShare This!Who else has been off this week? I love 4 day weeks, but they do mess me up. What about you?This week, there’s a lot of news about Disney Cruise Line, see what Freeform has in store for celebrating Halloween, and more!In Case You Missed It – Disney and Universal Orlando News and RumorsBye. That’s what Guests said to a bug’s land this week. Share your favorite memories of this land that closed to make way for the upcoming Marvel land at Disney California Adventure.Could Disney Cruise Line make more of a presence in Miami? Things sure seem to look that way. Are you excited about this potential development?Disney has made a presentation to the Bahamas Chamber of Commerce about their hope to develop a destination at Lighthouse Point as a new potential cruise port.Effective Tuesday, September 11, Disney Cruise Line is adjusting its Final Payment and Cancellation Policy. This is a big change, so if you’re book a Disney Cruise, you’ll want to be aware of this one.I’m excited about this news personally. A brand new Vera Bradley/Disney line comes out today! I was worried that they had maybe stopped their partnership, since I hadn’t seen a new Disney pattern in a while.This past weekend, Spaceship Earth sprung a leak! Luckily, no major damage was done to the attraction.It appears that John Williams and Michael Giacchino could be scoring the music we hear while touring around Star Wars: Galaxy’s Edge! Get ready for some epicness, if this is true!Love these sketches of Mickey Mouse through the years!This year, Freeform will celebrate 31 days of Halloween! Besides a marathon of Hocus Pocus, I find the Decorating Disney Halloween episode most intriguing….will definitely set the DVR for that!Have you been following the Redbox/Disney saga? Well, this week, Disney received a major victory. Thoughts?In Case We Missed ItWhat did we miss? Attach your ideas to an Orange Bird Wallet by Loungefly and send it to [email protected] with the words “In Case You Missed It” in the subject line.last_img read more

US mag tips Durban as SA’s secret jewel

first_img1 November 2013Durban instead of Cape Town, New York Magazine advises its readers in its winter travel 2013 special.While the publication acknowledges that the world’s greatest cities “got their reputation for a reason”, they’ve decided to turn their attention to long-overshadowed cities such as Bourdeaux (not Paris), Birmingham (not London), Leipzig (not Berlin) – and Durban (not Cape Town).“They may not sell as many guidebooks as their A-list counterparts, but they have just as much charm and excitement – with way, way fewer tourists.”The weekly general interest magazine praises Durban’s “spectacular beaches” with their temperate Indian Ocean waters; the world-renowned aquarium at uShaka Marine World, “which is actually much larger than its Cape Town counterpart”; and the I Heart Market, which is held in the world-class Moses Mabhida stadium for its “hand-stitched leather iPad cases, tribal-print baseball caps, and mod vintage dresses by local artisans and collectors”.The city’s “vibrant blend” of Zulu, Indian and British influences means that the cuisine is more eclectic than Cape Town’s. Durban is well known locally for its curry – and the magazine urges visitors to try bunny chow, which is “messy curry served in a hollowed-out loaf of bread”.Other top spots highlighted by the magazine are the chic Oyster Box Hotel; Ile Maurice, where the crepes Suzettes are apparently unmissable; and Teremok Marine hotel in Umhlanga, which overlooks the harbour.Cape Town was recently named in the top three best destinations in the world to visit by Lonely Planet, the global travel publishers.SAinfo reporterlast_img read more

Getting To Know The MutationObserver API

first_imgSee live demo →After you start the observer, try using CTRL-B and CTRL-I to format the editable text. You’ll notice this works much more effectively than the previous characterData example. In this case, the broken up child nodes don’t affect the observer because we’re observing all nodes inside the targeted node, instead of a single text node.Recording Old ValuesOften when observing for changes to the DOM, you’ll want to take note of the old values and possibly store them or use them elsewhere. This can be done using a few different properties in the options object.attributeOldValueFirst, let’s try logging out the old attribute value after it’s changed. Here’s how my options will look along with my callback:options = { attributes: true, attributeOldValue: true}function mCallback (mutations) { for (let mutation of mutations) { if (mutation.type === ‘attributes’) { // Do something here… } }} function mCallback(mutations) { for (let mutation of mutations) { if (mutation.type === ‘characterData’) { // Do something here… } }}Notice again the type being looked for in the callback function is characterData.See live demo →In this example, I’m looking for changes to a specific text node, which I target via element.childNodes[0]. This is a little hacky but it will do for this example. The text is user-editable via the contenteditable attribute on a paragraph element.Challenges When Observing For Character Data ChangesIf you’ve fiddled around with contenteditable, then you might be aware that there are keyboard shortcuts that allow for rich text editing. For example, CTRL-B makes text bold, CTRL-I makes text italic, and so forth. This will break up the text node into multiple text nodes, so you’ll notice the MutationObserver will stop responding unless you edit the text that’s still considered part of the original node.I should also point out that if you delete all the text, the MutationObserver will no longer trigger the callback. I’m assuming this happens because once the text node disappears, the target element is no longer in existence. To combat this, my demo stops observing when the text is removed, although things do get a little sticky when you use rich text shortcuts.But don’t worry, later in this article, I’ll discuss a better way to use the characterData option without having to deal with as many of these quirks.Observing For Changes To Specified AttributesEarlier I showed you how to observe for changes to attributes on a specified element. In that case, although the demo triggers a class name change, I could have changed any attribute on the specified element. But what if I want to observe changes to one or more specific attributes while ignoring the others?I can do that using the optional attributeFilter property in the option object. Here’s an example:let options = { attributes: true, attributeFilter: [‘hidden’, ‘contenteditable’, ‘data-par’] }, observer = new MutationObserver(mCallback);function mCallback (mutations) { for (let mutation of mutations) { if (mutation.type === ‘attributes’) { // Do something here… } }}As shown above, the attributeFilter property accepts an array of specific attributes that I want to monitor. In this example, the MutationObserver will trigger the callback each time one or more of the hidden, contenteditable, or data-par attributes is modified.See live demo →Again I’m targeting a specific paragraph element. Notice the select drop down that chooses which attribute will be changed. The draggable attribute is the only one that won’t qualify since I didn’t specify that one in my options.Notice in the code that I’m again using the attributeName property of the MutationRecord object to log which attribute was changed. And of course, as with the other demos, the MutationObserver won’t start monitoring for changes until the “start” button is clicked.One other thing I should point out here is that I don’t need to set the attributes value to true in this case; it’s implied due to attributesFilter being set to true. That’s why my options object could look as follows, and it would work the same:let options = { attributeFilter: [‘hidden’, ‘contenteditable’, ‘data-par’]}On the other hand, if I explicitly set attributes to false along with an attributeFilter array, it wouldn’t work because the false value would take precedence and the filter option would be ignored.Observing For Changes To Nodes And Their Sub-TreeSo far when setting up each MutationObserver, I’ve only been dealing with the targeted element itself and, in the case of childList, the element’s immediate children. But there certainly could be a case where I might want to observe for changes to one of the following:An element and all its child elements;One or more attributes on an element and on its child elements;All text nodes inside an element.All of the above can be achieved using the subtree property of the options object.childList With subtreeFirst, let’s look for changes to an element’s child nodes, even if they’re not immediate children. I can alter my options object to look like this:options = { childList: true, subtree: true}Everything else in the code is more or less the same as the previous childList example, along with some extra markup and buttons.See live demo →Here there are two lists, one nested inside the other. When the MutationObserver is started, the callback will trigger for changes to either list. But if I were to change the subtree property back to false (the default when it’s not present), the callback would not execute when the nested list is modified.Attributes With subtreeHere’s another example, this time using subtree with attributes and attributeFilter. This allows me to observe for changes to attributes not only on the target element but also on the attributes of any child elements of the target element:options = { attributes: true, attributeFilter: [‘hidden’, ‘contenteditable’, ‘data-par’], subtree: true} See live demo →Start the observer, then try the add/remove buttons for both lists. The only catch here is that if you hit one of the “stop” buttons, the observer will stop observing for both lists, not just the one it’s targeting.Moving A Node Tree That’s Being ObservedOne last thing I’ll point out is that a MutationObserver will continue to observe for changes to a specified node even after that node has been removed from its parent element.For example, try out the following demo:See live demo →This is another example that uses childList to monitor for changes to the child elements of a target element. Notice the button that disconnects the sub-list, which is the one being observed. Click the “Start…” button, then click the “Move…” button to move the nested list. Even after the list is removed from its parent, the MutationObserver continues to observe for the specified changes. Not a major surprise that this happens, but it’s something to keep in mind.ConclusionThat covers just about all the primary features of the MutationObserver API. I hope this deep dive has been useful for you to get familiar with this standard. As mentioned, browser support is strong and you can read more about this API on MDN’s pages.I’ve put all the demos for this article intoa CodePen collection, should you want to have an easy place to mess around with the demos. (dm, il)From our sponsors: Getting To Know The MutationObserver API Try out the demo →Again, I’ve abbreviated the code for clarity, but the important parts are:The options object is using the attributes property, set to true to tell the MutationObserver that I want to look for changes to the targeted element’s attributes.The mutation type I’m testing for in my loop is attributes, the only one that qualifies in this case.I’m also using the attributeName property of the mutation object, which allows me to find out which attribute was changed.When I trigger the observer, I’m passing in the paragraph element by reference, along with the options.In this example, a button is used to toggle a class name on the targeted HTML element. The callback function in the mutation observer is triggered every time the class is added or removed.Observing For Character Data ChangesAnother change you might want to look for in your app is mutations to character data; that is, changes to a specific text node. This is done by setting the characterData property to true in the options object. Here’s the code:let options = { characterData: true }, observer = new MutationObserver(mCallback); Getting To Know The MutationObserver API Getting To Know The MutationObserver API Louis Lazaris 2019-04-26T13:30:16+02:00 2019-04-26T12:34:22+00:00In complex web apps, DOM changes can be frequent. As a result, there are instances where your app might need to respond to a specific change to the DOM.For some time, the accepted way to look for changes to the DOM was by means of a feature called Mutation Events, which is now deprecated. The W3C-approved replacement for Mutation Events is the MutationObserver API, which is what I’ll be discussing in detail in this article.A number of older articles and references discuss why the old feature was replaced, so I won’t go into detail on that here (besides the fact that I wouldn’t be able to do it justice). The MutationObserver API has near complete browser support, so we can use it safely in most — if not all — projects, should the need arise.Basic Syntax For A MutationObserverA MutationObserver can be used in a number of different ways, which I’ll cover in detail in the rest of this article, but the basic syntax for a MutationObserver looks like this:let observer = new MutationObserver(callback); See live demo →Notice the use of the attributeName and oldValue properties of the MutationRecord object. Try the demo by entering different values in the text field. Notice how the log updates to reflect the previous value that was stored.characterDataOldValueSimilarly, here’s how my options would look if I want to log old character data:options = { characterData: true, subtree: true, characterDataOldValue: true} function callback (mutations) { // do something here}observer.observe(targetNode, observerOptions);The first line creates a new MutationObserver using the MutationObserver() constructor. The argument passed into the constructor is a callback function that will be called on each DOM change that qualifies.The way to determine what qualifies for a particular observer is by means of the final line in the above code. On that line, I’m using the observe() method of the MutationObserver to begin observing. You can compare this to something like addEventListener(). As soon as you attach a listener, the page will ‘listen’ for the specified event. Similarly, when you start observing, the page will begin ‘observing’ for the specified MutationObserver.The observe() method takes two arguments: The target, which should be the node or node tree on which to observe for changes; and an options object, which is a MutationObserverInit object that allows you to define the configuration for the observer.The final key basic feature of a MutationObserver is the disconnect() method. This allows you to stop observing for the specified changes, and it looks like this:observer.disconnect();Options To Configure A MutationObserverAs mentioned, the observe() method of a MutationObserver requires a second argument that specifies the options to describe the MutationObserver. Here’s how the options object would look with all possible property/value pairs included:let options = { childList: true, attributes: true, characterData: false, subtree: false, attributeFilter: [‘one’, ‘two’], attributeOldValue: false, characterDataOldValue: false};When setting up the MutationObserver options, it’s not necessary to include all these lines. I’m including these simply for reference purposes, so you can see what options are available and what types of values they can take. As you can see, all except one are Boolean.In order for a MutationObserver to work, at least one of childList, attributes, or characterData needs to be set to true, otherwise an error will be thrown. The other four properties work in conjunction with one of those three (more on this later).So far I’ve merely glossed over the syntax to give you an overview. The best way to consider how each of these features works is by providing code examples and live demos that incorporate the different options. So that’s what I’ll do for the rest of this article.Observing Changes To Child Elements Using childListThe first and simplest MutationObserver you can initiate is one that looks for child nodes of a specified node (usually an element) to be added or removed. For my example, I’m going to create an unordered list in my HTML, and I want to know whenever a child node is added or removed from this list element.The HTML for the list looks like this: read more