Posts

Showing posts with the label JS

5 Ekstensi VSCode Teratas untuk Pengembangan JavaScript yang Efisien

Image
Ekstensi adalah sumber daya eksternal yang membantu Anda meningkatkan kemampuan bawaan VSCode. Dalam posting ini, kita melihat 5 ekstensi teratas untuk meningkatkan keterampilan pengembangan JavaScript kita. Salah satu hal paling luar biasa tentang Visual Studio Code adalah kemampuan untuk meningkatkan kemampuannya dengan penambahan ekstensi eksternal. Namun, ada banyak ekstensi di pasar. Dalam pos ini, kami akan membahas 5 ekstensi teratas yang secara drastis akan meningkatkan pengembangan JavaScript Anda di VS Code. ESLint ESLint adalah alat linter pluggable dan dapat dikonfigurasi untuk mengidentifikasi dan melaporkan pola pengembangan dalam JavaScript. Ini membantu Anda menjaga kualitas dan struktur kode Anda dengan mudah. Menambahkan ekstensi ini ke VSCode akan membantu Anda memformat kode Anda secara otomatis, menegakkan kode yang lebih bersih, terstruktur dengan baik, dan konsisten. Debugger untuk Chrome Debugger untuk Chrome adalah ekstensi VS Code yang digunakan unt

[JS] Print console log into div

Image
HTML <div id="debug"></div> Pure Javascript (function () { var old = console.log; var logger = document.getElementById('log'); console.log = function (message) { if (typeof message == 'object') { logger.innerHTML += (JSON && JSON.stringify ? JSON.stringify(message) : message) + '<br />'; } else { logger.innerHTML += message + '<br />'; } } })(); Using jQuery // Using jQuery if (typeof console != "undefined") if (typeof console.log != 'undefined') console.olog = console.log; else console.olog = function() {}; console.log = function(message) { console.olog(message); $('#debug').append('<p>' + message + '</p>'); }; console.error = console.debug = console.info = console.log

Stylish Full Sitemap Blogger

Image
How to Create Full Sitemap Blogger Pink Table Style Read How to async defer CSS JS perfectly Here the HTML <div id='wrapper'> <div id="bp_toc"></div> <script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/sitemap-content.js" type="text/javascript"></script> <script src="https://www.web-development.cf/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script></div> Here The CSS @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700); body{   background:#ecf0f1;   font-family:'Open Sans';   color:#444;   line-height:normal; } #wrapper{   margin:30px auto;   max-width:600px; } a:link { color:#fc4f3f; text-decoration:none; outline:none; transition:all .25s; } a:visited:hover { color:#fc4f3f; text-decoration:none; } a:visited,a:link:hover { color:#444; text-decoration:n

How to display only content posts or pages on blogger

Image
Usually a blogger when creating a page on a blog that wants content that is displayed only content only. In other words a blogger wants to create a clean page. Yes, the purpose of this article is to help you guys who want to create a clean page from comments, widgets, or navigation headers. Here's the tutorial : Make sure you had call jquery framework ( https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js ) before </head> Lets begun: Tutorial to display content of posts or pages only in blogger: When you create an article or page, put the code below at the end of your article or content page in HTML EDITOR. <script> $('div:not(div[id^=post-body-])').hide(); // hide everything except id="post-body-xxxxxxxxxx" $("[id^='post-body-']").appendTo('body'); // move id="post-body-xxxxxxxxx" up to the body </script> Done. I hope this post be help you.. Dont forget share this blog. Thank you.. Incom

Add CSS Minifier Tool to Website

Simple way to add CSS minifier to an websites. Here the codes: HTML <div class="next-wrap"> <div id="cssminifier"> <span class="clear"></span> <textarea autofocus="" id="cssField" placeholder="Paste your CSS code here..." spellcheck="false"></textarea> <div class="button-group"> <div class="box"> <input class="opt1" id="stripAllComment" type="checkbox" /> <label for="stripAllComment">Strip all comments</label> <input class="opt2" id="superCompact" type="checkbox" /> <label for="superCompact">Super compact</label> <input class="opt3" id="betterIndentation" type="checkbox" /> <label for="betterIndentation">Keep ind

[JS] Get List Facebook Groups ID

Image
Script Get Access Token Full Support https://web-manajemen.blogspot.com/2018/11/script-php-auto-refresh-token-facebook.html Requirements -jQuery <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> HTML <div id="idlist"></div> JavaScript const TOKEN = "YOUR_ACCESS_TOKEN"; function apu(end,token){ var apu = "https://graph.facebook.com/"; return apu+end+"?access_token="+token; } $.get(apu('me/groups', TOKEN), function(respond){ respond.data.forEach(function(data){ $("#idlist").append(data.id+" - "+data.name+"<br/>"); }); }); Result 1090537127744525 - Kolam Para Tuyul 349589302200713 - GUSMUK TUYUL ONLINE 1018459168276107 - Admob Adsense & Bitcoin Indonesia (FADLY HAELMI) 250847515571642 - Always sad ディック 327507001067071 - Ipeenk Downloader | Berbagi Software & Games Gratis 138639936800789 - Jual beli H

[JS][PHP] Regexp for matching URL Pattern

Image
Regexp Pattern Untuk mencocokkan semua jenis URL, kode berikut seharusnya berfungsi: <?php $regex = "((https?|ftp)://)?"; // SCHEME $regex .= "([a-z0-9+!*(),;?&=$_.-]+(:[a-z0-9+!*(),;?&=$_.-]+)?@)?"; // User and Pass $regex .= "([a-z0-9\-\.]*)\.(([a-z]{2,4})|([0-9]{1,3}\.([0-9]{1,3})\.([0-9]{1,3})))"; // Host or IP $regex .= "(:[0-9]{2,5})?"; // Port $regex .= "(/([a-z0-9+$_%-]\.?)+)*/?"; // Path $regex .= "(\?[a-z+&\$_.-][a-z0-9;:@&%=+/$_.-]*)?"; // GET Query $regex .= "(#[a-z_.-][a-z0-9+$%_.-]*)?"; // Anchor ?> Example: correctly way for matching URL <?php if(preg_match("~^$regex$~i", 'www.example.com/etcetc', $m)) var_dump($m); if(preg_match("~^$regex$~i", 'http://www.example.com/etcetc', $m)) var_dump($m); ?> Pattern diatas bisa digunakan di javascript. Bedanya dengan diatas hanya dari segi vari

Cara install heroku CLI di Termux

Image
Heroku adalah platform cloud sebagai layanan (PaaS) yang mendukung beberapa bahasa pemrograman. Heroku, salah satu platform cloud pertama, telah dikembangkan sejak Juni 2007, ketika hanya mendukung bahasa pemrograman Ruby, tetapi sekarang mendukung Java, Node.js, Scala, Clojure, Python, PHP, dan Go. Untuk alasan ini, Heroku dikatakan sebagai platform polyglot karena memungkinkan pengembang membangun, menjalankan, dan menskala aplikasi dengan cara yang sama di semua bahasa. Heroku diakuisisi oleh Salesforce.com pada 2010 sebesar $ 212 juta. Berikut tutorial untuk install Heroku App dan pre-requirements nya: Instalasi PHP di Termux Instalasi Composer di Termux Instalasi Node.js di Termux Instalasi Heroku App CLI di Termux Tahap 1: update & upgrade apt cd $HOME apt update -y apt upgrade -y Tahap 2: install PHP dan Composer cd $HOME apt install php -y php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');" php -r "if (hash_file

Pure Javascript Geolocation

Image
Read How to async defer CSS JS perfectly <script> function locationSuccess(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; var altitude = position.coords.altitude; var accuracy = position.coords.accuracy; var altitudeAccuracy = position.coords.altitudeAccuracy; var heading = position.coords.height; var speed = position.coords.speed; var timestamp = position.timestamp; // bekerja dengan informasi ini sesuka Anda! } function locationError(error) { var code = error.code; var message = error.message; // baca kode dan pesan dan putuskan bagaimana Anda ingin menangani ini! } navigator.geolocation.getCurrentPosition(locationSuccess, locationError); </script>

Update code Simple SafeLink v3

Image
First post : Cara Simple Membuat Blogger Safelink Converter 2017 100% Work function safelink(){ var safelinkpage = ['https://web-manajemen.blogspot.com/p/redirect.html?u=','https://web-manajemen.blogspot.com/p/a.html?u=']; var safelink = safelinkpage[Math.floor(Math.random() * safelinkpage.length)] + encodeURIComponent( 'http://linkshrink.net/zslz=' ); var protectedLinks = '/(web-manajemen.blogspot.com|facebook.com|fb.me|bing.com|www.google.com|plus.google.com)/'; var anchors = document.getElementsByTagName("a"); for (var i = 0; i < anchors.length; i++) { var intl = anchors[i]; if ( !intl.href.match( protectedLinks ) ) { intl.href = safelink + encodeURIComponent( intl.href ); if (intl.hasAttribute("target")){ intl.removeAttribute("target"); } intl.setAttribute("target", "_blank"); } } } document.onreadystatechange = () => { if (document.readyState === 'interactive

Asynchronous Loading of External Javascript

INTRODUCTION Loading of external javascript resources (libraries, plugins, widgets) should be done asynchronously, in a non-blocking manner, so the load time of your web-page will not be affected. Thus other resources like images and CSS are not blocked from loading. HTML5 WAY In the past that was possible with help of thedefer attribute, later HTML5 spec introduce the  async  attribute. <script src="//code.jquery.com/jquery-1.11.0.min.js" async> </script> PROGRAMATICALLY WAY Dynamically you can create  script  tag and inject it into the DOM. <script type="text/javascript"> (function() { var script = document.createElement("script"); script.type = "text/javascript"; script.async = true; script.src = "//code.jquery.com/jquery-1.11.0.min.js"; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script); })(); </script>

JavaScript Call Random CSS file

Image
Someone talk to stack overflow like this : I am trying to rotate random CSS sheets via JS - I have the following script but when I am using it - it doesnt seem to work ? function getRand(){ return Math.round(Math.random()*(css.length-1)); } var css = new Array( '<link rel="stylesheet" type="text/css" href="css/1.css">', '<link rel="stylesheet" type="text/css" href="css/2.css">', '<link rel="stylesheet" type="text/css" href="css/3.css">', '<link rel="stylesheet" type="text/css" href="css/4.css">' ); rand = getRand(); document.write(css[rand]); Appreciate any help? The best answer is : Try to create the link element programmatically and appending it to the head function applyRandCSS(){ var css = ["css/1.css", "css/2.css", "css/3.css", "css/4.css"

Easy Way of Adding Pin It Buttons in Images

Image
Function of this button to directly input images in your blog to your Pinterest account. How it works from the Button share Pin It this is the button will appear when you focus the cursor on each image in the blog. Easy Way of Adding Pin It Buttons in Images The trick is very easy, here you just need to add the code below before the body cover code </ body> or before the head cover code in the template </ head> Before adding this code make sure that in your blog template you have added jquery library link <script async='' data-pin-color='white' data-pin-hover='true' src='//assets.pinterest.com/js/pinit.js'/> Here is a display demo of this Pin It button. DEMO

(JS) Javascript Function Remove Slash From String

Image
All I needed was to expel every single forward slice in a string utilizing Javascript. Remove Forward Slash (/) Using JavaScript Function function FSlash(func){ var x = func,    n = x.replace(/\//g,''); return n  } //Usage Using Variable var nx = "4x/4/4/5/6/7//532///45/"; //Call Variable Into Function Name    document.write(FSlash(nx)); //You can combine from function too Demo : CodePen The vital part to note here is the consistent articulation /\//g . The bit of the string you need supplanting is composed between the first and last forward cuts – so on the off chance that you needed the word 'work area' supplanted you would compose/work area/g. As the character we need to expel is an uncommon case you need to escape it utilizing an oblique punctuation line, generally the code will read the twofold forward cut as a remark thus quit preparing the line. At last, the g implies apply the substitution internationally to the string with the goa

Update Code Widget Dan Template Untuk Simple Safelink Converter

Image
Untuk Cara Instal, Deskripsi, Dan Cara Penerapan Klik Disini (Cara Membuat Simple Safelink Converter) Update code Safelink Converter untuk Widget Atau Template/Theme Tambahan : Protected Links <script type='text/javascript' async='async'> var myArray = ['https://web-manajemen.blogspot.com/p/redirect.html?u=', 'https://web-manajemen.blogspot.com/p/advertisement.html?u=', 'http://web-manajemen.blogspot.com/p/advertise.html?u=']; var safelink = myArray[Math.floor(Math.random() * myArray.length)]; var protectedLinks = /(bing.com|google|linkedin.com|facebook|manajemen|safelink|pinterest|digg.com|twitter|codepen.io|blogger.com|ask.com|DOMAINKAMU.COM)/ $( 'a' ).each(function() { if (this.href.match( protectedLinks ) ){ $(this).attr("href", $(this).attr("href")+'?success'); //$(this).addClass('w3-text-green'); //Add Class On Internal Links } else { $(this).attr("href", safe

Update Code Safelink Converter Untuk Halaman 12 Desember 2017

Image
Untuk Cara Instal, Deskripsi, Dan Cara Penerapan Klik Disini (Cara Membuat Simple Safelink Converter) Code Untuk Di Halaman Safelink <script type="text/javascript" async> function getQueryVariable(variable) { var query = window.location.search.substring(1); var vars = query.split("&"); for (var i=0;i<vars.length;i++) { var pair = vars[i].split("="); if(pair[0] == variable){return pair[1];} } return(false); } var count = 11; var queryU = getQueryVariable('u'); var redirect = decodeURIComponent(queryU); var noprotocol = redirect.replace(/(^\w+:|^)\/\//, ''); function countDown(){ var timer = document.getElementById("timer"); var done = document.getElementById("done"); var ket = document.getElementById("ket"); if(count > 0){ count--; timer.innerHTML = "<div id='timer' class='w3-center w3-panel w3-light-grey'>Y

Random Posts Widget Blogger

Image
How to create random posts widget blogger (simple and stylish). 1. Login to dashboard blogger -> navigate to layout tab -> create widget html/javascript -> insert this code to the widget. <style scoped='' type="text/css"> #arlina-random ul{list-style:none;margin:0;padding:0}#arlina-random li{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;word-break:break-word;padding:10px 0;margin:0;} #arlina-random li:last-child{border-bottom:0;} #arlina-random li a{color:#444;}#arlina-random li a:hover{color:#444;text-decoration:underline} </style> <div id='arlina-random'>Memuat...</div> <script> //<![CDATA[ // Random Post Widget var homePage = ' https://www.web-development.cf ',     maxResults = 10 ,     containerId = 'arlina-random'; function getRandomInt(min, max) {     return Math.floor(Math.random() * (max - min + 1)) + min; } function shuffleArray(arr) {     var i = a

Powerful Ways to Remove Active Links in Blog Comments

Image
Link is active in the comment, what does it mean? An active link is a link that contains hyperlinks to point to a specific page or site.Means if combined, the meaning of the active link in the comment is the active link in the comment. Usually embedded by other blogger people or admins in the comments column as a response to the article in a blog post. If there is an active link, is there any inactive link? Correct. Inactive links mean the opposite of active links. Physically, an inactive link when clicked using a mouse will not generate a new page. In contrast to active links. Clicking will redirect to a specific page according to the URL embedded in it. Backlink effect The blog walker or admin term used to make comments on other blogs, usually aim to get backlinks. They then insert a link to his blog on the comments they wrote. In addition, he also hopes to get a response from people who visit the blog. Why was it removed Then why do active l

SCSS Animate Hover Scale Letters

Demo HTML Full Page <!DOCTYPE html><html><head> <link href="https://fonts.googleapis.com/css?family=Passion+One" rel="stylesheet" /> <style>html, body { height: 100%; } body { background: #e74c3c; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-family: 'Passion One', cursive; } .scale { font-size: 10vw; text-transform: uppercase; letter-spacing: 4px; color: #fff; cursor: pointer; } .scale span { display: inline-block; -webkit-transition: -webkit-transform 0.1s; transition: -webkit-transform 0.1s; transition: transform 0.1s; transition: transform 0.1s, -webkit-transform 0.1s; } .scale span:hover { -webkit-animation: rotate-scale-up 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) both; anim

Hiding javascript to increase blogger blog speed

Image
Me often find comments on blogs Mascots inquiring about blogger widgets that can not be performed, such as the blog's stat widgets and more. Well that's because Maskolis add a code that hides JavaScript Widget widget Blogger so that all bloggers are using JavaScript automatically become unworkable. It turned out that this is done in order to speed up the loading of the blog. With the existence of this code, the browser can not recognize native JavaScript code Blogger.As we have seen, that the amount of JavaScript code in the blog, the more burdensome loading the blog. Perhaps some of you ask what the hell that Blogger Widget Javascript? If you look at the page source of your blog as CTRL + U, then you will see at the bottom of the HTML template you like the code below. <