Post image

I created a website to have public conversations in closed g…

Over the years I realized that I was having a lot of cool conversations with friends via email or Facebook messenger. So, some of my coolest ideas were buried in my inbox. I thought there must be a lot of people (especially experts in various domains) out there that have incredible knowledge buried in their inboxes. I created so that people can have valuable conversations in public and share them with their friends.

(it’s a fun little project that I gladly fund out of my pocket bc I love writing on there myself)

Post image

Source link

pilot Fred Haise practicing surface drill

Space Photos of the Week: 50 Years After Apollo 13

Fifty years ago, on April 11, 1970, the Apollo 13 mission launched from Kennedy Space Center in Cape Canaveral. Like Apollo 11 and Apollo 12, the goal of the mission was to land on the Moon. However astronauts Jim Lovell, John Swigert, and Fred Haise would face a nearly fatal issue with their capsule. Just two days into the mission, the crew initiated a routine stirring of one of the oxygen tanks. Then an explosion occurred, causing a disruption to the life support systems. As a result the entire three-person crew had to move into the Lunar Module, which was only engineered to support the two astronauts that were supposed to land on the Moon. NASA then quickly improvised a system that would support all three crew members for four days–the time it would take to loop around the Moon and get back to Earth.

It was this incident that prompted the now famous line, “Houston, we have a problem.” Luckily, thanks to NASA’s ingenuity, and unflappability from the crew, all three safely made it back to Earth on April 17, 1970. This week, in honor of Apollo 13’s 50th anniversary, we will travel alongside the crew and see the mission from their perspective.

Before astronauts leave Earth they practice their Extra Vehicular Activity or EVA’s and rock collection activities in locations around the country. Here, astronaut Fred Haise, the Apollo 13 lunar pilot, is using an Apollo Lunar Surface drill.Photograph: NASA
While Apollo 13 flew behind the Moon they captured this photo of Tsiolkovsky crater. Other smaller impact craters are visible too, revealing the complex surface texture of our rocky satellite.Photograph: NASA
This view was taken from inside the capsule as the crew circled the Moon. While beautiful, images like this are tinged with sadness, as both Jim Lovel and Rusty Siwgart looked down at a surface they’d never visit.Photograph: NASA
Prior to re-entering Earth’s atmosphere, the crew jettisoned the capsule and used the lunar module as a lifeboat. Then they took a photo of the explosion site and the subsequent damage done to the cells. If you look towards the right where components are exposed, you can see the area that was damaged.Photograph: NASA
The crew took this spectacular image of the Earth while returning from the Moon. You can still make out the Southern United States, Baja and part of Mexico.Photograph: NASA
After two intense days of what you might call extreme work-arounds, all three crew members of Apollo 13 landed safely back on Earth. This is their capsule and parachutes touching down in the South Pacific.Photograph: NASA

Head over here to look at more space photos.

More Great WIRED Stories

Source link

Post image

[Showoff Saturday] A Bomber-Man game using Phaser.js : webde…

Hi guys,

Do you remember the 90’s classic Bomber-Man game? This is my Phaser3 version to this game.

Currently supports:

  1. Desktop only

  2. Player vs Player only ( W,A, S, D, E (plant bomb), Q (detonate)).

  3. Keys can be changed at Game Setting menu.

The next steps are

  1. Sounds

  2. Player VS. AI

  3. Mobile support

  4. Online gameplay.

What do you think?

Post image

Source link

Post image

Firefox and Chrome have a different Cookie Policy? Wasted da…

Hello everyone,

I’m wondering if Firefox and Chrome have different Cookie Policies? I’ve been now trying for days tosend cookies from my API at to my frontend at I tried multiple CORS settings and other stuff – but Firefox only showed the Set-Cookie header, but never the cookie inside the Developer Storage Inspector.

Today, I tried to open the frontend on Chrome, and there are the cookies, stored inside the Cookies Storage!

Here are some pictures:

Post image

Cookies are send in the Header – Here in Firefox

Post image

Cookies are not stored in Firefox

Post image

Cookies are Stored in Chrome

What makes the difference here – or please don’t tell my that it’s a bad late Aprils fool joke from a wicked Firefox developer :/

– I tried with JavaScript fetch and Axios – no difference there.
– My backend is Django REST Framework and my frontend is a simple HTML file with JavaScript I use for testing. Running the HTML file on a local server and different port than my API (API: ; HTML: works in Firefox. Probably because of the same domain.

Source link

React vs Angular vs Vue

Leveraging Vue.JS for a Headless Magento Store

Vue.JS is a JavaScript library that has taken the world of frontend developers by storm. Even for one of the latest libraries on JavaScript, Vue stands a stiff competition for the existing leaders like React and Angular.

As for recent stats, here is a comparison between the popularity of these three JavaScript frameworks:

React vs Angular vs Vue

React vs Angular vs Vue

Compared to React, Vue is roughly 5 years younger with nearly a quarter of the number of contributors on Github. However, Vue leads the chart with 15k and 101k more stars compared to React and Angular respectively. That speaks the extent to which the framework is meeting client needs.

The question is why? What makes it a favorite for the developers and the site owners at this young age? What makes it so different from the existing JavaScript frameworks?

While there are thousands of blogs that literally serve as a love letter to Vue JS, all of them boil down to just one factor, its size.

ReactJS weighs nearly 110 KB while AngularJS weighs around 167 KB. 

VueJS framework barely weighs 18 KB!!!

Does it compromise with the performance? No. In fact, it only delivers better, especially when you are only looking for frontend development. VueJS creates a virtual DOM, much like its closest predecessor, React. The framework is expected to deliver a robust UI, leaving your visitors with an excellent User Experience.

We have already praised VueJS enough in our existing blogs. You can read one here: Vue development: what you need to know. 

Back to the business. Our client was naturally attracted to VueJS for his Magento based store. All he needed was a more intuitive webstore. Inspecting through the store, we discovered the following issues that needed attention:

  1. Slow loading speed

  2. Not much mobile responsive

To our understanding, it was due to the deeply connected Knockout JS on the Magento storefront. How cool would it be to let the Magento platform handle only the e-commerce processes like inventory management, and shipping management, and allow a JavaScript frontend library to manage a highly intuitive User Interface? What we are going to do is separate the respective platforms per their specialization. That is, the VueJS template will solely handle the frontend executions without interfering with the backend operations, and the Magento platform will handle the backend executions.

Also read: Coupled, Decoupled and Headless CMS platforms

Using VueJS Template for a Faster Page Loading Speed

The existing web store was a Magento-run store, where every screen activity was controlled by the e-commerce platform. As a result, the backend possessed a strong participation every time there’s user activity. The Knockout JS-based template requested the Magento backend for the simplest of the tasks. Not to forget the buffer time for the interactions. We had to eliminate this part.

VueJS is popular for its API driven templates. A majority of the requests are resolved without reaching out to the backend services. In simple words, the backend is no more eligible to interfere in the tasks performed at the frontend. The buffer time and the cross-platform interaction time is circumvented boosting the page loading speed by numbers.

Vue template connecting store backend via API

Vue template connecting store backend via API


Page loading speed reduced by 5 seconds!!!

Resolving Mobile Responsiveness

Mobile focused design is the need of the hour. With VueJS, the task becomes more achievable. VueJS is described as PWA oriented technology providing the web store with the much needed mobile responsiveness. The framework allows the developers to write in any script of their choice be it Java, HTML or CSS allowing you to create and add as many frontend features, while its lightweight saves the app from getting overloaded.

Now that we have opted for a Headless approach, the template treats the database information like field details which renders the desired liquidity to the product pages at the front.

In our case, we have utilized components from VueStorefront to create the VueJS template. Its functioning is available here: Integrating Vue.JS with Magento2.

Traditional approach vs Headless Approach

Traditional approach vs Headless Approach

A Step-Wise Guide to Integrate Vue Storefront With Magento 2

Vue Storefront is quite fulfilling for readily establishing a storefront on any e-commerce platform. Starting with the basics, the first query developers come across is accessing data on Vue Storefront from Magento store. What we need to do first is to create a gateway to bridge the sharing of data. 

Firstly, we shall allow access for Magento Integration. For the same, go to Magento2 admin panel and click on System>Integrations. 

  • Opt for Add new integration to request for new API. 
  • Next fill up the fields like Name, Password and the API permissions needed in our API like-catalog, sales, etc. 
  • Use these tokens to bring Magento and Vue Store to the same frame.
  • Save the details and select Activate to get the OAuth access tokens. Use the tokens generated to create the bridge.

Quicker Way to Integrate Vue Storefront With Magento 2

With those permissions, the Vue-Storefront-API receives the Magento 2 data import and is managed by the Mage2vuestorefront. Being added as a dependency to the Vue-Storefront-API, Mage2vuestorefront is responsible for synchronizing the products, categories, attributes, links and more.

For importing products: 

To fetch important information from the Magento 2 backend, you can run the following command:

The command fetches the details directly to the Elasticsearch instance.

Integrating Manually

Mage2vuestorefront plays as the bridge here, again.

Modify the config.js file in mage2vuestorefront directory to redirect them to your Magento 2 URL.
Moreover, add the tokens generated in the ENV files.

Let the rest of the config.js files connect with your Vue-Storefront-API Redis instances.

For importing products: 

Use node cli.js commands in order to fetch the products, categories, and attributes.


The store can now fit in all the screens- desktop/tablet and mobile phones.


Source link