teleren/devto huggingface dataset:
Basics about CSS Box Model.
Tags: webdev, html, css, beginners
Published: 2020-12-24 09:21:56

#What is CSS box model ?
* Whenever a website is loaded on the browser,the rendering engine loads the elements of the document in a rectangular box content which is set as per the standards of the **CSS box model**.
* Sounds boring? May be this can help.... It can also be said as it loads the contents as per the rules which are been defined for it specifically & when defining those rules there are certain restrictions that are meant to be kept in mind.
* Still tough to digest? ![image](https://media.giphy.com/media/110F1JFzWKtiA8/giphy.gif)
* OK for now just remember there are certain set of instructions that are meant to be followed.That Sounds  Great :wink:

##So what is inside CSS box model?
![image](https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Css_box_model.svg/1280px-Css_box_model.svg.png)
As you can see in the above image there are number of things that are  part of the CSS Box Model.

###Lets start the Catalog inside-out:

- Content
- Padding
- Border 
- Margin

####What is Content Area ?
- Here the content i.e., Images,Videos,Text & etc. Which is real and integral part of the website element is shown.
- You can give desired height & width to the content box and not just this you can even add background image or background color as per your choice.
- By default the ``` box-sizing ``` property is set to content-box. 
- you can use: ```width, min-width, max-width, height, min-height, and max-height ``` properties as per your requirement.


---

####What is Padding?
- The padding area is bounded by the padding edge & extends the content area to include the element's padding.
- In simpler terms this helps you beautify the visual appearance by  adding some spacial adjustments.
- You can use: ```  padding-top, padding-right, padding-bottom, padding-left``` and some other shorthand padding properties to manage thickness of padding as you desire.

---

###What is Border Area ?
- Border Box is where you tell the browser how you want the border of the content to look.
- the border area's size can be explicitly defined with the ```width, min-width, max-width, height, min-height,``` and ```max-height``` properties
- You can also manage background color and image accordingly with some additional shorthand properties.

---

###What is Margin ?
- Margin can be understood as margins that we draw on the page to separate the contents of the page.
- In same manner in CSS Box Model we use margin to separate content from the other contents of that Element.
- The size of the margin area is set with ``` margin-top, margin-right, margin-bottom, margin-left``` and some other shorthand margin properties. 
- If you over see margin are being shared between two different boxes that's called as **margin collapsing**.
- This happens when the margins are not clearly defined and need to be defined clearly.
article: 2020+ web performance
Tags: performance, web
Published: 2020-12-24 08:31:15

Interesting and at times hilarious article on web performance. 

#We rendered a million web pages to find out what makes the web slow

» Yes, good old jQuery is at the top. JQuery was first released in 2006, which is 14 years ago in human years, but much longer in JavaScript years. Measured in Angular versions, it is probably hundreds of versions ago. 2006 was a different time. The most used browser was called Internet Explorer 6, the largest social network was MySpace, and rounded corners in web pages were such a revolution that people called it web 2.0. JQuery’s primary use case was cross-browser compatibility, which is a different beast in 2020 than it was in 2006. Still, 14 years later, a full half of the web pages in our sample loaded jQuery.
Funnily enough, 2.2% of the websites threw an error because JQuery was not loaded.
Judging by this top 10, our browsers are mostly running analytics, ads, and code to be compatible with old browsers. Somehow 8% of web sites define a setImmediate/clearImmediate polyfill for a feature that isn’t on track to be implemented by any browser. «

read the rest at:
https://catchjs.com/Blog/PerformanceInTheWild

alternately at:
https://itnext.io/we-rendered-a-million-web-pages-to-find-out-what-makes-the-web-slow-72bbba9ade96
Ecommerce Marketing Strategies for 2021 to Grow Your Business
Tags: ecommercestrategy, businessgrowthstrategy, ecommerceplatforms, marketingstrategy
Published: 2020-12-24 09:18:48

<h2><b>Divide your Strategy into Smaller Goals</b></h2>
<p>There are multiple paths to successful marketing, it is up to you to decide which is most effective for your business. For instance, your strategy is that you want to create a Google Ad campaign for your website, so you know a few prerequisites such as determining your budget, creating a Google Ads account, etc. Now, it is important that you break down your next steps into smaller fragments like – Search target keywords, Daily monitoring of your account, studying the structure of competing Ads.</p>

<p>The objective is to simplify your strategy to get the maximum return on your money, time, and effort.</p><br>

<h2><b>Use Multi-Channel Marketing for your Business</b></h2>
<p>Abiding by a single high ROI-yielding channel might seem more appropriate but it limits your audience to a great extent. <a href="https://www.globalvincitore.com/digital-marketing-agency/">Ecommerce digital marketing</a> through multiple channels will not only ensure a fresh flow of audience and potential customers but also increase the reach of your business.</p>

<p>It is also important to be smart about increasing your visibility by filtering out channels that your target audience visits frequently instead of increasing it on every channel available. You can also partner with influencers, carry out email campaigns, create YouTube ads, it all depends on how you think you will be able to reach maximum potential customers, which you can determine with the help of trusted digital marketing agencies.</p><br>

<h2><b>Filtering your Audience through Data-Analysis</b></h2>
<p>Data-analysis is one of the most efficient eCommerce marketing strategies when you want to determine the profile of your users and their surfing and buying behavior. Using this strategy, you can create lookalike data which includes people sharing common demographic characteristics and are your potential customers. This audience can then be used for Ad campaigns on Google, Facebook, etc.</p>

<p>You can also analyze data collected through tracking pixels, and use it to improve your target audience for social media channels.</p>

For more information, Visit <a href="https://www.globalvincitore.com/ecommerce-marketing-strategies-for-2021/">Global Vincitore</a> website.
Should services like AWS be cheaper for people outside the US?
Tags: discuss, aws, saas, money
Published: 2020-12-24 09:07:40

---
title: Should services like AWS be cheaper for people outside the US?
published: true
description: 
tags: discuss, aws, saas, money
//cover_image: https://direct_url_to_image.jpg
---

I've been thinking about this.

The prices are often based on salaries in highly paid countries.

My country (The Netherlands) is far from poor, don't get me wrong, but we make WAY less than some developers in the United States make.

If a US developer makes $120k and a service costs them $30 monthly it doesn't seem like a big deal.

That same service can effectively be 3 times more expensive if you make a third of what the US dev makes.

Should SaaS / PaaS / etc. have purchasing power parity? (PPP)
Grading Students

Tags: javascript, problemsolving, programming, development
Published: 2020-12-24 08:44:05

while working with hacker-rank problem-solving challenge, I just stuck in question of finding the results according to given criteria.
Criteria: 
1) Find the next number from given input that is divisible by 5.

        i-e => Input is  73 so the number will be 75
2) Find the difference between actual input and the discovered.

        i-e => 73 -75 
3) If the difference between them is smaller than 3 then the 
   student will be awarded a discovered number as a grade else it 
   will remain the same as input

      i-e 
        1) Input 73 - 75 = 2 //difference is less than 3 So, Grade 
        will be 75 here
        2) Input  67 - 70  = 3 // difference is less than 3 So, 
     Grade will be 67 here
4) If input is 33 or less then simply return it no need for any 
   processing  
 
Solution:

      function gradingStudents(grades) {
       let final = [];
         for (let b = 0; b < grades.length; b++) {
          let base = parseInt(grades[b]);
           let val = parseInt(grades[b]);
           if (base < 38) {
            final.push(base);
            } else {
            for (let a = 0; a < 5; a++) {
                if (val % 5 == 0) {
                    if (val - base < 3) {
                        final.push(val);
                        break;
                    } else {
                        final.push(base);
                        break;
                    }
                } else {
                    val++;
                }
            }
        }
    }
    return final
     }

Hope you find this helpful or if there is any optimize method of solving this kindly recommend in a comment section.
Thanks.
Struggle, the road to growth
Published: 2020-12-24 08:39:05

It has been more than 3 weeks into my Outreachy internship with Wikimedia foundations. The internship started well and the project that I'm working on is about evaluating [Microsoft playwright](https://github.com/microsoft/playwright) as a possible replacement to the current automation testing framework being used. Week one was mostly about setting up the Wikimedia core by forking and cloning the Wikimedia core repository from Github. In order to simplify continuous integration, we are using Github as our code hosting platform to evaluate playwright instead of using Gerrit. The setup involved the following steps;
- Forking the Wikimedia repository
- Cloning the repository, setting up and running it on my local machine
- Connecting my forked with upstream
- Configuring CI.

Week two followed up with more configurations and installations of dependencies, configuring CI to work with docker, run test, etc. The configurations and setup continued into week 3, I continued with setting up and configuring Playwright, jest, etc. On the third week, my mentors and I realized that Travis CI might not be the best CI tool to use for continuous integration in evaluating playwright because of a couple of reasons;
1. Travis CI doesn't store artifacts out of the box, it requires additional setup and configurations such as using AWS, Github pages, or any other external services to store artifacts.
2. travis-ci.org is shutting down soon and will be migrating to travis-ci.com. So, to simplify the workflow and configurations, we decided to use Github actions as the CI pipeline for the project.

The change to using Github actions meant that I had to abandon Travis CI and move to Github actions whereby, I had to take a little bit of time to learn and get familiar with how Github actions work. Moving to Github actions has been a great idea because I'm seeing the tests and linter run much faster and we are now able to store artifacts by just adding minimal configurations. This has come with its own challenges like learning how to use GitHub actions and falling behind the project milestones and deadlines. I have struggled with a number of issues like;
- How to work with the forked repository, updating upstream with the forked repo. There was a time when I updated the upstream with my master and immediately rebased with a feature branch, this added all the commits from upstream and messed up all my commits, we had to abandon the pull request and created a new branch. I learned from this. It has been a bit of a challenge and learning when it comes to working with a forked repo but with the help of my mentors, I'm getting past this.
- I have had several issues with setting up and configuring jest with Microsoft playwright, but my mentors have been there to help unblock me.

All in all, I have learned so much so far within this short time and have been able to make progress with the project. I'm also putting in extra effort to ensure that I hit the project milestones in time. My mentors have been very helpful in pointing me in the right direction whenever I get stuck or have issues with the tasks I'm working on.
ObjectiveSQL Performance
Published: 2020-12-24 08:15:38

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/huz7zh02r7rgkak81zab.png)
```
Benchmark               (framework)   Mode  Cnt    Score    Error   Units
BenchmarkRunner.query       mybatis  thrpt   10   66.269 ±  5.584  ops/ms
BenchmarkRunner.query          jdbc  thrpt   10  125.223 ±  6.476  ops/ms
BenchmarkRunner.query     hibernate  thrpt   10   57.952 ±  2.983  ops/ms
BenchmarkRunner.query        objsql  thrpt   10   85.329 ±  4.812  ops/ms
BenchmarkRunner.update      mybatis  thrpt   10  118.780 ±  6.028  ops/ms
BenchmarkRunner.update         jdbc  thrpt   10  184.414 ± 10.612  ops/ms
BenchmarkRunner.update    hibernate  thrpt   10   66.626 ±  1.556  ops/ms
BenchmarkRunner.update       objsql  thrpt   10  130.013 ±  2.718  ops/ms

```
How to add next package
Tags: nextjs
Published: 2020-12-24 08:06:43

Once when I installed some npm package, all next-related API(such as link, image, and so on) showed errors saying they cannot be found.

So as to fix them, I had to add them again.

At that time,

`yarn add next`

this single line fixed the problem!

Hope this would help somebody too:)
What is a bridging header in Swift?
Tags: swift, programming, cpp
Published: 2020-12-24 07:27:28

You can use Objective-C and Swift files together in a single project, no matter which language the project used originally. This makes creating mixed-language app and framework targets as straightforward as creating an app or framework target written in a single language.

How to create a bridging header?

Let’s see here step-by-step guidelines:
File -> New -> File -> Header File
2. Name your Header file like this yourAppName-Bridging-Header
3. Now click on your Project -> Build Settings
4. Change from Basic to All
5. Search Bridging
6. You will get the search result as shown in the below image
7. In that double click the right of Objective-C Bridging Header and enter as follows
eg, yourAppName/yourAppName-Bridging-Header.h

you can click here & see  the screen shot for the reference.https://rlogicaltech.medium.com/what-is-a-bridging-header-in-swift-aae3372101fe
Javascriptmas Solutions
Tags: javascriptmas
Published: 2020-12-24 07:23:41

 I've been participating in javascriptmas. it's been really fun! #javascriptmas

<a href="https://scrimba.com/learn/adventcalendar/note-at-0-00-co7d34a49bd3dd688ca965c1d?a=198.0.8.L5_2">Candies</a>
<a href="https://scrimba.com/scrim/coba14ec78b556d98ecd69a3d">Deposit Credit </a>
<a href="https://scrimba.com/learn/adventcalendar/note-at-0-31-co1a4484b9a3d76c339b6fc6f?a=19.0.8.L7_18">Chunky Monkey</a>
<a href="https://scrimba.com/scrim/cob754d9889e3e6045b053377?a=334.0.8.L8_4">Century From Year</a>
<a href="https://scrimba.com/learn/adventcalendar/note-at-0-00-coe964f189e2f24cb0095b068"> Reverse a String </a>
<a href="https://scrimba.com/learn/adventcalendar/note-at-0-00-cob2749698f78d4c0387da217?a=996.0.8.L6">Sort by Length </a>
<a href="https://scrimba.com/learn/adventcalendar/note-at-0-00-co93141ca985364f8eb624c53?a=1526.0.1.L1_1-11_2">Count Vowel Consonant</a>
<a href="https://scrimba.com/scrim/co18d4d14b75158ab52d3ffa1?a=1314.0.1.L40_2">The Rolling Dice</a>
<a href="https://scrimba.com/scrim/co91d4703877cdb2ebe6513c5?a=3432.0.8.L17">Sum Odd Fibonacci Numbers</a>
<a href="https://scrimba.com/scrim/co7bc46bf8ad0c9810e76d35f?a=1048.0.8.L8_5">Adjacent Elements Product</a>
<a href="https://scrimba.com/scrim/co76d4d6c885be5ba8e4321e2?a=335.0.8.L7_6">Avoid Obstacles</a>
<a href="https://scrimba.com/scrim/co627497ea6fdc9d35afd2245?a=1947.0.8.L10_11>Valid Time</a>
<a href="https://scrimba.com/scrim/cobbd4e2dad5fb9131cc3be33?a=626.0.8.L9_14">Extract Each Kth</a>
<a href="https://scrimba.com/scrim/coe8f4527b783d7362de23db1?a=791.0.8.L9_15"> Maximal Adjacent Difference </a>
<a href="https://scrimba.com/scrim/coe304ebc9aaea77315edbec1">Carousel</a>
<a href="https://scrimba.com/scrim/co5fb468099803d7df69ebad0?a=235.0.1.L13_14">Insert Dashes</a>
<a href="https://scrimba.com/scrim/co0ab47c3b553cc57768b8e98?a=708.0.8.L12">Different Symbols Naive</a>
<a href="https://scrimba.com/scrim/co59147c5adb60607100430d2?a=689.0.8.L8">Array Previous Less</a>
<a href="https://scrimba.com/scrim/co2624f24a810c4bd7f48341e?a=3729.0.8.L13_6">Alphabet Subsequence</a>
<a href="https://scrimba.com/scrim/co3024a6d96c7abd88c539f80?a=1879.0.8.L11_37"> Domain Type</a>
<a href="https://scrimba.com/scrim/co8e748e1838f10a1855f811e?a=1135.0.8.L69_9">Sum of Two</a>
<a href="https://scrimba.com/scrim/co87e42198e4ed17cf12f3ca8?a=1166.0.8.L8_34">Extract Matrix Column</a>
<a href="https://scrimba.com/scrim/co7c54d20b2de5389f3260481?a=7537.0.3.L40">Social Media Input</a>
<a href="https://scrimba.com/scrim/cod4a472f8dc06bcebe4056b9?a=11294.0.3.L60_2">Test Your Agility!</a>
Advent of Code 2020: Python Solution Day 24
Tags: adventofcode, python, algorithms, challenge
Published: 2020-12-24 07:07:38

I knew crab can also navigate but I could not find my best solution to today's challenge so I had to head over to [reddit](https://www.reddit.com/r/adventofcode/comments/kj96iw/2020_day_24_solutions/ggvlfr2?utm_source=share&utm_medium=web2x&context=3) and take help. Credit goes to the author.

```python
import re
from collections import defaultdict

with open("day24.txt") as fp:
    lines = fp.read().splitlines()

curr_floor = defaultdict(lambda: False)
for line in lines:
    coo = re.findall(r"e|se|sw|w|nw|ne", line)
    ns = coo.count("se") + coo.count("sw") - coo.count("ne") - coo.count("nw")
    we = coo.count("e") + coo.count("ne") - coo.count("w") - coo.count("sw")
    
    curr_floor[((ns, we))] = not curr_floor[(ns, we)]
print(f"Total tiles with back side up: {sum(list(curr_floor.values()))}")

floor = curr_floor

for _ in range(100):
    new_floor = defaultdict(lambda: False)

    # Add the outer ring of the current floor for consideration.
    for k, v in floor.items():
        for o in [(0, -1), (1, -1), (1, 0), (0, 1), (-1, 1), (-1, 0)]:
            tile = (k[0] + o[0], k[1] + o[1])
            if tile not in new_floor:
                new_floor[tile] = floor.get(tile, False)
    for k, v in new_floor.items():
        
        neighbors = sum([floor[(k[0] + o[0], k[1] + o[1])] for o in [(0, -1), (1, -1), (1, 0), (0, 1), (-1, 1), (-1, 0)]])
        if v:
            if not neighbors or neighbors > 2:
                new_floor[k] = False
        else:
            if neighbors == 2:
                new_floor[k] = True

    floor = new_floor


print(f"Total tiles with back side up: {sum(list(new_floor.values()))}")

```
Simple writing text animation
Tags: showdev, codepen, css, javascript
Published: 2020-12-24 07:00:58

I just tried to create a simple writing text animation using css and vanilla javascript.

The text indicator is pure css using `@keyframes` in loop. The writing effect is done by using a `setInterval`.

An improovement that it came to my mind is to change the *interval* every time and increment to one second if I encounter a period.

Do you think I can do better?

{% codepen https://codepen.io/andreacanton/pen/jOMGpyQ %}
Introduction to scrapy-x
Tags: scrapy, python, crawling
Published: 2020-12-24 06:59:19

Today I'm introducing a piece of code that I worked on in my enjoyment time, it is called scrapyx or X.

Simply it is a scrapy module (subcommand) that creates a fastapi based server to enable you to control scrapy as you want.

It is a very simple library that uses redis as a persistent queue.

It is fully configurable via the settings.py file of your scrapy project.

you can find it [here](https://github.com/alash3al/scrapy-x).

If you found it useful, just start it on github ♥️
Wanna start with basic Javascript but hate to write HTML-CSS
Published: 2020-12-24 06:58:09

You have your browser which is a javascript compiler. 
So whatever code you want to write, write on your browser console. 
Okay, don't know how to do that? 
Check out a fun doc from [javascript.info](https://javascript.info/devtools)

Easily your interest will grow with this method and you don't need to wait for HTML. 

This article is for javascript beginners. 
Hope that's gonna help you guys. 

#Conclusion
Help to grow other developers and yourself.

Love and best wishes to all creators..

_If you found this article interesting please consider following me on [Twitter](https://twitter.com/ByteNebula), [facebook](https://www.facebook.com/NebulaByte-100116265295910)_
How did you fall in love with programming?
Tags: watercooler, programming, sport, adventure
Published: 2020-12-24 06:15:54

---
title: How did you fall in love with programming?
published: true
description: On coding, computers, programming and everything in between
tags: watercooler, programming, sport, adventure
//cover_image: https://direct_url_to_image.jpg
---
happy new year
Published: 2020-12-24 06:14:01

As 2020 is coming to an end, I have been reflecting on how much I have learned this year.

For many, including me, it has been a rather difficult year. Unsurprisingly, this has had an impact on what I have been able to learn or build.

Looking towards 2021 with the intention of further improving myself as a developer I have written a list of things I want to study.
Python collections, Part -I
Tags: python, algorithms, webdev, beginners
Published: 2020-12-24 06:09:12

*Python always surprises and this time it made my work a lot easier so I am writing this*

Python collections are container datatypes.So, what are they?**Container datatypes** are data structures that store other objects(integers,string,list user-defined objects) and also provide a way to access and traverse them. 

Python provides some of these container datatypes in [collections module](https://docs.python.org/3/library/collections) to make it easier to store and access items.In this first part we will see **counter**.
It returns a dictionary with the keys as the elements of the object with the count of the element  as the value.
Let's see an example:
```
>>> from collections import Counter
>>> c = Counter("ABCDABC")
>>> c #returns the count of each letter in string
Counter({'A': 2, 'B': 2, 'C': 2, 'D': 1})

```
```
>>> from collections import Counter
>>> c = Counter(['python','collections','are','interesting'])
>>> c #returns the counts of each element in list
Counter({'python': 1, 'collections': 1, 'are': 1, 'interesting': 1})
>>> 

```
Getting values from counter:
```
>>> c['collections']
1 #collecctions appeared only once
>>> c['interesting']
1 #intersting appeared only  once  
>>> c['movie']
0 # 'movie' is not present so the output is 0
>>> 
```
Note: Trying to get values not present in counter  return 0.
*For more*
*References*:
[Python documentation](https://docs.python.org/3/library/collections.html#collections.Counter)
[Container](https://en.wikipedia.org/wiki/Container_(abstract_data_type)) 
**Thanks and merry Christmas**
![](https://media.giphy.com/media/euviDNZfscxPOVSkHa/giphy.gif)
5 Best Linux Distros for Beginners
Tags: linux
Published: 2020-12-24 05:23:16

1. Linux Mint: Very Simple and Sleek linux distro which can be used as a beginner to learn about Linux environment.

2. Ubuntu: Very popular for servers. But also comes with great UI.
3. Elementary OS: Cool Design and Looks. 
4. Garuda Linux
5. Zorin Linux