Бегущая по граблям

Преобразование c# DateTime в JavaScript Date

noreply@blogger.com (Victoria T) — Wed, 27 Feb 2013 05:57:00 -0800

Задача: привести сериализованный c# DateTime к объекту Date JavaScript.

Сериализованный объект DateTime мы на клиенте получаем вот в таком виде:
"/Date(1361886511108)/"

Первое, что нам нужно сделать - удалить из сообщения все текстовые символы (кроме "+").

var d = "/Date(1361886511108)/";
d = d.replace(/[^0-9 +]/g, '');

Ну и далее - создаем объект Date, не забывая преобразовать наши данные в int.

var myDate = new Date(parseInt(d));

Подключаем нестандартные шрифты. @Font-face для IE 9.

noreply@blogger.com (Victoria T) — Wed, 20 Feb 2013 05:56:00 -0800

CSS3 позволяет легко и просто подключить нестандартный шрифт с помощью правила @font-face.
Вот так:

@font-face

{
font-family: "MyFont"; /* Имя шрифта */
src: url(fonts/MyFont.ttf); /* Путь к файлу со шрифтом */
}
P { font-family: MyFont; }

Для WebKit и Mozilla достаточно этого синтаксиса, но для совместимости с IE придётся повозиться.
Во-первых, IE не поддерживает шрифты в формате .ttf.
Для IE 6-8 версий нужен шрифт в формате .eot, для IE 9 нужен формат .woff.
Поэтому придется переконвертировать наш шрифт в два дополнительных формата, и наш код @font-face будет выглядеть вот так:

@font-face

{
font-family: "MyFont";
src: url(fonts/MyFont.eot); /* for IE6-8 */
src: local("☺"), url(fonts/MyFont.ttf) format("truetype"), /* for Firefox 3, Safari */
url(fonts/MyFont.woff) format("woff"); /* for IE9 */

}

Обратите внимание на смайлик после local.
У меня в IE 9 не работал шрифт с любыми другими символами, кроме этого смайлика.
Подробно об этом чудо-смайлике можно прочесть здесь http://paulirish.com/2010/font-face-gotchas/#smiley

Есть еще одна проблема с woff шрифтом.
IIS 7 не знает такого типа файлов, для него нужно прописать вручную MIME-TYPE, причем тип я указала application/octet-stream , как и для файла .ttf.

Выводим javascript alert с серверной стороны asp.net

noreply@blogger.com (Victoria T) — Wed, 16 Jan 2013 01:42:00 -0800

Иногда бывает нужно вывести в браузере стандартное окошко alert, но сделать это с серверной стороны, а не с клиентской.

Это очень просто. Например, так:

Response.Write("<script>alert('Your message');</script>");

Alert появится вместо страницы, по нажатию на Ok загрузится страница.

И еще один способ, используем ScriptManager:

ScriptManager.RegisterStartupScript(this, GetType(), "asyncscript", "alert('Your message');", true);

В данном случае загрузится страница, и на ней появится alert.

Попытка редактировать изображения на html5 canvas

noreply@blogger.com (Victoria T) — Mon, 20 Aug 2012 04:28:00 -0700

Появилась задача редактировать фотографии online - изменять контраст, яркость, применять эффекты - сепия, черно/белый и прочие красивости. С моей любовью к яваскрипту я, конечно же, первым делом пошла искать решение на html5 canvas.

Самое достойное, что я нашла - библиотека Pixastic http://pixastic.com/ (там сейчас на сайте демо не работает. написала разработчику - сказал, что посмотрит, но за месяц так и не посмотрел) Быстро, удобно, реализовано достаточно эффектов, стабильно работает - рекомендую. Но, как обычно, я упёрлась в стену под названием IE :( С IE ниже 9 версии о таких серьезных задачах на html5 можно забыть, а для заказчика поддержка IE8 принципиально важна

Собственно, есть еще одна проблема - мне необходимо редактировать изображения в большом разрешении и с хорошим качеством: они потом используются в fullHD видео. В браузере результирующее изображение имеет размер того canvas, в котором оно расположено, т.е. небольшой области экрана. Можно, конечно, выводить картинку в скрытый через css огромный canvas, но страница будет тяжелой и тормозящей.

По сему было решено редактировать картинки на серверной стороне, с чем прекрасно справилась библиотечка AForge

IE 6 еще живой?

noreply@blogger.com (Victoria T) — Wed, 16 May 2012 05:03:00 -0700

Обалдеть, неужели кто-то еще серьезно поддерживает IE 6?.. В комментариях к статье по css3 :nth-child селектору возмущаются, что это не работает в IE6. Удивлена. Как они вообще попали на эту статью, да и зачем?.. :)

Что использовать: Hiddenfield или Viewstate?

noreply@blogger.com (Victoria T) — Tue, 8 May 2012 06:12:00 -0700

При необходимости сохранить какой-то параметр на странице между постбеками приходится выбирать, что для этого использовать - Hiddenfield или Viewstate.

Viewstate во многих случаях значительно увеличивает объем страницы, что делает ее медленной, например, если использовать Viewstate с Gridview. К тому же, Viewstate все равно помещается на странице в Hiddenfield :)

С точки зрения безопасности - данные во Viewstate уже закодированные, а свой собственный Hiddenfield нужно шифровать самостоятельно, если это необходимо.

С точки зрения разработки - работать с Viewstate проще: меньше строчек кода, соответственно легче отлаживать и проще будет другому разработчику работать с вашей страницей.

Ну и принципиальная разница - если нужно иметь доступ к полю клиентским скриптам, то берем Hiddenfield, потому что данные Viewstate для клиентских скриптов недоступны.

CSS3 непрозрачный элемент на прозрачном

noreply@blogger.com (Victoria T) — Thu, 5 Apr 2012 05:28:00 -0700

CSS3 предлагает нам свойство opacity, которое позволяет задать элементу прозрачность. Всё бы хорошо, но все потомки элемента наследуют значение opacity родителя, и переопределить его никак нельзя.

Таким образом, для того, чтобы получить на прозрачном фоне непрозрачный текст, нам необходимо этот текст помещать в блок, который не является потомком блока с прозрачным фоном.

Простенький пример

<div id="elementWrap">
<div class="transparent"></div>
<div class="notTransparent">
<span>Lorem ipsum dolor</span>
</div>
</div>

CSS

.transparent{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1000;
background-color: #777777;
opacity: 0.7;
filter: alpha(opacity=70);
}

.notTransparent{
width: 400px;
height: auto;
top: 50%;
position: absolute;
z-index: 1001;
left: 50%;
background-color: #B5B5B5;
border-radius: 15px;
border: solid 3px #4F4F4F;
padding: 10px;
margin: 0 auto;
margin-top: -50px;
margin-left: -200px;
text-align: center;
}

В этом примере прозрачный блок при помощи z-index перекрывает собой всю страницу и таким образом блокирует доступ к всем элементам. Непрозрачный блок выводится поверх прозрачного (у него значение z-index больше).

Я использовала такую схему, чтобы перекрыть пользователю доступ к странице, пока он не заполнит всю информацию, требуемую на непрозрачном блоке. После заполнения требуемых полей и нажатия на кнопку форма вместе с прозрачным фоном пряталась, и можно было продолжить работу со страницей.

JSON.stringify() для IE 7

noreply@blogger.com (Victoria) — Mon, 2 Apr 2012 05:18:00 -0700

Наш любимый IE7 не предоставляет метода JSON.stringify(). IE8 с JSON уже работает, а вот IE7 - никак нет. Со сторонними библиотеками я не работаю, поэтому все грабли приходится обходить вручную.

Нашла отличную статью о том, как победить IE7:
Cross-browser JSON Serialization in JavaScript

С точки зрения безопасности простенький JSON.parse() из этой статьи - не лучшее решение. Я в данный момент использую только JSON.stringify(), parse мне не нужен.

На случай, если оригинальная статья пропадет, копирую оттуда код для JSON.stringify() и JSON.parse().

var JSON = JSON || {};

// implement JSON.stringify serialization
JSON.stringify = JSON.stringify || function (obj) {
var t = typeof (obj);
if (t != "object" || obj === null) {
// simple data type
if (t == "string") obj = '"'+obj+'"';
return String(obj);
}
else {
// recurse array or object
var n, v, json = [], arr = (obj && obj.constructor == Array);
for (n in obj) {
v = obj[n]; t = typeof(v);
if (t == "string") v = '"'+v+'"';
else if (t == "object" && v !== null) v = JSON.stringify(v);
json.push((arr ? "" : '"' + n + '":') + String(v));
}
return (arr ? "[" : "{") + String(json) + (arr ? "]" : "}");
}
};

// implement JSON.parse de-serialization
JSON.parse = JSON.parse || function (str) {
if (str === "") str = '""';
eval("var p=" + str + ";");
return p;
};

вызываем window.onload несколько раз

noreply@blogger.com (Victoria) — Fri, 30 Mar 2012 05:29:00 -0700

Известно, что определить событие window.onload на странице мы можем только один раз. Каждое следующее определение window.onload затирает предыдущее. Что же делать, если возникла необходимость прописать его повторно?

Все очень просто. Нужно сохранить старое событие, и переопределить window.onload так, чтобы сначала вызывалось старое событие, а потом уже наши дополнительные методы.

Например,

var saveOnLoad = window.onload;
window.onload = function(){
saveOnLoad();
newOnLoadFunction1();
newOnLoadFunction2();
...
}

создаем css стили динамически

noreply@blogger.com (Victoria) — Tue, 20 Mar 2012 03:13:00 -0700

Я в свое время долго ломала голову, как прописывать css стили динамически с серверной стороны, причем не просто установить свойство CssClass, а прописать конкретно margin или padding.
Оказывается, всё предельно просто: у элементов есть свойство Style. Пользоваться им вот так:

Elem.Style.Add("margin-top", "40px");

как узнать, сколько сообщений находится в MSMQ?

noreply@blogger.com (Victoria) — Fri, 11 Nov 2011 03:49:00 -0800

Задача: необходимо узнать, сколько сообщений находится в очереди сообщений MSMQ, не получая эти сообщения. Также необходимо определить, какое место в очереди занимает заданное сообщение.

У меня получилось так:

int num = 0;
if (MessageQueue.Exists("path to your queue"))
{
MessageQueue mq = new MessageQueue("path to your queue", QueueAccessMode.Peek);
var messages = mq.GetMessageEnumerator2();
while (messages.MoveNext())
{
num++;
}
}

В конструкторе MessageQueue() обязательно указываем метод доступа к очереди Peek, который не удаляет сообщения из очереди.
Если необходимо узнать, какое место в очереди занимает наше сообщение, добавляем сравнение поля Label очереди в цикл while.

while (messages.MoveNext())
{
if (messages.Current.Label != "someCustomLabel")
num++;
else
break;
}

совет от профессионала

noreply@blogger.com (Victoria) — Tue, 25 Oct 2011 00:25:00 -0700

The easiest way to optimise code is to follow the rule of KISS (Keep It Simple, Stupid). If you keep your code as simple as possible it will most likely be optimised from the start or then it will be very easy to optimise later.
(c) Mikko Haapoja

изучаю, как рисовать 3d при помощи javascript.

Visibility vs Display

noreply@blogger.com (Victoria) — Mon, 24 Oct 2011 04:18:00 -0700

Чем отличаются css свойства visibility и display?

Visibility: visible - элемент виден на странице
Visibility: hidden - элемент скрыт, но все остальные блоки ведут себя так, будто он присутствует. Его ширина-высота доступны в clientWidth и clientHeight.

Display: block - элемент виден на странице
Display: none - элемент скрыт, и остальные элемент ведут себя так, будто его нет.

Выравниваем меню по центру

noreply@blogger.com (Victoria) — Mon, 3 Oct 2011 02:45:00 -0700

Часто возникает необходимость выровнять меню, представляющее собой список ul li, горизонтально по центру страницы. Ширина меню нам неизвестна, она может изменяться в зависимости от страницы, поэтому задать жесткие отступы - не вариант.

Я поступаю следующим образом.
Заворачиваем наше меню в два div'а.

<div id="menu-wrap">
      <div id="menu">
            <ul>
                  <li></li>
                  <li></li>
                  ...
            </ul>
      </div>
</div>

Верхнему div'у задаем фиксированную ширину. Это максимально возможная ширина нашего меню.

Второму div'у задаем margin-left:50%, а самому списку ul margin-left:-50%.

Для кроссбраузерности обязательно всем трем блокам задаем position:relative, а второму div'у и списку ul float:left

Регулярные выражения для javascript

noreply@blogger.com (Victoria) — Tue, 23 Aug 2011 02:59:00 -0700

Задача: написать проверку сложности пароля. Пароль должен иметь длину не менее 5 символов, и содержать в себе хотя бы одну цифру, при этом пароль может содержать только цифры и латинские буквы в верхнем и нижнем регистре.

Получившееся у меня выражение:

((?=.*\d).(?!.*\W).{5,20})

Здесь можно посмотреть шаблоны регулярных выражений, с объяснением как они работают

Настраиваем IPN для работы с PayPal

noreply@blogger.com (Victoria) — Fri, 12 Aug 2011 02:46:00 -0700

Пришлось порядком повозиться, чтобы заставить сайт мгновенно узнавать о том, что пользователь оплатил заказ. Работаем с PayPal напрямую, без сайтов-посредников, возвращение пользователя на наш сайт также не требуется. PayPal сам отправляет нам post-запрос с кучей заголовков, как только платеж совершен.

Вот здесь понятно описано, с примером для c# http://www.codeproject.com/KB/aspnet/paypal_c_aspnet.aspx#IPN

Вкратце:
1. Нам приходит post-запрос.
2. Сохраняем его и отправляем обратно на PayPal, чтобы проверить, действительно ли платеж совершен, или это хак.
3. Получаем ответ от PayPal - Verified - если платеж совершен, или Invalid, если такого платежа не было. Ну и обрабатываем данные.

Свои параметры для пост-обработки заказа передаем с формы через параметр custom.

<input type="hidden" name="custom" value="our params">

При обработке ответа сервера не забываем проверить адресата платежа, сумму и валюту.

Для тестов регистрируемся на Sandbox.paypal.com, создаем тестового продавца и покупателя, и вперёд.

масштабное падение Skype

noreply@blogger.com (Victoria) — Thu, 26 May 2011 09:39:00 -0700

Сегодня волшебным образом у всего нашего офиса упал Skype. Почти одновременно на всех компьютерах программа выдала исключение и закрылась. Часа через полтора удалось запустить Skype на компьютере с Win7, на WinXP по прежнему вылетает исключение сразу при попытке запуска.

Известно, что накануне всеми любимая компания Microsoft купила Skype. Неужели теперь под WinXP о Skype можно будет и не мечтать?..

список штатов сша - asp.net dropdownlist

noreply@blogger.com (Victoria) — Tue, 17 May 2011 05:53:00 -0700

Может, кому-то пригодится. ASP.NET DropDownlist со списком штатов США.

<asp:DropDownList ID="state" runat="server" Width="160px">
<asp:ListItem Value="AL" Text="Alabama"></asp:ListItem>
<asp:ListItem Value="AK" Text="Alaska"></asp:ListItem>
<asp:ListItem Value="AZ" Text="Arizona"></asp:ListItem>
<asp:ListItem Value="AR" Text="Arkansas"></asp:ListItem>
<asp:ListItem Value="CA" Text="California"></asp:ListItem>
<asp:ListItem Value="CO" Text="Colorado"></asp:ListItem>
<asp:ListItem Value="CT" Text="Connecticut"></asp:ListItem>
<asp:ListItem Value="DE" Text="Delaware"></asp:ListItem>
<asp:ListItem Value="DC" Text="District of Columbia"></asp:ListItem>
<asp:ListItem Value="FL" Text="Florida"></asp:ListItem>
<asp:ListItem Value="GA" Text="Georgia"></asp:ListItem>
<asp:ListItem Value="HI" Text="Hawaii"></asp:ListItem>
<asp:ListItem Value="ID" Text="Idaho"></asp:ListItem>
<asp:ListItem Value="IL" Text="Illinois"></asp:ListItem>
<asp:ListItem Value="IN" Text="Indiana"></asp:ListItem>
<asp:ListItem Value="IA" Text="Iowa"></asp:ListItem>
<asp:ListItem Value="KS" Text="Kansas"></asp:ListItem>
<asp:ListItem Value="KY" Text="Kentucky"></asp:ListItem>
<asp:ListItem Value="LA" Text="Louisiana"></asp:ListItem>
<asp:ListItem Value="ME" Text="Maine"></asp:ListItem>
<asp:ListItem Value="MD" Text="Maryland"></asp:ListItem>
<asp:ListItem Value="MA" Text="Massachusetts"></asp:ListItem>
<asp:ListItem Value="MI" Text="Michigan"></asp:ListItem>
<asp:ListItem Value="MN" Text="Minnesota"></asp:ListItem>
<asp:ListItem Value="MS" Text="Mississippi"></asp:ListItem>
<asp:ListItem Value="MO" Text="Missouri"></asp:ListItem>
<asp:ListItem Value="MT" Text="Montana"></asp:ListItem>
<asp:ListItem Value="NE" Text="Nebraska"></asp:ListItem>
<asp:ListItem Value="NV" Text="Nevada"></asp:ListItem>
<asp:ListItem Value="NH" Text="New Hampshire"></asp:ListItem>
<asp:ListItem Value="NJ" Text="New Jersey"></asp:ListItem>
<asp:ListItem Value="NM" Text="New Mexico"></asp:ListItem>
<asp:ListItem Value="NY" Text="New York"></asp:ListItem>
<asp:ListItem Value="NC" Text="North Carolina"></asp:ListItem>
<asp:ListItem Value="ND" Text="North Dakota"></asp:ListItem>
<asp:ListItem Value="OH" Text="Ohio"></asp:ListItem>
<asp:ListItem Value="OK" Text="Oklahoma"></asp:ListItem>
<asp:ListItem Value="OR" Text="Oregon"></asp:ListItem>
<asp:ListItem Value="PA" Text="Pennsylvania"></asp:ListItem>
<asp:ListItem Value="RI" Text="Rhode Island"></asp:ListItem>
<asp:ListItem Value="SC" Text="South Carolina"></asp:ListItem>
<asp:ListItem Value="SD" Text="South Dakota"></asp:ListItem>
<asp:ListItem Value="TN" Text="Tennessee"></asp:ListItem>
<asp:ListItem Value="TX" Text="Texas"></asp:ListItem>
<asp:ListItem Value="UT" Text="Utah"></asp:ListItem>
<asp:ListItem Value="VT" Text="Vermont"></asp:ListItem>
<asp:ListItem Value="VA" Text="Virginia"></asp:ListItem>
<asp:ListItem Value="WA" Text="Washington"></asp:ListItem>
<asp:ListItem Value="WV" Text="West Virginia"></asp:ListItem>
<asp:ListItem Value="WI" Text="Wisconsin"></asp:ListItem>
<asp:ListItem Value="WY" Text="Wyoming"></asp:ListItem>
</asp:DropDownList>

скругляем углы кроссбраузерно

noreply@blogger.com (Victoria) — Wed, 11 May 2011 15:19:00 -0700

Вопрос, волнующий, наверно, всех начинающих верстальщиков. Как скруглить углы любому элементу веб-страницы кроссбраузерно?

К всеобщему счастью, на данный момент почти все браузеры понимают свойство css3 border-radius. К всеобщему сожалению, нам до сих пор приходится поддерживать IE 7 и 8 версии, которые, понятное дело, таких вещей не понимают. Выход - использовать плагин, который нам поможет.

Я использую PIE. Из всех плагинов, которые я нашла, PIE единственный, который у меня корректно работает. Он, кстати, умеет не только углы скруглять, но и добавлять в IE свойства box-shadow и linear-gradient.

Итак, качаем файл PIE.htc с css3pie.com. В css пишем:

.element {
-moz-border-radius:8px; //для старых версий FF
border-radius:8px; //css3 для всех современных браузеров
behavior:url('PIE.htc'); //путь к файлу PIE.htc для IE 7-8
}

всё :)

удивительная Opera

noreply@blogger.com (Victoria) — Wed, 4 May 2011 23:59:00 -0700

Три дня ломала голову, почему во всех браузерах скрипт работает, а в Опере нет. По нажатию на кнопку javascript должен был вызывать определенный серверный метод. Везде отрабатывало, а в опере почему-то перезагружалась страница, но метод не вызывался.

Сначала думала, что событие onmousedown в опере как-то специфически работает, потом думала, что javascript как-то не так к странице подключен....

Оказалось всё гораздо проще. Функция, которую я пыталась вызвать, называлась submit. А в опере submit отправляет форму на сервер, и свою функцию так называть нельзя...
Переименовала функцию в submitData, и - о чудо - всё работает :)

дежурная запись

noreply@blogger.com (Victoria) — Wed, 4 May 2011 04:53:00 -0700

Год назад начала заниматься версткой и веб-разработкой. В этом блоге я буду писать о том, что нового интересного я узнала по работе.