http___blog.nediko.info_category_programming_javascript_1.xml
https___hackernoon.com_front-end-refactored-components-with-vue-907a08a3630_source_rss----3a8144eabfe3---4.xml
1.1 6.1 7.1 8.1 11.1 12.1 14.1 15.1 16.1 16.2 16.3 16.4 16.5 17.1 21.1 22.1 22.2 22.3 22.4 24.1 25.1 26.1 31.1 36.1 37.1 38.1 38.2 38.3 38.4 39.1 40.1 41.1 42.1 42.2 43.1 44.1 45.1 45.2 46.1 47.1 47.2 48.1 48.2 49.1 50.1 50.2 51.1 51.2 51.3 52.1 52.2 52.3 52.4 52.5 53.1 53.2 54.1 55.1 55.2 56.1 56.2 57.1 57.2 58.1 58.2 59.1 60.1 61.1 61.2 61.3 62.1 63.1 64.1 65.1 66.1 67.1 68.1 70.1 71.1 72.1 73.1 74.1 75.1 75.2 75.3 75.4 75.5 75.6 75.7 76.1 77.1 78.1 79.1 80.1 81.1 82.1 82.2 82.3 83.1 83.2 84.1 85.1 86.1 87.1 87.2 87.3 88.1 89.1 90.1 91.1 92.1 94.1 94.2 94.3 94.4 95.1 95.2 96.1 98.1 98.2 98.3 100.1 100.2 100.3 101.1 102.1 103.1 105.1 105.2 106.1 108.1 109.1 109.2 110.1 111.1 112.1 113.1 113.2 114.1 114.2 114.3 115.1 116.1 117.1 118.1
parts = { Object.keys(parts).map((part) => parts[part].map((el, index) => parts[part][index] = el+1 console.log(parts); // Result: Category Archives: JavaScript SVG text as HTML background И що чак сега се сетих, че мога да ползвам SVG text като background?! И не само текст. Че даже мога да си го променям динамично през javascript! Така някои дизайни можеше да станат по-фън-шуй. По-добре късно от колкото без SVG. Едно примерче: Try it Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. function myFunction() { let txt = "SVG Txt"; let s = window.btoa(` document.querySelector("p").style.background = `url('data:image/svg+xml;base64,${s}') no-repeat top left`; Demo: text_as_background.html Simple Tile Calculator – прост калкулатор за редене на плочки Престои ми ремонт и имам нужда от нещо, което да ми смята бързо броя плочки или ламиниран паркет, като добавя фугите. За това си написах калкулатор на jacascript. Представлява обикновена web-страница. Във версия 002 на калкулатора са направени някои промени: - Кода е изцяло пренаписан, като вече е обектен, което ще ме улесни да прилагам нови методи на редене - Добавен е диагонален модел за редене на плочките - Добавен е генериран код за CAD-софтуера QCad Програмата работи с всички модерни браузери и мобилни устройства. Калкулатора може да се зареди онлайн от тук: Tile Calculator Изтегляне на калкулатора + source: Simple_Tile_Calculator-v.002.zip След разархивиране на архива може да се ползва само html-файла в основната директория. В папката source е развойната версия на калкулатора с scss-кода. Кратко видео, което показва моя начин на ползване на това тулче: Chrome Extension – how to. Кратък урок за създаване на Chrome добавка. Ще се опитам да опиша простичко, как се разработва прост extension add-on за Chrome. Понякога е много полезно да се работи с подобни скриптове, особено при скрапване на web-съдържание, когато конвенционалните методи не работят или изискват прекалено много усилия. За да се създаде подобен скрипт с потребителски интерфейс ще са ни необходими няколко файла: manifest.json – всяка добавка (extension) за Chrome (а и за другите браузери) съдържа подобен скрипт, който предоставя важна информация на браузера. Повече тук: Manifest File Format popup.html – стандартно наименование на файла с потребителския интерфейс, който се появява при клик с мишката върху добавката. Разбира се, можем да създадем добавка, която няма нужда от потребителски интерфейс, но в случая аз искам да имам. Името на този файл се посочва в manifest.json. popup.js – файл, който се зарежда чрез popup.html. Можем и да нямаме подобен файл и да поместим javascript кода направо в popup.html. Но тенденциите в модерното програмиране съветват да се диференцира всичко – стилове, скриптове, html. В моя случай popup.js е двигателя на Chrome добавката. Той посочва какво, кога и къде да се активира. getPagesSource.js – файл за инжектиране в web-страницата и извлича информацията от нея. Този файл се зарежда от popup.js. icon.png – някаква иконка, която да се показва в листата с добавките на Chrome. Нека създадем скрипт, който извлиза съдържанието на определени тагове, като използваме javascript функцията querySelectorAll(). Много приятна функция, която заменя в известна степен нуждата от XPath при web-скрапинга. Да започваме! Първо създаваме manifest.json, като описваме какво прави тая добавка: След това си правим потребителския интерфейс popup.html – бутончета, поленца, форми, стилове, каквото ни е кеф. В случая ще се огранича на минимума за моите нужди – текстово поле, бутон, слой за резултата: В по-горния скрипт се вижда, че зареждам popup.js. Неговото съдържание е следното: Чрез popup.js зарежда javascripta, който се инжектира в страницата – getPageContent.js: Това е. Сега остава да заредим добавката в Chrome. Това става като отворим More Tools -> Extensions. След това кликаме на бутона Load unpacked и избираме директорията с файловете на нашата добавка. На базата на тази добавка могат да се направят много други, тъй като съдържа базата за писане на добавки за Chrome. Сорс кода може да се изтегли от тук: Chrome_Extension-Simple.zip Кратко видео, което показва как може да се ползва добавката: Bootstrap and tinyMCE examples JavaScript обекно ориентирано програмиране – наследяване (пример) Един много прост пример за наследяване на клас в JavaScript. В случая имам клас Shape (форма), който ще разширя с клас за правоъгълник (Rectangle), който на свой ред ще разширя с клас за квадрат (Square). По-горния код е интересен, но тъй като съм го копирал и преработвал, без много да му вниквам, не е мисля, че е добър. Ето така го оптимизирах, след като попрочетох малко за ООП-то на JavaScript: За да стартирам кода използвам SublimeText2 с инсталирана приставка за стартиране на команди от шела Turtlestein, а за JavaScript интерпретатор използвам SpiderMonkey 1.8.5 for Windows. Simple JavaScript rich text format editor Прост, базов RTF редактор за сайт Дълго съм се чудил кой е най-подходящия JavaScript Wysiwyg редактор с най-много възможности за напасване към сайт. Ползвал съм NicEdit, TinyMCE и други, които сам съм писал, неподдържащи rich text format (RTF). Обаче напасването на тези редактори към различни дизайни е развибащо от към бачкане и тестване в различните браузери. Реших да почопля няколко такива редактора и да разбера кое е толкова загадъчно и сложно, за да се напише подобен редактор. Истината е тривиална и се казва – iFrame. Този таг се ползва в почти всички подобни редактори, точно заради поддръжката му на RTF. При събмитване на формата, цялото съдържание на iform се подава на textarea, който си седи удобно скрит. Това е моят редактор, без CSS-форматиране, като в примера добавям и опция за обработка на текста от базата данни, където присъства без тагове, с ексейпнати малко по-рискови символи. Съдръжанието на JavaScript файла: Сорс кода: wiswyg_by_ned.rar Demo нa кода. Калкулатор за пресмятане на течност за електронни цигари Greasemonkey scripts Ползвали ли сте Greasemonkey? Това е една изключително готина добавка за Firefox (вече и за други браузери, в Chrome 4 си я има по подразбиране), която доста улеснява живота. Greasemonkey ви позволява да промените начина по който изглежда или се държи дадена Web-страница, благодарение на малки парченца javaScript код. Greasemonkey може да се използва за персонализиране на редакторите във форумите. Как примерно да добавим бутончета към редактора за постове в Dbg: – да прави цвета на селектирания текст в синьо, а текста удебелен – да слага тагове за цитиран текст Ей го скрипта: Много готино е, че Frefox поддържа XPath! За разлика от лайното Internet Explorer (трябва да се забрани със закон и всеки потребител да подписва договор, че никога, за нищо на света няма да използва IE, ам наистина НИКОГА!). А XPath яко улеснява писането на JavaScript и неимоверно съкращава кода. Резултата може да се види на картинките по-долу. Оригинална лента: С добавените бутони: Скрипта може да се изтегли от тук: Добавяне на бутони към коментарите в DBG Между другото Greasemonkey може да автоматизира и въвеждането на информация в специални сайтове, като например онлайн игрите. Има една онлайн игра Dimiva.com, където трябва да въртиш някакво зомбирано колело и междувременно ти излизат някакви зомбирани реклами, които трябва да познаваш за какво са и да кликаш на radio-бутони под тях. Изобщо зомбирана ситуация. Използвам я само за примерен скрипт, който да маркира автоматично radio-бутоните. Спред картинката, която се зарежда, маркирам и съответния бутон. Картинките са с постоянни имена, което улеснява зомбираната ситуация. И скрипта: dimiva.com – radio clicker Ще покажа и още един пример, който обработва всички зададени тагове от дадена страница. Примерно искаме да сменим цвета на “син” на всички линкове в някой сайт. За да си спестя безмислено писане на код, отново ще използвам XPath. На сайта на филмовата база данни IMDB има много интересни класации и рейтинги на филми. Но при отварянето на някои излиза досаден банер, който те призовава да станеш ProUser. Примерна страница: http://pro.imdb.com/moviemeter/?d=tt_moviemeter_why Това е смешно… и естествено е редно да го разкараме: След като приложихме скрипта, получаваме една нормална страница: И още един скрипт за оналайн магазина SportsDirect, който скрива резултати с цена по-висока от избраната от нас. Примерно искаме да скрием всички стоки, които са с цена по-висока от 29 паунда. Файл за инсталиране: SportsDirect price filter Малко полезни линкове: http://userscripts.org/ – база данни с потребителски скриптове. Добро място за разучаване на кодирането с Greasemonkey. http://wiki.greasespot.net/ – мястото от където е добре да започнем document.evaluate – обяснение за опциите на document.evaluate JavaScript GUI – бързо, вкусно, лесно с GLUEScript Днес докато се ровех за интересни нови неща около JavaScript интепретатора на mozilla – SpiderMonkey попаднах на много интересна среда за програмиране GLUEScript, базирана на този интерпретатор. За графичния потребителски интерфейс (GUI) се използват wxWidgets. Възможността да се пишат GUI програми с JavaScript особено много ме гизкефи. JavaScript е доволно популярен и приложим език за програмиране. Информация в мрежата бол. Ето едно много просто приложение, което показва лекотата за писане с GLUEScript – температурен конвертор между Фаренхайд и Целзий: Запазваме програмата като converter_c_to_t.js и я изпълняваме през промпта или конзолата: Резултат: С WinRar можем да направим програмката изпълнимо exe, като включим всички необходими файлове: F_to_C_Converter.exe
1.1 1.2 2.1 2.2 3.1 4.1 4.2 5.1 6.1 7.1 8.1 9.1 10.1 11.1 12.1 13.1 13.2 14.1 14.2 16.1 19.1 22.1 22.2 22.3 23.1 26.1 30.1 31.1 32.1 37.1 38.1 44.1 46.1 46.2 46.3 46.4 50.1 55.1 56.1 57.1 58.1 64.1 64.2 64.3 65.1 66.1 69.1 70.1 74.1 75.1 76.1 77.1 77.2 77.3 77.4 83.1 85.1 88.1 89.1 90.1 91.1 97.1 109.1 110.1 111.1 112.1 113.1 114.1 115.1 116.1 122.1 122.2 122.3 123.1 124.1 124.2 125.1 126.1 126.2 126.3 127.1 128.1 128.2 129.1
From cards🃏 to code💻! Ex-professional poker player now web developer... The more I learn about coding, the more inspired I get about how creative and revolutionary some of these ideas are. From the readability of Ruby, to a world of hashes in Javascript, these ideas keep renewing the way we think and evolve the tech world all the time. This was a common stereotype that I noticed was common among up and coming developers at Makers Academy, when consulting them over their job prospects and interests. In our company we have found it very difficult to find a mid and senior level front end developer to join our team. It does make me think about whether this attitude is something that contributes towards developers not wanting commit to the front end. But recently the front end has been revolutionised with multiple ideas such as CSS grids, the standardisation from Bootstrap and the use of components… Here we show how pages are made up typically. (Using the dev tools mode in Chrome (Apple + Alt + I and then going to the Elements Tab) shows the HTML code of the page) We put all the elements of the page in between the body tags of the HTML code which outputs to the page. This seems like a totally fine way of doing thing but the question is, what if had lots of pages and we wanted the header and footer to be on all of them? We would be copying and pasting that code a lot on each of our pages which would be quite an inefficient way of doing things. Whenever DRY (Do Not Repeat Yourself) appears in code, it means one thing… we can refactor it into something reusable, that is referred to! There are a few suggestions for this such as using partials, but the most popular one over the last few years has been to use Components, as popularised by the Facebook developers using React.js. Lets look at an example using Vue.js, which is similar to React.js. I like Vue.js because it is more readable and clearer then React imo. Our components are stored in vue files, and its parent vue file refers to it, usually called App.vue. Each vue file always has the same structure where it is divided into three parts; // HTML of the component goes here // Code goes here So lets split up our code and put them into a separate vue file in a folder called components. We’ll take out the footer code and put that into Header.vue. The HTML goes inside the template tags, and we create a variable in the data hash that contains the text. // Header.vue {{ headerText }} export default { data: { headerText: "This is the header", In our original App.vue file, we refer to that newly created header component we just created. // App.vue The Article Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. This is the footer import appHeader from './components/Header.vue' export default { components: { 'app-header': appHeader, In the script, we import that component using the component hash, then we use that name into its own customly named html tag, in this case we called it  . We can use the name ‘header’ but because that is aleady a tag name that exists we want to avoid these names as to avoid any conflicting code. This is how Vue refers to its components, which is different to React.js. So lets do the same thing with the Article and Footer section. // Article.vue The Article {{ articleText }} export default { data() { return { articleText: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." Now the footer… {{ footerText }} export default { data() { return { footerText: "This is the footer", The final App.vue; import appHeader from './components/Header.vue' import appArticle from './components/Article.vue' import appFooter from './components/Footer.vue' export default { components: { 'app-header': appHeader, 'app-article': appArticle, 'app-footer': appFooter, After all this work, its the same look exactly. But now we have reusable components! This means that any other page we want to create, we can import in those components and use it. And what is great is that its very easy to tell which component has been imported in, and where in the page it is in by just looking at the template section. Components are super flexible and reusable which are great for huge websites. Even elements such as buttons and forms can be components and therefore reusable throughout. The styling of each component can also be included within it, which is great for consistency of the branding of the website. Another reason why components are great is that logic from functions can also be added to each component. This really changed the way websites were created as the logic was typically put in a completely separate place to the HTML. Now, it is added into the component which means that the logic is linked to it right there and can be easier to find. This means that a lot of the logic is now mixed in with the front end, allowing for a more full stack experience for front end devs and at the same time putting less stress on the the backend which only contains the code that is relevant to what it is trying to do. (It seems like this will be the battle of the component based Javascript framework! Who will win?) I hope everyone will have a great May day bank holiday weekend, cya next time!