text:
Journal tags: scripting
Submitting a form with datalist
I'm a big fan of HTML5's datalist element and its elegant design. It's a way to progressively enhance any input element into a combobox.
You use the list attribute on the input element to point to the ID of the associated datalist element.
<label for="homeworld">Your home planet</label>
<input type="text" name="homeworld" id="homeworld" list="planets">
<datalist id="planets">
<option value="Mercury">
<option value="Venus">
<option value="Earth">
<option value="Mars">
<option value="Jupiter">
<option value="Saturn">
<option value="Uranus">
<option value="Neptune">
</datalist>
It even works on input type="color", which is pretty cool!
The most common use case is as an autocomplete widget. That's how I'm using it over on The Session, where the datalist is updated via Ajax every time the input is updated.
But let's stick with a simple example, like the list of planets above. Suppose the user types "jup" …the datalist will show "Jupiter" as an option. The user can click on that option to automatically complete their input.
It would be handy if you could automatically submit the form when the user chooses a datalist option like this.
Well, tough luck.
The datalist element emits no events. There's no way of telling if it has been clicked. This is something I've been trying to find a workaround for.
I got my hopes up when I read Amber's excellent article about document.activeElement. But no, the focus stays on the input when the user clicks on an option in a datalist.
So if I can't detect whether a datalist has been used, this best I can do is try to infer it. I know it's not exactly the same thing, and it won't be as reliable as true detection, but here's my logic:
Keep track of the character count in the input element.
Every time the input is updated in any way, check the current character count against the last character count.
If the difference is greater than one, something interesting happened! Maybe the user pasted a value in …or maybe they used the datalist.
Loop through each of the options in the datalist.
If there's an exact match with the current value of the input element, chances are the user chose that option from the datalist.
So submit the form!
Here's how that translates into DOM scripting code:
document.querySelectorAll('input[list]').forEach( function (formfield) {
var datalist = document.getElementById(formfield.getAttribute('list'));
var lastlength = formfield.value.length;
var checkInputValue = function (inputValue) {
if (inputValue.length - lastlength > 1) {
datalist.querySelectorAll('option').forEach( function (item) {
if (item.value === inputValue) {
formfield.form.submit();
lastlength = inputValue.length;
formfield.addEventListener('input', function () {
checkInputValue(this.value);
}, false);
I've made a gist with some added feature detection and mustard-cutting at the start. You should be able to drop it into just about any page that's using datalist. It works even if the options in the datalist are dynamically updated, like the example on The Session.
It's not foolproof. The inference relies on the difference between what was previously typed and what's autocompleted to be more than one character. So in the planets example, if someone has type "Jupite" and then they choose "Jupiter" from the datalist, the form won't automatically submit.
But still, I reckon it covers most common use cases. And like the datalist element itself, you can consider this functionality a progressive enhancement.
Wednesday, August 26th, 2020 3:00pm
Tagged with datalist inputs forms autosubmit autocomplete combobox widget html5 progressive enhancement frontend development dom scripting javascript
Custom properties
I made the website for the Clearleft podcast last week. The design is mostly lifted straight from the rest of the Clearleft website. The main difference is the masthead. If the browser window is wide enough, there's a background image on the right hand side.
I mostly added that because I felt like the design was a bit imbalanced without something there. On the home page, it's a picture of me. Kind of cheesy. But the image can be swapped out. On other pages, there are different photos. All it takes is a different class name on that masthead.
I thought about having the image be completely random (and I still might end up doing this). I'd need to use a bit of JavaScript to choose a class name at random from a list of possible values. Something like this:
var names = ['jeremy','katie','rich','helen','trys','chris'];
var name = names[Math.floor(Math.random() * names.length)];
document.querySelector('.masthead').classList.add(name);
(You could paste that into the dev tools console to see it in action on the podcast site.)
Then I read something completely unrelated. Cassie wrote a fantastic article on her site called Making lil' me - part 1 . In it, she describes how she made the mouse-triggered animation of her avatar in the footer of her home page.
It's such a well-written technical article. She explains the logic of what she's doing, and translates that logic into code. Then, after walking you through the native code, she shows how you could use the Greeksock library to achieve the same effect. That's the way to do it! Instead of saying, "Here's a library that will save you time—don't worry about how it works!", she's saying "Here's it works without a library; here's how it works with a library; now you can make an informed choice about what to use." It's a very empowering approach.
Anyway, in the article, Cassie demonstrates how you can use custom properties as a bridge between JavaScript and CSS. JavaScript reads the mouse position and updates some custom properties accordingly. Those same custom properties are used in CSS for positioning. Voila! Now you've got the position of an element responding to mouse movements.
That's what made me think of the code snippet I wrote above to update a class name from JavaScript. I automatically thought of updating a class name because, frankly, that's how I've always done it. I'd say about 90% of the DOM scripting I've ever done involves toggling the presence of class values: accordions, fly-out menus, tool-tips, and other progressive disclosure patterns.
That's fine. But really, I should try to avoid touching the DOM at all. It can have performance implications, possibly triggering unnecessary repaints and reflows.
Now with custom properties, there's a direct line of communication between JavaScript and CSS. No need to use the HTML as a courier.
This made me realise that I need to be aware of automatically reaching for a solution just because that's the way I've done something in the past. I should step back and think about the more efficient solutions that are possible now.
It also made me realise that "CSS variables" is a very limiting way of thinking about custom properties. The fact that they can be updated in real time—in CSS or JavaScript—makes them much more powerful than, say, Sass variables (which are more like constants).
But I too have been guilty of underselling them. I almost always refer to them as "CSS custom properties" …but a lot of their potential comes from the fact that they're not confined to CSS. From now on, I'm going to try calling them custom properties, without any qualification.
Tuesday, July 7th, 2020 4:07pm
Tagged with custom properties css javascript dom scripting frontend development randomness animation
A tiny lesson in query selection
We have a saying at Clearleft:
Everything is a tiny lesson.
I bet you learn something new every day, even if it's something small. These small tips and techniques can easily get lost. They seem almost not worth sharing. But it's the small stuff that takes the least effort to share, and often provides the most reward for someone else out there. Take for example, this great tip for getting assets out of Sketch that Cassie shared with me.
Cassie was working on a piece of JavaScript yesterday when we spotted a tiny lesson that tripped up both of us. The script was a fairly straightforward piece of DOM scripting. As a general rule, we do a sort of feature detection near the start of the script. Let's say you're using querySelector to get a reference to an element in the DOM:
var someElement = document.querySelector('.someClass');
Before going any further, check to make sure that the reference isn't falsey (in other words, make sure that DOM node actually exists):
if (!someElement) return;
That will exit the script if there's no element with a class of someClass on the page.
The situation that tripped us up was like this:
var myLinks = document.querySelectorAll('a.someClass');
if (!myLinks) return;
That should exit the script if there are no A elements with a class of someClass, right?
As it turns out, querySelectorAll is subtly different to querySelector. If you give querySelector a reference to non-existent element, it will return a value of null (I think). But querySelectorAll always returns an array (well, technically it's a NodeList but same difference mostly). So if the selector you pass to querySelectorAll doesn't match anything, it still returns an array, but the array is empty. That means instead of just testing for its existence, you need to test that it's not empty by checking its length property:
if (!myLinks.length) return;
That's a tiny lesson.
Thursday, February 21st, 2019 5:44pm
Tagged with tinylesson javascript domscripting queryselectorall code coding sharing frontend development detection
Teaching in Porto, day three
Day two ended with a bit of a cliffhanger as I had the students mark up a document, but not yet style it. In the morning of day three, the styling began.
Rather than just treat "styling" as one big monolithic task, I broke it down into typography, colour, negative space, and so on. We time-boxed each one of those parts of the visual design. So everyone got, say, fifteen minutes to write styles relating to font families and sizes, then another fifteen minutes to write styles for colours and background colours. Bit by bit, the styles were layered on.
When it came to layout, we closed the laptops and returned to paper. Everyone did a quick round of 6-up sketching so that there was plenty of fast iteration on layout ideas. That was followed by some critique and dot-voting of the sketches.
Rather than diving into the CSS for layout—which can get quite complex—I instead walked through the approach for layout; namely putting all your layout styles inside media queries. To explain media queries, I first explained media types and then introduced the query part.
I felt pretty confident that I could skip over the nitty-gritty of media queries and cross-device layout because the next masterclass that will be taught at the New Digital School will be a week of responsive design, taught by Vitaly. I just gave them a taster—Vitaly can dive deeper.
By lunch time, I felt that we had covered CSS pretty well. After lunch it was time for the really challenging part: JavaScript.
The reason why I think JavaScript is challenging is that it's inherently more complex than HTML or CSS. Those are declarative languages with fairly basic concepts at heart (elements, attributes, selectors, etc.), whereas an imperative language like JavaScript means entering the territory of logic, loops, variables, arrays, objects, and so on. I really didn't want to get stuck in the weeds with that stuff.
I focused on the combination of JavaScript and the Document Object Model as a way of manipulating the HTML and CSS that's already inside a browser. A lot of that boils down to this pattern:
When (some event happens), then (take this action).
We brainstormed some examples of this e.g. "When the user submits a form, then show a modal dialogue with an acknowledgement." I then encouraged them to write a script …but I don't mean a script in the JavaScript sense; I mean a script in the screenwriting or theatre sense. Line by line, write out each step that you want to accomplish. Once you've done that, translate each line of your English (or Portuguese) script into JavaScript.
I did quick demo as a proof of concept (which, much to my surprise, actually worked first time), but I was at pains to point out that they didn't need to remember the syntax or vocabulary of the script; it was much more important to have a clear understanding of the thinking behind it.
With the remaining time left in the day, we ran through the many browser APIs available to JavaScript, from the relatively simple—like querySelector and Ajax—right up to the latest device APIs. I think I got the message across that, using JavaScript, there's practically no limit to what you can do on the web these days …but the trick is to use that power responsibly.
At this point, we've had three days and we've covered three layers of web technologies: HTML, CSS, and JavaScript. Tomorrow we'll take a step back from the nitty-gritty of the code. It's going to be all about how to plan and think about building for the web before a single line of code gets written.
Thursday, February 16th, 2017 12:17am
Tagged with teaching porto masterclass css web javascript dom scripting browsers
When I was talking about Async, Ajax, and animation, I mentioned the little trick I've used of generating a progress element to indicate to the user that an Ajax request is underway.
I sometimes use the same technique even if Ajax isn't involved. When a form is being submitted, I find it's often good to provide explicit, immediate feedback that the submission is underway. Sure, the browser will do its own thing but a browser doesn't differentiate between showing that a regular link has been clicked, and showing that all those important details you just entered into a form are on their way.
Here's the JavaScript I use. It's fairly simplistic, and I'm limiting it to POST requests only. At the moment that a form begins to submit, a progress element is inserted at the end of the form …which is usually right by the submit button that the user will have just pressed.
While I'm at it, I also set a variable to indicate that a POST submission is underway. So even if the user clicks on that submit button multiple times, only one request is set.
You'll notice that I'm attaching an event to each form element, rather than using event delegation to listen for a click event on the parent document and then figuring out whether that click event was triggered by a submit button. Usually I'm a big fan of event delegation but in this case, it's important that the event I'm listening to is the submit event. A form won't fire that event unless the data is truly winging its way to the server. That means you can do all the client-side validation you want—making good use of the required attribute where appropriate—safe in the knowledge that the progess element won't be generated until the form has passed its validation checks.
If you like this particular pattern, feel free to use the code. Better yet, improve upon it.
Friday, March 7th, 2014 12:41pm
Tagged with javascript code forms progress validation scripting ui interface feedback
Async, Ajax, and animation
I hadn't been to one of Brighton's Async JavaScript meetups for quite a while, but I made it along last week. Now that it's taking place at 68 Middle Street, it's a lot easier to get to …seeing as the Clearleft office is right upstairs.
James Da Costa gave a terrific presentation on something called Pjax. In related news, it turns out that the way I've been doing Ajax all along is apparently called Pjax.
Back when I wrote Bulletproof Ajax , I talked about using Hijax. The basic idea is:
First, build an old-fashioned website that uses hyperlinks and forms to pass information to the server. The server returns whole new pages with each request.
Now, use JavaScript to intercept those links and form submissions and pass the information via XMLHttpRequest instead. You can then select which parts of the page need to be updated instead of updating the whole page.
So basically your JavaScript is acting like a dumb waiter shuttling requests for page fragments back and forth between the browser and the server. But all the clever stuff is happening on the server, not the browser. To the end user, there's no difference between that and a site that's putting all the complexity in the browser.
In fact, the only time you'd really notice a difference is when something goes wrong: in the Hijax model, everything just falls back to full-page requests but keeps on working. That's the big difference between this approach and the current vogue for "single page apps" that do everything in the browser—when something goes wrong there, the user gets bupkis.
Pjax introduces an extra piece of the puzzle—which didn't exist when I wrote Bulletproof Ajax —and that's pushState, part of HTML5's History API, to keep the browser's URL updated. Hence, pushState + Ajax = Pjax.
As you can imagine, I was nodding in vigourous agreement with everything James was demoing. It was refreshing to find that not everyone is going down the Ember/Angular route of relying entirely on JavaScript for core functionality. I was beginning to think that nobody cared about progressive enhancement any more, or that maybe I was missing something fundamental, but it turns out I'm not crazy after all: James's demo showed how to write front-end code responsibly.
What was fascinating though, was hearing why people were choosing to develop using Pjax. It isn't necessarily that they care about progressive enhancement, robustness, and universal access. Rather, it's often driven by the desire to stay within the server-side development environment that they're comfortable with. See, for example, DHH's explanation of why 37 Signals is using this approach:
So you get all the advantages of speed and snappiness without the degraded development experience of doing everything on the client.
It sounds like they're doing the right thing for the wrong reasons (a wrong reason being "JavaScript is icky!").
A lot of James's talk was focused on the user experience of the interfaces built with Hijax/Pjax/whatever. He had some terrific examples of how animation can make an enormous difference. That inspired me to do a little bit of tweaking to the Ajaxified/Hijaxified/Pjaxified portions of The Session.
Whenever you use Hijax to intercept a link, it's now up to you to provide some sort of immediate feedback to the user that something is happening—normally the browser would take care of this (remember Netscape's spinning lighthouse?)—but when you hijack that click, you're basically saying "I'll take care of this." So you could, for example, display a spinning icon.
One little trick I've used is to insert an empty progress element.
Normally the progress element takes max and value attributes to show how far along something has progressed:
<progress max="100" value="75">75%</progress>
But if you leave those out, then it's an indeterminate progess bar:
<progress>loading...</progress>
The rendering of the progress bar will vary from browser to browser, and that's just fine. Older browsers that don't understand the progress will display whatever's between the opening and closing tags.
Voila! You've got a nice lightweight animation to show that an Ajax request is underway.
Sunday, March 2nd, 2014 8:49pm
Tagged with async brighton event presentation javascript ajax hijax pjax animation interface development code scripting
The ghost of browsers past
Even before a line of code was written for the line-mode browser simulator when we gathered together at CERN, there was a gleeful period of digital spelunking.
We poked at the markup of the first ever website…
What's that NEXTID element? Turns it out it's something specific to the NeXT operating system.
Why does the first iteration of HTML already contain H1 through to H6? It's because they were lifted wholesale from a flavour of SGML—Standard Generalized Markup Language—that was already in use at CERN.
Oh, and Brian asked Robert Cailliau why they went with the term World Wide Web. "Well," he said, "we had to call it something. And we thought we could always change it later."
Then there was the story of the line-mode browser. It was created by Nicola Pellow, who was a student at CERN in 1990. She later worked on the Mac browser but her involvement with kickstarting the world wide web ended around 1993. She never showed up to any of the reunions.
We poked around in the (surprisingly short) source code of the line-mode browser. We found the lines that described how elements should be styled—the term "style sheet" appeared in a comment!
If you've fired up the line-mode browser simulator and run some websites through it, you'll probably see occasions where a whole bunch of JavaScript—nestled between script tags in the head of the document—gets rendered to the screen.
We could've hidden that JavaScript, but we made a deliberate decision to display it. That's what the line-mode browser would have done. The script element didn't exist back then. Heck, JavaScript didn't exist back then. So browsers would have handled the unknown element in the standard HTML way: ignore the opening and closing tags and just render what's in-between them. That's still the error-handling model for unrecognised elements in HTML.
This is why we used to write our JavaScript like this:
(JavaScript goes here)
The HTML comments stopped the JavaScript from being rendered to the screen in older browsers (like the line-mode browser). Using the opening HTML comment <!-- is functionally equivalent to // single-line comments in JavaScript …although you still need to prefix the closing --> comment with a //.
I remember doing this when I first started making websites in the 90s. You can see it if you view source on the first version of this website.
Later on, we all switched to XHTML so we updated the syntax to make it valid XML.
The <![CDATA[ part stops an XML parser from trying to parse the JavaScript. But HTML parsers would choke on that because it starts with an angle bracket. Hence the JavaScript-style // comment.
Anyway, we don't bother with HTML or XHTML comments at the start of our script blocks anymore. And that's why the line-mode browser simulator renders the JavaScript to the screen.
Note that the JavaScript isn't executed. That's thanks to a clever little hack by Remy: the line-mode browser simulator changes the type attribute of every script element to text/plain, effectively defusing them. Smart!
Wednesday, September 25th, 2013 12:50am
Tagged with browsers standards web history cern devdays parsing hacking html markup scripting javascript
Canvas sparklines
I like sparklines a lot. Tufte describes a sparkline as:
…a small intense, simple, word-sized graphic with typographic resolution.
Four years ago, I added sparklines to Huffduffer using Google's chart API. That API comes in two flavours: a JavaScript API for client-side creation of graphs, and image charts for server-side rendering of charts as PNGs.
The image API is really useful: there's no reliance on JavaScript, it works in every browser capable of displaying images, and it's really flexible and customisable. Therefore it is, of course, being deprecated.
The death warrant for Google image charts sets the execution date for 2015. Time to start looking for an alternative.
I couldn't find a direct equivalent to the functionality that Google provides i.e. generating the images dynamically on the server. There are, however, plenty of client-side alternatives, many of them using canvas.
Most of the implementations I found were a little heavy-handed for my taste: they either required jQuery or Processing or both. I just wanted a quick little script for generating sparklines from a dataset of numbers. So I wrote my own.
I've put my code up on Github as Canvas Sparkline.
Here's the JavaScript. You create a canvas element with the dimensions you want for the sparkline, then pass the ID of that element (along with your dataset) into the sparkline function:
sparkline ('canvasID', [12, 18, 13, 12, 11, 15, 17, 20, 15, 12, 8, 7, 9, 11], true);
(that final Boolean value at the end just indicates whether you want a red dot at the end of the sparkline).
The script takes care of normalising the values, so it doesn't matter how many numbers are in the dataset or whether the range of the numbers is in the tens, hundreds, thousands, or hundreds of thousands.
There's plenty of room for improvement:
The colour of the sparkline is hardcoded (50% transparent black) but it could be passed in as a value.
All the values should probably be passed in as an array of options rather than individual parameters.
Feel free to fork, adapt, and improve.
The sparklines are working quite nicely, but I can't help but feel that this isn't the right tool for the job. Ideally, I'd like to keep using a server-side solution like Google's image charts. But if I am going to use a client-side solution, I'm not sure that canvas is the right element. This should really be SVG: canvas is great for dynamic images and animations that need to update quite quickly, but sparklines are generally pretty static. If anyone fancies making a lightweight SVG solution for sparklines, that would be lovely.
In the meantime, you can see Canvas Sparkline in action on the member profiles at The Session, like here, here, here, or here.
Update: Ask and thou shalt receive. Check out this fantastic lightweight SVG solution from Stuart—bloody brilliant!
Sunday, December 30th, 2012 7:10pm
Tagged with canvas sparklines javascript scripting code github tufte dataviz charts graph
While I was in San Francisco for the last Event Apart of the year in December, Luke pulled me aside while he was preparing for his A Day Apart workshop on mobile web design. As befits the man who literally wrote the book on web forms and also wrote the the book on mobile-first design, Luke was planning to spend plenty of time covering input on mobile devices and he wanted my opinion on one of the patterns he was going to mention.
Let's say you've got your typical checkout form asking for credit card details. The user is going to need to specify the expiry date of their credit card, something that historically would have been done with select elements, like so:
January February March April May June July August September October November December 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020
With the introduction of the new input types in HTML5, we can now just use input type="month".
That's particularly nice on mobile devices that support input type="month" like Mobile Safari since iOS5.
But the behaviour on non-supporting browsers would be to display just like input type="text" …not ideal for inputting a date.
So the pattern that Luke proposed was to start with the traditional double drop-downs for month and year, and then use feature detection to replace them with input type="month" in supporting browsers.
That was an angle I hadn't thought of. Usually when I'm implementing new HTML5 input types (like input type="number") I put the new type in the markup and then try to come up with JavaScript polyfills for older non-supporting browsers. In this case though, the old-fashioned way is what goes in the markup and JavaScript does the enhancing for newer browsers.
The only downside is that some the desktop browsers that do support input type="month" do so in a way that—from a UI standpoint—seems like a step backwards from simply having two selects: Safari displays it with a spinner control like input type="number", while Opera shows an entire Calendar (days'n'all).
Anyway, I threw a quick hack together as a proof of concept so you can see it in action. I'm sure you can improve upon it. Feel free to do so.
Tuesday, January 10th, 2012 2:24pm
Tagged with forms html5 input javascript code scripting progressive enhancement markup mobile
Orientation and scale
Paul Irish, Divya Manian and Shi Chuan launched Mobile Boilerplate recently—a mobile companion site to HTML5 Boilerplate.
There's some good stuff in there but I was a little surprised to see that the meta viewport element included values for minimum-scale=1.0, maximum-scale=1.0, user-scalable=no:
Setting user-scalable=no is pretty much the same as setting minimum-scale=1.0, maximum-scale=1.0. In any case, I'm not keen on it. Like Roger, I don't think we should take away the user's right to pinch and zoom to make content larger. That's why my usual viewport declaration is:
Yes, I know that most native apps don't allow you to zoom but I see no reason to replicate that failing on the web.
But there's a problem. Allowing users to scale content for comfort would be fine if it weren't for a bug in Mobile Safari:
When the meta viewport tag is set to content="width=device-width,initial-scale=1", or any value that allows user-scaling, changing the device to landscape orientation causes the page to scale larger than 1.0. As a result, a portion of the page is cropped off the right, and the user must double-tap (sometimes more than once) to get the page to zoom properly into view.
This is really annoying so Shi Chuan set about fixing the problem.
His initial solution was to keep minimum-scale=1.0, maximum-scale=1.0 in the meta viewport element but then to change it using JavaScript once the user initiates a gesture (the gesturestart event is triggered as soon as two fingers are on the screen). At the point, the content attribute of the meta viewport element gets updated to read minimum-scale=0.25, maximum-scale=1.6, the default values:
var metas = document.getElementsByTagName('meta');
if (navigator.userAgent.match(/iPhone/i)) {
document.addEventListener("gesturestart", gestureStart, false);
function gestureStart() {
for (i=0; i<metas.length; i++) {
if (metas[i].name == "viewport") {
metas[i].content = "width=device-width, minimum-scale=0.25, maximum-scale=1.6";
That works nicely but I wasn't too keen on the dependency between the markup and the script. If, for whatever reason, the script doesn't get executed, users are stuck with an unzoomable page.
I suggested that the script should also set the initial value to minimum-scale=1.0, maximum-scale=1.0:
metas[i].content = "width=device-width, minimum-scale=1.0, maximum-scale=1.0";
Now the markup still contains the robust accessible default:
…while the script takes care of initially setting the scale values and also updating them when a gesture is detected. Here's what's happening:
By default, the page is scaleable because the initial meta viewport declaration doesn't set a minimum-scale or maximum-scale.
Once the script loads, the page is no longer scalable because both minimum-scale and maximum-scale have been set to 1.0. If the device is switched from portrait to landscape, the resizing bug won't be triggered because scaling is disabled.
When the gesturestart event is detected—indicating that the user might be trying to scale the page—the minimum-scale and maximum-scale values are updated to allow scaling. At this point, if the device is switched from portrait to landscape, the resizing bug will occur because the page is now scaleable.
Jason Weaver points out that you should probably detect for iPad too. That's a pretty straightforward update:
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i))
Mathias Bynens updated the code to use querySelectorAll which is supported in Mobile Safari. Here's the code I'm currently using:
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
var viewportmeta = document.querySelector('meta[name="viewport"]');
if (viewportmeta) {
viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0';
document.body.addEventListener('gesturestart', function() {
viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
You can try it out on Huffduffer, Salter Cane, Principia Gastronomica and right here on Adactio.
Right now there's still a little sluggishness between the initial pinch-zoom gesture and the scaling; the scale values (0.25 - 1.6) don't seem to take effect immediately. A second pinch-zoom gesture is often required. If you have any ideas for improving the event capturing and propagation, dive in there.
Update: the bug has been fixed in iOS 6.
Monday, April 4th, 2011 1:29pm
Tagged with mobile javascript scripting iphone ipad orientation accessibility scaling resize ios
DOM Scripting, second edition
You may have noticed that there's a second edition of DOM Scripting out. I can't take any credit for it; I had very little to do with it. But I'm happy to report that the additions meet with my approval.
I've written about it on the DOM Scripting blog if you want all the details on what's new. In short, all the updates are good ones for a book that's now five years old.
If you've already got the first edition, you probably don't need this update, but if you're looking for a good introduction to JavaScript with a good smattering of Ajax and HTML5, and an additional dollop of jQuery, the second edition of DOM Scripting will serve you well.
The cover of the second edition, alas, is considerably shittier than the first edition. So don't judge the second edition of a book by its cover.
Monday, January 3rd, 2011 11:33pm
Tagged with book domscripting writing publishing javascript
JavaScript jamboree
It's been a fun post-dConstruct week. Tantek has been staying in Brighton being, as always, the perfect guest. On his last night in the country, we went along to Async, the local JavaScript twice-monthly meet-up, host to a show'n'tell this time 'round.
Tantek demoed his Cassis project. It's nuts. He's creating polyglot scripts that are simultaneously JavaScript and PHP, as well as having the ability to report which context they are running in. I feel partly responsible for this madness: he got the idea the last time he was in Brighton after reading Bulletproof Ajax and deciding that he didn't want to write the same logic twice in two different programming languages. The really crazy thing is that he's got it working.
Prem, who organised the event, showed his Sandie code: a security mechanism that allows external scripts to be loaded and arbitrary JavaScript to be executed without affecting the global scope. It's smart stuff that could be incredibly useful for his sqwidget work.
Mark demoed one of the coolest bookmarklets I've seen in a while: Snoopy:
It's intended for use on mobile browsers where you can't view-source to poke around under the hood of sites to see how they're built.
If the lack of "view source" on the iPad and iPhone has been bothering you, Snoopy is your friend.
Alas, we had to leave the Async awesomeness early to rendez-vous with the Mozilla HTML5 meet-up in The Eagle so I didn't even get to see Jim demo the disco snake that he made at Music Hack Day last weekend.
Friday, September 10th, 2010 1:27pm
Tagged with brighton asyncjs javascript scripting
Ajax workshop in NYC
On July 6th I'll be presenting an all day Ajax and DOM Scripting workshop in New York with Carson Workshops.
A few days later, on the 10th and 11th of July, An Event Apart NYC comes to town. Why not make a week of it? If you're coming along to AEA, you might want to arrive a few days early for the workshop.
The Ajax workshop costs $495 and will be held at the Digital Sandbox. Registration for An Event Apart costs $1095. It will be held at Scandinavia House.
My previous workshops in London and Manchester were a lot of fun and garnered plenty of praise so I'm really excited about taking the show to New York. If you live in or near New York city, come along for a day of Ajaxy goodness and come away with a Neo-like "I know Kung-Fu" awareness of DOM Scripting.
Oh, and If you sign up now, you'll also get a copy of my book.
Monday, June 19th, 2006 3:15pm
Tagged with ajax domscripting newyork nyc javascript
Transcribing podcasts
As noted over on the DOM Scripting site, the audio from the presentation I gave with Aaron at South by Southwest is now available for download.
It turned out quite well. The audio quality is good and neither Aaron or myself do too much uhm-ing and ah-ing.
But there is an inherent problem with publishing audio files on the Web. That problem is succinctly summarised in this comment accompanying an entry for an audio file over at Vitamin:
Is there anyway to get a transcription of this? I am deaf so an audio mp3 is not going to help me a bit.
There is another problem, which is that right now audio files can't be indexed and searched. That problem is secondary to the accessibility issue but, as with so many accessibility solutions, a fix will benefit everybody.
I started looking into podcast transcription services. The most intriguing one I found was a site called Casting Words. It uses Amazon's Mechanical Turk API to farm out the task of transcribing the audio content.
This is a textbook illustration of the kind of problem Mechanical Turk sets out to solve, namely the kind of problem that requires human beings rather than computers. Speech recognition, like language translation, is a service that is not going to be replaced by machines any time soon.
For the developers at Casting Words, the Mechanical Turk API works like any other Web Service. They send a request with the parameters for the task they want solved. Later, Mechanical Turk sends back a response. What sets it apart from other Web Services is the fact that the response is sent via wetware, rather than hardware. The response isn't retrieved from a database or algorithm; it's retrieved from a human brain.
Casting Words put together a simple front-end for all of this. Jeff Barr has written up the process of submitting a podcast for transcription. You choose which audio files you want to have transcribed, you supply any other useful information that might be relevant to the transcriber, and you're sent off to PayPal.
They charge 42 cents per minute of audio. For the SXSW presentation, which is an hour long, that works out at just over $25. That seems like a reasonable price to me.
I submitted the presentation audio, sat back and waited. A few days later I got an email with the finished transcription. It came in three different formats: Rich Text, HTML, and plain text. You can view the results for yourself.
Overall, it's very impressive. There were a couple of glitches, but let's face it, the subject matter was particularly technical. Elvis Costello once said that talking about music was like dancing about architecture. Listening to a presentation about code — and attempting to transcribe it — is an equally quixotic endeavour.
Still, when you combine either the audio or the transcription with the presentation slides, you can follow along pretty well.
I spent about an hour going through the transcription and tweaking the occasional misheard phrase. I've posted the final transcript in the articles section.
For a one-off recording like this, getting a transcription was an easy, inexpensive option. If you gave a presentation at SXSW, I encourage you to do the same: if you were on a panel, you could even split the cost four or five ways.
But could this scale to cover regularly scheduled podcast episodes? I think so. It does cost money, but then so does bandwidth. Bandwidth is often covered by sponsorship or a PayPal tip jar, so why not transcriptions?
You could argue that, if anyone wants a transcription, they could commission one themselves. But then the time and effort is repeated. Whereas, if you provide a transcription, there's just a one-off payment.
By providing a transcription, you'll also be providing a spiderable resource than can be easily scanned, quoted, cut and pasted. And you'll get lots of whuffie.
Saturday, April 22nd, 2006 6:37pm
Tagged with podcast accessibility scripting javascript


text:
Danielle's Dior success
A UCB student has a bright future ahead of her now she has secured a job at Christian Dior.
Level 2 Beauty Therapy student Danielle Donovan applied for the position of Beauty Consultant and Colour Specialist at the well-known luxury goods company after encouragement from her tutor, Claire Mitchell.
Out of the 200 applicants that applied for this coveted position, Danielle found herself to be one of the candidates shortlisted for the next stage. She was invited to an assessment centre where she had to do a full make-over on a Dior staff member. This was then followed by a group challenge and finished up with an individual interview.
After a very thorough interview, only two talented individuals were selected for the roles: one of them being Danielle.
"I'd like to thank Claire for the help and encouragement she gave me to apply for the position," said Danielle. "I feel that the skills I have gained at UCB will really help me in my future career."
Claire Mitchell, Beauty Therapy lecturer at UCB, said: "Danielle is a very committed and conscientious student with a lovely, friendly manner. She will do very well at Dior – it is a fantastic opportunity for her."
Danielle will start her new role next month, which will involve advising on make-up and skincare, selling products and giving makeovers to Dior clients.

redpajama_set_name: RedPajamaCommonCrawl


text:
Florida will face Massachusetts on Tuesday night at 7 p.m. in the first of two semifinal games at Madison Square Garden in New York City.
The game will be televised on ESPN2.
The Gators (24-11) have won three straight to reach the semifinals of the tournament for the third time in the program's history.
If Florida wins, it will face a rematch in the NIT championship on Thursday. Ohio State and Ole Miss play in the second semifinal game at 9 p.m.
Florida lost at Ohio State 62-49 last December and lost at Ole Miss 89-87 last January.
If Florida loses, the season will end. The NIT did away with its traditional consolation game in 2003.


As one of the closet members of the population who are still afraid to admit their confusion over the term "alternative," I am amply qualified to write about Hootie and the Blowfish. Their sound may initially seem vaguely familiar and deceptively commercial, but as an experienced listener of their music I have found their roots are as enigmatic as their alternative classification. With the combined sounds of Memphis blues and Seattle grunge, Cracked Rear View conveys a sentimentality reminiscent of the folk singers of the sixties. With tracks ranging from "Hold My Hand" to "Not Even the Trees," the album is devoted to dissecting human relations. Issues of love and loneliness are interspersed with those of racism and death. The result is a map of the writers' lives that is reflective of the universal path we all take. Added to this hodgepodge of style and lyrics are the orgasmic vocals of Darius Rucker. He is the eye of the musical storm that is Hootie and the Blowfish. Even while he and the band are raging against the nation in my own personal favorite, "Drowning," his vocals massage the listener and bring her a little closer to paradise. In short, I worship at his musical throne. My only complaint is there are no clear pictures of him on the album cover (or of any of the members of the band). It will come as no surprise to the reader that I loved this album. So, to those of you who hated it and this review, I have some words of advice given to me by the late Lee Marvin in the polygamist musical Paint Your Wagon - "who gives a damn?" I have Darius to keep me company.


text:
Red Dirt - Wonderful Indie
Red Dirt is not quite like any film -independent or otherwise - to have come out in some time.
While some critics expressed disappointment it wasn't the great southern gothic romance -straight or gay - it was rumored to be, others criticized it seemingly unable to connect with its characters. Over the years since its release, however, it has slowly become something of a cult film and seems to be finding its own niche.
Though a low budget independent, director Tag Purvis succeeded in creating a visually stunning film, his cinematography never less than breathtaking; his sense and use of color vivid and true. In all honesty, I did not expect to enjoy Red Dirt so was surprised at film's end to find myself in tears, wholly drawn to its characters and watching each in their self-imposed exiles endlessly and futilely attempting to connect to each other, their loneliness universal. While the premise is easily recognizable . . . perhaps, predictable, Purvis takes a standard plot and gives it a spin all his own bringing fresh, inviting characters on a backdrop never less than breathtaking. He captures almost perfectly summer in a tiny town deep in the American South. With deadly silences hauntingly punctuated by birds, wolves, crickets, locust, and endless rain, the film's soundscape is both haunting yet tranquil. Deceptively so.
The premise is rather simple: Griffith (Dan Montgomery, Jr.) an orphaned young man living with and caring for his mentally unstable Aunt Summer (an Academy Award worthy performance from Karen Black) is having an affair with his cousin, Emily (Aleksa Palladino). Both are loners and cling to the other out of desperation as much as youthful passion. Enter Lee, a drifter (brilliantly played by Walton Goggins, more recently of "The Shield" fame) and an unusual love triangle ensues which will alter everyone's lives.
An essential element of any good southern tale is the employment of crazy women and the women in Purvis's tale exhibit varying signs of madness as each attempts to hold on to her deeply hidden, long held secrets. Purvis's women exhibit a wondrously wide - as well as wild - range of emotion bouncing from minor instability and madness to profound wisdom and acceptance. One of the most touching developments of the story is the growing bond between Emily and Aunt Summer.
Each scene breathes with the magic of the almost ephemeral and gauzy qualities of a dream. One scene in particular is among the most arrestingly beautiful moments of honesty I have seen captured on film. The gay repression angle of the story works perfectly here with both men quiet, almost unaware as to what is developing between them. Where Lee sees where things are headed, Griffith is so naïve and stunted as to believe what is going on between them is devoid of any sexual tension or romantic leanings: it's purely friendship. This naivite makes Griffith's penultimate unhinging and dangerous rage all the more believable and the final scene all the more moving.
Karen Black's Summer is an emotionally unstable woman of epic proportions. A lifetime of guilt as she hides her secret has driven her mad. We see that pent up madness escaping in her dramatic loony-tune sequences as she escapes into a world of operatic music and bed. While some gay audiences complained about the lack of romantic ending, I could not possibly imagine a more literally "romantic" finale. Rage, revelation and confusion subside into sadness, forgiveness, self-awareness and acceptance - all as the sun streams down on a glorious southern evening.
Labels: Aleksa Palladino, Dan Montgomery, gay, Karen Black, Red Dirt, southern gothic, Walton Goggins


We are glad you are interested in learning more about our church! Take a look around and consider visiting us some time. If you have any questions, please don't hesitate to contact us. We look forward to meeting you soon!
- Plan on arriving about 10 minutes to prior to each service or activity.
- Parking can be found behind, beside and across from the church.
- Handicapped guests should park behind the church for best access to the elevator.
- Dress comfortably! Some of us dress up, some of us don't.


PERTH (miningweekly.com) – ASX-listed Pantoro has reported a 33% increase in gold production during the December quarter, up from the previous quarter.
The miner on Monday reported that gold production in December reached 12 657 oz, up from the 9 524 oz produced in the September quarter, as mining operations returned to expected production levels.
Annualised production rates during the December quarter exceeded 50 000 oz, the miner told shareholders, with production predominantly sourced from the Nicolsons underground mine, while the Wagtail operation also continued.
Production from the Halls' Creek operation is expected to increase as production from the Wagtail mine is ramped up.
Meanwhile, adits development at Wagtail South have identified additional high-grade ore, which will support a cutback of the current openpit in advance of establishing a second underground access for the Wagtail underground operation.
Pantoro has applied for the approvals required to undertake the cutback and expects to start mining during the first half of this year, pending final approvals.


TSH is pleased to announce that Jim McEwen, P. Eng., has been elected to the Consulting Engineers of Ontario's Board of Directors for a three-year term.
As a TSH Director and Vice President of the Municipal Sector, Mr. McEwen is proud to join the CEO in their continuing efforts to improve and sustain the thriving industry of engineering firms in Ontario.
Mr. McEwen looks forward to building on the CEO's successful Municipal Engineers Association and CEO Standardized Agreement with Clients by focusing on initiatives geared towards creating a standardized sub-consultant agreement in Ontario. This will help improve cost-efficiency and expedite interdisciplinary project work. As a Director of the CEO, Mr. McEwen will also continue to promote the Best Practice for Engineering Firm Selection Process, to ensure the best possible outcome for Ontario's engineering firms and clients.
Congratulations to Mr. McEwen and thanks to the CEO for their ongoing support of engineering firms in Ontario!


Whether the memories of good old times make you cheerful or put you in a pensive, retrospective mood, there is sure to be a rendition of the melodious and soulful 'Auld Lang Syne' to suit your mood.
Auld Lang Syne is an old Scottish Ballad that can be translated as 'Old Long Since' and which would loosely mean – "For Old Times' Sake". It is a song about welcoming the new times without saying 'goodbye' to fond old memories and is hence, played on New Year's Eve in many countries including Hogmanay in Scotland . The soulful lyrics also make it appropriate for playing at events of major departure like a Funeral.
This beautiful poem was penned by legendary poet Robert Burns who was inspired when he heard an old man singing a similar ballad. The poem has an interesting history that I loved reading about. However, it was Burns who gave us Auld Lang Syne as we know it today.
Before I send you to the 3 heart-warming videos inspired by this song, let me share with you the original lyrics (English) to this lovely Scottish melody of keeping long-standing relationships.
Set to the tune of a traditional Scottish folk song, it makes for the sweetest music this side of heaven! Here are 3 versions of this song to suit your every mood. Time to stop the running machines and get lost in classic music.
Slow and rhythmic, the popular version of Auld Lang Syne from the 1940 movie – Waterloo Bridge is a lovely song to hum and even dance to. Named 'The Farewell Waltz' in this Vivian Leigh and Robert Taylor starrer, the song is as beautiful to watch as it is to hear.
If the sound of traditional Scottish Bagpipes is alluring to you as it is to me, you will love this instrumental rendition. Shots of picturesque Scotland are also a treat to watch in the video.
The Gregorian Chants to the lyrics of Auld Lang Syne are unparalleled to any other version of the song. The simple video overlaying the two contrasting artworks – The Damned Soul by Michelangelo and Minimal Beauty by Heather are mesmerizing with the backdrop of the song.
What a beautiful song it is, indeed! It plays with your heart bringing to mind the memories of old friendships that never die and old love that remains young throughout your life.


text:
Home » South Florida » Digicel Donates Toys to Notre Dame d'Haiti Mission Church for Christmas
Digicel Donates Toys to Notre Dame d'Haiti Mission Church for Christmas
The telecom company partners with Haitian church on annual toy drive
Reginald Dorival, RCIA instructor and member of the Good Samaritans of Notre Dame d'Haiti Mission Church.
On Dec. 19, Digicel teamed up with the Notre Dame d'Haiti Mission Church to spread a little holiday magic to children living in Little Haiti, Miami. Digicel, a telecom and financial services company with a large presence in Haiti, donated more than 100 toys to the church and the nonprofit organization aiming to help both groups to continue serving and supporting the Haitian community in South Florida.
"At the church, we have been doing our annual Christmas toy distribution event for the past ten years. Our main objective is to give presents to the kids from the community when their parents may not have the means to buy them something," said Reginald Dorival, RCIA instructor and member of the Good Samaritans of Notre Dame d'Haiti Mission Church. "Digicel was a great partner this year; they were the first ones to say 'yes' to donate gifts for the children. I am very excited, kids came and had a great time; they enjoyed the bouncy house, face painting, musical chairs games. They loved it!"
About 300 kids received new toys. At the toy event, there was also live music, face painting and a bouncy house for the children to enjoy.
"We are thrilled to support the Haitian community and, most importantly, to put a smile on the face of every child that we can, especially at this time of the year. We participate in many activities that the church organizes. We want to help our community as much as we can", said Serge-Andree Gonzalez, Head of Digicel Call International, a mobile pinless application that allows users to call from the United States to anywhere in the world.
The Notre Dame d'Haiti Mission Church and Digicel have a long-time partnership by sponsoring many events that aim to bring the Haitian community together.
Haitian Times
The Haitian Times was founded in 1999 as a weekly English language newspaper based in Brooklyn, NY.The newspaper is widely regarded as the most authoritative voice for Haitian Diaspora.
Latest posts by Haitian Times (see all)
Haitian Times News Roundup – Jan. 17 - Jan. 17, 2020
Likely new Brooklyn dems boss gets big bucks from groups her bills aid - Jan. 17, 2020
Digicel Good Samaritans of Notre Dame d'Haiti Mission Church Little Haiti
Haitian Times News Roundup – Dec. 20
Impact of 'Peyi Lok' on Haiti's Health Care Starts to Emerge
One Entrepreneur's Quest to Beautify Florida's Little Haiti
Social Messaging Apps Disrupt Telecoms Industry in Haiti
ONE COMMENT ON THIS POST To "Digicel Donates Toys to Notre Dame d'Haiti Mission Church for Christmas"
Pingback: Digicel fait don de jouets à l'église Notre-Dame-d'Haïti Mission pour Noël – The Haitian Times – RADYONOU
Currency Converter: USD/HTG


In an effort to enhance the overall content of Oncology and GBEMTI eNews, we'd like to include peer-written articles in future editions. As a member of NAMCP, your knowledge of the industry lends itself to unprecedented expertise. And we're hoping you'll share this expertise with your peers through well-written commentary. Because of the digital format, there's no word limit, and our group of talented editors can help with final edits. If you're interested in participating, please contact Ronnie Richard to discuss logistics.
Healthcare is local: Why aren't accountable care benchmarks?


text:
The Day Creek Howl
April 17Follow Day Creek on Instagram @dciscoyotes!
April 16Want to write for the Howl? Apply Here!
August 8Follow Day Creek on Twitter @DCIScoyotes!
May 13Excited for this year's yearbook? Don't forget to buy one Coyotes!
Stand With Hong Kong! Fight for Freedom!
Hong Kong protesters are marching day and night for freedom.
Today Hong Kong. Tomorrow...?
View Side by Side
Conner L., Writer
What is happening in Hong Kong?
Undercover cops are dressing up as protesters and making the Hong Kongers look bad by doing crimes. They vandalize, rob, and destroy public places. In Tsuen Wan, A police officer shot a live bullet at an 18-year-old protester in the chest. Another 14-year-old boy was allegedly shot in the leg. In Hong Kong, journalists are being threatened by police officers. One was permanently blinded after being shot by a rubber bullet by a police officer. Another was hit by a molotov cocktail, thrown by police. Yes, this is really happening!
How did the protest start?
The protest began on February 8th, 2018, when a young couple left Hong Kong for a vacation in Taiwan, staying at the Purple Garden Hotel for nine nights. However, on February 18th, only one returned to Hong Kong. There, he confessed that he had murdered his girlfriend in Taiwan. But Hong Kong authorities couldn't charge him, because it wasn't domestic crime in Hong Kong. In addition, they couldn't return him to Taiwan to serve his punishment since Hong Kong and Taiwan don't have an extradition agreement.
So, in 2019, Hong Kong's government (Executive Carrie Lam) presented a new extradition agreement. This would allow them to transfer suspects to Taiwan to be tried for their crimes. However, the same bill would also allow extradition to China, since China's Judicial system is ruled by the government. Therefore, he or she can tell the judge to arrest you. This started the peaceful protest in Hong Kong. By mid-June, Lam suspended the 2019 Hong Kong Extradition Bill, but protesters wanted the bill to be fully withdrawn.
The heavy response from the police included violent clashes, the use of tear gas and rubber bullets.
Hong Kong protesters are marching in dissent of the extradition bill recently passed.
What Do the Hong Kong Protesters want?
Though the Extradition Bill was only suspended, Hong Kongers have insisted that the bill is fully withdrawn. Hong Kong protesters have made four additional demands:
Set up investigation stations to search for missing protesters.
Have the right to elect their own government.
Release all protesters that were arrested.
Remove the label "riot" for those who protest.
People of all cultures and ethnicities, while different on the outside, share the same desire for basic freedom and human rights. The Declaration of Independence famously states that "all men are created equal," and Dr. Martin Luther King Jr. expressed that "injustice anywhere is a threat to justice everywhere." As Americans, we must stand with Hong Kong and fight for freedom.
Today Hong Kong. Tomorrow…?
Anti-Extradition Law Amendment Bill Movement
Do you think DCIS should bring back sports leagues?
Grade Check
Replay It
YouTube's Last Straw!
Cultural Appropriation. Where's The Line?
The Ugly Truth About Social Credit
Annie Jr.: The Play of the Year- Pre Article
Stop Hating
Surrounding Yourself with Good People
Murdered for Organs
Living Up to Expectations
Half a Heart Didn't Stop Her
Kindness During the Holidays
The student news site of Day Creek Intermediate School


Amazon has the Famous Dishes Made LOW-CARB!: Your Favorite Low-Fat Low-Carb Cooking Recipes, Quick & Easy [Kindle Edition] for FREE! The book has got good reviews and with recipes for breakfast, lunch and dinner, it will have you full for days!
Next story Joke of the Day!


text:
About Sister Ioanna
About our Monastic Community
That's So Beautiful!
Self-Love, Good or Bad?
Spiritual Dementia
Orthodoxy and the Material World
What is the Meaning and Purpose of Life?
The Experience of Time and Eternity in Orthodox Worship
And Upon Those in the Tombs, Bestowing Life
Why the Transfiguration is So Important for Orthodoxy
12 Steps to Living a Full Life as an Orthodox Christian
Might You Consider Becoming a Monastic?
Do Not Resent, Do Not React (By Met. Jonah)
Understanding the Holy Trinity (by Rdr. Bob Latsko)
Saints' Lives
St. Alexander Hotovitsky
St. Alexander Nevsky
St. Andrei Rublev
St. Anthimus of Chios
St. Antipas the Hesychast
St. Grand Duchess Elizabeth
St. Gorazd of Czechoslovakia
St. Herman of Alaska
St. Innocent of Alaska
St. Innocent of Irkutsk, Life #1
St. John Kochurov of Chicago
St. John of Kronstadt
St. Joseph of Damascus
St. Mother Maria of Paris
St. Matrona of Moscow
St. Mitrophan of Beijing
St. Moses the Black
St. Sava of Serbia
St. Seraphim of Sarov
St. Sergius of Radonezh
St. Patriarch Tikhon
St. Xenia of St. Petersburg
Prayers for the Journey
1. Daily Offering
2. Thank You
3. Your Presence
5. Overcoming Self
6. Trust
8. Suffering
10. Peace
Meditations 1
Burning Ball of Fire
Without the Word
Wrapped in Dew
Filled With the Fullness
The Little Child Inside
Visions of Love
Visions of Life
Visions of Beauty
The Rape of Lady Justice
The Cycle of Hate Expands
The Source of Beauty
Solitary Little Flower
Holy Icon, Sacred Image
All Who Seek After Truth
Images of Beauty and Life
Dancing in the Presence
Mind Unfettered
Transcendence Revealed
Divine Paradox
Russian Churches
Russian Ruins
From My Youth
O Heavenly King
To Dream the Impossible Dream
Painful Beauty
Be Still, Be Quiet
Divine Hilarity
Holy Sacraments-Mysteries
Holy Baptism
Holy Confession
The Orthodox faith: Some Basic Principles
Why Icons?
Why Saints?
Why Relics?
Why Great Lent?
Why Orthodoxy Sunday?
What is the Transfiguration?
About Orthodoxy: From "These Truths We Hold"
What in the World is the Orthodox Church?
1. First Introduction to the Orthodox Faith
2. Why Orthodox Churches Look the Way They Do
3. Orthodox Worship, Divine Liturgy
4. Orthodox Worship, Other Services
Among the sacred places of pilgrimage to visit in St. Petersburg are the Smolensk Orthodox Cemetery in the northwestern part of the city, in order to venerate the relics of Blessed St. Xenia of Petersburg. For the story of her life, plus icons and photos of her chapel, see our Saints' Lives Article, The Life of St. Xenia.
The St. John of Rila Women's Monastery, founded by St. John of Kronstadt, is located in the northeastern part of the city. The latter St. John was born on the feast day of St. John of Rila, and was named in honor of this saint. The relics of St. John of Kronstadt are located in the crypt under the main church of the monastery. The main church is very large and beautiful. For the story of St. John's life, plus icons and photos of the monastery and his tomb in the crypt, see our Saints' Lives Article, The Life of St. John of Kronstadt.
The famous and popular Alexander Nevsky Lavra Monastery was originally established by Tsar Peter I, the Great, on the legendary site where St. Alexander Nevsky had defeated the Swedes. Tsar Peter brought the relics of St. Alexander from Vladimir to his new city of St. Peter, and placed them in the Trinity Cathedral in the new monastery, in an enormous and ornate silver reliquary, that is now in the Hermitage Museum. The saints relics are now in a much more modest reliquary in the front of the very large cathedral, on the right. For the story of his life, plus icons and photos, see our Saints' Lives Article, The Life of St. Alexander Nevsky.


text:
Pioneering Sex Researcher Virginia Johnson, 88, Talked About Sex Before It Was Okay
As half of the Masters and Johnson duo, she published books on sexuality like Human Sexual Response and Human Sexual Inadequacy, which became bestsellers.
Image: Chris Blakely
Virginia Johnson talked about sex in a time when it wasn't okay to talk about sex. As half of the Masters and Johnson duo, she published classic books on sexuality like Human Sexual Response and Human Sexual Inadequacy, which became bestsellers. With Masters, Johnson helped usher in new forms of sex therapy and create an atmosphere in medicine where sex was not something to be ashamed of. On Wednesdsay, Johnson died at the age of 88.
Biographer Thomas Maier, who wrote Masters of Sex: the Life and Times of William Masters and Virginia Johnson, the Couple Who Taught America How to Love, told the CBC, "She has one of the most extraordinary lives of any American woman in the 20th century. She literally came in without a degree and became one of the most well-known female figures in medicine in her time."
Johnson met William Masters while she was working as a secretary at the medical school at Washington University in St. Louis. The Los Angeles Times describes their meeting this way: "Then, in 1957, a balding, middle-aged gynecologist named William Masters teamed up with a divorced mother of two named Virginia Johnson in a research collaboration that would permanently illuminate the taboo subject."
Their early relationship was a dark one. Masters told Johnson that having sex with him was part of her job. They wound up getting married in 1971 and divorcing 20 years later. In between, however, Johnson slowly became a co-collaborator on Masters' research. She was responsible for breaking up classic myths, like the Freudian concept that clitoral orgasms were an immature sexual response, the idea that a man's penis size is important in pleasing his partner and the myth that elderly people cannot have satisfying sex. The New York Times adds:
The medical establishment had long treated sexual dysfunctions psychoanalytically, but Masters and Johnson took a more physical approach. They were credited with helping thousands of men with impotence and premature ejaculation, and thousands of women with difficulty in achieving orgasm, among other problems. In doing so, they helped establish the field of modern sex therapy, training a generation of therapists throughout the country.
Of course, no woman working in science has an easy path, especially not a woman working on sexuality research in the 1980s. The CBC says that Johnson received lots of criticism and even threats. And not all of her work was received well. The pair had controversial ideas about AIDS and homosexuality.
But between them, they made sexuality a less terrifying subject for people to approach. "We're not trying to make perfect lovers," Johnson told the Washington Post. "We tell them to take what they feel at the time and translate it into a physical 'shared' moment. The turn-on is knowing he 'really' wants to touch you, and vice versa. Even the most double-standard male and the equivalent of that in a female learns eventually if you don't give, you don't get enough back."
In September, a TV series called Masters of Sex will debut on Showtime based on their lives and work.
More from Smithsonain.com:
Documenting Sexual Assault in The Invisible War
What Can We Learn From the Porn Industry About HIV?
Rose Eveleth | | READ MORE
Rose Eveleth was a writer for Smart News and a producer/designer/ science writer/ animator based in Brooklyn. Her work has appeared in the New York Times, Scientific American, Story Collider, TED-Ed and OnEarth.
Death Trending Today


text:
'use strict';

angular.module('app')
    .controller('nrgiProjectDetailCtrl', function (
        $scope,
        $rootScope,
        nrgiAuthSrvc,
        nrgiIdentitySrvc,
        nrgiProjectsSrvc,
        $sce,
        usSpinnerService,
        $routeParams,nrgiProjectDataSrvc
    ) {
        $scope.openClose=true;
        usSpinnerService.spin('spinner-filing');

        nrgiProjectsSrvc.get({_id: $routeParams.id}, function (success) {
            if(success.error) {
                $scope.error= success.error;
            }else{
                $scope.id =  success.project._id;
                $scope.url = "http://newaleph.openoil.net/clients/resourceprojects/?project_name="+ success.project.proj_name;
                $scope.project = success.project;
            }
        });
        $scope.$watch('id', function(value) {
            if(value!=undefined) {
                nrgiProjectDataSrvc.get({_id: $scope.id}, function (success) {
                    $scope.data = success;
                });
            }
        });
        $scope.trustSrc = function(src) {
            return $sce.trustAsResourceUrl(src);
        }
        $scope.iframeLoadedCallBack = function(){
            usSpinnerService.stop('spinner-filing');
            angular.element(document.getElementsByTagName('iframe')).addClass('iframedata')
        }
    });

redpajama_set_name: RedPajamaGithub


DeHaven Creek in Mendocino County is an exposed beach break that has reasonably consistent surf. Summer offers the favoured conditions for surfing. Offshore winds blow from the east. Most of the surf here comes from groundswells and the best swell direction is from the west southwest. The beach break offers both left and right hand waves. Best around mid tide. When the surf is up, it can get quite busy in the water. Take care of sharks, rips, rocks and locals.
For Westport, California, 2 km from DeHaven Creek.
At Mendocino, 38 km from DeHaven Creek.
The two graphs above are also combined in the single DeHaven Creek surf consistency graph.
Also see DeHaven Creek surf quality by season and DeHaven Creek surf quality by month.
Compare DeHaven Creek with another surf break.
The nearest passenger airport to DeHaven Creek is Chico Muni Airport (CIC) in USA, which is 166 km (103 miles) away (directly).
The second closest airport to DeHaven Creek is Beale Afb (Marysville) Airport (BAB), also in USA, 210 km (130 miles) away.
Questa è la pagina Surf-Previsione per DeHaven Creek, CAL - Mendocino County. Utilizzare la scheda di navigazione in alto per visualizzare DeHaven Creektemperatura del mare,DeHaven Creek fotografie,DeHaven Creek dettagliate previsioni onde, il vento e le previsioni meteo,DeHaven Creek webcam, vento corrente daCAL - Mendocino County stazioni meteo e DeHaven Creek previsioni marea. il link United States mappe maree apre l'immagine grande, che mostra United States e dei mari circostanti. Queste mappe possono essere animate per mostrare le diverse componenti del moto ondoso, energia delle onde, periodo d'onda, altezza delle onde, insieme con le previsioni del vento e meteo, meteo corrente e osservazioni sullo stato del mare dal United States onda-boe, le navi passanti e stazioni meteo costiere . Ciascuna delle pagine di previsioni per questo surf break rappresenta uno strumento di wavefinder globale e regionale per individuare le migliori condizioni di surf nella zona intornoDeHaven Creek.