teleren/devto huggingface dataset:
Working Code Isn’t Enough
Tags: beginners, programming, design, career
Published: 2024-06-11 17:33:00

In _A Philosophy of Software Design_, John Ousterhout argues that striving only for working code is not enough. The mindset of getting a future done as fast as possible is not ideal, he calls this approach _Tactical Programming_.
Tactical programming results in addition of too much unnecessary complexity since not enough time is spent on coming up with a well-designed solution for your problem. This approach seems reasonable since some developers have to perform in high-pressure environments. With the next deadline lurking around the corner aiming for working code as quickly as possible seems like a good idea. Unfortunately, achieving working code in a short period of time often involves taking shortcuts. Each little shortcut increases the complexity of our code which harms the quality of our software systems in the long run.

For Ousterhout the opposite of tactical programming is _Strategic Programming_ which requires more long-term thinking and a different mindset. A strategic developer doesn't sacrifice well-designed code for quicker delivery time. Ousterhout encourages us to come up with different solutions for a specific task and continue with the best design. Of course this approach costs more time but Ousterhout argues that it pays of in the long run and I think most of us would agree.
Working in a well-designed codebase with fewer complexities enables us to not only develop new features faster but will also lead to fewer bugs in our software systems.

Personally, I think it is very important to think about those two approaches when we are developing software. I believe that none of us adds complexity to a system on purpose but due to deadlines and external pressure we might tell ourselves that the little shortcuts we take are not too bad. Unfortunately, only time will reveal the amount of complexity caused by our shortcuts.
Let’s fight off complexity and avoid taking too many shortcuts for faster delivery times.
I'm convinced that I will pay off in the long run!

Cover photo by GR Stockss on [Unsplash](https://unsplash.com/de/fotos/grayscale-photo-of-person-holding-glass-Iq9SaJezkOE)
Corona Clicker: A Story of Redemption and Reinvention
Tags: vue, api, gamedev, frontend
Published: 2024-06-11 17:22:03

In my previous article, "I Created Corona Clicker on Vue3 and Integrated It into a Telegram Web App," I shared the journey of developing Corona Clicker and integrating it into a Telegram Web App. If you missed it, you can catch up [here](https://dev.to/king_triton/i-created-corona-clicker-on-vue3-and-integrated-it-into-a-telegram-web-app-172f).

Yesterday, while working on [Corona Clicker](https://t.me/CoronaClickerBot), I encountered a bit of a hiccup. I was trying to make some improvements to the code and reorganize things, but instead, I ended up breaking the whole project. Luckily, I had backups, so I managed to restore everything back to normal.

But this setback got me thinking. Instead of just fixing what was broken, I decided to take the opportunity to give Corona Clicker a fresh new look. With a clearer idea of what I wanted to achieve, I set out to redesign the entire application.

Now, after some intense coding sessions, I'm excited to unveil the new and improved Corona Clicker. I've completely revamped it with two new pages that I think you're going to love.

Oh, and a quick shoutout to [@CoronaClickerBot](https://t.me/CoronaClickerBot)! It's built entirely using Vue3, a cool framework for building web apps. And the magic behind the scenes? Well, that's thanks to an API I wrote myself using plain old PHP.

Also, I've recently created a Telegram channel where I'll be sharing updates and news about Corona Clicker. If you're interested, you can subscribe [here](https://t.me/+zYoeSgOD9dU1Mzhi).

I can't wait to share more about the inner workings of Corona Clicker and how Vue3 and PHP work together to make it all happen. But for now, stay tuned for updates and keep clicking away!

Cheers, [King Triton](https://t.me/king_triton)
How to use the new Ember theme for QUnit
Tags: javascript, testing, qunit, ember
Published: 2024-06-11 17:17:42

The integrated web UI test runner in Ember is a convenient way to run your tests. If you've been using the default QUnit theme, it might not surprise you that it was designed over ten years ago.

As of the latest release of [`ember-qunit`](https://github.com/emberjs/ember-qunit/releases/tag/v8.1.0), support for theming has been added. The [`qunit-theme-ember`](https://www.npmjs.com/package/qunit-theme-ember), a modern theme based on the Ember styleguide, has been included as a built-in option. Here's how to enable it in your app:

First, create an Ember app if you haven't already.

```sh
npx ember-cli new example-app --embroider --pnpm
```

If you already have an app, make sure `ember-qunit` version `8.1.0` or above is used as dependency.

```sh
pnpm install -D ember-qunit@^8.1.0
```

Next, install [`@embroider/macros`](https://www.npmjs.com/package/@embroider/macros) to be able to pass configuration options to `ember-qunit`.

```sh
pnpm install -D @embroider/macros
```

Now configuration options can be set in the `ember-cli-build.js` file. Add the following to the file:

```diff
module.exports = function (defaults) {
  const app = new EmberApp(defaults, {
    // Add options here
+    '@embroider/macros': {
+      setConfig: {
+        'ember-qunit': {
+          theme: 'ember',
+        },
+      },
+    },
  });

  // ...
};
```

And that's it 🎉

Simply restart your dev server and go to `http://localhost:4200/tests` to see it in action.
Day 15 of my progress as a vue dev
Tags: webdev, vue, typescript, tailwindcss
Published: 2024-06-11 16:31:07

**About today**
Today went as expected. I finally wrapped up my DSA visualizer project and ended up pushing it on my github. Also I was happy with the final version, I may come back to it in future to do more work and make it a little bit more robust and interactive but for now I think it is in a usable condition. Also, I did make sure I stick to my routine and do not skip my essential tasks throughout the day, despite many bumps in the road.

**What's next?**
My aim is to get started on the next project which includes laravel, and also give more time to develop it on daily basis compared to my previous project. I will be getting started on it from tomorrow and will be reporting my journey here.

**Improvements required**
I still lack in terms of that hardcore routine following and still miss my mark to do things on the time they are supposed to be done. Also, I need to seek knowledge about more advanced vue concepts and programming concepts in general and reflect that in my future work to keep things challenging and interesting.

Wish me luck!
Slider
Published: 2024-06-11 16:27:14

```
// Slider
const slider = function () {
  const slides = document.querySelectorAll('.slide');
  const btnLeft = document.querySelector('.slider__btn--left');
  const btnRight = document.querySelector('.slider__btn--right');
  const dotContainer = document.querySelector('.dots');

  let curSlide = 0;
  const maxSlide = slides.length;

  // Functions
  const createDots = function () {
    slides.forEach(function (_, i) {
      dotContainer.insertAdjacentHTML(
        'beforeend',
        `<button class="dots__dot" data-slide="${i}"></button>`
      );
    });
  };

  const activateDot = function (slide) {
    document
      .querySelectorAll('.dots__dot')
      .forEach(dot => dot.classList.remove('dots__dot--active'));

    document
      .querySelector(`.dots__dot[data-slide="${slide}"]`)
      .classList.add('dots__dot--active');
  };

  const goToSlide = function (slide) {
    slides.forEach(
      (s, i) => (s.style.transform = `translateX(${100 * (i - slide)}%)`)
    );
  };

  // Next slide
  const nextSlide = function () {
    if (curSlide === maxSlide - 1) {
      curSlide = 0;
    } else {
      curSlide++;
    }

    goToSlide(curSlide);
    activateDot(curSlide);
  };

  const prevSlide = function () {
    if (curSlide === 0) {
      curSlide = maxSlide - 1;
    } else {
      curSlide--;
    }
    goToSlide(curSlide);
    activateDot(curSlide);
  };

  const init = function () {
    goToSlide(0);
    createDots();
    activateDot(0);
  };
  init();

  // Event handlers
  btnRight.addEventListener('click', nextSlide);
  btnLeft.addEventListener('click', prevSlide);

  document.addEventListener('keydown', function (e) {
    if (e.key === 'ArrowLeft') prevSlide();
    e.key === 'ArrowRight' && nextSlide();
  });

  dotContainer.addEventListener('click', function (e) {
    if (e.target.classList.contains('dots__dot')) {
      const { slide } = e.target.dataset;
      goToSlide(slide);
      activateDot(slide);
    }
  });
};
slider();
```
How does lock screen gaming concept impact gameplay design, particularly for action games?
Tags: gamedev, mobilegames, androidgames, lockscreengames
Published: 2024-06-11 16:27:07

The [lock screen gaming](https://medium.com/@adreeshelk/how-to-play-hundreds-of-games-on-your-lock-screen-without-downloading-anything-4f03e0173441?utm_source=referral&utm_medium=Medium&utm_campaign=Nostra) concept, pioneered by Gaming Platform, throws a fascinating wrinkle into traditional mobile gameplay design. While its full impact remains to be seen in the latest games, it has the potential to significantly alter how we approach [action gameplay](https://nostra.gg/articles/Unleash-Your-Inner-Gamer-Play-Free-Nostra-Games.html?utm_source=referral&utm_medium=article&utm_campaign=Nostra) titles on our phones.

Concept forces developers to think of casual fun. Gameplay will likely become more streamlined, focusing on core mechanics and quick bursts of action perfectly suited for short, pick-up-and-play sessions. Imagine a streamlined combat system or a fast-paced runner where success hinges on quick swipes and taps – perfect for a quick go at the best action games on your phone between tasks.

On the best side, the accessibility and immediacy of lock screen gaming could lead to higher player engagement. Imagine a scenario where players can jump into a quick action fix throughout the day, keeping them constantly engaged with the latest gameplay.

Perhaps the most exciting aspect of [Gaming Platform](https://medium.com/@adreeshelk/publishing-on-a-robust-gaming-platform-key-considerations-for-developers-1c8888f80d91?utm_source=referral&utm_medium=Medium&utm_campaign=Nostra) is the potential for entirely new genres to emerge. The limitations of the lock screen could breed innovative gameplay mechanics and control schemes that wouldn't work on a full screen. We might see a resurgence of simpler, arcade-style action gameplay or the birth of entirely new genres of best action games that thrive on the unique constraints of the format.
Babylon.js Browser MMORPG - DevLog - Update - #9 - Floating combat text optimization
Tags: babylonjs, indiegamedev, mmorpg, indie
Published: 2024-06-11 16:11:44

Hello,
I discovered that my browser is not supporting parallel shader compilation and because of it i was suffering from low fps. After switching  to another browser in the moments where my fps was dropping below 10 it was about 50-55. In case of heavy spamming attack messages (50 attacks per second) fps in another browser was dropping to 30 (old would probably die :D)  
After optimization without screen recorder I didn't manage to drop it from 60 fps :o

The optimization which I did was to reuse same dynamic texture and plane for player name text and for floating combat text. Previously for each damage text new dynamic texture and plane were created.

Hope You like it!

More info:
https://forum.babylonjs.com/t/babylon-js-browser-3d-mmo-devlog/47440

{% youtube aSDOLV-VRdg  %}
Gamedev.js Weekly newsletter gets… a new website!
Tags: gamedev, cloudflare, issues, newsletter
Published: 2024-06-11 16:12:39

---
title: Gamedev.js Weekly newsletter gets… a new website!
published: true
date: 2024-06-11 16:08:03 UTC
tags: gamedev,cloudflare,issues,newsletter
canonical_url: https://enclavegames.com/blog/gamedevjs-weekly-website/
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fe4ztcjsffgtw9zdds9z.png
---

Right after getting a [new mobile template](https://enclavegames.com/blog/gamedevjs-weekly-template/), the [Gamedev.js Weekly](https://gamedevjsweekly.com/) newsletter got a brand new website, which is now a bit more than just a single landing page.

It’s funny that when I posted [about the mobile template](https://enclavegames.com/blog/gamedevjs-weekly-template/) literally two weeks ago, the idea of having a new website with all the issues listed on it had at least five or six years, with the complete design being ready for two. I even joked about it in that recent blog post:

> _(Adding the mobile template) was always connected to the plan of redesigning the website and putting newsletter’s content on it. This never happened, even though the designs are ready. It’s not the legendary “new js13kGames backend” kind of story, but it’s slowly getting there._

![Gamedev.js Weekly: old vs new website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0i6wyet35yiefxqp8jgy.png)

And now here we are, with the new site live already thanks to [Ewa](https://mypoint.pl) (design) and [Michał](https://www.linkedin.com/in/michal-chojnacki/) (coding). I know it’s really simple, but nicely implemented at the same time: the sources (using **Astro** ) are [on GitHub](https://github.com/EnclaveGames/gamedevjsweekly.com), including the code responsible for pulling (and caching) all the issues from **Mailchimp** , building them into an archive and deploying on **Cloudflare**. All that done automatically (with a little help from **Hookdeck** ) whenever I send a new newsletter issue!

It’s finally DONE, I can cross it off Enclave’s big TODO list and move on.
Microsoft hace a un lado React
Tags: react, webdev, javascript, microsoft
Published: 2024-06-11 16:06:22

Así como lo lees, recientemente Microsoft [anunció](https://blogs.windows.com/msedgedev/2024/05/28/an-even-faster-microsoft-edge/) que logró una mejora de rendimiento del 76% en su navegador Microsoft Edge.

En un experimento que realizaron al reemplazar un menú que fue construido originalmente con React con WebUI 2.0, su nueva librería de componentes.

Impresionantemente, sus modificaciones tuvieron como resutlado que el componente sea un 42% más rápido, pero para aquellos que no tienen equipos más limitados, con menos de 8GB de RAM o sin estado sólido (SSD), se vio una mejora del 76%.

Probablemente te estás preguntando:
• ¿Un navegador con React?
¡Claro! Al final, todo se traduce a HTML, CSS y JavaScript.

• ¿Qué significa esto para React?
NADA, esto no es ni positivo ni negativo.

• ¿React es lento?
No, pero para ti, ¿qué es velocidad?

Todas estas mejoras están disponibles en la versión 122 de Microsoft Edge.

Te leo en los comentarios.
guYs I cANt deCide – a Or B?
Tags: css, cssart, boxshadows, frontend
Published: 2024-06-11 15:45:11

###Still rocking the third person vibe 🤷‍
 

Ben was doom scrolling, as he does most mornings, when he stumbled across this post from Tyler Nickerson:

![Twitter conversation between Tyler and Jhey](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/syktl03nuc11p0ns5ew1.png)
![Twitter conversation continues](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hdn7nl1pjix9flu2k9a6.png)
 

Ben simply couldn't resist this challenge! He took a day off from doing nothing and set to work...

Four hours later... Here is the result:


{% codepen https://codepen.io/ivorjetski/pen/wvbqqRd %}
 

So, how was this done?

```
    box-shadow: 1em 0 0 $g, //
    45em .6em 0 $g, //
    46em .6em 0 $g, //
    47em .7em 0 $g, //
    48em .8em 0 $g, //
    49em .9em 0 $g, //
```
 

Ben set the image from Twitter as a background, and traced it by coding one box-shadow at a time. A few years ago he found a technique of putting // comment marks after every comma to make it easier to code. It was pretty essential at the time for attempting to draw the thousands of lines for this:

{% codepen https://codepen.io/ivorjetski/pen/xxKBWBN %}
 

But this time he basically added a tiny round shadow every 1rem, tracing along the lines of 'text'. His best idea of the morning was to ask his chatty mate, Gary Pon-Tovi (ChatGPT) to "Add an extra step between each value, please." Ben always likes to be polite to Gary... But he forgot this morning, probably because it was before his coffee...

![A screenshot of ChatGPT](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2x9fgdwoye2z3epgbfsh.png)
 

Ben had also previously traced the words of Magritte, in a similar method, to recreate his work 'The Treachery of Images' in only CSS. Ben thought this famous work was quite apt because CSS art is all about not being an image. Ben also added a touch of 3D magic to the recreation of the pipe, when the user hovers.

{% codepen https://codepen.io/ivorjetski/pen/gOGPWXN %}
 

Ben finds it funny to use the word 'user'. Isn't this the term for a drug addict? He might write a separate blog about this.
 

P.s. This 3rd person thing is driving him nuts!
How to Read a JSON File in JavaScript
Tags: javascript, json
Published: 2024-06-11 15:37:12

When you need to read a json file in your project, it is easy to get the idea using [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) or [axios](https://github.com/axios/axios).

For example, we have data.json.

```json
{
    "name": "Hello World",
    "age": 18
}
```

Use fetch to read.

```js
fetch('https://server.com/data.json')
    .then((response) => response.json())
    .then((json) => console.log(json));
```

It works when your project is running in web browser environment, but when your project is running in hybrid environment, it is file protocol instead of http protocol. You will get cors error.

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

You can use script tag to fix this problem.

Change data.json to data.js

```js
window.config = {
    "name": "Hello World",
    "age": 18
}
```

Add script tag in your html file template.

```html
<!--      <script src="./data.js"> </script>-->
      <script>
          document.write('<script src="./data.js?t=' + new Date().getTime() + '"><\/script>')
      </script>
```

Now you can read data from window object in your javascript code.

```js
const data = window.config
console.log(data)
```
Your Dream Home Awaits: Houses for Sale in Citi Housing Sialkot
Tags: webdev, javascript, programming, react
Published: 2024-06-11 15:29:36

Citi Housing Sialkot, a premier residential community, offers an exceptional opportunity for those looking to invest in a high-quality lifestyle. Known for its luxurious living standards, modern infrastructure, and comprehensive amenities, Citi Housing Sialkot is the perfect place for families and individuals seeking comfort, convenience, and elegance. Here’s why buying a house in Citi Housing Sialkot is an excellent choice.

Prime Location
[Citi Housing Sialkot House For sale](https://citihousingsialkot.com) enjoys a strategic location that provides easy access to major roads, transportation networks, and key city landmarks. Its central position ensures that residents are always close to essential services, educational institutions, healthcare facilities, and recreational areas. This prime location makes Citi Housing Sialkot a desirable place for both families and professionals.
Play casino games
Published: 2024-06-11 15:28:22

Looking for an exhilarating way to unwind and have fun? Dive into the exciting world of online gaming and play casino games that offer endless entertainment and the chance to win big. Whether you’re a fan of classic table games, innovative slots, or immersive live dealer experiences, online casinos have something for everyone. Read on to discover why playing casino games online is a thrilling experience you won’t want to miss.

A Diverse Selection of Games:
One of the biggest advantages of [Bitofgold online casinos](https://www.facebook.com/bitofgoldgames/) is the vast selection of games available at your fingertips. From traditional table games like blackjack, poker, and roulette to a wide variety of slot machines featuring different themes and gameplay mechanics, there's always something new and exciting to try. Explore our extensive game library and find your next favorite game today.

Convenient and Accessible:
Playing casino games online offers unparalleled convenience. You can enjoy your favorite games anytime, anywhere, whether you're at home on your computer or on the go with your mobile device. With online casinos, there's no need to travel to a physical location – the excitement of the casino is always just a click away. Play casino games from the comfort of your home or on the move and experience the ultimate in gaming flexibility.

Exciting Bonuses and Promotions:
Online casinos are known for their generous [bonuses and promotions](https://bitofgold.cc/v-blink), which add extra value to your gaming experience. From welcome bonuses and free spins to cashback offers and loyalty rewards, there are plenty of opportunities to boost your bankroll and enhance your gameplay. Take advantage of our exclusive promotions and start playing with more chances to win.

Immersive Live Dealer Games:
For those seeking the thrill of a real casino experience, live dealer games are the perfect choice. Interact with professional dealers in real-time as you play popular games like blackjack, baccarat, and roulette. The high-quality video streaming and interactive features make it feel like you're right there at the casino table. Check out our live dealer games and enjoy an authentic casino atmosphere from your own home.
MDB v. 7.3.1. released!
Tags: news, webdev, bootstrap, css
Published: 2024-06-11 15:27:00

##Version 7.3.1, released 10.06.2024


##Fixed & improved:

**File upload**
- fixed preview not displaying for extensions: webp, bmp, gif
- fixed option acceptedExtensions bug for .zip extension

**Input fields**
- added CSS variables to allow easier outline customization
- fixed error that was triggered on focus after dispose
- fixed the placeholder display for input fields of type: time, datetime-local, month, week

**Calendar** - fixed display issue with long events

**Drag and drop** - fixed animation for blockXAxis

**Multi item carousel** - fixed timeout for the first slide display in upward animation

**Treeview** - fixed checkbox click toggling collapse

**Vector maps** - fixed zoom buttons shadow

**Accordion**- fixed downward facing arrows display in light theme

**Autocomplete** - fixed behavior for Shift + End and Shift + Home key combinations

**Select** - fixed select outline bug after validation

**Stepper** - fixed option stepperOptional

**Fixed manual initialization breaking auto-initialization for some components**

**[Material Design for Bootstrap, Plain JS v. 7.3.1](https://mdbootstrap.com)**