I am not a Coder But This Is How I Write CSS

shk — Sun, 04 Aug 2024 09:42:58 +0000

I just wondering if there are various types of programmers outside there? Just like in the world of the painter which has various types eg. Abstract, Expressionism, Impressionism, Pop art, etc... and all are defined by how they paint on their canvas.

Since both, programmers and painters have many similarities, they start with P and end with R or S. And they also work together with Canvas.

I actually not a programmer or even a coder. But I sometimes write HTML, CSS, and JS just to maintain my small business website. Btw I like to have as small as capital in my business website like using a free WordPress theme but it comes from a reputable agency.

Example for Back-to-top button

Okay... this is not to teach you on how to make a Back-to-top element. Since my theme is free with many limitations like no feature of back to top button, then I will make add-to-top button without a plugin.

HTML

<div id="to_topbtn"><a href="#" title="Go-Top!">Top!</a></div>

CSS

And this is how I write CSS, and I'm wondering what type of me with that kind of CSS.

#to_topbtn {
    animation: totopbtnmove 4s;
    animation-iteration-count: 1;
    bottom: 145px;
    opacity: 1;
    position: fixed;
    right: 15px;
    /* scroll-behavior: smooth; i put this on my html */
    z-index: 20;
}

#to_topbtn:hover {
    opacity: 0.5;
}

@keyframes totopbtnmove {
  from {bottom: 0px;}
  to {bottom: 145px;}
}

#to_topbtn a {
    align-items: center;
    background-color: #fcaf3b;
    border-radius: 50%;
    box-shadow:3px 3px #ab641d;
    color:#000;
    direction: ltr;
    display: flex;
    font-weight: 700;
    height: 48px;
    justify-content: center;
    line-height: normal;
    padding:0;
    transition: all 300ms linear;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    width: 48px;
}

#to_topbtn a:hover {
    padding:4px;
}

JS

function scroll_totopbtn() {
    var to_topbtn = $('#to_topbtn');
    $(window).scroll(function(){
        if ($(this).scrollTop() > 1800) {
            to_topbtn.fadeIn(400);
        } else {
            to_topbtn.fadeOut(400);
        }
    });
    to_topbtn.click(function(){
        $('html, body').animate({scrollTop : 0},900);
        return false;
    });
}
scroll_totopbtn();

Okay, sorry... I may be over, I put some CSS properties that are supposedly not needed based on its best practices 🙃. I just want to make the properties sequentially from A to Z.

Again, I'm not a programmer nor an artist painter, I may be a (CSS Writer) perfectionism 😎. Thank you for your time!

How I Lift My Business Site With a Bunch of "Code Convincion"

shk — Sat, 13 Jul 2024 08:01:29 +0000

This is not something high-tech nor complex but I'm so grateful passed the horrible outbreak with something joyful.

This is also not a sad story, I was so intrigued instead when remembered that time 😜.

The drawback to the past 2020 when COVID-19 outbreak. No job with a very limited budget but need to start a business ASAP to keep me alive.

Shortly... an "Online store with delivery service for the daily consumer needs" was the option. I installed WordPress on a cheap shared hosting which cost me only US$66 for the first 3 years of subscription.

Theme :

Storefront (Free)

Plugin :

WooCommerce (It's Free),
LSCWP (Free),
Free WordFence,
Free Yoast SEO
My Own plugin to override some functionalities with my "code of convincion" that i break into three parts.

Part 1 - to tackle the slow performance and to gain more trust 🤩

WordPress on shared hosting will surely give me a headache, it's no Problem. But what if my customer also headache? So part 1 of my "code of convincion" will help to avoid the slow performance and to convince my customer that my business is not cheap.

This code is not new, I believe everyone has seen these couple of codes since it circular around the internet.

// storefront remove gfont
add_action( 'wp_enqueue_scripts', 'tkdr_removegfont', 999);
function tkdr_removegfont() {
    wp_dequeue_style('storefront-fonts');

}
// WP & WC Optimization 
remove_action('wp_head', 'feed_links_extra', 3);
remove_action('wp_head', 'feed_links', 2);
remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('wp_print_styles', 'print_emoji_styles');
remove_action('admin_print_scripts', 'print_emoji_detection_script');
remove_action('admin_print_styles', 'print_emoji_styles');
remove_action('init', 'smilies_init', 5);
remove_action('wp_head', 'rsd_link');
remove_action('wp_head', 'wlwmanifest_link');
remove_action('wp_head', 'adjacent_posts_rel_link_wp_head', 10);
remove_action('wp_head', 'wp_generator');
remove_action('wp_head', 'wp_shortlink_wp_head', 10);
remove_action('wp_head', 'wp_oembed_add_discovery_links');
remove_filter('comment_text', 'convert_smilies', 20);
remove_filter('the_excerpt', 'convert_smilies');
remove_filter('the_content', 'convert_smilies');
add_filter( 'emoji_svg_url', '__return_false');

add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );
add_action( 'wp_enqueue_scripts', 'dequeue_woocommerce_cart_fragments', 11);
function dequeue_woocommerce_cart_fragments() {
    if ( is_page( array( 5149, 5152, 5156, 6283 ) ) ) {
        wp_dequeue_script('wc-cart-fragments');

    }

}

add_action( 'wp_enqueue_scripts', 'child_manage_woocommerce_styles', 99 );
function child_manage_woocommerce_styles() {
    remove_action( 'wp_head', array( $GLOBALS['woocommerce'], 'generator' ) );
    if ( function_exists( 'is_woocommerce' ) ) {
        if ( ! is_woocommerce() && ! is_cart() && ! is_checkout() ) {
            wp_dequeue_script( 'wc_price_slider' );
            wp_dequeue_script( 'wc-single-product' );
            wp_dequeue_script( 'wc-add-to-cart' );
            wp_dequeue_script( 'wc-cart-fragments' );
            wp_dequeue_script( 'wc-checkout' );
            wp_dequeue_script( 'wc-add-to-cart-variation' );
            wp_dequeue_script( 'wc-single-product' );
            wp_dequeue_script( 'wc-cart' );
            wp_dequeue_script( 'wc-chosen' );
            wp_dequeue_script( 'woocommerce' );
            wp_dequeue_script( 'prettyPhoto' );
            wp_dequeue_script( 'prettyPhoto-init' );
            wp_dequeue_script( 'jquery-blockui' );
            wp_dequeue_script( 'jquery-placeholder' );
            wp_dequeue_script( 'fancybox' );
            wp_dequeue_script( 'jqueryui' );
            wp_dequeue_style( 'woocommerce_frontend_styles' );
            wp_dequeue_style( 'woocommerce_fancybox_styles' );
            wp_dequeue_style( 'woocommerce_chosen_styles' );
            wp_dequeue_style( 'woocommerce_prettyPhoto_css' );

        }

    }

}

Part 2 - to make over and to look more professional 😎

The iconic login page of WordPress will be my office entrance and it's very classic, plus footer section of the storefront theme is very ugly and very possible to degrade my business. So I changed it to convince my prospective customer that my business is professional.

// Storefront Footer
function storefront_credit() { ?>
<div class="site-info">
© 2020 Seledri.Com - Supplier Bahan Baku Restoran.<br/>
<a href="https://seledri.com/policy/privacy/" title="Privacy policy">Privacy</a> | <a href="https://seledri.com/policy/terms-and-conditions/" title="Terms of Use">Syarat & Ketentuan</a>
</div><!-- .site-info -->
<?php

}

// Customize wp-login.php
add_action( 'login_head', 'tkdr_loginlogo' );
function tkdr_loginlogo() { ?>
<style type="text/css">
#login h1 a, .login h1 a {
    background-image:url(/wp-content/uploads/2020/05/logo_image.webp);
    height:80px;
    width:320px;
    background-size:320px 80px;
    background-repeat:no-repeat;
    border:2px solid #000;

}
</style>
<?php

}

add_filter('login_headerurl','tkdr_loginurl');
function tkdr_loginurl() {
    return home_url();

}

add_filter('login_headertitle','tkdr_logintitle');
function tkdr_logintitle() {
    return get_option('blogname');

}

add_action('login_head','tkdr_loginpage');
function tkdr_loginpage() { ?>
<style type="text/css">
body.login {
    background-color:#000;
    color:#fcaf3b;

}
body.login a {
    color:#fcaf3b;

}
#loginform {
    background-color:#000;
    border:2px solid #fff;
    box-shadow:4.5px 4.5px 0 -2px #000, 4px 4px #fff;

}
#loginform label {
    color:#fcaf3b;

}
body.login div#login form#loginform p.submit input#wp-submit {
    background-color:#fcaf3b;
    border-color:#fcaf3b;
    box-shadow:inset 0 -.6em 1em -.35em #ab641d;

}
p#nav {
    display:none;

}
p#backtoblog {
    display:none;

}
</style>
<?php

}

add_action('init','tkdr_rememberme');
function tkdr_rememberme() {
    add_filter('login_footer','tkdr_remembermechecked');

}
function tkdr_remembermechecked() {
    echo "<script>document.getElementById('rememberme').checked = true;</script>";

}

add_filter('login_errors','tkdr_loginerror');
function tkdr_loginerror() {
    return "User/Password Salah";

}

add_action('login_footer','tkdr_loginfooter');
function tkdr_loginfooter() { ?>
<div class="footernotes">
<h4 style="margin:1em auto;text-align:center;">Seledri.Com | Supplier Bahan Baku Restoran.</h4>
<p style="margin:1em auto;text-align:center;"> \ (•◡•) /</p>
<h4 style="margin:1em auto;text-align:center;">Please Don't Hack Us, We are Small Business.</h4>
</div>
<style type="text/css">
.login .privacy-policy-page-link {
    margin-top:2em;

}
.footernotes h4, .footernotes p {
    margin:1em auto;
    text-align:center;

}
</style>
<?php

}

Part 3 - to show functionalities and make more exclusive 😉

Part 3 the "code of convincion" is to make users think that they are exclusive. I hide the price for non-logged-in and give the price level based on product category and customer TOP (Term Of Payment).

I hide the price for non-logged-in and give the price level based on product category and customer TOP (Term Of Payment).

// Hide price and show for only logged-in user
add_action( 'init', 'tkdr_hideprice' );
function tkdr_hideprice() {
    if ( ! is_user_logged_in() ) {
        remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
        remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 );
        remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
        remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
        add_action( 'woocommerce_after_shop_loop_item', 'wpjkt_login_to_price', 11 );
        add_action( 'woocommerce_single_product_summary', 'wpjkt_login_to_price', 31 );

    }

}

function tkdr_logintoprice() {
    echo '<a href="' . get_permalink(wc_get_page_id('myaccount')) . '">' . __('Call us for price inquiry, how to order & how we deliver', 'storefront') . '</a>';

}

// Price showing different based on prod. cat and customer top
add_filter( 'woocommerce_product_get_price', 'tkdr_pricelevelbytop', 10, 1 );
function tkdr_pricelevelbytop( $price ) {
    $customerid_topi = [ 10, 11 ];
    $customerid_topvii = [ 2, 5, 8 ];
    $customerid_topx = [ 3, 6, 9 ];
    $customerid_topxiv = [ 4, 7, 1 ];
    // admin hpp
    if ( in_array( get_current_user_id(), $customerid_topi, true ) ) {
        if ( has_term( array( 'alat-masak', 'bahan-bahan-makanan', 'bumbu-masak', 'kopi-dan-teh', 'makanan' ), 'product_tag' ) ) {
            return $price * 110.00000 / 100;
        } else {
            if ( has_term( array( 'bahan-makanan', 'bumbu' ), 'product_tag' ) ) {
                return $price * 112.00000 / 100;
        } else {
            if ( has_term( array( 'daging-kambing', 'daging-sapi' ), 'product_tag' ) ) {
                return $price * 105.00000 / 100;
        } else {
            if ( has_term( array( 'ayam' ), 'product_tag' ) ) {
                return $price * 110.00000 / 100;
        } else {
            if ( has_term( array( 'rempah-rempah' ), 'product_tag' ) ) {
                return $price * 115.00000 / 100;
        } else {
            if ( has_term( array( 'buah-buahan', 'sayur-sayuran' ), 'product_tag' ) ) {
                return $price * 120.00000 / 100;
        } else {
            if ( has_term( array( 'cabe-dan-bawang' ), 'product_tag' ) ) {
                return $price * 130.00000 / 100;
        } } } } } } }
        return $price;
    }
    // customerid_topvii 105%, 111.66667%, 115%
    if ( in_array( get_current_user_id(), $customerid_topvii, true ) ) {
        if ( has_term( array( 'alat-masak', 'bahan-bahan-makanan', 'bahan-makanan', 'bumbu', 'bumbu-masak', 'kopi-dan-teh', 'makanan' ), 'product_tag' ) ) {
            return $price * 113.00000 / 100;
        } else {
            if ( has_term( array( 'daging-kambing', 'daging-sapi' ), 'product_tag' ) ) {
                return $price * 106.00000 / 100;
        } else {
            if ( has_term( array( 'ayam' ), 'product_tag' ) ) {
                return $price * 110.00000 / 100;
        } else {
            if ( has_term( array( 'rempah-rempah' ), 'product_tag' ) ) {
                return $price * 118.00000 / 100;
        } else {
            if ( has_term( array( 'buah-buahan', 'sayur-sayuran' ), 'product_tag' ) ) {
                return $price * 125.00000 / 100;
        } else {
            if ( has_term( array( 'cabe-dan-bawang' ), 'product_tag' ) ) {
                return $price * 135.00000 / 100;
        } } } } } }
        return $price;
    }
    // customerid_topx 110%, 123.33333%, 130%
    if ( in_array( get_current_user_id(), $customerid_topx, true ) ) {
        if ( has_term( array( 'alat-masak', 'bahan-bahan-makanan', 'bahan-makanan', 'bumbu', 'bumbu-masak', 'kopi-dan-teh', 'makanan' ), 'product_tag' ) ) {
            return $price * 114.00000 / 100;
        } else {
            if ( has_term( array( 'daging-kambing', 'daging-sapi' ), 'product_tag' ) ) {
                return $price * 107.00000 / 100;
        } else {
            if ( has_term( array( 'ayam' ), 'product_tag' ) ) {
                return $price * 110.00000 / 100;
        } else {
            if ( has_term( array( 'rempah-rempah' ), 'product_tag' ) ) {
                return $price * 119.00000 / 100;
        } else {
            if ( has_term( array( 'buah-buahan', 'sayur-sayuran' ), 'product_tag' ) ) {
                return $price * 130.00000 / 100;
        } else {
            if ( has_term( array( 'cabe-dan-bawang' ), 'product_tag' ) ) {
                return $price * 140.00000 / 100;
        } } } } } }
        return $price;
    }
    // customerid_topxiv 115%, 135%, 145%
    if ( in_array( get_current_user_id(), $customerid_topxiv, true ) ) {
        if ( has_term( array( 'alat-masak', 'bahan-bahan-makanan', 'bahan-makanan', 'bumbu', 'bumbu-masak', 'kopi-dan-teh', 'makanan' ), 'product_tag' ) ) {
            return $price * 115.00000 / 100;
        } else {
            if ( has_term( array( 'daging-kambing', 'daging-sapi' ), 'product_tag' ) ) {
                return $price * 108.00000 / 100;
        } else {
            if ( has_term( array( 'ayam' ), 'product_tag' ) ) {
                return $price * 110.00000 / 100;
        } else {
            if ( has_term( array( 'rempah-rempah' ), 'product_tag' ) ) {
                return $price * 120.00000 / 100;
        } else {
            if ( has_term( array( 'buah-buahan', 'sayur-sayuran' ), 'product_tag' ) ) {
                return $price * 135.00000 / 100;
        } else {
            if ( has_term( array( 'cabe-dan-bawang' ), 'product_tag' ) ) {
                return $price * 145.00000 / 100;
        } } } } } }
        return $price;
    }
}

And now my US$66 3 years of hosting is over, I renewed it with cloud service costing me US$660 for a 3-year subscription to keep my business site running. Again, I'm so grateful passed the horrible outbreak with something joyful. So I running one e-commerce blog to spread something useful to others.

DEV Community: shk