mddanishyusuf
8 days ago

Make Dynamic Email Template with JSON data or APIs

Dynamic Email Template

This tool will Generate Email Template Code with Dynamic Data as JSON object or API. Get the generated email template and add into Mailchimp, Sendgrid or whatever service you are using to send newsletters.

Tool Website: https://dynamic-template.xyz

How to use

Step 1 : Add your template code into "Code" with Handlebars syntax to iterate and bind dynamic data with Email Template code. Ex:

<table>
    <tr>
        <td>
            <h2>Public APIs Weekly</h2></td>
    </tr>
    {{#each items}}
    <tr>
        <td>
            <h3 style="margin: 0; padding:0">{{title}}</h3>
            <p style="margin: 0; padding:0">{{description}}</p>
        </td>
    </tr>
    {{/each}}
</table>

Here you can get to know about Handlebars syntax https://handlebarsjs.com/

Step 2 : Add the JSON data into "Test Data" to bind with the Email Template. If you have API endpoint for the data then you can alse get data through your REST API. Just add your API and click "Get Data". Ex:

{
  "name": "Danish",
  "email": "mddanishyusuf@gmail.com",
  "items": [
    {
      "title": "GitHub API",
      "description": "Information for a user's Github profile"
    },
    {
      "title": "Open Collective",
      "description": "Platform where communities can collect and disburse money transparently to sustain themselves and develop their activities"
    },
    {
      "title": "Fortnite",
      "description": "Fortnite Stats & Cosmetics"
    }
  ]
}

That's all.

Get your generated Email Template from "Template".

Tool Website: https://dynamic-template.xyz

FabioRosado
3 months ago

Compile Sass files to CSS on the fly

If you use VSCode and prefer to use sass instead of plain old css. You can install the Live Sass Compiler from the extension marketplace. After you installed the extension all you need to do is press a button on the bottom of the window of vscode and watch your sass files.

The extension will automatically turn all your files into a single css file (this includes all the ones you import within your sass files).

The bar looks like this:

sass compiler

owenconti
3 months ago

5 keyboard shortcuts to navigate your code faster

Here are 5 quick keyboard shortcuts I recommend you setup to help you navigate your code faster!

  • Delete line(s): CMD + D
  • Move line(s): OPTION + UP or DOWN ARROW
  • Go to line: CMD + L
  • Go back/forward: CMD + [ or ]
  • Start/end of word: OPTION + LEFT or RIGHT ARROW

Bonus:

  • Highlight characters with start/end of word: SHIFT + OPTION + LEFT or RIGHT ARROW

Full article available here: https://owenconti.com/tips/5-keyboard-shortcuts-to-navigate-your-code-faster/

ahmadawais
3 months ago

[VSCODE] Switch back from Settings UI to Settings.JSON | VSCode.pro

OneDevMinute

[Part of the https://VSCode.pro course] — VSCode recently stopped displaying the split of VSCode default settings and users settings along with the settings.json file — hacker in me doesn't like the new UI Settings so — I moved them back.

P.S. If you like my work, feel free to share it, like it, and subscribe to my YouTube channel.

Peace! ✌️

Video Transcript: (CLICK TO EXPAND!)

🎸 (MUSIC PLAYING) While I was working with VSCode.pro course, one thing happened. Visual Studio kept updating every single month. Now if you press COMMAND (⌘) + COMMA (,) or if you press COMMAND (⌘) + SHIFT (⇧) + P and search for settings and open the settings, you get a shiny new UI, the user interface for settings area. But the hacker in me doesn't really like it. And throughout this course, I'll be teaching you to configure all the different settings through this particular file "settings.json" So, how about we go ahead and make this our default settings for the time being. Press COMMAND (⌘) + SHIFT (⇧) + P search for settings And click on Open Settings. Now search for Settings again. And as you can see Workbench does settings that determine which setting editor to be used by default is set to UI. I want you to go ahead and set it to json. As soon as you do it, this bar basically indicates that this setting has been updated. After setting your Settings Editor to JSON Go down here, or search for "Use Split JSON" E.g. "Settings Use Split JSON" – and you'll meet this particular setting Here I want you to go ahead and checkmark this setting It should be check marked so that you can see a split of All of your default settings as well as your "settings.json" file E.g. now if I press COMMAND (⌘) + COMMA (,) Your settings will look like this! You will have the "Default User Settings" on the left and your "User Settings" on the right. This is very important for this course because in this entire course I'll be doing all of the settings and searching for them through this area. Now if I go back and press COMMAND (⌘) + COMMA (,) The "settings.json" file opens up. That is exactly what we want for this course But if you would still like to access the UI for Settings, what can do is press COMMAND (⌘) + SHIFT (⇧) + P Search for Open Settings — and here it is Open Settings UI. If you click it, you'll be in the UI of the settings. But we can set up a keyboard shortcut for that as well. To do that, you can either go from here to the keyboard shortcuts Or you can press COMMAND (⌘) + K then COMMAND (⌘) + S And access these keyboard shortcuts. Search for open settings — this is the setting we want. Open Settings UI Click on the plus icon (+) and let's type COMMAND (⌘) + PERIOD (.) Press [ENTER] Now if you press COMMAND (⌘) + PERIOD (.) you will be opening up the UI settings. And if you will press COMMAND (⌘) + COMMA (,) you will be opening up the normal JSON settings. Let's try it out. I am going to press COMMAND (⌘) + COMMA (,) and it opens up the settings.json file. I am going to press COMMAND (⌘) + PERIOD (.) and there you have it. A new shiny UI of settings. So that's about it. You can obviously set a different keyboard shortcut here but I tend to go with this one. 👍 Tweet your progress with #VSCODEpro @MrAhmadAwais

deamme
3 months ago

VSCode - Code editor

Probably the best code editor out there. It has tons of extensions and is just a joy to work with.

Best theme to have is: https://vscodethemes.com/e/dracula-theme.theme-dracula.

Best font to code with: https://github.com/tonsky/FiraCode

Highlight colors in your code: https://github.com/tonsky/FiraCode

My VSCode settings (very opinionated you probably shouldn't copy everything ): https://github.com/deamme/gatsby-starter-prismic-resume/blob/master/vscode.json

Enjoy an amazing setup!

Load More