teleren/devto huggingface dataset:
The Box Model
Tags: css, javascript, html, boxmo
Published: 2022-02-04 13:20:20

Whether you're a rookie, an experienced developer or someone in the center of the stack, one of the most crucial CSS concepts to comprehend is "𝐓𝐡𝐞 𝐁𝐨𝐱 𝐌𝐨𝐝𝐞𝐥."
 
Q.) What Is **"The Box Model"**?
 
➡️ "According to the box model concept, every element on a page is a rectangular box and may have width, height, padding, borders, and margins."
 
𝐊𝐞𝐞𝐩 𝐢𝐧 𝐌𝐢𝐧𝐝: Every element on a page is a rectangular box.
 
Every element is a rectangular box, and there are several properties that determine the size of that box. 
 
The core of the box is defined by the width and height of an element, which may be determined by 🧵:
 

1. The 𝙙𝙞𝙨𝙥𝙡𝙖𝙮 property, or 
2.The 𝙘𝙤𝙣𝙩𝙚𝙣𝙩 of the element, or
3.The specified 𝙬𝙞𝙙𝙩𝙝 and 𝙝𝙚𝙞𝙜𝙝𝙩 properties.

𝙥𝙖𝙙𝙙𝙞𝙣𝙜 and  𝙗𝙤𝙧𝙙𝙚𝙧, expand the dimensions of the box outward from the element’s width and height. 
 
𝙢𝙖𝙧𝙜𝙞𝙣 we have specified will follow the border.
 
Each part of the box model corresponds to a CSS property:  𝙬𝙞𝙙𝙩𝙝, 𝙝𝙚𝙞𝙜𝙝𝙩, 𝙥𝙖𝙙𝙙𝙞𝙣𝙜, 𝙗𝙤𝙧𝙙𝙚𝙧, and 𝙢𝙖𝙧𝙜𝙞𝙣!
 
The size of the box itself is calculated like this:
 
𝗪𝗶𝗱𝘁𝗵 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
 
𝗛𝗲𝗶𝗴𝗵𝘁 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

Happy Coding!!

![Box Model Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gv70cu3wgzofkzzvf9o4.jpeg)
Securing RMarkdown Documents
Tags: r, rmarkdown, security, webdev
Published: 2022-02-17 01:22:52

You can now use the `R` package `polished` to secure RMarkdown (`.Rmd`) documents that use the `shiny` runtime. This includes `flexdashboard`s! 

Check out the [full blog post here](https://www.tychobra.com/posts/2022-02-10-secure-rmd/).
Easy and Clean SDL2 Keypress Setup (with C)
Tags: c, sdl2, keypress, tutorial
Published: 2022-02-16 20:16:05

Today, I'll show you a way to easily manage keypresses with SDL2 and C. Setting up keypresses can get pretty messy sometimes, with code cluttered with a multitude of `if/else if/else` statements or `switch` statements, like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0u9o2sd03jfsacjuv9xs.png)

However, there's a much easier way of checking for keypresses, and this is how you do it. First, let's setup a basic C project. Create a file called `main.c` and put these three headers at the top:
```c
#include <stdio.h>
#include <stdbool.h>
#include <SDL2/SDL.h>
```
Next, create the classic `int main` function, like so:

```c
int main() {

    return 0;
}
```

Next, let's set up a `typedef struct` called "Game." Inside it, we'll put an array labeled `input,` like so:

```c
typedef struct {
    int input[256];
}, Game;

Game game = {
    .input = {}
};
```

Next, let's create a function called `handle_input`. We'll prototype it at the top like so
```c
void handle_input();
```
and declare it below `int main()`:
```c
void handle_input() {
   
}
```
Inside of this function, we can put the SDL_Event structure, labeled `event`, like so:

```c
void handle_input() {
   SDL_Event event;
}
```
Now, we can check if the key is being pressed or released, with these two conditionals, utilizing the array that we created earlier:

```c
void handle_input() {
   SDL_Event event;

   if (event.type == SDL_KEYDOWN) {
       game.input[event.key.keysym.scancode] = true;
       //printf("Keydown");
   }
   if (event.type == SDL_KEYUP) {
       game.input[event.key.keysym.scancode] = false;
       //printf("Keyup");
   }
}
```
The code above will check if a key is down. If so, the game.input array will be assigned true, and if the key is up, then the game.input array will be assigned false. Inside the array, we've put `event.key.keysym.scancode`, which allows us to check any SDL_key we want. 

So, now that the `handle_input` function is done, we can test this out. Call `handle_input()` in the `int main()` function. Now, all we need to do to check if a key is pressed, say the "R" key, is do this, within the `int main()` or any other function:

```c
if (game.input[SDL_SCANCODE_R]) {
    //Do something!
}
```

That's it! It's so much neater and cleaner, and with this approach we can check any key we want without creating an if statement or a switch statement for every single key we want to use.

Please note: the code will not work by itself, you may setup an SDL2 window to test it out.

Thanks for reading, and happy coding!!
Product Hunt: Vizzu, an animated charting library 
Tags: javascript, webdev, opensource
Published: 2022-02-17 01:18:10

Hey guys!

Today we launched Vizzu on Product Hunt. It's our open-source JavaScript library for building animated charts with ease. 

We prepared some goodies for this event. We created a quick walk-through video showing how easy it is to create a morphing chart in Vizzu. You can also find some great video-based data stories, and an interactive explorer. 

Come check us out, join the conversation on how animation brings dataviz to the next level, and show us some support. We'd love to get your feedback!

The PH page: 

https://producthunt.com/posts/vizzu
Atomic Microservices Transactions with MongoDB Transactional Outbox
Tags: systemdesignintervie, architecture, database, mongodb
Published: 2022-03-14 20:10:51

---
title: Atomic Microservices Transactions with MongoDB Transactional Outbox
published: true
date: 2022-02-17 00:23:54 UTC
tags: systemdesignintervie,softwarearchitecture,database,mongodb
canonical_url: https://blog.insiderattack.net/atomic-microservices-transactions-with-mongodb-transactional-outbox-1c96e0522e7c
---

[![](https://cdn-images-1.medium.com/max/2600/1*P6QjGN3OhhVWYCGy8BiJ_A.jpeg)](https://blog.insiderattack.net/atomic-microservices-transactions-with-mongodb-transactional-outbox-1c96e0522e7c?source=rss----57f0c4748c10---4)

Atomic Transactions with Polled Outbox

One of the drawbacks of the microservices architecture is the difficulty to implement atomic transactions. While this limitation can be overcome by using patterns such as Saga, there are certain situations where we can use an alternative approach to solve this problem without having to implement the rather complicated Saga pattern.

Let’s consider a scenario where we need to dispatch an event when a user verifies their email after signing up. The event will then be consumed by other services for reporting, updating the customer profile on a CRM system and sending a customer a welcome email.

[Continue reading on Deepal’s Blog »](https://blog.insiderattack.net/atomic-microservices-transactions-with-mongodb-transactional-outbox-1c96e0522e7c?source=rss----57f0c4748c10---4)
Day 532 : Figure It Out
Tags: code, coding, hiphop, lifelongdev
Published: 2022-02-17 00:08:03

_liner notes_:
- Professional : Spent the day speaking with some folks. Got to test the project I was building with some of my coworkers. Then rest of the time, worked on a workshop that I'll be presenting tomorrow. I have an outline and most of the stuff will be compiled from my previous presentations and blog posts. Now it's all about putting it together, updating some stuff and maybe add a little something new.

- Personal : Ran into a pretty random issue with my side project last night. There's a web component I created. It works on one part of the application, but not on another. It's so weird. I need to dig more into the framework I'm using. I spent way too long trying to figure it out. Basically didn't get anything else done. It's kind of an important part to the application. Went to bed and got up early and created a workaround for the Web Component. I'll have to work on that later. This is a site that it looks like I'll be using a lot.


![A photo of the Borobudur stupas (bell shaped rock formations) in Wanurejo, Indonesia with surrounding trees, fog, and a mountain in the distance](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/phxi3s17aubhocklpwk6.jpg)

Basically going to spend the night and possibly the morning getting ready for this workshop tomorrow morning. Wish me luck! haha

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube 0s9jmARGtkg %}
Writing Great Alt Text
Tags: html, a11y, images
Published: 2023-09-09 01:02:13

---
title: Writing Great Alt Text
description: Jake Archibald on how to write better image alt text.
published: true
date: 2022-02-17 00:00:00 UTC
tags: html, a11y, images
canonical_url: https://michaeluloth.com/html-writing-great-alt-text/
---

I agree with Jake Archibald's argument in [Writing great alt text: Emotion matters](https://jakearchibald.com/2021/great-alt-text/) that when we write image alt text, we should aim to evoke the same emotions as the image visuals do. Otherwise, screen reader users miss out.

If an image makes you laugh or cry, ideally the alt text will do the same:

> The relevant parts of an image aren't limited to the cold hard facts. Images can make you feel a particular way, and that's something that should be made available to a screen reader user.

> It isn't just a head-shot of me. I'm doing a thing. I'm peering from behind a plant and pulling a bit of a silly face. There's humour expressed in the image. I'm not saying that it's going to win any comedy awards, but the image expresses a particular tone, and that matters. So, it should go in the alt: “Head-shot of me, a pale white guy, wearing glasses, grinning slightly, and partially hiding behind a plant”.

Let the creative writing begin!
Change Default Git Init Branch
Tags: git
Published: 2022-03-07 10:31:44

---
title: Change Default Git Init Branch
published: true
date: 2022-02-17 00:00:00 UTC
tags: git
canonical_url: https://tech.serhatteker.com/post/2022-02/git-default-init-branch/
---

As a developer my default branch is usually **develop** for my personal projects. (I don't want to deep dive into details of **Git Branching strategies** like *Trunk-Based Development* *Git Flow (Feature Based Development)* etc. maybe later in another post.)

So I want to make my default branch name other than `master` for the first commit.

And my common workflow looks like this:

```bash
$ git init && git commit --allow-empty -m "Initial commit"
$ git checkout -b develop
$ git push -u origin
```

So the question is: Is there any another way to change the default first branch name that git init sets?


## Solution


Yes, there is, but you need minimum Git [version 2.28] (released 2020-07-27).
Just run:

```bash
$ git config --global init.defaultBranch develop
```

Or as usual you can add this directly into your **global config file**:

```ini
# ~/.gitconfig
# ~/.config/git/config
# or
# ${XDG_CONFIG_HOME}/git/config

...

[init]
    # >=2.28.0
	defaultBranch = develop

...
```

Now whenever I initiate a *git repo* my default branch will be *develop* and this will save a lot of keystroke.

All done!




[github highlights init defaultbranch]: https://github.blog/2020-07-27-highlights-from-git-2-28/#introducing-init-defaultbranch
[version 2.28]: https://github.blog/2020-07-27-highlights-from-git-2-28/#introducing-init-defaultbranch
[git branching strategies]: https://newsignature.com/articles/git-branching-strategies/
The fastest way to value stocks, ever.
Tags: python, webdev, opensource
Published: 2022-02-16 23:59:07

Hey everyone, I created a [website](https://prateekmalhotra.me/dcf-basic/) last weekend to do a quick DCF analysis of companies. All it needs is the ticker symbol. If you don't touch any other parameters, it will fetch the data from Yahoo Finance. So it's literally just one click. The code is open-source too.

For people who like to tweak and play around with numbers, I also have a corresponding python script with instructions in the github comments. Let me know if you have any feedback. Thanks!
How a $725M VC Judges Your Engineering Team w/ Redpoint Ventures' Jason Warner
Tags: podcast, career, techtalks, leadership
Published: 2022-02-16 23:45:06

***Dev Interrupted has a new podcast page on Dev.to! [Have a listen over here!](https://dev.to/dev-interrupted)***

Venture capitalists have a reputation for wielding ruthless insights, judgements and criticisms of companies, tools and talent. 

But how does a former-CTO-turned-VC assess companies? And now that he’s the one with the money, what does he look for - and expect to find - in a company’s engineering team?

Enter Jason Warner on the [Dev Interrupted](https://devinterrupted.com/podcasts/) stage.

Jason is the most unique of investors: He made the jump from being a CTO to managing his own $725M fund at Redpoint Ventures. After leading GitHub to one of the best exits in the history of Silicon Valley, Jason is now dedicating his full time to picking the tech, teams and products he thinks will define the next decade and beyond.

In this freewheeling conversation, we cover everything from Jason’s start in tech carrying boxes while interning at IBM, his tenure as GitHub’s CTO, the reason full stack engineers may be a dying breed and why Redpoint Ventures avoids “yoloing” investments, even if it’s a lucrative practice. 

We hope you enjoy the conversation as much as we did.

{% spotify spotify:episode:0bGjVz6UpwJWKG5bB4NMwd %}

## Episode Highlights Include:
* (2:53) Jason's role as [CTO of GitHub](https://github.com/) during its acquisition
* (15:20) Decline of the full stack engineer
* (21:38) Jason’s first investment in the “[AWS of crypto](https://medium.com/redpoint-ventures/building-web3-our-investment-in-alchemy-3b232a1561e)”
* (24:15) How Jason judges engineering teams now that he is a VC
* (33:32) The best approach to rolling out massive org change
* (40:29) Why it pays to “Yolo” investments (and why [Redpoint](https://www.redpoint.com/) avoids doing it)

## [You're Invited to INTERACT on April 7th](https://devinterrupted.com/event/interact/)

Join engineering leaders from Netflix, Slack, Stack Overflow, American Express & more at LinearB's virtual engineering leadership conference, [**INTERACT**](https://devinterrupted.com/event/interact/) on **April 7th, 2022.**

**1 day, 20 speakers, 1,000s of engineering leaders - all driven by the Dev Interrupted community.** If you are a team lead, engineering manager, VP or CTO looking to improve your team, this is the conference for you!

[**Learn more here**](https://devinterrupted.com/event/interact/)


![Join INTERACT at https://devinterrupted.com/event/interact/](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2xhtonct1vkpjhrtzfl3.png)
tsParticles 1.41.2 Released
Tags: webdev, javascript, typescript, showdev
Published: 2022-02-16 23:43:00

# tsParticles 1.41.1 Changelog

## Updates

- Async Interactors
- Updated some readme files

---

# tsParticles 1.41.2 Changelog

## Bug Fixes

- Fixed svelte component, it was having issues with TypeScript syntax inside
- Fixed tilt back and front colors

---

{% github matteobruni/tsparticles %}
White page displayed in deployment only  in new browsers
Tags: react
Published: 2022-02-16 23:36:35



Hey Everyone. New deveoloper here. 

My first app displays fine on older Macs but not on iPhones or new Mac models. What could be the cause of this? I've been trolling web pages for hours and found nothing that makes any sense to me. Please can anyone help!

here is my app.js

import logo from './logo.svg';
import './App.css';
import MetaMaskModal from './components/MetaMaskModal'
import Home from './components/Home'


function App() {
  let provider = window.web3 && window.web3.currentProvider.isMetaMask;
  return (
    <>
      {window.web3 === undefined ? (
        <MetaMaskModal />
      ) : (<Home />)
      }
    </>
  );
}

export default App;

here is my index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);



// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. 
reportWebVitals();

package.json

"homepage": "http://www.mywebsite.com/#home",
Scaling Developer Success Podcast – Season 1
Tags: devrel
Published: 2022-08-23 15:28:30

---
title: Scaling Developer Success Podcast – Season 1
published: true
date: 2022-02-16 23:26:46 UTC
tags: DevRel
canonical_url: https://maxkatz.net/2022/02/16/scaling-developer-success-podcast-season-1/
---

I’m so honored to be in a group with these amazing developer relations and community people. Thank you to Peritus.ai for hosting. [Listen to season 1](https://peritus.ai/article/1045/scaling-developer-success-podcast-season-1).

[![Scaling Developer Success Podcast – Season 1](https://katzmax.files.wordpress.com/2022/02/scaling_devrel_podcast_people.jpeg?w=1024)](https://katzmax.files.wordpress.com/2022/02/scaling_devrel_podcast_people.jpeg)<figcaption>Scaling Developer Success Podcast – Season 1</figcaption>
Javascript Reserved Keywords
Tags: javascript, beginners, tutorial, webdev
Published: 2022-02-16 23:12:41

When writing code, a reserved keyword is one you can't use as the name of a variable or identifier. As of 2022, this is the full list of valid reserved keywords in Javascript.

## All Javascript Reserved Keywords 
The below list cannot be used as variable names, as they are reserved keywords. Most of them have current functionality in Javascript. Some do not, but they are words which may have some sort of functionality in the future. Avoid using these words in variable names.

- await
- break
- case
- catch
- class
- const
- continue
- debugger
- default
- delete
- do
- else
- enum
- export
- extends
- false
- finally
- for
- function
- if
- import
- in
- instanceof
- new
- null
- return
- super
- switch
- this
- throw
- true
- try
- typeof
- var
- void
- while
- with
- yield
First week of coding bootcamp down!
Tags: webdev, beginners, programming, python
Published: 2022-02-16 23:07:23


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jyi2vasbxvzvhshacs5u.jpg)Week number one is in the books!  I haven’t blown up my computer (yet), quit, or fallen hopelessly behind (yet).  I’d say that is a win!

## WEEK 1 SUMMARY

The first day of school!  My buddy's kid (she is seven) advised me to _try_ to be nice and stay in my seat on the first day.  I thought it was pretty good advice, so I tried to follow it to the best of my abilities.  Thanks for the great advice, Sophie!

Day numero uno was filled with your typical onboarding type procedures.  We met our support/administration staff, our instructor, and our fellow classmates.  The rest of the day was spent setting our computer up to make sure it was ready to go for the rest of the cohort.  

The second day was spent learning terminal commands and generally getting more comfortable working from the terminal. In addition, we were introduced to the ins-and-outs of Visual Studio Code.   

The third day was spent learning about and setting up our github accounts.  Github sounds like a very useful tool and I’m sure I will think nothing of using it soon enough, but for right now, it is very intimidating.  It’s one thing to mess up my own computer, but quite another to mess up somebody else’s code or project!  

The fourth day was spent learning the basics of computer programming through Python.  There was coursework we were recommended to complete prior to the start of the cohort.  I did complete it and I am thankful I did as most of the information has been review.  

Friday morning was spent working on various algorithms.  I was able to work through an algorithm that has always alluded me (the Fibonacci sequence), so it was a major win for me personally.  While I was unable to solve all of the algorithms, I was able to come close and understand the solutions.  Finally, that Friday afternoon, we had a guest speaker.  The guest speaker was a DigitalCrafts alumni.  She spoke about her own bootcamp experience and her transition into a software engineering career.  She was a very engaging and informative speaker.  

Overall, it was a pretty easy week.  However, I get the feeling this is the calm before the storm.

## TECHNICAL KNOWLEDGE
-Terminal commands.  

-Github desktop, git and github commands.

-The basics of Python:  variables, types of data, different forms of data, and different ways to manipulate said data.

-Visual Studio Code commands and shortcuts.  

## NON-TECHNICAL INSIGHT
I am quickly discovering I am not nearly as fast nor as accurate of a typist as I had previously thought.  Apparently, autocorrect has made me weak and sloppy though the years.  Plus, the special symbols and numbers require me to employ the old hunt and peck method.  Not good!  I’m going to have to make sure I get more fluent with my typing skills these next few days.  

[](https://www.digitalcrafts.com/)
Postman collection for the Integration Server Admin API
Tags: webmethods, integration, esb
Published: 2022-02-21 13:11:19

---
title: Postman collection for the Integration Server Admin API
published: true
date: 2022-02-16 22:41:37 UTC
tags: webMethods, integration, ESB
canonical_url: https://tech.forums.softwareag.com/t/postman-collection-for-the-is-admin-api/255297
---

[IS\_Admin\_API\_Postman.zip](https://tech.forums.softwareag.com/uploads/short-url/wvZGd4jNHMFggzQyymMN2tW43jO.zip) (5.2 KB)

Here is a Postman collection with requests that demonstrate the use of the Administrative API in Integration Server. As of version 10.11, the API has 493 operations in 84 resources. In addition to this, the framework provides APIs for MicroService Runtime, Adapter Runtime, Common Directory Services and Task Engine.

The following Postman collection utilizes a small portion of the IS API, but the patterns it demonstrates should apply throughout: HTTP methods and status codes are used consistently, naming and datatypes are predictable, the URLs have a similar structure.

The downloadable ZIP has a postman\_collection file that holds the requests. The postman\_environment file has variables used by the collection and default values for them. Modify the environment file as needed to work with your Integration Server.

[Original article](https://tech.forums.softwareag.com/t/postman-collection-for-the-is-admin-api/255297)