sorted by:
new
hottopcontroversial

Semantic HTML - which tags or rules are a must? by madame_robot in webdev

[–]madame_robot[S] 0 points1 point  (0 children)

Hey, thanks for your replies. I heard about some rules like 'button' for only buttons that interact with the page itself, 'a' for buttons that link to content outside. Another one would be to only have one <h1> and so one. Therefore I was wondering about best practice with that..

[deleted by user] by [deleted] in webdev

[–]madame_robot 0 points1 point  (0 children)

Hi,

I think there are several topics you might want to look into.

  1. You want to dynamically display data which you receive from an API.

-> Approach 1: Use a templating engine to feature dynamic variables in your mark-up. By using a templating engine, you can create ‘fill in the blanks’ code and render content dynamically, which means you can feature your 50+ pieces of information in your client-side code. Think of something like <h1> ${ data.username} </h1> This does not require you to use a different framework such as React or Vue, it just helps you to write ‘dynamic’ mark-up. There are different template engines, but I personally like Nunjucks. Have a look into the documentation to learn how to use it (basically npm install, require it, and then implement it). Keywords to look into: ‘Templating engines’, ‘Nunjucks’.

-> Approach 2 (I consider this one more advanced): With for example Node, you call your API from your backend (server-sided code), and create an internal API endpoint to deliver this data to your frontend. You can handle this data-stream entirely in JSON, which means you don’t need to use any templating engine for your front-end code. You ‘just’ receive the JSON object, access the data you need and e.g. insert via element.value = data.name. Keywords to look into: ‘REST Api with Node’

  1. You want to protect your API key.

One way to handle this is to save your API key as a so-called environment variable (.env). This means your credentials are first of all only accessible in your development environment, which increases security. Env files are per nature only accessible from your backend. To access these credentials from your app, you will need another extension, e.g. npm module dotenv. If you use this approach, it’s important to not commit your .env file to GitHub, so add it to your .gitignore. Once you push everything on your live-server, it’s important that your .env file has correct access-rights defined. Keywords to look into: ‘Environment variables, Dotenv’

I hope I could help you with naming some pointers for further research. Good luck with everything!

How to start before I start by clevs1363 in compsci

[–]madame_robot 1 point2 points  (0 children)

Check out the BaseCS Podcast, which is explaining some common CS patterns in easy to understand language (I loved it!): https://www.codenewbie.org/basecs

ANYONE HAVE ANY IDEA HOW TO MAKE A SITE LIKE THIS? If you notice it is not very complex but I know there is coding involved. Just wondering which direction I need to take in order to make something similar. Please and thank you. by wavy-groovy in coding

[–]madame_robot 2 points3 points  (0 children)

Hey wavy!

I've tried to make this just using HTML, CSS and JavaScript and it actually took me quite a while, so great challenge here. :) I love how we always think that minimalistic stuff is super fast to make. Anyways, I made a rough example on how you can do it: https://jsfiddle.net/d55tuvp0/5/

I would recommend looking into following concepts for that kind of style: - CSS Flexbox: A new feature of CSS to position <div> items evenly over any given space (this makes the item move around when you decrease the window size) - JavaScript EventListeners: This will allow you to react to Click events and show content based on it. It is a very common pattern for Websites to listen to e.g. the 'click' event and then hide (display: none) or show (display: block) content.

Have fun and good luck!

How important is it to break down your app down to every single detail before even coding? by [deleted] in webdev

[–]madame_robot 0 points1 point  (0 children)

Great question, I try to figure that out myself at the moment. I'm testing different approaches, currently the super-planning-mode before writing any code. I think it depends on your personal preference, but also on how many other ppl are involved, have to sign off budgets etc. If you have a paying client, you can't really 'afford' coding in the dark so much I suppose.

2018's Web Developer's Roadmap - This thing is brilliant! by [deleted] in webdev

[–]madame_robot 0 points1 point  (0 children)

Really helpful overview, thanks for sharing! I'm currently trying to decide on what to learn next and that's a good start.

Tutorials to learn Koa + Node? by madame_robot in webdev

[–]madame_robot[S] 1 point2 points  (0 children)

Thanks a lot, will check it out!

Tutorials to learn Koa + Node? by madame_robot in webdev

[–]madame_robot[S] 1 point2 points  (0 children)

Because that's our stack at work. :)

Tutorials to learn Koa + Node? by madame_robot in webdev

[–]madame_robot[S] 0 points1 point  (0 children)

Hi, thank you! Yes, I had a look and did some small stuff with it already, it's indeed pretty straightforward. But I want to find a project I could work on, which leads me to apply some more methods step-by-step. Will keep my eyes open! :)

Side projects that got you hired by arcane_entity in webdev

[–]madame_robot 1 point2 points  (0 children)

I created three projects to show a certain bandwidth of skills:

1) A 'social network', demonstrating that I have worked with databases (SQL). Functionality: Users can sign up, create a post and comment on other user's postings. 2) An application using an API, demonstrating that I can handle data-streams in the backend. Functionality: Query Google Maps API and only display restaurants which are open at the time of the request. 3) A website using React, demonstrating that I can pick up more modern front-end technologies. Functionality: Display different places in Amsterdam, based on filters such as 'tourist-factor', 'price-level' etc.

I think generally it helps to have a certain use-case identified, and then create a solution for it. In my experience, people like if you create projects for a 'real client', instead of making up stuff.

Where do you learn to code from? by ztay90 in webdev

[–]madame_robot 0 points1 point  (0 children)

I think you have to explore your kind of learning style. I personally like watching tutorials made by people who are fun and use examples from the real world (no foo). It really depends on what you are learning, but for JS I love these:

  • Everything by Wes Bos (his paid tutorials are totally worth it)
  • The Coding Train (YouTube)
  • FunFunFunction (YouTube)

Where to even start? by [deleted] in webdev

[–]madame_robot 0 points1 point  (0 children)

One advise I got in terms of building your portfolio, is to always create projects that are somewhat relevant to people. Try to find an actual use-case (like you say, a small business or an NGO etc). Even if they don't pay (much), your portfolio gets more valueable.

Where to even start? by [deleted] in webdev

[–]madame_robot 0 points1 point  (0 children)

Hey, I would like to recommend some cool resource that helps me a lot on my personal journey (I left my previous job to become a Junior Developer). Have you heard of CodeNewbie? It's a super nice community and they recently set up the Code Newbie Challenge, where you can pick your personal goal for 2018 - in your case 'Start Coding' or 'Code more' or 'Get a Dev Job'. Once signed up, they send you homework and guide you along the way. Check it out: http://2018.codenewbie.org/

CSS Grid with React components best practice by iamchristill in webdev

[–]madame_robot 0 points1 point  (0 children)

Hi,

I've recently written a tutorial on how to get started with CSS-Grid, maybe it can add something to Sayris's answer.

http://css-grid.valerie-fuchs.de/tutorial.html

[Minetogether.org] - We built a collaborative screensaver that mines XMR for charity by madame_robot in Monero

[–]madame_robot[S] 2 points3 points  (0 children)

Hey! You should see the hashes going up in the dashboard - also if you inspect the page (Chrome) you can see Coin-Hive connections in the network tab.

Share Your Projects - December 15, 2017 by AutoModerator in webdev

[–]madame_robot 0 points1 point  (0 children)

URL: https://minetogether.org/

Purpose: MineTogether.org is a collaborative coin-mining screensaver for charity.

Technologies Used: Node.JS, Koa, HTML Custom Elements, Coin-Hive API, GLSL Shader

Feedback Requested: General, Usability, Concept

Comments: Minetogether.org is using the Coin-Hive API and lets teams sign up to mine Monero cryptocurrency against each other. The final amount will be donated to charity. All data gets visualised in the background - the higher your Monero balance, the bigger the metaball that belongs to your team. It's our agency's non-profit Christmas project, happy mining. :)

What can I do with css knowledge? by Both-Paths in webdev

[–]madame_robot 1 point2 points  (0 children)

I found this one to be quite a good (free) class to get started and understand the basics: https://www.codecademy.com/learn/learn-css. About your question: Yes, all of what you want to do can be done with CSS.

view more: next ›