teleren/devto huggingface dataset:
Culture vs Free Food
Published: 2023-02-28 15:34:10

Disclaimer: Ok, I know the title seems clickbaity but I want as many people to read it.

What is culture or more specifically Company culture?
I found a pretty practical definition of the term in this website 
https://www.greatplacetowork.com/resources/blog/company-culture-meaning-benefits-and-strategies

_"Company culture is how you do what you do in the workplace. It’s the sum of your formal and informal systems and behaviors and values, all of which create an experience for your employees and customers."_

In short , it is the **soul** of the workplace.

So, here we go:
Often times I have seen people(mostly) run behind certain companies just for the purpose of showing off or fancies like getting free food.

But for the long term success of an individual in the company it is often the culture of the company.
Unfortunately, the culture is a very abstract thing which is not immediately visible outside the company.But it can truly only be known from people already working in the company.

**Here is a reason** (and a secret) why some companies believe in free food and giving out stuffs - It is less about employee benefit and more about marketing and PR.
And the best evidence to this is the recent layoff news , those companies have started laying off their employees.

**Now why this happen?**
**The money which is spent in providing this free food etc is ultimately coming from the company profit which gets dried up in bad times.**
But a good culture can sustain any environment without losing any money.Although maintaining a good culture is very hard and simultaneously also hard to recover once damaged.

To quote : "A good culture eats free food for breakfast".(No pun intended!)
Frontend Developer roadmap
Tags: webdev, beginners, programming, career
Published: 2023-02-28 15:33:00

Continuamos con esta serie de post que nos ayudan a como comenzar en el mundo del desarrollo del software. En esta entrega veremos el roadmap para la carrera de Frontend, que necesitamos y donde comenzar. 

Para ser Frontend Developer necesitamos aprender de las bases, las cuales son:

**HTML**
Es una herramienta que nos ayuda a construir las páginas webs, de como se van a ver, en qué posición estarán las elementos de ella, etc. Debemos tener en cuenta también tener buenas prácticas que nos ayudarán mas adelante en otros temas como SEO, responsive, etc, son temas que veremos a mas detalle en su momento.

**CSS**
Esta herramienta va muy de la mano con HTML, ya que es la que crea la belleza de la página web como tal. Este también es un mundo importante e interesante ya que desde el CSS podemos construir aplicaciones responsive, animaciones, etc. También debemos tener muy buenas prácticas usando herramientas como Sass que nos ayudan a tener un mejor código CSS y poderlo reutilizar en otros archivos, tambíen dentro de CSS hay frameworks y librerías que nos ayudan agilizar la construcción del CSS en una página web como por ejemplo: Boostrap, Tailwind, MaterialUI, etc.

**JavaScript**
Es un legunaje de programación interpretado, que ayuda en las aplicaciónes web a ejecutar acciones dentro de esta, como por ejemplo: guardar la información de un formulario haciendo click en un botón, la acción de ese click lo hacemos en JavaScript. También dentro de JavaScript existen librerías y frameworks que nos ayudan a crear sitios y aplicaciones web mucho mas cómodos y con buenas practicas, como por ejemplo: React, Angular, Vue.

Acá tenemos algunos recursos que pueden ayudar en este roadmap:
[Curso de HTML y CSS](https://www.youtube.com/watch?v=XqFR2lqBYPs)
[Curso de JavaScript](https://www.youtube.com/watch?v=ivdTnPl1ND0&t=10s)
[Curso de React](https://www.youtube.com/watch?v=6Jfk8ic3KVk&t=27s)
[Curso de Angular](https://www.youtube.com/watch?v=i-oYrcNtc2s&t=4425s)

Documentación:
[HTML](https://www.w3schools.com/html/default.asp)
[CSS](https://www.w3schools.com/css/default.asp)
[JavaScript](https://developer.mozilla.org/es/docs/Web/JavaScript)
[React](https://reactjs.org/docs/getting-started.html)
[Angular](https://angular.io/docs)
[Vue](https://vuejs.org/guide/introduction.html)
[Sass](https://sass-lang.com/documentation/)
[MaterialUI](https://mui.com/material-ui/getting-started/overview/)
[Angular Material](https://material.angular.io/components/categories)
[Bootstrap](https://getbootstrap.com/docs/5.3/getting-started/introduction/)
[Tailwind](https://tailwindcss.com/docs/installation)

En el siguiente enlace podemos encontrar un roadmap mas completo, el cual recomiendo que miren para profundizar mas en el tema.
[Frontend Developer RoadMap](https://roadmap.sh/frontend)

##Nos leemos pronto!!! :rocket:
Activity Feed Components just Released! 🎉
Tags: tailwindcss, react, html, news
Published: 2023-02-28 15:31:29

Hey all! 

We're back with the latest addition to our WindUI library. 

Responsive and accessible Activity Feed component with 12 unique variations will make it, the perfect addition to your project. 

[https://wind-ui.com/components/feeds/](https://wind-ui.com/components/feeds/)

Copy, Paste & Enjoy!💚
Include custom CMake modules
Tags: cmake, module, cpp
Published: 2023-02-28 15:24:47

Lets abstract some configuration of our project to a user defined `Config.cmake` file.

Let's assume your project uses CMake and has a directory structure similar to the one shown below

![C++ project with directory structure with custom CMake modules](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uatgiz7qehl68emgd8ej.png)


The `Config.cmake` file has the following stuff - 


```cmake
set_target_properties(
  ${CMAKE_PROJECT_NAME}
  PROPERTIES CXX_STANDARD 17
             CXX_STANDARD_REQUIRED YES
             CXX_EXTENSIONS NO)

include(CheckIPOSupported)
check_ipo_supported(RESULT result)
if(result)
  set_target_properties(${CMAKE_PROJECT_NAME}
                        PROPERTIES INTERPROCEDURAL_OPTIMIZATION TRUE)
endif()

find_program(CCACHE_PROGRAM ccache)
if(CCACHE_PROGRAM)
  set(CMAKE_CXX_COMPILER_LAUNCHER "${CCACHE_PROGRAM}")
  set(CMAKE_CUDA_COMPILER_LAUNCHER "${CCACHE_PROGRAM}") # CMake 3.9+
endif()

```

Then, in our root `CMakeLists.txt` file, lets add the following lines - 

```cmake
list(APPEND CMAKE_MODULE_PATH "${PROJECT_SOURCE_DIR}/cmake/Modules")
```

> This line must go _after_ your `project` configuration

And finally, 

```cmake
include(Config)
```

Where `Config` is the name of file with our abstractions
Follow up response to Rethinking the Modern Web
Published: 2023-02-28 15:23:15

As a new developer in the field, why there are so many different platforms, each with their own rules and regulations, is one of the most perplexing aspects of platforms. When going to test out Vue, Angular, and React, there is always a difference in Syntax and ways they define things are different. Why is the structure and the styling also needed to be written in Javascript as well is also in the list of confusing aspects about platforms. Focusing on the basics first will help web components and VanillaJS standards be explained in a manner that is more approachable. Before diving into these crazy platforms with their own sets of rules and complicated tools to create a website, you must familiarize yourself with the fundamentals of web components and VanillaJS. Gaining a solid understanding is essential because it will help people understand the reasoning of later, more complex topics and the ideas underlying various tools and platforms. In this manner, moving from one platform to another won't be too difficult. When I first tried to integrate my card into one of the few frameworks you had us place our cards into, I found React to be the simplest to work with. The reason is that I had the impression that I could tell where the html, javascript, and CSS were supposed to go just by glancing at each file and perusing it with a beginner's eye. With no problems and no help from Google, I was able to integrate my card into the framework. For the tooling, I am aware that npm is the primary package manager for node js and that it has a collection of open source programs that are available for use without charge. This effectively means that we can combine all the pre-written code or packages that others have created for our projects using npm. All of the modules and the dependencies that are mentioned in the package.json file are automatically installed with the aid of the npm install command. The part that was confusing was Yarn. I know that Yarn is another package manager that is suppose to be better than npm but I never fully got yarn to work and the syntax and commands for yarn is way different from npm. To help me understand why people are trying to shift from the traditional web coding to making it more abstract relying all on JavaScript and unifying all of them together.

https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660
https://dev.to/richharris/why-i-don-t-use-web-components-2cia
I made a developer portfolio template using React and Next
Tags: javascript, react, webdev, typescript
Published: 2023-02-28 15:16:21

I developed a simple but beautiful developer portfolio template using React and Next.js.


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

I am a 25 yo developer, i have been trying portfolio templates lately but i couldn't find one that fits my needs. Therefore i have created my own template that you can use as well!

Nearly all the components are dynamic and easy to use! Feel free to use it as-is or personalize it as much as you want. Please give me a feedback and if you find a bug tell me. A star on github is pretty appreciated.

If you'd like to contribute and make this much better for other users, please do.

Project Covers:
✔️ Homepage
✔️ Expertise
✔️ Experience
✔️ Work and Projects
✔️ Contact

To view a live example, [click here](https://www.yesildal.me/)
[Github link](https://github.com/umutyesildal/yesildal.me-personal-portfolio)

## Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

The versions i have used in the project.

```
node@v16.16.0
yarn@1.22.17
git@2.37.3
```

## How To Use 

From your command line and clone.

```bash
# Clone this repository
git clone https://github.com/umutyesildal/yesildal.me-personal-portfolio.git

# Go into the repository
cd yesildal.me-personal-portfolio

# Install dependencies
yarn

# Start a local dev server
yarn dev
```

## Deployment 

For deployment I have used [vercel](https://vercel.app/) and I am pretty happy with it.
```bash
# Build & Development Settings
Framework Preset: Nextjs
Build command: next build
Output directory: default
Install command: yarn
Development command: next
```




## Technologies Used 

- [React](https://reactjs.org/)
- [Next](https://nextjs.org/)
- [gsap](https://greensock.com/gsap/)
Winning the Hackathon: Boost Your Efficiency with These Must-Have Apps for developers and teams 🧑🏼‍💻👩🏽‍💻👨🏿‍💻.
Tags: ai, datascience, ux, research
Published: 2023-02-28 15:16:02

As a participant in a hackathon, my team and I faced the challenge of solving a complex problem under a tight deadline. In order to work more efficiently and stay on top of my tasks, I required tools to assist me with research, documentation, organization, scheduling, and managing time zones across multiple locations. Although I was already using some apps, I discovered some lesser-known ones that made a big difference.

1. I used the app ReadMe to improve my documentation writing for the GitHub [README.md](https://readme.so/) files.

2. [Answer The Public](https://answerthepublic.com/) a web app to research current news trends for market research, as well as [Perplexity.ai](Perplexity.ai), and [Browser.ai](Browser.ai) as a new way to research and do data scraping.

3. The app [Toggl](https://toggl.com/track) and [When To Meet](https://www.when2meet.com)  even helped me manage my schedule across different time zones and locations, which can be tricky when having a total of 6 members in a team. 

4. Additionally, some of these tools are AI-powered and helped me with note-taking during meetings [Fireflies.ai](Fireflies.ai), time management, and presentations with [Tome](https://tome.app/). Two specific apps I found especially useful [Fig.io](Fig.io)  and [Warp.io](warp.io) for coding and operating the Bash terminal in a new way that.

Exploring new tools and resources is often necessary when trying to tackle a specific problem. It's exciting to think about the possibilities that arise when using innovative solutions to overcome obstacles.
The psychological impact of having BTOPRO as your professor(not clickbait)
Tags: webdev, javascript, beginners, programming
Published: 2023-02-28 15:13:15

- What is confusing about platforms?
Platforms were created by the devil to torture new students with ridiculous amounts of structure rules and custom JS in order to ensure that they have absolutely no idea what they are doing. In order to even begin using a platform you have to learn its file structure in order to find out where to put your code. If you don't know how they want you to structure JS, you get errors (or nothing) with very little helpful information for a beginner to troubleshoot. Essentially, there is an enormous learning mountain that must be overcome before you can begin.
- How could web components and VanillaJS standards be taught in a way that is more approachable?
Explaining the foundation of web components and VanillaJS standards more thoroughly would make the issue more approachable for boomers like me. To be more specific, knowing which file/part of a file to put each aspect of our custom code would eliminate a lot of early headaches. For example, walking through a bare bones web component with clearly defined HTML, CSS, and JS (for the application and the component itself) in the proper location would make it easier to jump right into making code work without worrying about whether or not it has been structured correctly.
- What did you find easiest to work with on 1st stab? (You don't have to say web components, this is an honest take, if it was Vue cool, but justify it)
Making a web component was by far the easiest (and most fun) approach thus far. There was less preliminary knowledge to learn and my code actually worked with very little modification. Since VanillaJS is easier to pick up for a beginner, it's not a surprise that the approach that is closer to that was easier.
- Think back on the tooling. What parts were confusing? What clicked with you immediately?
I personally found all of the tools that we used in this class very convenient and easy to work with. I got 99 problems but tooling isn't one of them.
- What additional readings did you have to do in order to make sense of things.
W3 Schools was my guardian angel when it came to any CSS (and some JS). MDS Web Docs also cleared up a lot of confusion when it came to interacting with different HTML elements with JS. Lastly, reading other student's markdowns (and "borrowing" some of their code) was extremely helpful and showed me a lot of approaches to the same problem.
Storybook - what is it and why you should use it?
Tags: storybook, frontend, javascript, beginners
Published: 2023-02-28 14:47:19

What is a Storybook? When is it used? What are its pros and cons? How it can benefit our business? 🧐 Let's take a glance at this popular tool and check its potential. 

Read the article on [Liki Blog](https://likims.com/blog/storybook-what-is-it-and-why-you-should-use-it).
The Amazon VPC Resource Map
Tags: aws, cloud, devops, productivity
Published: 2023-02-28 14:41:39

However, after the creation of the VPC, the diagram that was available during the creation experience that many of our customers loved was no longer available. Today we are changing that! With VPC resource map, you can quickly understand the architectural layout of the VPC, including the number of subnets, which subnets are associated with the public route table, and which route tables have routes to the NAT Gateway.

You can also get to the specific resource details by clicking on the resource. This eliminates the need for you to map out resource relationships mentally and hold the information in your head while working with your VPC, making the process much more efficient and less prone to mistakes.

**<u>Getting Started with VPC Resource Map</u>**
To get started, choose an existing VPC in the [VPC console](https://console.aws.amazon.com/vpc). In the details section, select the Resource map tab. Here, you can see the resources in your VPC and the relationships between those resources.


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

As you hover over a resource, you can see the related resources and the connected lines highlighted. If you click to select the resource, you can see a few lines of details and a link to see the details of the selected resource.

**<u>Getting Started with VPC Creation Experience</u>**
I want to explain how to use the VPC creation experience to improve your workflow to create a new VPC to make a high-availability three-tier VPC easily.

Choose Create VPC and select VPC and more in the VPC console. You can preview the VPC resources that you are about to create all on the same page.


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

In Name tag auto-generation, you can specify a prefix value for Name tags. This value is used to generate Name tags for all VPC resources in the preview. If I change the default value, which is project to channy, the Name tag in the preview changes to channy- something, such as channy-vpc. You can customize a Name tag per resource in the preview by clicking each resource and making changes.

You can easily change the default CIDR value (10.0.0.0/16) when you click the IPv4 CIDR block field to reveal the CIDR joystick. Use the left or right arrow to move to the previous (9.255.0.0/16) or next (10.0.1.0/16) CIDR block within the /16 network mask. You can also change the subnet mask to /17 by using the down arrow, or go back to /16 using the up arrow.

more details - [Visualize the resources in your VPC](https://docs.aws.amazon.com/vpc/latest/userguide/working-with-vpcs.html#view-vpc-resource-map)

---
Keep – Open-source alerting CLI
Tags: python, monitoring, opensource, devops
Published: 2023-02-28 14:40:45

## What I built
Simple alerting tool, builtin providers (e.g. sentry/datadog or slack/pagerduty), 100% open sourced, free forever.
Simple and intuitive (GitHub actions-like) syntax.

- Declarative alerting that can be easily managed and versioned in your version control and service repository.

- Alerts from multiple data sources for added context and insights.

- Freedom from vendor lock-in, making it easier to switch to a different observability tool if and when needed.


### Category Submission:
- DevOps
- Monitoring
- Alerting

### App Link
- https://github.com/keephq/keep
- https://www.keephq.dev/
 

### Link to Source Code
- https://github.com/keephq/keep

### Permissive License
- MIT License

## Background
We believe that alerting has historically been neglected in existing monitoring platforms, leading to subpar alerting practices. With Keep, we aim to change that.
Postmortem
Published: 2023-02-28 14:36:18

0x19-postmortem
Postmortem
Upon the release of ALX's System Engineering & DevOps project 0x19, approximately 06:00 West African Time (WAT) here in Rwanda, an outage occurred on an isolated Ubuntu 14.04 container running an Apache web server. GET requests on the server led to 500 Internal Server Error's, when the expected response was an HTML file defining a simple Holberton WordPress site.

Debugging Process
Bug debugger Bamidele (Lexxyla... as in my actual initials... made that up on the spot, pretty
good, huh?) encountered the issue upon opening the project and being, well, instructed to
address it, roughly 19:20 PST. He promptly proceeded to undergo solving the problem.

Checked running processes using ps aux. Two apache2 processes - root and www-data -
were properly running.

Looked in the sites-available folder of the /etc/apache2/ directory. Determined that
the web server was serving content located in /var/www/html/.

In one terminal, ran strace on the PID of the root Apache process. In another, curled
the server. Expected great things... only to be disappointed. strace gave no useful
information.

Repeated step 3, except on the PID of the www-data process. Kept expectations lower this
time... but was rewarded! strace revelead an -1 ENOENT (No such file or directory) error
occurring upon an attempt to access the file /var/www/html/wp-includes/class-wp-locale.phpp.

Looked through files in the /var/www/html/ directory one-by-one, using Vim pattern
matching to try and locate the erroneous .phpp file extension. Located it in the
wp-settings.php file. (Line 137, require_once( ABSPATH . WPINC . '/class-wp-locale.php' );).

Removed the trailing p from the line.

Tested another curl on the server. 200 A-ok!

Wrote a Puppet manifest to automate fixing of the error.

Summation
In short, a typo. Gotta love'em. In full, the WordPress app was encountering a critical
error in wp-settings.php when tyring to load the file class-wp-locale.phpp. The correct
file name, located in the wp-content directory of the application folder, was
class-wp-locale.php.

Patch involved a simple fix on the typo, removing the trailing p.

Prevention
This outage was not a web server error, but an application error. To prevent such outages
moving forward, please keep the following in mind.

Test! Test test test. Test the application before deploying. This error would have arisen
and could have been addressed earlier had the app been tested.

Status monitoring. Enable some uptime-monitoring service such as
UptimeRobot to alert instantly upon outage of the website.

Note that in response to this error, I wrote a Puppet manifest
0-strace_is_your_friend.pp
to automate fixing of any such identitical errors should they occur in the future. The manifest
replaces any phpp extensions in the file /var/www/html/wp-settings.php with php.

But of course, it will never occur again, because we're programmers, and we never make
errors! 😉
React Internationalization (i18n) using Context API
Tags: react, i18n, programming, typescript
Published: 2023-02-28 14:35:24

Want to implement internationalization (i18n) in your React app without any third-party library? 🚀 

Check out this guide on how to use the Provider pattern with React's Context API to create a custom i18n solution! 


Link: [https://www.seeratawan.me/react-internationalization-using-context-api/](https://www.seeratawan.me/react-internationalization-using-context-api/) 

{% embed https://www.seeratawan.me/react-internationalization-using-context-api/ %}