PageSourceSearch

https://serpean.github.io/

html serpean.github.io collected 2026-10-03 09:55:46 UTC 19,029 bytes, 686 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="utf-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="google-site-verification" content="xBT4GhYoi5qRD5tr338pgPM5OWHHIDR6mNg1a3euekI" />
8    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
9    <meta name="description" content="Web & Mobile Lover,Software Engineer">
10    <meta name="keywords" content="serpean Blog, Web, JavaScript, Java, Software">
11    <meta name="theme-color" content="#000000">
12
13    <!-- Open Graph -->
14    <meta property="og:title"
15        content="serpean Blog">
16    
17    <meta property="og:type" content="website">
18    <meta property="og:description"
19        content="">
20    
21    <meta property="og:image" content="https://serpean.github.iohttps://github.com/serpean.png">
22    <meta property="og:url" content="https://serpean.github.io/">
23    <meta property="og:site_name" content="serpean Blog">
24
25    <title>serpean Blog</title>
26
27    <!-- Web App Manifest -->
28    <link rel="manifest" href="/pwa/manifest.json">
29
30    <!-- Favicon -->
31    <link rel="shortcut icon" href="/img/favicon.ico">
32
33    <!-- Canonical URL -->
34    <link rel="canonical" href="https://serpean.github.io/">
35
36    <!-- Bootstrap Core CSS -->
37    <link rel="stylesheet" href="/css/bootstrap.min.css">
38
39    <!-- Custom CSS -->
40    <link rel="stylesheet" href="/css/hux-blog.min.css">
41
42    <!-- Custom Fonts -->
43    <!-- <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"> -->
44    <!-- Hux change font-awesome CDN to qiniu -->
45    <link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"
46        type="text/css">
47
48
49    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
50    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
51    <!--[if lt IE 9]>
52        
52<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
52
53        
53<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
53
54    <![endif]-->
55
56    <!-- ga & ba script hoook -->
57    
57<script></script>
57
58
59    <!-- Google AdSense -->
60    <!-- 
60<script data-ad-client="ca-pub-6487568398225121" async
61        src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
61 -->
62
63    <!-- Google tag (gtag.js) -->
64    </script>
vendor: 81 bytes, lines 64-66
64
65        
66        <script async src="https://www.googletagmanager.com/gtag/js?id=
66G-PG6W7H2EY1
vendor: 20 bytes, lines 66-67
66"></script>
67        
67<script>
68            var _gaId = 'G-PG6W7H2EY1';
69            window.dataLayer = window.dataLayer || [];
70            function gtag(){dataLayer.push(arguments);}
71            gtag('js', new Date());
72    
73            gtag('config', _gaId);
74        </script>
74
75        
76</head>
77
78
79<!-- hack iOS CSS :active style -->
80<body ontouchstart="">
81
82    <!-- Navigation -->
83
84<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
85
86
87    <div class="container-fluid">
88        <!-- Brand and toggle get grouped for better mobile display -->
89        <div class="navbar-header page-scroll">
90            <button type="button" class="navbar-toggle">
91                <span class="sr-only">Toggle navigation</span>
92                <span class="icon-bar"></span>
93                <span class="icon-bar"></span>
94                <span class="icon-bar"></span>
95            </button>
96            <a class="navbar-brand" href="/">
97                <img src="/img/logo.svg" alt="serpean Blog">
98            </a>
99        </div>
100
101        <!-- Collect the nav links, forms, and other content for toggling -->
102        <div id="huxblog_navbar">
103            <div class="navbar-collapse">
104                <ul class="nav navbar-nav navbar-right">
105                    <li>
106                        <a href="/">Home</a>
107                    </li>
108                    
109                    
110                    
111                    
112                    <li>
113                        <a href="/about/">About</a>
114                    </li>
115                    
116                    
117                    
118                    
119                    
120                    <li>
121                        <a href="/archive/">Archive</a>
122                    </li>
123                    
124                    
125                    
126                    
127                    
128                    
129                    
130                    
131                    
132                    
133                    
134                    
135                    <li class="search-icon">
136                        <a href="javascript:void(0)">
137                            <i class="fa fa-search"></i>
138                        </a>
139                    </li>
140                </ul>
141            </div>
142        </div>
143        <!-- /.navbar-collapse -->
144    </div>
145    <!-- /.container -->
146</nav>
147
148<script>
149    // Drop Bootstarp low-performance Navbar
150    // Use customize navbar with high-quality material design animation
151    // in high-perf jank-free CSS3 implementation
152    var $body = document.body;
153    var $toggle = document.querySelector('.navbar-toggle');
154    var $navbar = document.querySelector('#huxblog_navbar');
155    var $collapse = document.querySelector('.navbar-collapse');
156
157    var __HuxNav__ = {
158        close: function () {
159            $navbar.className = " ";
160            // wait until animation end.
161            setTimeout(function () {
162                // prevent frequently toggle
163                if ($navbar.className.indexOf('in') < 0) {
164                    $collapse.style.height = "0px"
165                }
166            }, 400)
167        },
168        open: function () {
169            $collapse.style.height = "auto"
170            $navbar.className += " in";
171        }
172    }
173
174    // Bind Event
175    $toggle.addEventListener('click', function (e) {
176        if ($navbar.className.indexOf('in') > 0) {
177            __HuxNav__.close()
178        } else {
179            __HuxNav__.open()
180        }
181    })
182
183    /**
184     * Since Fastclick is used to delegate 'touchstart' globally
185     * to hack 300ms delay in iOS by performing a fake 'click',
186     * Using 'e.stopPropagation' to stop 'touchstart' event from 
187     * $toggle/$collapse will break global delegation.
188     * 
189     * Instead, we use a 'e.target' filter to prevent handler
190     * added to document close HuxNav.  
191     *
192     * Also, we use 'click' instead of 'touchstart' as compromise
193     */
194    document.addEventListener('click', function (e) {
195        if (e.target == $toggle) return;
196        if (e.target.className == 'icon-bar') return;
197        __HuxNav__.close();
198    })
199</script>
199
200    <!-- Search -->
201<div class="search-page">
202  <div class="search-icon-close-container">
203    <span class="search-icon-close">
204      <i class="fa fa-chevron-down"></i>
205    </span>
206  </div>
207  <div class="search-main container">
208    <div class="row">
209      <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
210        <form></form>
211        <input type="text" id="search-input" placeholder="$ grep...">
212        </form>
213        <div id="search-results" class="mini-post-list"></div>
214      </div>
215    </div>
216  </div>
217</div>
218
219    <!-- Page Header -->
220
221
222
223
224
225
226
227<header class="intro-header" style="background-image: url('/img/home-bg-city.jpg')">
228  <div class="container">
229    <div class="row">
230      <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
231        
232        <div class="site-heading">
233        
234          <h1>serpean Blog</h1>
235          <span class="subheading"></span>
236        </div>
237      </div>
238    </div>
239  </div>
240</header>
241
242
243<!-- Main Content -->
244<div class="container">
245  <div class="row">
246    
247
248    <!-- USE SIDEBAR -->
249    <!-- PostList Container -->
250    <div class="col-lg-8 col-lg-offset-1 col-md-8 col-md-offset-1 col-sm-12
251      col-xs-12 postlist-container">
252      
253<div class="post-preview">
254    <a href="/2023/03/02/industry-4-0/">
255        <h2 class="post-title">
256            Industry 4.0 Software
257        </h2>
258        
259        <h3 class="post-subtitle">
260            The future of the industry
261        </h3>
262        
263        <div class="post-content-preview">
264            
265                The project that has been carried out consists of a study of the state of the art of Industry 4.0 and its relationship with software development. To this end, firstly, research has been carried out...
266            
267        </div>
268    </a>
269    <p class="post-meta">
270        Posted by Sergio Pérez on March 2, 2023
271    </p>
272</div>
273<hr>
274
275<div class="post-preview">
276    <a href="/2022/07/05/sap-commerce-kibana-101/">
277        <h2 class="post-title">
278            SAP Commerce Kibana 101
279        </h2>
280        
281        <h3 class="post-subtitle">
282            Start to control the cloud logs
283        </h3>
284        
285        <div class="post-content-preview">
286            
287                SAP Commerce is a platform for building e-commerce websites and online stores. Kibana is a visualization tool for analyzing and understanding data stored in Elasticsearch, which is used to store lo...
288            
289        </div>
290    </a>
291    <p class="post-meta">
292        Posted by Sergio Pérez on July 5, 2022
293    </p>
294</div>
295<hr>
296
297<div class="post-preview">
298    <a href="/2022/07/05/hello-world/">
299        <h2 class="post-title">
300            Hello World!
301        </h2>
302        
303        <h3 class="post-subtitle">
304            New blog style
305        </h3>
306        
307        <div class="post-content-preview">
308            
309                
310  Hello World!
311
312
313            
314        </div>
315    </a>
316    <p class="post-meta">
317        Posted by Sergio on July 5, 2022
318    </p>
319</div>
320<hr>
321
322<div class="post-preview">
323    <a href="/2022/02/03/sap-commerce-wsl-setup/">
324        <h2 class="post-title">
325            SAP Commerce WSL Setup
326        </h2>
327        
328        <h3 class="post-subtitle">
329            Run Linux to compile and windows for everything else.
330        </h3>
331        
332        <div class="post-content-preview">
333            
334                This tutorial explains how to set up a Windows Subsystem for Linux 2 (WSL2) environment to work with SAP COMMERCE (also known as Hybris). WSL2 allows you to run a Linux environment directly on your...
335            
336        </div>
337    </a>
338    <p class="post-meta">
339        Posted by Sergio Pérez on February 3, 2022
340    </p>
341</div>
342<hr>
343
344
345<!-- Pager -->
346
347
348    </div>
349    <!-- Sidebar Container -->
350    <div class="col-lg-3 col-lg-offset-0 col-md-3 col-md-offset-0 col-sm-12
351      col-xs-12 sidebar-container">
352      <!-- Featured Tags -->
353      
354
355
356<section>
357    
358    <h5><a href="/archive/">FEATURED TAGS</a></h5>
359    <div class="tags">
360        
361        
362        
363        
364        
365        
366                <a data-sort="0002" 
367                    href="/archive/?tag=Sap+Commerce"
368                    title="Sap Commerce"
369                    rel="2">Sap Commerce</a>
370    </div>
371</section>
372
373
374      <!-- Short About -->
375      <section class="visible-md visible-lg">
376  <hr>
377  <h5><a href="/about/">ABOUT ME</a></h5>
378  <div class="short-about">
379    
380    <img src="https://github.com/serpean.png" />
381    
382    
383    <p>Backend Software Engineer.</p>
384    
385    <!-- SNS Link -->
386    
387
388
389<ul class="list-inline">
390
391
392  
393  
394  
395  
396  
397  
398  <li>
399    <a target="_blank" href="https://github.com/serpean">
400      <span class="fa-stack fa-lg">
401        <i class="fa fa-circle fa-stack-2x"></i>
402        <i class="fa fa-github fa-stack-1x fa-inverse"></i>
403      </span>
404    </a>
405  </li>
406  
407  
408  <li>
409    <a target="_blank" href="https://www.linkedin.com/in/serpean">
410      <span class="fa-stack fa-lg">
411        <i class="fa fa-circle fa-stack-2x"></i>
412        <i class="fa fa-linkedin fa-stack-1x fa-inverse"></i>
413      </span>
414    </a>
415  </li>
416  
417</ul>
418  </div>
419</section>
420
421      <!-- Friends Blog -->
422      
423
424      <!-- Ads -->
425      <!-- 
425<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
425 -->
426<!-- first shot -->
427<!-- <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6487568398225121" data-ad-slot="4814308751"
428     data-ad-format="auto" data-full-width-responsive="true"></ins>
429<script>
430     (adsbygoogle = window.adsbygoogle || []).push({});
431</script>
431 -->
432
433    </div>
434    
435  </div>
436</div>
437
438
439
440
441    <!-- Footer -->
442<footer>
443    <div class="container">
444        <div class="row">
445            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
446                <!-- SNS Link -->
447                
448
449
450<ul class="list-inline text-center">
451
452
453  
454  
455  
456  
457  
458  
459  <li>
460    <a target="_blank" href="https://github.com/serpean">
461      <span class="fa-stack fa-lg">
462        <i class="fa fa-circle fa-stack-2x"></i>
463        <i class="fa fa-github fa-stack-1x fa-inverse"></i>
464      </span>
465    </a>
466  </li>
467  
468  
469  <li>
470    <a target="_blank" href="https://www.linkedin.com/in/serpean">
471      <span class="fa-stack fa-lg">
472        <i class="fa fa-circle fa-stack-2x"></i>
473        <i class="fa fa-linkedin fa-stack-1x fa-inverse"></i>
474      </span>
475    </a>
476  </li>
477  
478</ul>
479
480                <p class="copyright text-muted">
481                    Copyright &copy; serpean Blog 2024
482                </p>
483            </div>
484        </div>
485    </div>
486</footer>
487
488<!-- jQuery -->
489<script src="/js/jquery.min.js "></script>
489
490
491<!-- Bootstrap Core JavaScript -->
492<!-- Currently, only navbar scroll-down effect at desktop still depends on this -->
493<script src="/js/bootstrap.min.js "></script>
493
494
495<!-- Custom Theme JavaScript -->
496<script src="/js/hux-blog.min.js "></script>
496
497
498<!-- Simple Jekyll Search -->
499<script src="/js/simple-jekyll-search.min.js"></script>
499
500
501<!-- Service Worker -->
502
503<script src="/js/snackbar.js "></script>
vendor: 1 bytes, line 503
503
504<script src="/js/sw-registration.js "></script>
504
505
506
507<!-- async load function -->
508<script>
509    function async(u, c) {
510        var d = document, t = 'script',
511            o = d.createElement(t),
512            s = d.getElementsByTagName(t)[0];
513        o.src = u;
514        if (c) { o.addEventListener('load', function (e) { c(null, e); }, false); }
515        s.parentNode.insertBefore(o, s);
516    }
517</script>
517
518
519<!--
520     Because of the native support for backtick-style fenced code blocks
521     right within the Markdown is landed in Github Pages,
522     From V1.6, There is no need for Highlight.js,
523     so Huxblog drops it officially.
524
525     - https://github.com/blog/2100-github-pages-now-faster-and-simpler-with-jekyll-3-0
526     - https://help.github.com/articles/creating-and-highlighting-code-blocks/
527     - https://github.com/jneen/rouge/wiki/list-of-supported-languages-and-lexers
528-->
529<!--
530    
530<script>
531        async("http://cdn.bootcss.com/highlight.js/8.6/highlight.min.js", function(){
532            hljs.initHighlightingOnLoad();
533        })
534    </script>
534
535    <link href="http://cdn.bootcss.com/highlight.js/8.6/styles/github.min.css" rel="stylesheet">
536-->
537
538
539
540
541
542
543
544<!--fastClick.js -->
545<script>
546    async("//cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js", function () {
547        var $nav = document.querySelector("nav");
548        if ($nav) FastClick.attach($nav);
549    })
550</script>
550
551
552<!-- Baidu Tongji -->
553
554
555
556<!-- Side Catalog -->
557
558<script type="text/javascript">
559    function generateCatalog(selector) {
560
561        // interop with multilangual 
562        if ('' == 'true') {
563            _containerSelector = 'div.post-container.active'
564        } else {
565            _containerSelector = 'div.post-container'
566        }
567
568        // init
569        var P = $(_containerSelector), a, n, t, l, i, c;
570        a = P.find('h1,h2,h3,h4,h5,h6');
571
572        // clean
573        $(selector).html('')
574
575        // appending
576        a.each(function () {
577            n = $(this).prop('tagName').toLowerCase();
578            i = "#" + $(this).prop('id');
579            t = $(this).text();
580            c = $('<a href="' + i + '" rel="nofollow">' + t + '</a>');
581            l = $('<li class="' + n + '_nav"></li>').append(c);
582            $(selector).append(l);
583        });
584        return true;
585    }
586
587    generateCatalog(".catalog-body");
588
589    // toggle side catalog
590    $(".catalog-toggle").click((function (e) {
591        e.preventDefault();
592        $('.side-catalog').toggleClass("fold")
593    }))
594
595    /*
596     * Doc: https://github.com/davist11/jQuery-One-Page-Nav
597     * Fork by Hux to support padding
598     */
599    async("/js/jquery.nav.js", function () {
600        $('.catalog-body').onePageNav({
601            currentClass: "active",
602            changeHash: !1,
603            easing: "swing",
604            filter: "",
605            scrollSpeed: 700,
606            scrollOffset: 0,
607            scrollThreshold: .2,
608            begin: null,
609            end: null,
610            scrollChange: null,
611            padding: 80
612        });
613    });
614</script>
614
615
616
617
618<!-- Multi-Lingual -->
619
620
621<!-- Simple Jekyll Search -->
622<script>
623    // https://stackoverflow.com/questions/1912501/unescape-html-entities-in-javascript
624    function htmlDecode(input) {
625        var e = document.createElement('textarea');
626        e.innerHTML = input;
627        // handle case of empty input
628        return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
629    }
630
631    SimpleJekyllSearch({
632        searchInput: document.getElementById('search-input'),
633        resultsContainer: document.getElementById('search-results'),
634        json: '/search.json',
635        searchResultTemplate: '<div class="post-preview item"><a href="{url}"><h2 class="post-title">{title}</h2><h3 class="post-subtitle">{subtitle}</h3><hr></a></div>',
636        noResultsText: 'No results',
637        limit: 50,
638        fuzzy: false,
639        // a hack to get escaped subtitle unescaped. for some reason, 
640        // post.subtitle w/o escape filter nuke entire search.
641        templateMiddleware: function (prop, value, template) {
642            if (prop === 'subtitle' || prop === 'title') {
643                if (value.indexOf("code")) {
644                    return htmlDecode(value);
645                } else {
646                    return value;
647                }
648            }
649        }
650    });
651
652    $(document).ready(function () {
653        var $searchPage = $('.search-page');
654        var $searchOpen = $('.search-icon');
655        var $searchClose = $('.search-icon-close');
656        var $searchInput = $('#search-input');
657        var $body = $('body');
658
659        $searchOpen.on('click', function (e) {
660            e.preventDefault();
661            $searchPage.toggleClass('search-active');
662            var prevClasses = $body.attr('class') || '';
663            setTimeout(function () {
664                $body.addClass('no-scroll');
665            }, 400)
666
667            if ($searchPage.hasClass('search-active')) {
668                $searchClose.on('click', function (e) {
669                    e.preventDefault();
670                    $searchPage.removeClass('search-active');
671                    $body.attr('class', prevClasses);  // from closure 
672                });
673                $searchInput.focus();
674            }
675        });
676    });
677</script>
677
678
679
680<!-- Image to hack wechat -->
681<img src="/img/icon_wechat.png" width="0" height="0" />
682<!-- Migrate from head to bottom, no longer block render and still work -->
683
684</body>
685
686</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.